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
- Live site: wismannur.pro
- GitHub: github.com/wismannur
- Twitter: @wismannur
- LinkedIn: linkedin.com/in/wismannur
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 🙌