Building my Personal Website 2.0
A deep dive into how I rebuilt my personal portfolio using Next.js 16, Tailwind v4, and the Estopia design system.
Introduction
Welcome to my new personal website! This project represents a significant step forward in my journey as a developer, bringing together the latest technologies and a refined design aesthetic from the Estopia ecosystem.
The Tech Stack
I chose a bleeding-edge stack to ensure performance and longevity:
- Next.js 16: Utilizing the latest features like Server Actions and Turbopack for lightning-fast development.
- Tailwind CSS v4: The new engine is incredibly fast and allows for CSS-first configuration.
- Framer Motion: For smooth, declarative animations that bring the UI to life.
- Radix UI: Providing accessible, unstyled primitives for complex components like Dialogs and Dropdowns.
Design Philosophy
The design is heavily inspired by the “Blueprint” aesthetic we use at Estopia. It’s characterized by:
- Dark Mode First: Deep blues (
slate-950) provide a comfortable viewing experience. - Technical Accents: Monospaced fonts (
Geist Mono) for labels and metadata give it an engineering feel. - Glassmorphism: Translucent panels with subtle borders create depth and hierarchy.
Implementation Challenges
One of the interesting challenges was migrating my old blog content. I moved from a hardcoded JavaScript object structure to a flexible File-Based CMS using Markdown. This allows me to write posts in my favorite editor and version control them alongside the code.
// Example: Reading blog posts from the file system
const fileContents = fs.readFileSync(fullPath, "utf8");
const { data, content } = matter(fileContents);What’s Next?
I plan to use this space to document my work on Estopia Chat, Protect, and other experiments. Stay tuned for more deep dives into code, design, and everything in between.
Thanks for visiting!