Mobile Performance

MKubuDesign.cz – Dynamické portfolio pro YouTube tvůrce

Vizuálně strhující prezentace s vlastním bez-buildovým CMS a mikro-interakcemi, které maximalizují konverze.

95
Performance
100
Accessibility
100
Best Practices
100
SEO

Úvod: Web, který dýchá videem

Michal Kubů je vyhledávaný designér YouTube miniatur a střihač pro přední české tvůrce a podcasty. Jeho osobní portfolio muselo od první sekundy reflektovat jeho práci: být vizuálně strhující, dynamické a dokonale plynulé.

MKubuDesign.cz Mockup Ukázka

Výzva: Rychlost statického webu vs. Svoboda redakčního systému

Hlavním cílem bylo skloubit absolutní rychlost statického webu s možností, aby si klient mohl sám snadno přidávat nové projekty, a to vše bez nutnosti nasazovat těžkopádný backend, databázi nebo složité buildovací procesy.

Moje řešení

Zero-Build Jamstack architektura: Místo klasických generátorů jsem zvolil inovativní přístup. Decap CMS ukládá všechny projekty do jediného centrálního portfolio.json souboru. Můj čistý Vanilla JavaScript ho následně na frontendu asynchronně stahuje a bleskově z něj renderuje karty. Změny v obsahu jsou tak online okamžitě bez čekání na překlad webu.

Pixel-perfect administrace: Pro redakční systém jsem napsal vlastní React šablonu. Klient tak už při nahrávání fotky vidí real-time náhled přesně v takové mřížce a designu, jaký bude následně svítit na webu.

Serverless bezpečnost: Poptávkový formulář nezatěžuje žádný PHP backend. Pohání ho bezpečné serverless Netlify Functions napojené na Resend API, kompletně ošetřené přísnou Content-Security-Policy (CSP).

Hlavní hvězdy projektu (The "Wow" Factor)

Interaktivní Hero Playlist: Úvodní fotka je nuda. Návštěvníka vítá dynamický přehrávač miniatur. Každá ukázka má svůj animovaný progress bar, který po 5 sekundách plynule přepne na další thumbnail (nebo okamžitě reaguje na proklik se sametovým přechodem).

Creator-Focused Mikro-interakce: Formulář po odeslání nevyhodí nudné "Děkujeme". Místo toho vyjede animovaný bar s textem "Renderuji zprávu..." a po 1.5s přeskočí na "Render complete!". A když uživatel překlikne v prohlížeči do jiné záložky? Titulek webu ho okamžitě zavolá zpět: „👀 Haló, tvoje grafika čeká!“

Výsledek

Extrémně odtučněný front-end, kde má veškerý JavaScript pod 25 KB. Díky agresivnímu kešování a plynulým skeleton loaderům (kostry karet před načtením dat) web dosahuje na mobilních zařízeních naprosté špičky s hodnocením 99/100 v Google Lighthouse.