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.
Compounding the problem: Secret Network's valuable community content (documentation, blog articles, resources) was scattered across multiple platforms, making it nearly impossible for users to find information efficiently. I led front-end development of a comprehensive site revamp as UI/UX Developer, building a centralized hub for all Secret Network information using Vue.js and Gridsome within the Jamstack framework.
Phase 1 launched 11 days after the project proposal was approved: a production-ready MVP built at startup velocity, designed to give the Secret Network community an immediate foundation to iterate from.
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.
The primary component driving information organization was the card: chosen deliberately for its clean, consistent responsiveness across device sizes. Simple enough to let content lead, structured enough to scale as the platform grew. Two toggle switches (one for color scheme, one for dark/light mode) gave users four distinct visual experiences, a customizability feature that echoed Secret Network's core philosophy: the same control users have over their private data, applied to their visual environment.
The Jamstack architecture (JavaScript, APIs, and Markup delivered through CDN servers) prioritized speed, security, and scalability. This project also worked within the debut of LKMX's Flare design system, streamlining the UI development process and ensuring visual consistency across all device contexts.
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
Tools: Vue.js, Gridsome, Jamstack, TypeScript, HTML, CSS3, SASS, GitHub, Atomic Design, Flare Design System.
Timeline: Phase 1 launched 11 days after project approval, 2020.
Built 2020–2021.
The platform remains live, though branding has evolved since launch.
