Full-stack
Personal Website
A bilingual developer portfolio that treats personal infrastructure as seriously as production — privacy-first analytics, WCAG AAA accessibility, 29 automated tests, and a full CI pipeline with Lighthouse audits.
Next.js 16React 19TypeScriptTailwind CSSFramer MotionSupabasePlaywright
Why This Exists
Not a templateBuilt from scratch as a playground for learning Next.js App Router, server components, and i18n — while also being the production site that represents me to employers.
Over-engineered on purposePrivacy-first analytics, bot-filtered tracking, E2E tests for every page, axe-core accessibility audits, Lighthouse CI — because the site itself is the portfolio piece.
At a Glance
12
Pages
10
API Routes
29
Test Files
2
Languages
AAA
WCAG Level
176
i18n Keys
Tech Stack
Framework
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4
Data
Supabase (PostgreSQL) · 10 tables · Markdown blog content
Animation
Framer Motion 12 · View Transitions API · prefers-reduced-motion
i18n
next-intl · 176 keys × 2 languages · DB fields with _zh suffix
Testing
Playwright (20 E2E files) · Jest (9 unit files) · axe-core a11y audits
CI
GitHub Actions · lint → typecheck → build → test → Lighthouse
What It Does
A full-stack portfolio with blog, photography gallery, project showcases, privacy-first analytics, and production-grade infrastructure — all bilingual.
Content
BlogMarkdown + syntax highlighting + related posts + categories
PhotographyMasonry grid · EXIF metadata · lightbox · category filters
Project ShowcasesStructured detail pages with bilingual content
UX
Command Palette (Cmd+K)Searches pages, projects, posts, experience, education
3 ThemesLight · Dark · System — OkLCh color space, AAA contrast
Keyboard NavigationArrow keys between pages, Escape to close modals
Infrastructure
Privacy-First AnalyticsNo cookies · no IP logging · custom page_views table
Security HeadersCSP · X-Frame-Options · bot filtering · Permissions-Policy
SEODynamic sitemap · hreflang · JSON-LD · OG images · robots.txt
Trade-offs
Umami Cloud for privacy-friendly analytics
Umami Cloud provides accurate, cookie-free analytics with proper bot filtering, device/browser detection, and a REST API. The Stats page fetches aggregated data from the Umami API — no custom tracking code or database tables needed.
WCAG AAA, not just AA
All color tokens are AAA compliant (13:1+ contrast ratios in both themes). The OkLCh color space keeps perceptual consistency across light/dark modes. Every page runs axe-core checks in the E2E suite — accessibility regressions fail the build.
Supabase _zh fields over separate tables
With only 2 languages, a full translation table with foreign keys is overhead. Nullable _zh suffix columns on each table keep queries simple — one fetch, one locale check, no JOINs.
20 E2E tests for a personal site
Every page, the command palette, keyboard navigation, security headers, and accessibility all have dedicated test files. Overkill for a portfolio — but the CI pipeline itself is part of what the portfolio demonstrates.