Colophon

This page documents the tools, technologies, and design decisions behind this website. Built with love and a lot of coffee.

🛠️ Technology Stack

Framework & Build

  • Astro 5.4 - Static site generator with islands architecture for optimal performance
  • TypeScript - Type-safe development for fewer bugs
  • React - Interactive components where needed (via Astro islands)
  • MDX - Enhanced markdown for blog posts and content
  • Vercel - Hosting and deployment with automatic previews

Styling & Design

  • Tailwind CSS - Utility-first CSS framework for rapid development
  • Custom Fonts - Carefully selected typography for readability and character
  • Responsive Design - Mobile-first approach with breakpoints for all screen sizes
  • Dark Mode Support - (Coming soon)

Interactive Features

  • Draggable Polaroids - Fun interactive photo elements on the homepage
  • Sound Effects - Subtle audio feedback for interactions
  • Animated Dividers - Custom animations between sections
  • Achievement System - Gamified life tracking with unlockable badges

Data Integrations

  • Letterboxd + TMDB API - Movie tracking with posters and ratings
  • Hardcover API - Book tracking and reading activity
  • Raindrop.io API - Bookmark management and organization
  • Cleve API - Digital garden notes synced from Obsidian

🎨 Design Philosophy

Interactive & Playful

This site embraces interactivity and fun. From draggable polaroids to achievement badges, I wanted to create something that feels alive and personal rather than just another static portfolio.

Content-First

While the design is playful, content always comes first. Clean typography, good spacing, and clear hierarchy ensure that what I'm sharing is easy to read and understand.

Performance Matters

Using Astro's islands architecture, most of the site is static HTML/CSS with JavaScript only where needed. This results in fast load times and excellent Core Web Vitals scores.

✨ Key Features

Achievement System

Life is a game! I track my goals, milestones, and adventures as unlockable achievements. Check out the achievements page to see what I've accomplished and what I'm working towards.

Speaking Tracker

All my public talks and speaking engagements in one place, organized by year with details about the event, audience, and topics covered.

Curated Lists

I maintain curated lists of my favorite products, podcasts, blogs, music, games, and people. These are things I genuinely recommend and use.

Media Integration

Books I'm reading from Hardcover, movies I'm watching from Letterboxd, and articles I'm saving via Raindrop - all automatically synced and displayed.

🌟 Inspiration & Credits

This website is built on top of the excellent codebase from iamrob.in by Robin Spielmann. I've heavily customized and extended it with my own features, content, and design choices, but the foundation and many of the interactive elements come from Robin's amazing work.

Additional inspiration drawn from:

📂 Source Code

This website is open source! View the code on GitHub. Feel free to fork it, learn from it, or suggest improvements.

📬 Feedback

Notice something broken? Have suggestions? Found a typo? Reach out on X (Twitter) or open an issue on GitHub.

🙏 Acknowledgments

Huge thanks to Robin Spielmann for creating such a well-structured and feature-rich personal website template. Building on top of their work saved me countless hours and provided an excellent foundation to create something uniquely mine.

Special thanks to everyone else who has inspired, supported, and provided feedback on this site. The web is better when we build in public and share what we learn!