Problem
Most personal websites are static resumes. I wanted something that demonstrates frontend craft directly: fast, accessible, responsive, and easy to keep up to date without touching layout code.
Back to Projects
Solo build · Nov 2025 - Jan 2026
Portfolio Website
This site: a statically generated Next.js portfolio with typed content, case-study pages, flash-free theming, and live GitHub activity.
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- Framer Motion
- Git
- Next.js 16
- Framework
- Tailwind v4
- Styling
- Static + ISR
- Rendering
I built the site as a compact, data-driven portfolio rather than a collection of hard-coded pages. Projects, experience, and skills live in typed TypeScript modules, while reusable components handle filtering, case studies, responsive layouts, motion preferences, and theme switching.
Approach
A data-driven Next.js App Router structure keeps content schemas separate from rendering. The dark/light theme is applied by a blocking inline script before first paint, so there is no flash of the wrong theme, and all animations respect the system's reduced-motion preference.
Outcome
The content model keeps routine updates small: a new project or role is primarily a data change. Case-study routes are generated at build time, and GitHub activity is fetched with a cached fallback path so a failed API request does not break the page.
Architecture
Next.js 16 with the App Router. Project pages are statically generated from the data files, while GitHub activity on the homepage revalidates on a timer (ISR). A small inline script sets the theme class before paint, with all colors flowing from a single set of CSS variables. Framer Motion handles entrance animations with reduced-motion support.
Highlights
Typed Content Layer
Projects, skills, and experience live in typed TypeScript files, decoupled from the components that render them.
Flash-Free Theming
A blocking inline script applies the saved or system theme before first paint; one set of CSS variables drives both modes.
Motion Preferences
Framer Motion follows the visitor's reduced-motion setting, with focus and keyboard states defined across the interface.
Static Generation
Every case study page is pre-rendered at build time; GitHub activity revalidates on a timer.
Timeline
Design
Established styling guides, visual components, and content models.
Architecture
Implemented the modular Next.js architecture, base themes, and data-driven rendering.
Polish
Completed performance tuning, responsive styling audits, and accessibility validation.
Launch
Finalized the theme system, project case studies, and production deployment.