Design System Architecture

My previous portfolio succeeded in showcasing projects, but it did very little to communicate how I think as an engineer. Rather than starting from an existing template, I rebuilt it from the ground up with an architecture-first approach. Around a third of the project was spent planning the system before writing any production code, defining the information architecture, component hierarchy, styling strategy, and content pipeline before implementation began. The goal was to create a portfolio that demonstrated engineering discipline rather than simply presenting finished work. I chose Next.js to gain experience with server-first rendering and to build on a foundation that could grow alongside my skills. CSS Modules provided a styling approach that I find highly maintainable, keeping styles scoped and organised without introducing unnecessary runtime complexity. While I enjoy using Tailwind and may explore it more in the future, CSS Modules aligned better with the architectural goals of this project. Throughout the build I prioritised simplicity, performance, accessibility, and maintainability, resisting the temptation to add features or visual effects that didn't support the overall design. The biggest lesson from this rebuild was that thoughtful planning consistently outperforms rapid implementation. I developed a much stronger understanding of server-rendered applications, content-driven architecture, and the value of restraint in software design. If I were starting again, I would invest more time refining wireframes and animation planning before implementation, but I'm proud that the final product closely reflects the original architectural vision while remaining straightforward to extend as the project evolves.