My Personal Portfolio Website

A personal portfolio website built with Next.js.

Features

• Next.js with App Router and static site generation
• Material-UI for modern, responsive design
• TypeScript support with path aliases
• Decap CMS for easy content management
• Local Git Backend for development content editing
• Markdown-based blog and portfolio content
• Interactive animations using PIXI.js and GSAP
• Static export ready for GitHub Pages deployment

Development

Quick Start

# Install dependencies
npm install

# Start development server (localhost:8080)
npm run dev

# Or start with CMS server (recommended)
npm run dev:cms

Content Management

Access the content management system at http://localhost:8080/admin/ when running the development server.

CMS Features:

• Edit blog posts and portfolio items through web interface
• Real-time preview of changes
• Automatic git commits for content changes
• Media management for images

Available Scripts

# Development
npm run dev          # Start Next.js dev server
npm run cms          # Start Decap CMS proxy server
npm run dev:cms      # Start both servers concurrently

# Production
npm run build        # Build for production
npm run start        # Start production server
npm run export       # Export static site

# Quality
npm run lint         # Run ESLint
npm run test         # Run Jest tests
npm run updateSnap   # Update test snapshots

# Utilities
npm run clean        # Clean build cache

Project Structure

Key directories:

• content/blog/ — blog posts
• content/portfolio/ — portfolio items
• public/admin/ — CMS configuration
• public/img/ — images
• src/app/ — Next.js App Router pages
• src/cms/ — CMS configuration and preview templates
• src/components/ — React components
• src/templates/ — page templates

Technology Stack

• Framework: Next.js 15 with App Router
• UI Library: Material-UI v6 with Emotion
• Content Management: Decap CMS with local git backend
• Styling: CSS-in-JS with Emotion
• Animation: GSAP, PIXI.js
• Content: Markdown with gray-matter
• Testing: Jest with React Testing Library
• Language: TypeScript

Deployment

GitHub Pages

The project is configured for easy deployment to GitHub Pages using github actions.