VS Code
HTML · CSS · JavaScript
Hlavní prostředí, ve kterém Web vznikal a kde jsem ho průběžně ladila
← Zpět na projekty
✦ Case study
Portfolio
Tohle portfolio je trochu víc než jen moje vizitka.
Je to projekt, na kterém jsem si chtěla vyzkoušet,
co všechno dokážu vytvořit sama.
Začalo to návrhem a postupně z toho vznikal celý web. Od grafiky a struktury přes HTML,
CSS a JavaScript, až po responzivní verzi, animace, dvojjazyčnost
a nekonečné hledání toho, proč sakra zase něco nefunguje. 😃
AI mi u toho dělala hlavně parťáka na konzultace a řešení problémů.
Tohle je tedy case study nejen o výsledném webu, ale hlavně o tom, jak vznikal.
✦ O projektu
Web, který mluví o mně za mě
Tohle portfolio jsem chtěla vytvořitjako místo, kde si moji práci může kdokoli projít bez zbytečných složitostí. Přehledně, rychle a na jakémkoli zařízení. Místo hotové šablony jsem se rozhodla postavit si web sama, abych rozuměla každému řádku a aby struktura dávala smysl, pokud bude potřeba změn, nebo oprav.
Nešlo mi jen o to „mít web“. Chtěla jsem si projít celým procesem tvorby od návrhu po nasazení. Bylo pro mě důležité pochopit, jak spolu HTML, CSS a JavaScript fungují, a naučit se web udržovat a rozšiřovat vlastními silami.
Zvolila jsem statické HTML, CSS a JS bez těžkých frameworků, prostě naprosté základy, abych se mohla učit a nemusela jen bezmyšlenkovitě kopírovat kódy. Díky tomu můžu kontrolovat každou část, web je přehledný a snadno se hostuje.
Každá ze stránek je malým krokem dopředu: nová sekce, čistší kód, lepší responzivita. Právě to postupné zlepšování a učení je tím, co mě na tomhle projektu nejvíc těší. Mám zkrátka radost z nových zkušenností.
✦ Časová osa
Cesta projektem
Na začátku to byl jen nápad, taková moje touha se učit,
z něj potom vznikla
první stránka a já věděla, že tohle bude zábava, která mě jen tak nepustí.
Začala jsem objevovat kouzlo programování, strukturování, hledání chyb...
Měla jsem dobrý pocit pokaždé,
když stránka trochu povyrostla.
Pomalu přicházela i naprostá orientace v kódu. K tomu moje odvěká radost z grafiky a designu,
psaní. Zkrátka se to propojilo, nápad za nápadem to rostlo a je to tady.
Myslím, že nechci být jako profíci, kteří mají všchno bezchybné a sterilní, chci se projektům
věnovat, dělat je originální a mít z nich radost.
✦ Workflow
Jak web vznikal?
Vývoj tvořily navazující kroky – od prvního nápadu a struktury až
po nasazení a průběžné vylepšování. Každý nový krok mě posunul blíž k výslednému webu,
kterému rozumím a dokážu ho sama upravovat a rozvíjet.
Web jsem nestavěla celý najednou. Vznikal postupně, stránku po stránce.
Každou jsem nejdřív rozchodila, potom ladila a postupně napojovala na společný systém.
01 Nápad
→
02 Návrh rozložení
→
03 Vizuální styl
→
04 HTML struktura
→
05 CSS a stylování
→
06 Responzivita
→
07 JavaScript a interakce
→
08 CZ/EN
→
09 Testování a ladění
→
10 Publikace
→
11 Další vývoj
✦ Nástroje
Nástroje, které mi pomohly k cíli
Tenhle web nevznikl lusknutím prstu. Pečlivě jsem ho stavěla, stránku po stránce, a cestou jsem se učila věci, které jsem na začátku vůbec neuměla. Některé nástroje mi pomáhaly tvořit a přemýšlet, jiné mi zase pomáhaly pochopit, proč něco nefunguje.
Claude
Kódování, debugging a vysvětlování struktury, základy orientace v kódech, brainstorming
GPT
konzultace, brainstorming, vysvětlování, hledání chyb a práce s vizuálními nápady
Kling
tvorba / úprava AI videí a animovaných vizuálů
GIMP
Úpravy grafiky, masky, assety, finální úpravy designu
Git a GitHub
Místo, kde mám uložený zdrojový kód projektů a kam můžu ukázat, jak jsou jednotlivé weby postavené
Netlify
Tady portfolio skutečně běží. Změny můžu průběžně nasazovat a kontrolovat přímo na živém webu
✦ Design
Vizuální koncept
Designově mi šlo o web, který vystihne mojí radost z grafiky a tak trochu i moji osobnost.
Uznávám, že nejde o čistý a sterilně profesionální koncept, je to takový můj malý projekt, který má být přehledný a zároveň zábavný.
Typografie
- Font Manrope
- Jasná hierarchie
- Čitelnost na mobilu
Barvy
- Tmavý základ
- Fialová a cyan akcenty
- Jednotná barevná paleta
Rozvržení
- Přehlednost
- Opakující se komponenty
- Konzistence napříč stránkami
Animace
- Jemné přechody
- Hover efekty
- Nenápadné detaily
✦ Dovednosti
Co mi projekt dal
Web design
- Struktura webu
- Vizuální hierarchie
- Práce s komponentami
Problem solving
- Hledání chyb
- Testování řešení
- Interativní ladění
Responzivní myšlení
- Desktop → tablet → mobil
- Práce s různými rozměry
- Testování v praxi
AI-assisted workflow
- Práce s AI konzultanty
- Formulování problémů
- Ověřování a úprava řešení
Samostatná tvorba
- Od nápadu k funkčnímu webu
- Rozhodování o řešení
- Práce krok za krokem
Dvojjazyčnost
- Jeden společný obsah
- Přepínání jazyka bez načtení stránky
- Uložení volby návštěvníka
✦ Galerie
Screenshoty webu
✦ Výsledek
Živé portfolio
Výsledkem je funkční, responzivní a dvojjazyčný web, který sama spravuji a dál rozvíjím. Právě si ho prohlížíš.
×
![]()