Ekspert od Ghost CMS: Wykonanie niestandardowego motywu z Figma - 3 szablony postów i snippetów (PageSpeed 90+)

Poszukujemy doświadczonego dewelopera Front-End oraz Ghost CMS (rzeczywiste doświadczenie z Ghost jest wymogiem obowiązkowym) do stworzenia niestandardowego motywu dla B2B bloga technologicznego Advio (platforma do automatyzacji reklamy).

Mamy w pełni gotowe, szczegółowe (pixel-perfect) makiety w Figma dla desktopu i mobile. Styl wizualny to surowy flat design z minimalistyczną dwukolorową paletą. Oczekujemy czystego, lekkiego kodu CSS/SCSS bez ciężkich frameworków (żadnego Bootstrap ani jQuery) oraz zbędnych elementów UI.

Wzór dla projektu: Najbliższy rzeczywisty przykład struktury, czystej estetyki i logiki siatki, do którego dążymy, to blog Buffer Resources (https://buffer.com/resources/).

Główna cel i architektura: Maksymalna elastyczność treści. Autorzy powinni mieć możliwość przypisania jednego z 3 specyficznych szablonów do dowolnego posta bezpośrednio w panelu administracyjnym Ghost. Wymagamy poprawnej routingu i architektury plików:

1) Strona główna (index.hbs):

1. Główny artykuł (Featured Post): Umieszczany na górze. Duża okładka, nagłówek H2, lead na 3 linijki, etykieta kategorii.

2. Strumień publikacji: Chronologiczna siatka innych postów. Karta zwykłego posta ma dwa stany wizualne: z okładką i bez. Elementy karty: nagłówek H3, lead na 3 linijki, etykieta kategorii i data. (Autor NIE jest wyświetlany).

3. Mobilny UI: Siatka przekształca się w jedną kolumnę. Główny artykuł zachowuje okładkę, a inne posty (bez obrazków) są wyświetlane poniżej w prostym tekstowym liście.

2) Strona kategorii (tag.hbs):

1. W pełni duplikuje strukturę index.hbs, ale bez bloku Featured Post. Ma duży nagłówek na górze (na przykład, "Kategoria: Nazwa").

3) Wyniki wyszukiwania (search.hbs):

1. Siatka kart z odpowiednimi wynikami + zaprojektowany stan "Nic nie znaleziono". Na górze strony zawsze powinny być wyświetlane pierwsze trzy kategorie (Tagi).

4) Strona błędu 404 (error-404.hbs):

1. Czysty markowy układ z kreatywnym tekstem błędu, przyciskiem "Powróć na stronę główną" oraz blokiem "Popularne artykuły" (3 standardowe karty bez obrazków). Na ekranie mobilnym treść jest wyrównana ściśle do środka w pionie.

5) Trzy podstawowe szablony postów (post.hbs, custom-instruction.hbs, custom-rules.hbs):

1. Blok Hero: Okruszki chleba, duży H1, lead-akapit, pod którym znajduje się okładka (Cover Image) na całą szerokość kolumny tekstowej. Wyświetlana jest tylko data (BEZ autora). Na mobilnym okładka staje się Edge-to-Edge (na cały ekran bez marginesów).

2. Blok autora: Umieszczany na samym dole strony. Prosty format tekstowy: "Autor: Imię Nazwisko" (bez awatara/zdjęcia).

3. Lewy panel stały (Curriculum / Spis treści): Dla szablonów instrukcji i zasad to krokowy wykaz, który "przykleja się" podczas przewijania (Scroll Spy musi być zrealizowane w lekkim Vanilla JS). Mobilny UI: ta kolumna znika i jest zastępowana kompaktowym akordeonem "Spis treści" tuż pod nagłówkiem, który rozwija się po kliknięciu.

Moduły treści i HTML-snipety: Wszystkie niestandardowe moduły muszą być stylizowane globalnie, aby idealnie wyświetlały się wewnątrz tagu content. Musisz dostarczyć czysty HTML UI Kit / Ściągawkę, która będzie zawierać dokładny kod HTML dla tych elementów, aby nasz zespół mógł łatwo zachować je jako natywne snipety w Ghost:

1. Blok "Główne" (TL;DR): Wyróżniony info-box z listą punktowaną.

2. Wrzuty dla instrukcji (Callouts): Niestandardowe style dla bloków "Do/Nie" oraz komunikatów Info/Ostrzeżenie/Alerte.

3. Interaktywna galeria (w stylu OpenAI): Blok-karuzela, gdzie zdjęcia przełączają się kliknięciem na tekstowe "tabletki" z podpisami (wymaga lekkiego Vanilla JS). Mobilny UI: musi wspierać zarówno kliknięcie na tabletki, jak i natywny swipe.

4. Integracja wideo: Adaptacyjny blok dla osadzonych odtwarzaczy (YouTube/MP4) z eleganckimi zaokrągleniami.

5. Standardowe elementy UI: Etykiety/Tagi, Daty i Paginacja powinny korzystać ze standardowych helperów Ghost, stylizowanych zgodnie z makietami Figma.

Surowe wymagania techniczne:

1. Jakość kodu: Semantyczny HTML5 oraz CSS/SCSS (metodologia BEM).

2. Wydajność: Wskaźniki Google PageSpeed Insights (Lighthouse) MUSZĄ wynosić 90+ (Zielona strefa) zarówno dla desktopu, jak i dla mobile.

3. Ghost CMS (Handlebars): Pełna dynamika, brak hardcodowania w szablonach. Wszystkie moduły, bloki tekstowe i media muszą być zarządzane przez panel administracyjny Ghost.

4. Walidacja: Ostateczny plik .zip z motywem musi uzyskać dokładnie 100/100 punktów w oficjalnym narzędziu Ghost GScan bez żadnych błędów ani ostrzeżeń.

Proces płatności i QA: To kontrakt z surowym powiązaniem z wynikiem. Płatność jest realizowana jednorazowo (100% milestone). Środki zostaną uwolnione TYLKO po tym, jak w pełni gotowy plik .zip motywu zostanie przekazany, zintegrowany i pomyślnie przejdzie naszą wewnętrzną recenzję kodu front-end, kontrolę wymagań PageSpeed oraz walidację GScan na 100/100.

Własność intelektualna i ekskluzywność (NDA): To własnościowy niestandardowy projekt dla platformy Advio. Po zakończeniu prac i płatności 100% praw własności intelektualnej do kodu i projektu należą wyłącznie do nas. Gotowy motyw, jego komponenty lub dostarczone makiety Figma nie mogą być odsprzedawane, wykorzystywane w innych projektach ani publikowane gdzie indziej.

Jak odpowiedzieć: Ponieważ budżet jest otwarty, proszę podać swoją rzeczywistą stałą cenę oraz orientacyjne terminy realizacji dla tego zakresu prac.(Uwaga: w celu ochrony naszej własności intelektualnej link do Figma zostanie udostępniony TYLKO wybranym kandydatom na etapie rozmowy kwalifikacyjnej).

Ważne: Rozpocznij swoją odpowiedź od linków do 2-3 niestandardowych motywów Ghost CMS, które osobiście stworzyłeś, abyśmy mogli je sprawdzić za pomocą PageSpeed Insights.