Stavba fotografického portfolia na WordPressu s pomocí Claude
Jan Stárek studuji service design projekty o mně + kontakt Jan Stárek / 01.08.2026 Stavba fotografického portfolia na WordPressu+Elementor s pomocí Claude Zpět 1.Úvodem: proč nakonec fotografické portfolio a proč Claude? 2. Propojení Claude+Wordpress=Nova Mira (plugin) 3. 3. Iterace designu (Claude), final touch (Elementor) 4. Závěrem 1.Úvodem: proč nakonec fotografické portfolio a proč Claude? Můj výstup do předmětu Praxe je navázaný na můj původní cíl v předmětu Studijní seminář, kde jsem si stanovil, že se budu věnovat stavbě webové stránky pomocí AI. Mojí motivací bylo využít jazykový model, v tomto případě Claude, ke stavbě reálného produktu, který neputuje jen do šuplíku, ale bude pro mě mít reálný význam. Jelikož mám již od prvního semestru v hlavě, že si postavím oddělené webové fotografické portfolio, byl tento časový blok v rámci předmětu Praxe ideální. Myšlenka na subdoménu vznikla v rámci tvorby tohoto projektově orientovaného designového portfolia. Na původní článek je možné se prokliknout zde. Také původní adresa jstarek.cz byla mé fotografické portfolio pro prezentaci svatební fotografie, které se vedle své hlavní práce věnuji. Subdoména mi tedy dávala smysl, protože jsem v rámci ní mohl rovnou poukázat na to, že se jedná o fotografickou webovou stránku. A tak vznikla subdoména fotograf.jstarek.cz. Obecně jsem přemýšlel, jak k jejímu designu přistoupit. Moje prvotní myšlenka byla zkusit využít AI nástroj Pencil.dev od Tomáše Krchy pro AI design digitálních produktů. To jsem nakonec po pár pokusech vzdal i s vědomím toho, že si chci zachovat výhody redakčního prostředí WordPressu, na kterém běží má hlavní webová stránka. Zároveň přede mnou stál prázdný WordPress této subdomény a já jsem chtěl tento nový produkt posunout na novou úroveň. Chtěl jsem, aby celek působil kvalitně, nadčasově a aby reprezentoval mě jako fotografa. Další klíčovou věcí byl fakt, že web neměl sloužit pouze jako prezentace svatební fotografie, ale i jako místo, kam mohu nahrát fotky z cest, produktů, portréty lidí a podobně. Nemalou roli zde také hrál čas, a to jsem si sliboval právě od pomoci umělé inteligence, která mi umožní rychlé a kvalitní prototypování a provede mě celým procesem. 2. Propojení Claude+Wordpress=Nova Mira (plugin) https://www.youtube.com/watch?v=El484PgSHEk&t=4s Game changer pro mě bylo video od tvůrce Darrela Wilsona, který připravil přesný postup, jak si vše správně nastavit, aby výsledek fungoval tak, jak má. V rámci těchto kroků jsem si musel projít nastavením zabezpečení webu na hostingu Wedos, přípravou správného promptu a mnoha iteracemi. Rozepíšu se o nich níže. Prvotní promp:Navrhni pro mé fotografické podnikání kompletní web o 5 stránkách v HTML. Ať je design ultraminimalistický, čistý, s moderní a trendy estetikou. V typografii využívej kombinace elegantního patkového písma pro nadpisy a čistého bezpatkového písma s dostatkem volného prostoru. Název firmy: [Jan Stárek photographer] Co dělám: Autentické lifestyle fotografie, emotivní svatební reportáže a vizuální vyprávění příběhů. Pro koho pracuji: Páry, které hledají nestrojené a přirozené svatební fotky, a lidé/značky, kteří chtějí zachytit syrové, estetické momenty ze života. Hlavní cíl webu: Získat poptávky na focení (svatby/lifestyle) a rezervace termínů přes kontaktní formulář. SEO klíčová slova: [svatební fotograf Středočeský kraj], [lifestyle fotografie], [umělecký fotograf portfolio] Vytvoř těchto 5 stránek: Úvodní stránka (Home) – Hero sekce: Dominantní, celoobrazovková černobílá fotografie s minimalistickým, ale silným nadpisem a jemným CTA tlačítkem. Následují 3 pilíře mého přístupu (např. Autentičnost, Světlo, Příběh), rychlý vizuální rozcestník na Svatby a Život, krátký citát z reference a minimalistické představení mé maličkosti s odkazem na detail. Svatby – Úvodní estetická esej o mém vnímání svatebního dne. Grid (mřížka) s nejlepšími svatebními momenty využívající asymetrické rozvržení. Tlačítka s jednou fotkou jako odkaz na online galerii Pixieset.com – kde budou fotky z celé svatby. Sekce „Jak pracuji“ (3 jednoduché kroky od rezervace po předání), FAQ zaměřené na svatby a výrazné, ale elegantní CTA. Život – Čistá vizuální galerie zaměřená na lifestyle, portréty a momentky. Fotky mají velkorysý prostor (velký padding/margin), aby dýchaly. Možnost filtrování (Cestování / Rodina/ Produkt / Sport ). Cílená výzva k akci pro rezervaci lifestylového focení. Blog – Minimalistický magazínový styl. Mřížka článků (velká úvodní fotka, čistý nadpis, datum). Články budou sloužit jako ukázky celých příběhů z konkrétních focení (např. „Svatba na statku Dobrohošť“). O mně – Osobní příběh, moje filozofie za foťákem, v čem jsem jiný (nestylizuji, zachycuji moment). Velká neformální, ale profesionální fotka. Závěrečné CTA směřující na kontakt. Hlavička (Header): Fixní (sticky) a transparentní, při skrolu jemně zbělá. Logo na levé straně (čistá typografie) – po kliknutí na logo- zpět na úvodní stránku (homepage), navigace uprostřed (Svatby, Život, Blog, O mně), na pravé straně minimalistické tlačítko „Rezervovat termín“. Samozřejmostí je skryté mobilní menu (hamburger). Patička (Footer): Velmi decentní. Minimalistické logo, rychlé odkazy na podstránky, e-mail a telefon, ikony na sociální sítě (Instagram, Facebook) a copyright. Technické a designové požadavky: Paleta barev: Monochromatický základ (bílá, odstíny šedé, hluboká černá) s jedním velmi jemným, tlumeným pastelovým nebo zemitým tónem pro detaily/akcenty. Plně responzivní (na mobilu musí celoobrazovková černobílá fotka vypadat skvěle). Všechny odkazy a tlačítka funkční. Obrázky z Unsplash, které reprezentují špičkovou lifestyle a svatební fotografii (přirozené světlo, emoce, žádný kýč). SEO-ready struktura (H1 pouze pro hlavní sdělení, smysluplné alt texty u fotek). Postav to jako jeden ucelený kód/artefakt pro náhled a export. Po první iteraci vypadal web opravdu dobře. Byl vyplněn stockovými fotkami a textově nebyl daleko od mé představy. Jen běžel lokálně a nebyl propojený s WordPressem pomocí pluginu Nova Mira. Bylo také důležité zkusit eliminovat chyby, které při generování webu mohly nastat (prompt na obrázku výše). Při následném propojení WordPressu s Claudem jsem využil následující prompt pro opětovné narovnání designu. Po vygenerování živého webu byl jeho design od původního návrhu celkem vzdálený a potřeboval další ladění. Prompt:Go through whole website https://fotograf.jstarek.cz/ and correct it base on the Claude design proposal. Make sure to use the native elementor elements and not HTML widgets. Use the container and not inner sections. Also i have disabled the atmoic editor, do not use the atmoic elements. We have installed novamira plugin to help you understand how to use elementor elements better. Correct header (Next Use XPRO to correct the header. This plugin allows you to build a custom header and footer with elementor. Do
Budoucnost práce: LanguageBar – doplněk do prohlížeče pro rychlý překlad a vysvětlení gramatiky
Jan Stárek studuji service design projekty o mně + kontakt Jan Stárek / 08.05.2026 Budoucnost práce: LanguageBar – doplněk do prohlížeče pro rychlý překlad a vysvětlení gramatiky Zpět 1. Co jsem řešil a proč? 2. Čeho jsem chtěl dosáhnout a kam až jsem se dostal? 3. Jaké překážky jsem měl a jak jsem je překonal? 4. Jaké nástroje/frameworky jsem využil a proč? 5. Instalace doplňku 6. Závěrem Co jsem řešil a proč? Učím se německy a chyběl mi nástroj, který by mi pomáhal trénovat aktivní němčinu přímo při prohlížení webu. Protože jsem nenašel žádné řešení, které by odpovídalo mým představám, postavil jsem si ho sám s pomocí modelu Claude. Následující text popisuje, jak jsem k tomuto problému přistupoval, a obsahuje také odkaz na GitHub, kde si lze tento doplněk stáhnout. Při čtení článků v češtině nebo angličtině mi často přicházela na mysl otázka: „Jak by se třeba tato věta nebo slovo řeklo německy?“ Zkopírovat větu do Google Translatoru nebo jiného překladače je poměrně zdlouhavé a stane se, že to člověk pak třeba ani neudělá. Navíc Google Translate mi sice řekne, co dané slovo nebo věta znamená, ale neukáže mi: jaký má slovo rod (der/die/das) jaké je množné číslo příkladovou větu, ve které je slovo použito a hlavně proč je věta postavená tak, jak je Tak jsem si sepsal, co bych chtěl: Označit text v češtině/angličtině → překlad rovnou v dolní části obrazovky, jako titulky, do němčiny (případně jiného zvoleného jazyka) Klik na slovo → rod, člen, množné číslo, příklady Tlačítko „Gramatika“ → krátké vysvětlení v češtině, bez jazykovědného žargonu Aby to celé bylo zdarma Ukázka LanguageBar – rozkliknutí gramatiky 2. Čeho jsem chtěl dosáhnout a kam až jsem se dostal? PDF Title Cíl: mít přímo v prohlížeči nástroj, který mi z české nebo anglické věty rovnou ukáže německý překlad, slovníkový rozbor každého slova a krátké vysvětlení gramatiky – a to bez přepínání záložek, kopírování textu a hledání ve slovníku. Kam jsem se dostal: funkční doplněk, který tohle dělá přesně podle mých představ. Běží v Chrome i Edge, načítá se okamžitě, využívá free Gemini API a funguje napříč libovolnou stránkou na webu. Co mi to reálně přináší Úspora času. Předtím jsem u jednoho článku přepínal mezi záložkami i třeba 5× za pár minut čtení.Teď to jde rychleji – označím, podívám se na lištu, čtu dál. Pocitově je rozdíl mezi „rušivým procesem“ a „plynulým čtením“. Méně frustrace. A to je možná důležitější než čas. Když překlad trvá několik jednotek až desítek sekund, je velká pravděpodobnost, že to vzdám. Tady se překlad zobrazí rovnou ve spodní části stránky, takže u textu zůstanu. Slovní zásoba se buduje pasivně. Tím, že u každého klikaného slova vidím rod, člen a příklad ve větě, postupně si to fixuju, aniž bych to musel cíleně biflovat. Klíčové je, že vidím slovo v živém kontextu, ne v izolovaném seznamu. Gramatika v kontextu. Místo abych si pročítal abstraktní teorii, vidím jí na konkrétní větě, kterou jsem zrovna četl. Pro mě je to zatím nejúčinnější způsob učení gramatiky, protože okamžitě vím, k čemu je to dobré. 3. Jaké překážky jsem měl a jak jsem je překonal? Free tier Gemini je limitovaný Gemini 2.5 Flash Lite má ve free tieru limit 20 requestů za den na klíč. Pokud doplněk volá Gemini při každém překladu, tenhle limit vyčerpáš za pár minut čtení a začneš dostávat hlášku „(429)“. Řešení 1: Doplněk volá Gemini jen na vyžádání. Překlad věty jde přes Google Translate (zdarma, bez limitu), Gemini se aktivuje jen když klikneš na slovo nebo na tlačítko GRAMATIKA. Při běžném čtení se Gemini nevolá vůbec. Řešení 2: Můžeš si vytvořit dva API klíče ze dvou různých Google Cloud projektů a vložit je oba do nastavení. Když první narazí na limit, fallback skočí na druhý. Efektivně máš zdvojený free tier. Gemini odpovídá: „Sloveso je v préteritu, doplněk v dativu…“ Pokud Gemini necháš mluvit volně, často vrátí věty typu „Sloveso je v préteritu, doplněk v dativu…“ – což je sice správně, ale studentovi to moc nepomůže. Řešení: Doplněk má strukturovaný prompt, který Gemini explicitně zakazuje žargon a vyžaduje JSON s předdefinovanými moduly (pozice slovesa, pády a členy, větný rámec, slovní volba). Lišta se zavírala při kliku mimo První verze měla zvyk lištu zavřít při kliku kamkoliv mimo. Když jsem chtěl scrollovat článek, lišta zmizela. Řešení: Lišta zůstává otevřená dokud (a) neklikneš na X, (b) neuteče 20 sekund nečinnosti, nebo (c) neoznačíš nový text. Najetí myší na lištu pauzuje časovač. Zde je ukázka jednotlivých iterací, kterými jsem si během celého procesu prošel: PDF Title 4. Jaké nástroje/frameworky jsem využil a proč? Doplněk byl vytvořený za pomocí jazykového modelu Claude (verze Pro) v mnoha iteracích (cca 20). 5. Instalace doplňku Potřebuješ Chrome nebo Edge prohlížeč Free Gemini API klíč z Google AI Studio – stačí Google účet volitelně druhý API klíč z jiného Google Cloud projektu (Pro navýšení requestů Gemini) Postup instalace Stáhni si zip s doplňkem (klikneš na zelené tlačítko ,,code“ a dále ,,stáhnout ZIP“) Rozbal ho někam, kde ti zůstane (např. Documents/LanguageBar/) Otevři chrome://extensions/ (nebo edge://extensions/) Zapni Vývojářský režim vpravo nahoře Klikni na Načíst rozbalený a vyber rozbalenou složku Klikni na ikonu doplňku → otevři Možnosti Vlož svůj Gemini API klíč Vyber 3 jazyky pro překlad (např. DE, EN, CZ) a jazyk vysvětlení (např. CS pro češtinu) Ulož Defaultně je nastavená klávesová zkratko pro aktivaci/deaktivaci doplňku Ctrl+B, lze změnit v obecném nastavení rozšíření prohlížeče. A to je vše. Označ kdekoliv text a vyzkoušej. Pro více informací a stažení, klikni níže: GitHub LanguageBar extension download 6. Závěrem Doplněk je funkční a používám ho denně. Stále ho ale aktivně testuji a možná přijdou další iterace – třeba automatický export slovíček do Google Sheets nebo krátký kvíz na slova z poslední čtené stránky. Uvidíme… Pokud ho zkusíš, dej vědět, co ti funguje a co ne. Předem díky! starek.ja@gmail.com Linkedin Behance Instagram designed with ❤️ Jan Stárek