About the project
Where it started,
and why I kept it.
Then → now
Built while I was learning. Kept because the idea was still useful.
I originally built this store in 2022 while learning front-end development.
It was a practical way to work through HTML, CSS and JavaScript while building something that had enough moving parts to make the lessons useful.
The original project included product cards, a shopping cart, browser storage, quantity controls, delivery calculations and VAT.
Some of it aged well. Some of it did not.
Rather than throw it away and build something completely new, I wanted to see what could be preserved, what needed to be repaired, and how I would approach the same project with the experience I have now.
That became the point of the rebuild.
The current version keeps the original project visible, but improves the structure, responsive behaviour, accessibility, visual system and overall reliability.
Project timeline
Three stages of the same project
-
2022
Original build
Built as an early front-end learning project using HTML, CSS, JavaScript and Bootstrap.
-
2026
Restored
I went back to the original code, repaired the intended cart behaviour and established a working baseline before changing the design.
-
2026
Modernised
The project was then rebuilt around clearer structure, responsive design, accessibility and a simpler, more maintainable front-end approach.
What it shows
Not just the finished screen.
The useful part of revisiting an older project is being able to see the difference between getting something to work and understanding how it should be put together.
The original version helped me learn the basics.
The current version shows how I now approach structure, interaction, accessibility, responsive behaviour and technical cleanup without pretending the original work was something it was not.
Current direction
Where my work has moved since then
My work now goes well beyond front-end development.
My current work brings together web development, practical software, automation, media-data systems, workflow reliability and technical problem solving.
Through Video Image Technologies, that work is increasingly focused on building and improving systems that have a clear practical use — especially where data, files, workflows and reliability matter.
This project sits much earlier in that journey, but it is still useful because it shows where part of that development work began.
Original build
HTML · CSS · JavaScript · Bootstrap
Current version
Semantic HTML · Modern CSS · Vanilla JavaScript · Vite · Responsive design · Accessibility improvements · localStorage
Project status
Modernised portfolio project