/colophon
HOW THIS
WAS BUILT.
Migrated from React JS (mursalfk.github.io) to Next.js 15 + TypeScript. Built iteratively over several months. See my full setup →
Tech stack
Next.js 16
Framework
App Router, server components, static generation
TypeScript
Language
Strict mode, full type safety throughout
Tailwind CSS v4
Styling
Utility-first, custom design tokens
Clash Display
Display font
Fontshare | the bold editorial headings
Satoshi
Body font
Fontshare | clean, readable body text
DM Mono
Mono font
Google Fonts | labels and code
Resend
Email API
Powers the contact form
Vercel
Hosting
CLI deploy, no GitHub needed
Google Analytics
Analytics
Basic traffic tracking
Canvas API
Sunset bg
Time-aware parallax landscape in hero
Design decisions
No rounded corners
Sharp corners give an editorial, architectural feel. Rounds feel friendly but generic.
Bone accent (#e8e0d0)
Warm, distinctive, readable on both dark and light. Not the typical blue.
Sunset background in hero
Time-aware | shows a different sky at different times of day. Karachi timezone. Personal.
Server components by default
Pages load as pre-built HTML. SEO-friendly, fast first paint. Client components only where needed.
No npm for animations
CSS keyframes + IntersectionObserver instead of Framer Motion. Lighter bundle.
Direct Vercel CLI deploy
Multiple portfolio variants on GitHub | didn't want another public repo. CLI push is cleaner.