3D Portfolio Website
Eye-catching portfolio with smooth animations, state-driven visuals, and excellent performance.
The challenge
Needed a modern, interactive portfolio to showcase work with unique visual elements.
The approach
Built with Next.js 16, featuring Dynamic Island avatar, floating tech logos, GitHub contribution graph, animated sections, and downloadable resume generation.
How 3D Portfolio Website is put together
This site. One typed content layer rendered by interchangeable themes. The theme is resolved on the server from the URL or a cookie, and a paint-blocking script applies the same rule before first paint, so a shared link renders correctly the first time.
- themes over one content layer
- 4
- canonical URL per page
- 1
- GitHub data revalidation
- 1 h
01 · Visitor
client
Visitor
02 · Request
gateway
Theme bootstrap
paint-blocking, ?theme= then cookie
gateway
Server resolver
same rule, server-side
03 · Rendering
service
Theme registry
type-enforced component map
service
Themes
Executive, Aurora, Cinematic, System Design
04 · Content & services
service
Content layer
typed, resolved once
worker
Cover generator
seeded SVG per project
service
Resume API
jsPDF
service
Contact API
Nodemailer
rate-limited
third-party
GitHub GraphQL
revalidated hourly
9 connections
- Visitor→Theme bootstrapfirst paint
- Visitor→Server resolverrequest
- Server resolver→Theme registrytheme id
- Theme registry→Themes
- Themes→Content layer
- Themes→Cover generator/covers/[slug]
- Themes→GitHub GraphQLcontributions
- Visitor→Resume APIGET /api/resume · optional
- Visitor→Contact APIPOST /api/contact · optional
Request flow · Opening a shared theme link
- 1The URL carries ?theme=…; the server reads it, then the cookie, and renders that theme’s markup directly.
- 2A paint-blocking script applies the same rule to the <html> attribute, so design tokens are right before first paint.
- 3Every theme reads the same content layer; the canonical URL strips the parameter, so search engines see one document and only the social card varies.
- 4Switching afterwards is client state, cross-faded with the View Transition API and skipped under reduced motion.
Design decisions
- Content separate from presentation
- Themes import only from the content layer, so adding a theme never copies facts and editing a fact never touches a theme.
- Compile-time theme wiring
- Theme ids derive from the registry, so a registered theme without a component fails the build.
- Deterministic covers
- Generated cover art is seeded from the project id: identical on server and client, with no third-party image host.
Trade-offs & known limits
- All themes ship in one bundle so switching is instant; a heavy theme would need to be split out with next/dynamic.
Have something similar in mind?
I'm open for freelance and contract work — let's talk about what you're building.