Recently I spent some time refining my developer portfolio.
Instead of treating it like just another “portfolio page”, I tried to approach it the same way I would approach a real product — thinking about performance, structure, and maintainability.
The result was a series of small improvements that made the site much cleaner and more production-ready.
The Stack I Used
The portfolio itself is built using a pretty simple stack:
- React for the UI
- Netlify for deployment
- Vanilla CSS for styling
- JavaScript for interactions
I intentionally kept the stack lightweight so the site remains fast and easy to maintain.
Performance Improvements
One of the first things I noticed was the size of some assets.
For example, my profile image was originally 4.7MB, which is way too heavy for a simple landing page.
After optimizing it, I reduced it to 95KB without noticeable quality loss.
That alone improved the loading experience quite a bit.
I also cleaned up unused assets and simplified the HTML structure to reduce the final bundle size.
Small changes like this make a big difference.
Handling SPA Routing on Netlify
React applications commonly use client-side routing. When deployed on static hosting platforms, refreshing a routed page may result in a 404 error.
Example route:
/project/1
To address this, Netlify redirect rules can be configured so all routes fallback to the main application entry point.
Example configuration:
/* /index.html 200
This allows the React router to manage navigation correctly.
Small UI Improvements
I also added a couple of small UI touches.
The scrollbar changes color based on the theme (light or dark mode), which keeps the interface consistent.
I also made the favicon theme-aware, so it stays visible whether the browser is in light or dark mode.
They’re small details, but they help the site feel more polished.
Spam Protection for the Contact Form
Instead of adding CAPTCHA, I implemented a honeypot field in the contact form.
Basically:
A hidden field is added to the form, Bots usually fill it automatically. If that field has data, the submission gets rejected
It helps filter spam without affecting real users.
Adding Dedicated Project Pages
Originally my portfolio just showed project cards. Now when you click a project, it opens a detailed page explaining the project — including:
- why it was built
- what technologies were used
- what problems came up during development
- how those problems were solved
I think projects become much more meaningful when you can see the thinking behind them, not just screenshots.
Why I Treated It Like a Real Project
Even though it’s “just a portfolio”, it’s still a reflection of how you build things.
Things like:
- structure
- performance
- deployment
- UX details
These are the same things that matter in real products.
You Can Check It Out Here
If you’re curious, you can see the portfolio here:
👉 https://mokshcodes.netlify.app
Top comments (0)