The starting point
The idea for version 5.0 emerged when I wanted to learn a bit more on engineering side and move beyond the constraints of shared hosting and basic CMS solutions. I'd been experimenting with the now-defunct www.sanerock.com venture along with my mates, a small-ish design agency focusing on web projects. We delivered a few projects but we had to close down eventually. The whole venture taught me a lot about custom development and server management beyond business management.
Coming back to the process, my previous site had been running for a couple of years with decent traffic and some friends following along. The problem I was trying to tackle was the technical limitation & expanding on my skillset, shared hosting environments severely restricted what I could build, and I also wanted to show the side projects I was working on with proper technical freedom.
Design
I started with paper sketches as wireframes and moved into page hi-fi designs. The initial concepts looked good with idea of animating elements, I also wanted to exploring WebGL for added exploration. This is when the BMW i8 concept car design struck my eyes.
The thought of visualising that car's aesthetic in digital space became an irresistible challenge. I completely overhauled my design to capture the i8's look and feel, focusing on those flowing curves and futuristic elements that could translate into CSS animations and responsive layouts.
Eventually, I managed to lock the design and started with the next challenge: architecting a tech stack that could deliver this design.
Technical architecture decisions
This was genuinely the most complex part. I had to balance what I wanted to learn, what was technically feasible, and what I could afford to host.
The MERN experiment
Initially, I was drawn to building a full MERN stack (MongoDB, Express, React, Node.js). The appeal was strong, MongoDB for flexible content management, Express for API development, React for dynamic frontend components (though Angular was my preference at the time), and Node.js for unified JavaScript development.
I spent considerable time architecting this approach, designing database schemas, and mapping out API endpoints. The technical challenge was exciting, building everything from authentication to content delivery from scratch.
Reality check: hosting economics
The MERN stack approach hit a wall when I calculated hosting costs. VPS solutions that could handle MongoDB and Node.js were significantly more expensive than my practically little to non-existent budget. More importantly, I was working this around my day job, and the time investment for a full backend implementation was unrealistic.
Shared hosting was out of the question for Node.js applications, and cloud services like Heroku were still relatively expensive for personal projects.
The pragmatic pivot
After weeks of architecture planning, I decided to pivot to a static site generator approach: Jekyll for content management and blog functionality, GitHub Pages for free and reliable hosting, AngularJS for interactive frontend components, and Sass for maintainable styling.
This stack offered the best compromise between technical sophistication and practical constraints.
Implementation process
The development followed a structured approach. First came the design-to-code conversion, turning BMW i8-inspired designs into responsive CSS, implementing curved elements and animations without WebGL, and making sure it all worked across devices.
Then came integrating Angular within Jekyll's static framework, managing state for dynamic elements, and optimising bundle sizes. On the Jekyll side, I set up custom plugins for portfolio content management, Liquid templating for dynamic content generation, and automated build processes. Finally, there was the usual performance work: asset minification, image optimisation, and CDN integration.
Technical challenges
Converting the design to code and supporting responsive design stretched over a much longer duration than anticipated. I had to pause work entirely due to a job transition, then regain momentum weeks later.
The biggest technical hurdle was browser compatibility. What I'd planned as a two-week sprint became a 4-5 week marathon, with Internet Explorer requiring significant additional development time.
I made the pragmatic decision to support only IE10+ and the latest versions of Chrome and Firefox. The project was behind schedule, and legacy browser support would have doubled the development time.
What came out of it
The final implementation gave me static site performance with dynamic interactive elements, zero hosting costs through GitHub Pages, a maintainable codebase with clear separation of concerns, and an architecture that could scale for future content.
Lessons learned
On the technical side: sometimes simpler tech stacks deliver better outcomes than complex ones. Hosting constraints should inform architecture decisions early. And static site generators can be surprisingly flexible for dynamic content.
On the process side: scope creep is real, even on personal projects. Browser compatibility always takes longer than estimated. And having clear technical constraints actually improves decision-making.
As for the architecture, the MERN stack experiment wasn't wasted. It informed better static site architecture decisions. Jekyll's plugin system provided enough backend-like functionality for most of what I needed, and GitHub Pages turned out to be remarkably capable for hosting sophisticated static sites.
I've shared the website as a public repository on GitHub, where it's also hosted. The foundation is solid, and now I can focus on content and features rather than infrastructure concerns.
Next challenge: optimising the Angular components and exploring more advanced Jekyll plugins.