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
  • 📝 Live Markdown + MDX Blog system with dynamic routing
  • 🛠 Custom CMS dashboard (built from scratch with Firestore as backend)
  • 🎯 Project showcase section with images, descriptions, and tags
  • 📱 Fully responsive for mobile and tablets

Lessons I Learned

This wasn’t just about building a site — it was a learning experience in itself. Here are a few highlights:

  • How to combine Firebase with MDX for a flexible content system
  • Building an admin dashboard without using a third-party CMS
  • Designing a structure that is both user-friendly and developer-friendly

And of course, pushing this project live helped me polish deployment, domain config, and performance tuning.

How You Can Contribute

This project is open to contributors — whether you're a beginner or experienced dev.

  • You can help improve performance
  • Suggest new features or components
  • Submit pull requests for blog enhancements
  • Or just star the repo to support it!

🔗 GitHub Repo → github.com/wismannur/wismannur.pro

Want to learn in public? Let’s build in public, together.

Your ideas and code are welcome 💙

Useful Links

Thanks for reading!

If you liked this project, feel free to star the repo, follow me for more updates, or even join as a contributor 🙌