Role
Lead Front-End Engineer
Discipline
Front-End Architecture & CMS Development
Team
Solo Front-End Engineer, partnering directly with the CTO, CMO, and an External Design Agency
Company
Just Capital
Timeline
8 Weeks (Accelerated Timeline)
Tools
WordPress, Custom PHP, HTML5, ACF Pro, JavaScript, Semantic CSS
Shipped Output
View Live Site↗
Live site output (justcapital.com) built from the 35-module WordPress system.
The Challenge
Translating Static Design into a Living CMS
The external agency delivered a beautiful, highly complex visual system. The true challenge wasn't just executing the code. It was translating that massive Figma file into a flexible, production-ready WordPress infrastructure in exactly 8 weeks. The business required a system that achieved 1:1 visual fidelity on the front-end, while remaining simple enough on the backend that the marketing team could build and publish custom pages without ever touching a line of code.
The Thinking
Instead of hard-coding static templates, I approached the build as an enterprise UI kit. Every section of the site was engineered as an independent, reusable block. By combining semantic CSS variables with dynamic PHP logic, I decoupled the visual design from the content. If the CMO wanted to spin up a new campaign landing page, they didn't need a developer. They simply opened WordPress, selected the modules they needed, filled in the ACF text fields, and the front-end architecture automatically handled the spacing, typography, and responsive breakpoints.
Core Responsibilities
Front-End Architecture: Engineered the global design system into a scalable, token-based CSS architecture. Component Library Development: Programmed 35+ reusable UI modules using custom PHP, HTML5, and Vanilla JS. CMS Integration: Architected the backend authoring experience by mapping complex ACF Pro data fields directly to the front-end templates, enabling true "lego-block" page building for the marketing team. Technical Liaison: Partnered directly with the CTO and CMO to ensure the technical infrastructure mapped to their aggressive marketing roadmap.
The 8-Week Architecture Pipeline
Scope & Deconstruction
- I deconstructed the agency's Figma files into a strict system inventory, identifying the component and token families required for the build. Before writing a line of code, I mapped every layout to the WordPress content model and partnered with the CTO and Marketing team to lock in hard constraints: absolute editor autonomy, strict accessibility baselines, and zero post-launch dev dependency.
Systems Architecture
- To eliminate translation layers, I built a CSS token architecture that mapped 1:1 with the agency's naming conventions. I then engineered strict ACF (Advanced Custom Fields) schemas for all 35 modules. By defining validation rules, default states, and editor constraints at the schema level, I guaranteed the UI would never break, regardless of what content the marketing team inputted.
Component Build
- I programmed the 35 reusable UI modules using custom PHP, HTML, and vanilla JS, wiring the front-end architecture directly to the live CMS data. Performance and WCAG AA accessibility guardrails were baked directly into the build process, ensuring responsive fidelity across all modules as legacy content was migrated.
Documentation & Handoff
- The project concluded with a complete transfer of ownership. To guarantee true autonomy, I authored a comprehensive internal documentation guide for the marketing team, detailing the specific use cases, constraints, and authoring rules for all 35 modules. By pairing bulletproof code with clear operational playbooks, I empowered them to manage the CMS independently from day one, resulting in exactly zero post-launch engineering tickets.
Key Architectural Decisions
System Architecture & QA Proof
8-week accelerated delivery · zero post-launch engineering tickets
The Outcomes
The Business Impact
- Marketing Autonomy AchievedThe system handoff was a complete success. The marketing team now manages all content independently from day one, resulting in exactly zero engineering support tickets post-launch.
- Future-Proofed ArchitectureBuilt for longevity, not just a launch date. The global CSS token system ensures that any future brand updates or re-theming will only require simple token swaps, completely avoiding expensive and risky codebase rewrites.
- Uncompromised Visual FidelityTranslated the agency's complex static deliverables into a fully fluid, responsive system (scaling seamlessly from mobile to desktop) while achieving 100% design-to-code parity.
My job wasn't invention; it was fidelity and durability. Implementation is interpretation. Every spacing edge case I resolved, every interactive state I programmed where the static design was silent, and every CMS field I named so a non-technical team could understand it—those were all decisions actively protecting the original design intent. The accelerated 8-week timeline and parallel engineering tracks pushed that philosophy even further. I couldn't afford to be 'clever'; I had to build systems that explained themselves. The architecture had to be simple enough to hand off, yet sturdy enough to hold up. Ultimately, those strict constraints forced me to engineer a significantly better, more resilient codebase than I would have with unlimited time.
Reflection
If your team is about to receive a design handoff and needs someone who can build the architecture behind it — not just the UI on top of it — let's talk.
All Projects