Pricing
PURCHASE OPTIONSโ€‹
PRICING GUIDANCEโ€‹
๐ŸŽ‰ EdgeOne Free Plan Launches! The World's First Free CDN with China Access โ€“ Join the Event to Unlock Multiple Plans!
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.

View Demo
FrameworkNext.js
Use CasePortfolio,Blog
A portfolio template with built-in blog support, perfect for creatives and professionals who want to showcase their work and share their ideas.

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:

Deploy to Tencent Cloud

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

  1. Clone the repository:
git clone https://github.com/tomcomtang/multiplepage-portfolio.git
  1. Install dependencies:
npm install
  1. Run the development server:
npm run dev
  1. 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

  1. Create your markdown files in src/content/posts/ directory
  2. 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...
  1. 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 content
  • src/config/global.ts: Global settings like navigation, footer, and social links
  • src/config/contact.ts: Contact information and social media links
  • src/config/home.ts: Home page specific configuration
  • src/config/posts.ts: Blog posts configuration and content
  • src/config/projects.ts: Projects showcase configuration
  • src/config/about.ts: About page configuration

Blog System

The blog system supports:

  • Markdown content
  • Code syntax highlighting
  • Reading time estimation
  • Search functionality
  • Pagination

Customization

  1. Add new blog posts by creating Markdown files in the src/content/posts directory
  2. Update project information in src/config/projects.ts
  3. Modify site configuration in src/config/content.ts and src/config/global.ts

License

ISC

Author

[Your Name]