Back to Projects
Personal Website

Jacky.Fan

Personal portfolio built with Next.js 16, SCSS BEM, and Payload CMS — self-hosted on Raspberry Pi 5.

Jacky.Fan
Overview

A portfolio built from scratch

The site you are browsing right now — a warm, editorial portfolio powered by a custom design system and a self-hosted CMS.

After iterating through several versions, the current site is built on Next.js 16 with a custom SCSS BEM architecture — modular partials, CSS custom properties, and a warm editorial palette that feels intentional rather than assembled.

Pages are CMS-driven through Payload CMS, with live preview, draft/publish workflow, and automatic cache revalidation. The CMS and MongoDB run on a Raspberry Pi 5 via Docker Compose, while the frontend deploys to Cloudflare Pages for instant global delivery.

Motion is handled with care: Framer Motion for reveal animations, the View Transition API for page navigation, and Locomotive Scroll for parallax — all respecting reduced-motion preferences.

Screenshots

A tour of the portfolio

From the landing hero to project detail pages — every section designed with intention.

Homepage — warm editorial greeting with animated scroll indicator and CTA buttons
Homepage dark mode — same layout with carefully tuned dark color tokens
Projects listing — responsive card grid with filter tags and hover animations
Project detail — overview section with scope sidebar, feature grid, and tech stack
About page — profile section, skill bars, passion cards, and principle icons
Contact page — contact methods grid with functional contact form
Features

Key Features

The details that make the experience feel polished.

🎨

Custom Design System

Modular SCSS partials with BEM naming, CSS custom properties, and a warm editorial palette. Every component follows a consistent visual language.

🌓

Light & Dark Mode

Full theme support with manual toggle and system preference detection. Carefully crafted dark tokens meet WCAG 2.2 contrast requirements.

✨

Smooth Animations

Framer Motion reveal animations, View Transition API for page navigation, and Locomotive Scroll for parallax — all with reduced-motion support.

📱

Fully Responsive

Hand-crafted breakpoints with a full-screen mobile menu, adaptive typography, and stacked grids. Every layout decision is intentional.

💻

CMS-Driven Content

All pages managed through Payload CMS with live preview, draft/publish workflow, and automatic frontend cache revalidation on content changes.

🏠

Self-Hosted Infrastructure

CMS and MongoDB run on a Raspberry Pi 5 via Docker Compose. Full ownership from database to server — no third-party platforms, no vendor lock-in.

Tech Stack

Built with

A modern frontend stack with a self-hosted backend.

Next.jsNext.js
TypeScriptTypeScript
Tailwind CSSTailwind CSS
daisyUIdaisyUI
SCSS (BEM)SCSS (BEM)
Payload CMSPayload CMS
Framer MotionFramer Motion
Cloudflare PagesCloudflare Pages
DockerDocker
Visit SiteView Source
Get in Touch

Like what you see?

This site keeps evolving — always open to feedback and collaboration.

Contact MeBack to Projects