简体中文

A modern, elegant academic portfolio theme for Astro. Build your professional research homepage with beautiful card-based designs, automatic BibTeX parsing, and seamless dark mode support.

• ⚡ Astro Powered - Lightning-fast static site generation with zero JavaScript by default
• 🎨 Modern Card Design - Elegant card-based UI with hover effects, gradients, and micro-animations
• 📚 BibTeX Integration - Automatic parsing of publications with category filtering
• 🌙 Dark Mode - Seamless light/dark theme switching with system preference detection
• 📱 Fully Responsive - Mobile-first design with adaptive navigation
• 🎯 SEO Optimized - Built-in meta tags, sitemap, and semantic HTML
• 🔧 Easy Configuration - Single TypeScript config file for all site settings
• 📝 YAML Data Sources - Simple content management through YAML files
• 🏷️ Filter System - Interactive category filters on Research, Projects, and Teaching pages
• 🎭 UnoCSS Styling - Utility-first CSS with customizable accent colors

• Node.js (v18+ recommended)
• Bun (recommended) or npm/pnpm

# Clone the repository
git clone https://github.com/jxpeng98/astro-scholars.git
cd astro-scholars

# Install dependencies
bun install

# Start development server
bun dev

Your site will be running at http://localhost:4321

This is the central configuration file for your entire site. Here's a complete breakdown:

export const siteConfig: SiteConfig = {
  // ─────────────────────────────────────────────────────────────
  // 🏠 BASIC INFORMATION
  // ─────────────────────────────────────────────────────────────
  
  /** Browser tab title */
  title: 'Your Name | Academic Portfolio',
  
  /** Your full name (displayed in header and footer) */
  author: 'Your Name',
  
  /** SEO description (appears in search results) */
  description: 'Your research focus and expertise...',
  
  /** Favicon path (relative to /public) */
  favicon: '/favicon.svg',
  
  /** SEO keywords */
  keywords: ['learning analytics', 'HCI', 'research'],

  // ─────────────────────────────────────────────────────────────
  // 🎓 ACADEMIC PROFILE
  // ─────────────────────────────────────────────────────────────
  
  /** Your institutional affiliations (displayed on home page) */
  affiliations: [
    {
      role: 'Assistant Professor',
      department: 'School of Information',  // optional
      institution: 'University Name',
      url: 'https://example.edu',           // optional, makes it a link
    },
  ],

  /** Research interests (displayed as tags on home page) */
  researchInterests: [
    'Learning Analytics',
    'Human-Computer Interaction',
  ],

  // ─────────────────────────────────────────────────────────────
  // 🔗 SOCIAL LINKS
  // Icons: https://icones.js.org (use 'academicons' or 'mdi' collections)
  // ─────────────────────────────────────────────────────────────
  
  socialLinks: [
    { label: 'Google Scholar', href: 'https://scholar.google.com/...', icon: 'i-academicons:google-scholar' },
    { label: 'ORCID', href: 'https://orcid.org/...', icon: 'i-academicons:orcid' },
    { label: 'GitHub', href: 'https://github.com/...', icon: 'i-mdi:github' },
    { label: 'Email', href: 'mailto:you@example.edu', icon: 'i-mdi:email-outline' },
    { label: 'Twitter', href: 'https://twitter.com/...', icon: 'i-mdi:twitter' },
  ],

  // ─────────────────────────────────────────────────────────────
  // 🧭 NAVIGATION
  // ─────────────────────────────────────────────────────────────
  
  navLinks: [
    { href: '/about', label: 'About' },
    { href: '/researches', label: 'Research' },
    { href: '/teaching', label: 'Teaching' },
    { href: '/projects', label: 'Projects' },
    { href: '/posts', label: 'Blog' },
  ],

  // ─────────────────────────────────────────────────────────────
  // 📝 FOOTER
  // ─────────────────────────────────────────────────────────────
  
  footer: {
    copyright: 'All rights reserved.',
  },

  // ─────────────────────────────────────────────────────────────
  // 🏠 HERO SECTION (Home Page)
  // ─────────────────────────────────────────────────────────────
  
  hero: {
    headline: 'Your research focus in one sentence.',
    subheadline: 'A longer bio describing your work and interests...',
    profileAlt: 'Portrait of Your Name',
    profileImage: '/profile.svg',  // or full URL
    statusBadge: '📬 Open to collaboration',  // optional
  },

  // ─────────────────────────────────────────────────────────────
  // 📄 PAGE DESCRIPTIONS (SEO & subtitles)
  // ─────────────────────────────────────────────────────────────
  
  pageDescriptions: {
    about: 'Your brief bio for the About page...',
    researches: 'Description of your research focus...',
    projects: 'Description of your projects...',
    teaching: 'Description of your teaching philosophy...',
    posts: 'Description of your blog...',
  },
};

The home page displays:

• Hero Section: Profile image, name, affiliations, status badge, bio, research interests, and social links
• Selected Publications: Top 3 featured papers from your BibTeX file (papers with public = {yes})
• Latest Posts: 3 most recent blog posts

Card Design Features:

• Hover effect with accent-colored left border gradient
• Expandable abstract with quote icon styling
• Action buttons for Abstract and PDF links

Data Source: src/data/about.yml

hero:
  title: About
  description: Your brief introduction...

education:
  - degree: Ph.D., Human-Computer Interaction
    institution: University Name
    year: 2021
  - degree: M.S., Learning Sciences
    institution: Institute Name
    year: 2016

experience:
  - role: Assistant Professor
    organization: School of Information
    period: 2022 — Present
    bullets:
      - Lead the Learning Signals Lab
      - Teach graduate seminars on human-centered AI

service:
  # Structured format
  - role: Program Chair
    organization: ACM Conference
    period: 2023 — 2024
  # Simple string format
  - Editorial Board — Journal Name

# Custom sections (Awards, Talks, etc.)
sections:
  - title: Awards
    items:
      # Detailed item
      - title: Best Paper Award
        subtitle: ACM CHI 2023
        date: 2023
        description: For the paper "..."
        link: https://example.com/award
      # Simple item
      - Dean's List (2010-2014)

Card Design Features:

• Education cards with school icon and year badge
• Experience cards with timeline dot indicator
• Service items in 2-column grid with star icons
• Awards with trophy icon and gradient background

Data Source: src/data/publications.bib

BibTeX Fields:

@inproceedings{key2024paper,
  title = {Your Paper Title},
  author = {Last, First and Other, Author},
  booktitle = {Conference Name},        % or journal = {...}
  year = {2024},
  url = {https://doi.org/...},          % optional, adds PDF link
  abstract = {Paper abstract...},       % optional, adds expandable abstract
  public = {yes},                       % yes = Publication, wp = Working Paper, wip = Work in Progress
  keywords = {keyword1, keyword2}       % optional
}

Category Classification:

Page Features:

• Filter Bar: Click to filter by category (all / publication / working paper / work in progress)
• Numbered Cards: Each paper has an accent-colored index badge
• Meta Badges: Venue badge with bookmark icon, year badge with calendar icon
• Action Buttons: Expandable abstract with quote styling, PDF link
• Conditional Display: Empty fields (authors, venue) are automatically hidden

Data Source: src/data/projects.yml

- title: Project Name
  period: 2023 — Present    # Include "Present" for active projects
  description: What this project does...
  tech:
    - Astro
    - TypeScript
    - PostgreSQL
  url: https://github.com/...   # optional

Page Features:

• Auto-grouping: Projects with "Present" in period → Active; others → Past
• Filter Bar: All / Active / Past filters
• Active Indicator: Green pulsing dot + "Active" label
• Tech Stack Tags: Code icon + technology name
• Hover Action: "View Project →" appears on hover (if URL exists)

Data Source: src/data/teaching.yml

current:
  - term: Spring 2025
    modules:
      - title: Course Title
        code: INFO 742
        summary: Course description...
        tags:                    # optional
          - graduate
          - seminar
        link:                    # optional
          label: Course Site
          href: https://...

past:
  - term: Fall 2024
    modules:
      - title: Past Course
        code: INFO 511
        summary: What was covered...

Page Features:

• Filter Bar: All / Current / Past filters
• Term Grouping: Courses grouped by semester
• Active Indicator: Left gradient bar for current courses
• Course Code Badge: School icon + course code
• Tag Pills: Hashtag-prefixed category tags
• Link Button: Opens course site in new tab

Data Source: src/content/posts/*.md

Frontmatter Schema:

---
title: Post Title
description: Brief summary...   # optional
publishedAt: 2024-01-15
draft: false                    # set true to hide
---

Page Features:

• Year Grouping: Posts organized by year with gradient divider
• Post Count: Badge showing posts per year
• Reading Time: Estimated based on content length
• Card Design: Full-width clickable cards
• Hover Action: "Read more →" appears on hover

All pages use a unified card design system:

┌─────────────────────────────────────────┐
│  • Title with hover color transition    │
│  📍 Meta info with icons                │
│  Description text (line-clamped)        │
│  [Tag] [Tag] [Tag]                      │
│  🔗 Action link (appears on hover)      │
└─────────────────────────────────────────┘

Common Card Styles:

• rounded-xl corners
• White background (dark: gray-900/50)
• Border that changes to accent color on hover
• Subtle shadow on hover (shadow-accent-500/5)
• 300ms transition for smooth animations

The theme uses a semantic color system:

Icons are provided via UnoCSS icon presets:

• Academic: i-academicons:* (Google Scholar, ORCID, ResearchGate)
• General: i-mdi:* (GitHub, Email, Calendar, etc.)
• UI: i-ph:* (Theme toggle, menu icons)

Find icons at: icones.js.org

/
├── public/                    # Static assets
│   ├── favicon.svg
│   ├── profile.svg
│   └── robots.txt
├── src/
│   ├── assets/                # Processed images
│   ├── components/            # Shared components
│   │   └── projects.ts        # Projects data loader
│   ├── content/               # Blog posts (Astro Content Collections)
│   │   ├── config.ts          # Content schema
│   │   └── posts/             # Markdown posts
│   ├── data/                  # YAML & BibTeX data
│   │   ├── about.yml          # About page content
│   │   ├── projects.yml       # Projects list
│   │   ├── publications.bib   # Academic publications
│   │   └── teaching.yml       # Teaching modules
│   ├── layouts/
│   │   └── Layout.astro       # Main layout (header, footer, theme)
│   ├── lib/                   # Utility functions
│   │   ├── bibtex.ts          # BibTeX parser
│   │   └── papers.ts          # Paper data helpers
│   ├── pages/                 # Route pages
│   │   ├── index.astro        # Home
│   │   ├── about.astro        # About
│   │   ├── researches.astro   # Publications
│   │   ├── projects.astro     # Projects
│   │   ├── teaching.astro     # Teaching
│   │   └── posts/
│   │       ├── index.astro    # Blog listing
│   │       └── [slug].astro   # Individual post
│   ├── types/
│   │   └── config.ts          # TypeScript interfaces
│   └── side.config.ts         # ⭐ Main configuration
├── uno.config.ts              # UnoCSS configuration
├── astro.config.mjs           # Astro configuration
└── package.json

Build and deploy to any static hosting provider:

bun build

Upload the dist/ folder to:

• Vercel - Zero config, auto-deploys
• Netlify - Drag & drop deployment
• Cloudflare Pages - Global CDN
• GitHub Pages - Free hosting

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Build command: bun build
# Publish directory: dist

Edit uno.config.ts to modify the accent color palette:

theme: {
  colors: {
    accent: {
      50: '#f0f9ff',
      // ... customize shades
      600: '#0284c7',
    }
  }
}

1. Find icon class at icones.js.org
2. Add to socialLinks in side.config.ts
3. Add icon to safelist in uno.config.ts if needed

For the About page, add new sections in about.yml:

sections:
  - title: Your Section Title
    items:
      - Your item content

Contributions are welcome! Feel free to:

• 🐛 Report bugs via Issues
• 💡 Suggest features
• 🔧 Submit pull requests

MIT License - Free to use, modify, and distribute.