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

Wisman Nur Abdul Kholik — Sat, 19 Apr 2025 14:44:00 +0000

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 🙌

DEV Community: Wisman Nur Abdul Kholik

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