I Just Launched My Open-Source Portfolio Website – Built with React, Firebase & MDX

I Just Launched My Open-Source Portfolio Website – Built with React, Firebase & MDX For years, I’ve wanted a personal website that truly reflects who I am — as a developer, as a learner, and as a builder. Last week, I finally launched it. And the best part? It’s fully open-source. In this post, I’ll share: Why I built it from scratch The stack and features I used Key lessons I learned along the way And how you can contribute The Why: More Than Just a Portfolio As a frontend engineer, I’ve always admired well-crafted personal sites — the kind that go beyond just a resume and truly show who the developer is. I didn’t just want to list my projects and social links. I wanted a living platform where I could: Write technical blog posts in MDX Build a custom CMS to manage content Share detailed case studies of my work Experiment with new tools in public And open it up for community contributions The Stack: Simple, Modern, Powerful I focused on speed, simplicity, and scalability. Here’s what powers the site: React 18 + TypeScript – for strong typing and component structure Vite – fast build tool for a snappy dev experience Tailwind CSS + shadcn/ui – for styling and component primitives Firebase (Auth, Firestore, Storage) – for authentication and dynamic content MDX – for writing blog posts as JSX Umami Analytics – to track visitor engagement Google reCAPTCHA v3 – for basic security Features I'm Proud Of ⚡ Fast load times thanks to Vite and smart bundling

Apr 19, 2025 - 16:09

I Just Launched My Open-Source Portfolio Website – Built with React, Firebase & MDX

For years, I’ve wanted a personal website that truly reflects who I am — as a developer, as a learner, and as a builder.

Last week, I finally launched it.

And the best part? It’s fully open-source.

In this post, I’ll share:

Why I built it from scratch
The stack and features I used
Key lessons I learned along the way
And how you can contribute

The Why: More Than Just a Portfolio

As a frontend engineer, I’ve always admired well-crafted personal sites — the kind that go beyond just a resume and truly show who the developer is.

I didn’t just want to list my projects and social links.

I wanted a living platform where I could:

Write technical blog posts in MDX
Build a custom CMS to manage content
Share detailed case studies of my work
Experiment with new tools in public
And open it up for community contributions

The Stack: Simple, Modern, Powerful

I focused on speed, simplicity, and scalability.

Here’s what powers the site:

React 18 + TypeScript – for strong typing and component structure
Vite – fast build tool for a snappy dev experience
Tailwind CSS + shadcn/ui – for styling and component primitives
Firebase (Auth, Firestore, Storage) – for authentication and dynamic content
MDX – for writing blog posts as JSX
Umami Analytics – to track visitor engagement
Google reCAPTCHA v3 – for basic security

Features I'm Proud Of

⚡ Fast load times thanks to Vite and smart bundling