Back to projects
2026
Personal Portfolio
Personal project
The site you're reading. A fullstack Next.js 16 portfolio built around a newsprint visual language and a custom interactive UI on 2D Canvas. Includes a MongoDB-backed contact form and a self-rolled HMAC-signed admin dashboard for reviewing incoming messages.
Tech stack
TypeScriptNext.jsTailwind CSSMongoDBZodCanvas
Highlights
- Static-first Next.js 16 App Router with React Server Components; only the contact API and admin dashboard run server-side, everything else prerenders at build time.
- MongoDB-backed contact form via Mongoose with Zod-validated request bodies; the site gracefully disables the form when no database is configured so local dev works without setup.
- Admin dashboard at /admin with HMAC-signed session cookies, written from scratch with the Node crypto module rather than pulling in an auth library.
- Custom interactive UI element built in 2D Canvas: ~600 drifting particles around a draggable focal point that applies Newtonian gravity, an orbital boost on entry to produce visible orbits, and an inner plunge zone that strips tangential momentum near the center.
- Visual system: newsprint-cream palette, soft vignette frame, scroll-driven hero fade via animation-timeline, per-route fade-in transitions with hash-fragment scroll handling, and translucent floating cards over a live particle field.