Colophon
How this site is built and what powers it.
Core Stack
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS 4
- CSS variables (OKLCH)
- Node.js
UI Libraries
- Radix UI (Accordion, Dialog, Dropdown, etc.)
- shadcn/ui components
- Lucide React (Icons)
- React Icons
- Motion (Framer Motion)
- Vaul (Drawer component)
- Sonner (Toast notifications)
- CMDK (Command menu)
Forms & Validation
- React Hook Form
- Zod (Schema validation)
- @hookform/resolvers
- Web3Forms (Contact form)
Data & Charts
- MongoDB
- Prisma ORM
- Recharts (Data visualization)
- Date-fns (Date utilities)
Typography
| Font | Usage | Source | Preview |
|---|---|---|---|
| Bricolage Grotesque | Headings | Google Fonts | Sphinx of black quartz |
| Instrument Sans | Body text | Google Fonts | The quick brown fox jumps |
| Bonbance Bold Condensed | Custom font | Local file | Custom Typography |
Utilities
- clsx (Conditional classes)
- tailwind-merge (Tailwind class merging)
- class-variance-authority (CVA)
- next-themes (Theme switching)
- Embla Carousel
- React Resizable Panels
- Input OTP
- React Day Picker
Deployment & Analytics
- Vercel (Hosting)
- Vercel Analytics
- Git & GitHub (Version control)
Custom Components
- Custom Navbar with mobile menu
- Polaroid draggable photo interaction
- Animated aura gradient background
- Theme toggle with sound effects
- GitHub contribution graph
- Tilt card animations
Inspiration & Credits
- Polaroid interaction inspired by Marc Bouchenoire
- Animated aurora gradient inspired by Marc Bouchenoire
- GitHub contribution graph and tilt card from Popkit
- Theme toggle with sound by Manish Tamang