A modern, responsive portfolio website built with Next.js 14, featuring multiple pages including a blog system, projects showcase, and about page.
You can preview the project online at:
https://multiplepage-portfolio.edgeone.app/
- 🎨 Modern and clean design with dark/light mode support
- 📱 Fully responsive layout
- 📝 Blog system with Markdown support
- 🚀 Project showcase
- 🔍 Search functionality for blog posts
- 🎯 SEO optimized
- 🌙 Dark/Light theme toggle
- 📦 Static site generation
- Framework: Next.js 14
- Styling: Tailwind CSS
- Content: Markdown with React Markdown
- Syntax Highlighting: React Syntax Highlighter
- Theme: next-themes
- UI Components: Custom components with Radix UI primitives
- Clone the repository:
git clone https://github.com/tomcomtang/multiplepage-portfolio.git
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Build for production:
npm run build
├── src/
│ ├── app/ # Next.js app directory
│ │ ├── about/ # About page
│ │ ├── posts/ # Blog posts
│ │ └── projects/ # Projects showcase
│ ├── components/ # Reusable components
│ └── config/ # Configuration files
├── scripts/ # Build scripts
└── public/ # Static assets
- Create your markdown files in
src/content/posts/
directory - Each markdown file should follow this format:
---
title: Your Post Title
description: A brief description of your post
date: 2024-03-21
readTime: 5 min
---
Your post content here...
- After adding or modifying markdown files, run:
npm run generate-posts
You can customize the content of different pages by modifying these files:
- About Page:
src/app/about/page.tsx
- Projects Page:
src/config/projects.ts
- Blog Posts:
src/content/posts/*.md
The main configuration files are:
src/config/content.ts
: Main content configuration including site name, description, and all page contentsrc/config/global.ts
: Global settings like navigation, footer, and social linkssrc/config/contact.ts
: Contact information and social media linkssrc/config/home.ts
: Home page specific configurationsrc/config/posts.ts
: Blog posts configuration and contentsrc/config/projects.ts
: Projects showcase configurationsrc/config/about.ts
: About page configuration
The blog system supports:
- Markdown content
- Code syntax highlighting
- Reading time estimation
- Search functionality
- Pagination
- Add new blog posts by creating Markdown files in the
src/content/posts
directory - Update project information in
src/config/projects.ts
- Modify site configuration in
src/config/content.ts
andsrc/config/global.ts
ISC
[Your Name]