Dokumentácia · verzia 1.0 · 2026

Dizajn
manuál

Portfólio Nicolasa Doboša

Zdroj tokenov src/styles/portfolio.css
Písmá Outfit · Figtree
Snímky 13

Tmavý technický vizuál, modrá akcentová paleta a doplnková peony fialová. Tento manuál zhrňuje základy značky, tokeny, rozloženie sekcií a knižnicu UI prvkov použitých na webe.

Obsah

Štruktúra prezentácie

  1. 01 Titulná strana
  2. 02 Obsah manuálu
  3. 03 Značka a hlas
  4. 04 Farebné tokeny
  5. 05 Typografia
  6. 06 Mriežka a rozostupy
  7. 07 Osadenie sekcií a flow
  8. 08 Navigácia a základné prvky
  9. 09 Karty, projekty, proces
  10. 10 CTA, pätička, cookies, drawer
  11. 11 Pohyb a prístupnosť
  12. 12 Ikony
  13. 13 Záver
Značka

Hlas a princípy

Persona: senior vývojár, spoľahlivosť, dlhodobá prevádzka systémov pre firmy. Tón: priamy, vecný, bez prázdneho marketingu. Vizuál: kontrastné tmavé pozadie, jasná hierarchia, jemné modré žiary namiesto agresívnych efektov.

  • Dôvera cez konzistenciu a čitateľnosť, nie cez výstredné animácie.
  • Texty preferujú biznis výsledok: menej chaosu, menej ručnej práce, jasnejší proces.
  • Farby a typografia sú obmedzené na definované tokeny, bez náhodných hex hodnôt.
  • Ikony jednej rodiny (Phosphor) pre zrozumiteľnosť na tmavom podklade.
Farby

CSS tokeny

--bg#06080f
--bg2#090c19
--surface#0f1528
--surface2#141d36
--card#0d1224
--blue#3a6eff
--blue-light#7aa0ff
--peony#c44dff
--text#dce8ff
--text-2#8fa4cc
--text-3#4a5a7a

Tokeny --blue-glow, --blue-subtle a --peony-dim slúžia na transparentné žiary. --border a --border2 definujú jemné obrysy.

Typografia

Outfit & Figtree

Outfit

Nadpisy, čísla v štatistikách

Hero váha 200

Sekcia váha 300

Karta · 600

Figtree

Telová sadzba, tlačidlá, navigácia

Odstavec 1rem / 1.72. Zvýraznenie pre dôležité slová.

Hero label štýl

Layout

Mriežka a tokeny rozostupov

max-width 1320px · margin auto
padding: --rp / --rt / --rm
Obsah
  • --nav-h = 80px (na mobile 64px), výška hornej lišty.
  • --rp 56px, --rt 28px a --rm 18px: responzívne okraje.
  • Zaoblenia: pill ~50px · karty 20–28px
Stránka

Bloky v poradí

Poradie blokov zhora nadol (triedy v portfolio.css a šablónach).

.nav-wrap: horná lišta (sticky, blur), výška --nav-h
.hero-wrap: úvod, LCP nadpis
.band-wrap a .band: gradientový pás
.section: napr. O mne, nadpis so .section-tag
.fit-section: pre koho je riešenie vhodné
.skills-section a .skill-card
.stats: štatistická mriežka
.process-section: 4-krokový proces spolupráce
.code-showcase: editor/explorer s real-case ukážkami
.projects-section a .proj-card
.cta-wrap a .cta-box: výzva k akcii
footer a .footer-inner
UI

Navigácia a akcie

Logo
Tlačidlá
Tagy
Astro API Prevádzka
Dostupnosť
Dostupný pre spoluprácu
Hamburger
Komponenty

Karty a obsah

Zručnosť

Ukážka skill-card s ikonou a textom.

Ukážka

Bežná projektová karta

Krátky popis projektu s typografiou Figtree.

Detail

Nové bloky v homepage: .fit-section (cieľovka), .process-section (spolupráca) a .code-showcase (reálne backend/frontend use-case súbory).

Featured

Veľká featured karta

Gradient pozadie, peony chip, dvojstĺpcový layout na desktop-e.

12Rokov
48Projektov
∞Kávy
Globálne

CTA, pätička, cookies, modal

Preberme váš projekt

CTA je orientované na bezpečný prvý krok: krátka konzultácia a validácia riešenia.

email@…

cookie-consent__panel

Cookies

Zjednodušená ukážka. Skutočná lišta je fixná v spodnej časti obrazovky.

contact-sheet__panel

Motion

Pohyb a a11y

  • --ease-out a --ease-spring pre interakcie a hover.
  • Triedy .reveal a .reveal-stagger robia scroll reveal cez opacity a transform.
  • Hero animácie šetria LCP, hlavný nadpis preto nie je na začiatku skrytý.
  • Pri prefers-reduced-motion: reduce sú animácie vypnuté a obsah ostáva plne čitateľný.

Kde to dáva zmysel, animujeme len transform a opacity, aby boli zmeny šetrné k výkonu a neprebíjali layout ako animovaný box-shadow na veľkých plochách.

Ikony

Phosphor Icons

Jedna rodina ikon z web balíka, jednotná hrúbka čiar v celom sete a dobrý kontrast na pozadí --bg.

Koniec dokumentu

Ďakujeme za prečítanie

Tento manuál je živý dokument: pri zmene tokenov alebo komponentov ho aktualizuj na rovnakej URL.

Späť na portfólio

Nicolas Doboš · dizajn manuál webu · 2026