Lil.Wide.Codes Hub Redesign
DeployedOverhauling our official brand headquarters to build a dark mode design system, adding unified site sections, and implementing high-performance Vanilla JS scripts.
Expand Technical Breakdown
Objective
Establish an interactive, low-latency brand presence demonstrating design capabilities using web fundamentals (zero framework dependencies).
Technology Stack
- Semantic HTML5 (Structure & Hierarchy)
- Modular CSS Layers (Base, Layout, Components, Theme)
- Vanilla JavaScript (State tracking, CLI terminal widget, Cursor glow coordinates)
Key Decisions & Architecture
- No Frameworks: Retain full system ownership and keep static bundle sizes under 150KB.
- Dual-Nav Overlay: Standard link highlights for desktop, transitioning to a full-screen categorical overlay for complex pathing.
- Spotlight Glow Cards: Dynamic coordinate calculation using cursor mousemove tracking for high-end micro-interactions.
Testing & Verification
Validated layouts across desktop (Chrome, Safari, Firefox) and mobile resolutions. Checked console output for DOM binding errors.
Outcome
Released Hub V2.0.0. Achieved excellent page-speed metrics, responsive fluid scaling, and a fully interactive terminal CLI widget that runs client-side.