Ghost CMS Expert: Custom theme layout from Figma - 3 post templates and snippets (PageSpeed 90+)

We are looking for an experienced Front-End and Ghost CMS developer (real experience with Ghost is a mandatory requirement) to create a custom theme for the B2B tech blog Advio (an advertising automation platform).

We have fully prepared, detailed (pixel-perfect) designs in Figma for desktop and mobile. The visual style is strict flat design with a minimalist two-color palette. We expect clean, lightweight CSS/SCSS code without heavy frameworks (no Bootstrap or jQuery) and unnecessary UI clutter.

Design reference: The closest real example of structure, clean aesthetics, and grid logic we aspire to is the Buffer Resources blog (https://buffer.com/resources/).

Main goal and architecture: Maximum content flexibility. Authors should be able to pin one of 3 specific templates to any post directly in the Ghost admin panel. We require proper routing and file architecture:

1) Main page (index.hbs):

1. Featured Post: Placed at the top. Large cover, H2 title, lead of 3 lines, category badge.

2. Publication feed: Chronological grid of other posts. A regular post card has two visual states: with cover and without. Card elements: H3 title, lead of 3 lines, category badge, and date. (Author is NOT displayed).

3. Mobile UI: The grid is restructured into a single column. The featured post retains the cover, while other posts (without images) follow below in a simple text list.

2) Category page (tag.hbs):

1. Fully duplicates the structure of index.hbs, but without the Featured Post block. Has a large title at the top (for example, "Category: Name").

3) Search results (search.hbs):

1. A grid of cards with relevant results + a designed "Nothing found" state. The top of the page should always display the first three categories (Tags).

4) 404 error page (error-404.hbs):

1. A clean branded layout with creative error text, a "Return to homepage" button, and a "Popular articles" block (3 standard cards without images). On mobile screens, content is strictly centered vertically.

5) Three basic post templates (post.hbs, custom-instruction.hbs, custom-rules.hbs):

1. Hero block: Breadcrumbs, large H1, lead paragraph, followed by a cover image that spans the full width of the text column. Only the date is displayed (WITHOUT the author). On mobile, the cover becomes Edge-to-Edge (full screen without margins).

2. Author block: Placed at the very bottom of the page. Simple text format: "Author: First Last" (without avatar/photo).

3. Left fixed panel (Curriculum / Table of Contents): For instruction and rule templates, this is a step-by-step list that "sticks" during scrolling (Scroll Spy needs to be implemented in lightweight Vanilla JS). Mobile UI: this column disappears and is replaced by a compact "Contents" accordion immediately under the title, which expands on click.

Content modules and HTML snippets: All custom modules must be styled globally to display perfectly within the content tag. You must provide a clean HTML UI Kit / Cheat Sheet that contains the exact HTML code for these elements so our team can easily save them as native snippets in Ghost:

1. Main block (TL;DR): A highlighted info box with a bulleted list.

2. Callouts for instructions: Custom styles for "Do/Don't" blocks and Info/Warning/Alert messages.

3. Interactive gallery (OpenAI style): A carousel block where photos switch by clicking on text "pills" with captions (requires lightweight Vanilla JS). Mobile UI: must support both clicking on pills and native swipe.

4. Video integration: A responsive block for embedded players (YouTube/MP4) with neat rounded corners.

5. Standard UI elements: Badges/Tags, Dates, and Pagination should use standard Ghost helpers, styled according to Figma layouts.

Strict technical requirements:

1. Code quality: Semantic HTML5 and CSS/SCSS (BEM methodology).

2. Performance: Google PageSpeed Insights (Lighthouse) scores MUST be 90+ (Green zone) for both desktop and mobile.

3. Ghost CMS (Handlebars): Full dynamism, no hardcoding in templates. All modules, text blocks, and media must be managed through the Ghost admin panel.

4. Validation: The final .zip archive with the theme must score exactly 100/100 in the official Ghost GScan tool without any errors or warnings.

Payment process and QA:This is a contract with strict result binding. Payment is made in a single payment (100% milestone). Funds will be released ONLY after the fully completed .zip theme is delivered, integrated, and successfully passes our internal frontend code review, PageSpeed requirements check, and GScan validation at 100/100.

Intellectual property and exclusivity (NDA):This is proprietary custom design for the Advio platform. After the work is completed and payment is made, 100% of the intellectual property rights to the code and design belong exclusively to us. The finished theme, its components, or provided Figma layouts cannot be resold, used in other projects, or published elsewhere.

How to respond: Since the budget is open, please specify your actual fixed cost and estimated timelines for this scope of work.(Note: to protect our intellectual property, the link to Figma will be provided ONLY to shortlisted candidates during the interview stage).

Important: Start your response with links to 2-3 custom Ghost CMS themes that you have personally developed so we can verify them through PageSpeed Insights.