Privacy is one of the most important and most misunderstood problems in blockchain, and Secret Network's existing website was failing the developers and privacy advocates it most needed to reach: visually inconsistent, architecturally fragile, and unable to communicate a genuinely compelling technology to either a technical or non-technical audience.
I led front-end development of a comprehensive site revamp as UI/UX Developer, implementing Atomic Design principles in Vue.js: atoms, molecules, organisms structured so every component was reusable and every change was predictable; with a CSS Grid layout system that handled complex multi-column layouts systematically rather than case by case, producing a site where the design and the build were indistinguishable.
The Build
The technical approach was as considered as the visual one.
The entire component architecture was structured using Atomic Design principles: atoms (buttons, inputs, type styles), molecules (cards, nav items, form groups), organisms (hero sections, feature grids, CTAs); creating a scalable, maintainable system where every component was reusable and every change was predictable. This wasn't just good engineering; it was the prerequisite for a site that could grow with the platform without accumulating technical debt.
A responsive grid implementation ensured the layout adapted cleanly across device sizes: from the wide-format presentations developers use at their desks to the mobile views of someone exploring the platform on the go. Complex multi-column layouts that are a common source of front-end fragility were handled systematically, not case by case.
Every component was built to specification, translating the design system's visual language into code that matched intent without introducing inconsistencies in the handoff. The goal was a site where the design and the build were indistinguishable.
Key Mockups
Final Mockup
Built 2020–2021.
The platform remains live, though branding has evolved since launch.
