I’m thrilled to share a major update to my personal site and portfolio. Over the past year, it’s gone through quite the transformation—moving from a Framer-based build that weighed in at around 3MB, to a Flask + Tailwind CSS setup that now clocks in at just 300KB. Not only does this make the site blazing fast, but it also means it’s technically eligible for the under-512KB award. If you’re curious how we pulled this off, read on.
From Framer to Flask: Why the Rebuild?
The Performance Problem
My original portfolio was built using Framer, which offered great design flexibility but came with a performance cost. At roughly 3MB, the page load was slow on mobile networks, and that’s before factoring in images or any dynamic content.
The Flask Advantage
I decided to rebuild using Flask, a lightweight Python web framework. Why Flask? Because it’s minimal, flexible, and easy to integrate with other tools. It gave me the freedom to manage my own routes, API calls, and server-side logic without unnecessary overhead.
Tailwind CSS for Styling
Why Tailwind?
Tailwind CSS provides a utility-first approach, letting me style components rapidly without writing large custom CSS files. This helped keep the overall code footprint low. Instead of shipping a massive CSS framework, I rely on Tailwind’s lightweight core, customizing only what I need.
Minimal Overhead
By purging unused styles, I drastically reduced the final CSS size. This is crucial when you’re aiming for that under-512KB threshold.
Cursor AI: The Secret Weapon
Assisted Coding & Refactoring
One of the most exciting parts of this rebuild was using Cursor AI to help write and refactor chunks of code. Cursor AI streamlined the development process by suggesting best practices, catching errors early, and even generating boilerplate for new features.
Faster Iterations
Thanks to AI-assisted coding, I iterated more quickly on design changes and new features. This kept development agile and reduced the time spent on repetitive tasks, so I could focus on performance optimizations.
Dynamic Ghost Posts
Integrating Ghost
Another new addition is the ability to dynamically fetch blog posts from Ghost. Rather than hard-coding blog content or relying on a heavy CMS plugin, the Flask app grabs posts via Ghost’s API on the fly.
Why It’s Awesome
- Live Updates: Whenever I publish or edit a post on Ghost, the site pulls in the new content instantly.
- Minimal Payload: The dynamic data is requested as JSON, which is light and easy to parse, keeping overall load times low.
Performance Boost: 3MB → 300KB
Under the 512KB Club
By focusing on minimal frameworks, purged CSS, and lean JavaScript, the total page load is now around 300KB—a 90% reduction from the original 3MB Framer build. This improvement not only speeds up load times but also means the site meets the criteria for the under-512KB award.
User Experience Matters
A smaller page size translates directly into better user experience—faster loading, smoother browsing, and less data usage for mobile visitors. In a world where attention spans are short, every second (and kilobyte) counts.
What Makes It Interesting?
- Lightweight Stack
- Flask for a simple, customizable backend
- Tailwind CSS for rapid, utility-first styling
- Ghost integration for dynamic content without heavy CMS overhead
- AI-Assisted Development
- Cursor AI to speed up coding and refactoring
- Faster iterations and error-checking
- Under-512KB Eligibility
- Performance-focused optimizations
- Potential for recognition in minimal web design communities
How to Check It Out
- Live Site: You can visit the new portfolio site right now. It’s open-source, snappy, and ready for you to explore.
- GitHub Repo: If you’re curious about the code, check out the web-portfolio repository on GitHub. You’ll find everything you need to set up a similar Flask + Tailwind CSS project.