Back to Templates
Portfolio and Blog Website
A portfolio template with built-in blog support, perfect for creatives and professionals who want to showcase their work and share their ideas.
Framework | Next.js |
Use Case | Portfolio,Blog |
Multiple Page Portfolio
A modern, responsive portfolio website built with Next.js 14, featuring multiple pages including a blog system, projects showcase, and about page.
Quick Deploy
Click the button below to deploy to Tencent Cloud EdgeOne with one click:
Preview
You can preview the project online at:
https://multiplepage-portfolio.edgeone.app/
Features
- ๐จ 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
Tech Stack
- 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
Getting Started
- 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
Project Structure
โโโ 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
Content Management
Blog Posts
- 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
Page Content
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
Site Configuration
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
Blog System
The blog system supports:
- Markdown content
- Code syntax highlighting
- Reading time estimation
- Search functionality
- Pagination
Customization
- 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
License
ISC
Author
[Your Name]