Dizajn Systém & CSS

HTML dáva webu význam, ale CSS mu dáva dušu. V tomto projekte nepoužívame žiadne frameworky (ako Bootstrap alebo Tailwind). Píšeme Custom CSS pre maximálnu kontrolu nad vizuálom a výkonom.

Nižšie analyzujeme kľúčové techniky použité pri tvorbe portfólia: od Bento Grid layoutu až po pokročilý Glassmorphism efekt a fixed header navigáciu.

1. Globálny Reset

Každý dobrý CSS súbor začína resetom. Prehliadače majú rôzne predvolené nastavenia, ktoré chceme zjednotiť.

style.css - Reset

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0a0a;
    color: #e0e0e0;
    line-height: 1.6;
}

Box-Sizing: Border-Box - Najdôležitejší riadok v CSS. Zabezpečuje, že padding a border nezväčšujú element nad rámec definovanej šírky.

2. Fixed Header s Z-Index

Header zostáva navrchu pri scrollovaní vďaka position: fixed a vysokému z-index: 1000.

style.css - Fixed Header

header {
    padding: 2rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 10, 0.95);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid #1a1a1a;
    backdrop-filter: blur(10px);
}

main {
    padding-top: 120px; /* Priestor pre fixed header */
}

3. Bento Grid Layout

Srdcom dizajnu je "Bento Grid" – modulárna mriežka. Používame CSS Grid s 12 stĺpcami pre maximálnu flexibilitu.

style.css - Bento Grid

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

section {
    background: #1a1a1a;
    border-radius: 24px;
    padding: 2.5rem;
    border: 1px solid #2a2a2a;
    position: relative;
    z-index: 1; /* Nižší ako header */
}

#hero {
    grid-column: span 6; /* Zaberá polovicu */
    background: #000000; /* Čierny blok */
}

article {
    grid-column: span 4; /* Tretina */
    z-index: 1;
}

4. Glassmorphism Efekt

Pre tlačidlá sme použili moderný "frosted glass" efekt s blur filtrom a viacvrstvovými tieňmi.

style.css - Glass Button

.glass-button {
    all: unset;
    cursor: pointer;
    position: relative;
    z-index: 3;
    
    background: linear-gradient(-75deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.08));
    
    border-radius: 999px;
    
    box-shadow:
        inset 0 0.125em 0.125em rgba(255, 255, 255, 0.1),
        inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.3),
        0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.5),
        0 0 0 1px inset rgba(255, 255, 255, 0.15);
    
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    padding: 0.8rem 2rem;
    color: #ffffff;
    text-transform: uppercase;
}

.glass-button:hover {
    background: linear-gradient(-75deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.12));
    transform: translateY(-2px);
}

5. Responzívny Dizajn

Pre mobilné zariadenia upravujeme grid aby všetky sekcie zaberali plnú šírku.

style.css - Media Queries

@media (max-width: 968px) {
    header {
        padding: 1.5rem 2rem;
        flex-direction: column;
    }

    main {
        padding-top: 140px;
    }

    #hero, #hero-image, #about, #contact, article, #skills {
        grid-column: span 12; /* Plná šírka */
    }
}

HTML SÉMANTICKÉ PRVKY ukážka kódu

Web stránka	Použitie	Ukážka
Ukážka stránky bez použitia semantických značiek	Táto webstránka sa stane ľahou neprehladnou
Ukážka stránky bez použitia semantických značiek	Táto webstránka uľahčuje čitaleľnosť kódu ako aj umožnuje lepšie pochpenie webu crawlerom.