Project: Gutenberg block development, SCSS design system, and DevOps
Duration: 2021–2023
Client: Coradine Aviation Systems / LogTenPro
The Challenge
Coradine Aviation Systems, makers of the LogTenPro pilot logbook application, needed their marketing website to precisely match the brand and design language established in their Figma design files. They also needed a deployment model that was secure and stable — for an aviation software company, a hacked or compromised marketing site is a real reputational risk. The existing build process had SASS compilation issues that were slowing down development.
The Approach
I built custom Gutenberg blocks mapped directly to the Figma designs — not approximate, not “close enough.” Each block was componentised against the design system and built to accept content from the WordPress editor without exposing implementation details to the content team. The SCSS design palette I built centralised the brand’s colours, typography, spacing, and component tokens in one place, making future design changes a single-source update rather than a hunt through scattered stylesheets.
For deployment, I implemented a Simply Static workflow integrated with CI: WordPress runs as a build environment, Simply Static generates a static HTML export, and that export deploys to the production host via CI pipeline. The result is a production site with no PHP runtime, no WordPress attack surface, and no dynamic execution path — fast, secure, and virtually immune to the category of exploits that targets WordPress installs.
I resolved the SASS compilation bottlenecks that had been slowing the team down, documenting the build setup so the next developer would not face the same friction.
Stack
- WordPress (build/editorial environment)
- Custom Gutenberg blocks (PHP/React)
- SCSS / SASS design system
- Simply Static (static site generation)
- GitHub Actions / CI (deployment pipeline)
- Figma (design source)
Outcomes
- Pixel-perfect Gutenberg blocks aligned precisely with Figma design specifications
- Streamlined static deployment — secure, stable, and performant by design
- SCSS design palette established brand-consistent styles across the entire site
- CI workflows enabled reliable, repeatable deployments
- SASS compilation bottlenecks resolved, improving developer workflow
- Production site has no WordPress attack surface — static output only
