Mark Bailey
I developed the Mark Bailey Consulting website from a supplied visual design. My role covered the WordPress build, responsive layouts, editable content and interactive elements.
The website presents a specialist family-business consultancy through clearly structured service pages and a distinctive visual identity. I translated the design’s bold colours and typography into reusable layouts, with navigation that adapts to the colour of each section.
The build uses WordPress, Timber and Twig, Tailwind CSS, vanilla JavaScript, Alpine.js, ACF and Gravity Forms.
WordPress
Used
Tailwind
Used
PHP
Used
TwigLang
Used
Webpack
Used
LocalWP
Used
BugHerd
Used
HTML
Used
Approach
The navigation changes its colours as it moves over light and dark sections of the page. I developed that behaviour alongside the responsive layouts so the supplied design remained consistent across different pages and screen sizes.
Editable structure
Timber and Twig provide the page templates, while ACF controls the editable content blocks. Shared components keep recurring sections consistent across the website.
This structure lets the client update content and assemble pages within the established design, with Alpine.js handling the interactive elements.
Responsive development
Vanilla JavaScript and Alpine.js handle the colour transitions, navigation behaviour and smaller interactions. These details carry the supplied design through from the main page layouts to the individual controls.
Tailwind CSS supports the responsive layouts, with typography and spacing adjusted for different screen widths.
Asset delivery
The frontend uses a focused set of scripts for the interactions the site requires. Tailwind CSS supports the shared styling, with Timber and Twig keeping the template structure consistent.
Images and other assets were optimised as part of the build. The aim was to preserve the visual detail of the supplied design while keeping its implementation manageable.
