nextjs-portfolio-template — Next.js 作品集模板

SHA-256: 9cbd9a27db73c300b43cf08da180ede88fcb07a192efdd9e63aaed1c1cab4570

2026-10-14T08:44:30.450Z

# Next.js Portfolio Template

A comprehensive, modern portfolio website built with Next.js 15, TypeScript, and Tailwind CSS. Features advanced search functionality with a global command palette, Jupyter Notebook integration, dynamic content management, and a professional design system.

## 📑 Table of Contents

- [✨ Features](#features)
- [🚀 Getting Started](#getting-started)
- [📁 Project Structure](#project-structure)
- [🎨 Customization](#customization)
  - [📝 Blog Posts](#blog-posts)
  - [📓 Jupyter Notebooks](#jupyter-notebooks)
  - [🛠️ Projects](#projects)
  - [📚 Publications](#publications)
  - [💼 Experience & Updates](#experience--updates)
- [📄 License](#license)
- [🤝 Contributing](#contributing)

## Features

- **Modern Tech Stack**: Next.js 15, TypeScript, Tailwind CSS
- **Search Palette**: Command palette-style global search (Ctrl+K/Cmd+K), fuzzy matching, tag-based filtering and keyboard navigation
- **Responsive Design**: Mobile-first, clean UI, dark/light mode with system preference detection (`next-themes`)
- **Content Management**: Markdown-based blog, Jupyter Notebook rendering, project showcase, publications, timeline, updates, resume PDF, and validated contact form
- **SEO & Accessibility**: Next.js metadata API, semantic HTML, ARIA labels, keyboard support
- **Dynamic Routing**: Individual pages for blog posts, projects, publications, and more

## Getting Started

To run this project locally, follow these steps:

1. Clone the repository:
   ```bash
   git clone https://github.com/ShardulJunagade/nextjs-portfolio-template
   ```
2. Install dependencies:
   ```bash
   npm install
   ```
3. Start the development server:
   ```bash
   npm run dev
   ```
4. Open [http://localhost:3000](http://localhost:3000) in your browser

### Common Commands

```bash
npm run dev          # Start development server with Turbopack
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npx prettier --write .  # Format and prettify all files
```

## Project Structure

```text
src/
├── app/                    # Next.js App Router pages
│   ├── blog/              # Blog pages with search, filtering, and reading time
│   │   ├── [slug]/        # Individual blog post pages (markdown & notebooks)
│   │   └── blog-client.tsx # Client-side blog functionality
│   ├── projects/          # Projects showcase with filtering
│   │   ├── [slug]/        # Individual project detail pages
│   │   └── projects-client.tsx # Client-side project functionality
│   ├── publications/      # Academic/professional publications
│   │   └── publications-client.tsx # Client-side publications functionality
│   ├── experience/        # Professional experience timeline (dynamic content)
│   ├── updates/           # Latest news and achievements (dynamic content)
│   ├── contact/           # Contact form and information
│   └── page.tsx           # Home page with hero, timeline, and recent updates
├── components/            # Reusable UI components
│   ├── ui/               # Base UI components (button, card, input, etc.)
│   ├── navigation.tsx    # Main navigation with search integration
│   ├── search-bar.tsx    # Search bar component
│   ├── search-palette.tsx # Advanced command palette search
│   ├── search-provider.tsx # Search context and global shortcuts
│   ├── timeline.tsx      # Interactive timeline component
│   ├── timeline-section.tsx # Reusable timeline section component
│   ├── recent-updates-section.tsx # Updates display component
│   ├── notebook-renderer.tsx # Advanced Jupyter Notebook renderer
│   ├── dashboard-layout.tsx # Layout for internal pages
│   ├── theme-provider.tsx # Dark/light mode theme management
│   ├── theme-toggle.tsx   # Theme toggle button
│   └── footer.tsx        # Site footer component
├── content/              # Markdown and notebook content
│   ├── blog/            # Blog posts (markdown files)
│   ├── projects/        # Project descriptions (markdown files)
│   ├── publications/    # Publications data (markdown files)
│   ├── experience/      # Professional experience (markdown metadata)
│   ├── updates/         # News and updates (markdown metadata)
│   └── notebooks/       # Jupyter notebooks with metadata
├── lib/                 # Utility functions and data management
│   ├── content.ts       # Content management utilities (blog, projects, etc.)
│   ├── search-content.ts # Search index building
│   ├── search.ts        # Search engine with Fuse.js
│   └── utils.ts         # General utilities and helpers
├── hooks/               # Custom React hooks
│   └── use-debounce.ts  # Debounced search functionality
└── types/               # TypeScript type definitions
    └── index.ts         # All interface definitions
```

## Customization

### Blog Posts

Add markdown files to `src/content/blog/` with frontmatter:

```markdown
---
title: 'Your Post Title'
description: 'Post description'
date: '2024-01-01'
tags: ['tag1', 'tag2']
---

Your content here...
```

### Jupyter Notebooks

1. Add notebook folder to `src/content/notebooks/`
2. Include `meta.yaml` with metadata:

```yaml
title: 'Notebook Title'
description: 'Notebook description'
date: '2024-01-01'
tags: ['jupyter', 'python', 'data-science']
```

3. Place your `.ipynb` file in the same folder

### Projects

Add markdown files to `src/content/projects/` with frontmatter:

```markdown
---
title: 'Project Name'
description: 'Project description'
tags: ['react', 'typescript']
github: 'https://github.com/user/repo'
demo: 'https://demo.com'
featured: true
---

Project details...
```

### Publications

Add markdown files to `src/content/publications/` with metadata:

```markdown
---
title: 'Publication Title'
authors: ['Author One', 'Author Two']
journal: 'Journal Name'
year: 2024
type: 'article'
tags: ['research', 'ai']
link: 'https://paper.com'
---
```

### Experience & Updates

Add markdown files with frontmatter metadata only:

- `src/content/experience/` - Professional timeline entries
- `src/content/updates/` - Latest news and achievements

## License

This project is open source and available under the [MIT License](LICENSE).

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.