# Vontor CZ

Welcome to **Vontor CZ**!

## frontend Folder Overview

The `frontend` folder contains all code and assets for the client-side React application. Its structure typically includes:

- **src/**  
  Tady se ukladají věci, které uživateli se nepředavají přímo spíš takové stavební kostky.
  - **api/**
    TypeScript/JS soubory které se starají o API a o JWT tokeny.
    Čistě pracují s backendem
  - **context/**  
    Kontext si načte data které mu předáš a můžeš si je předávat mezi komponenty rychleji.
  - **hooks/**
    Pracuje s API a formátují to do výstupu který potřebujeme.

  - **components/**  
    Konktrétní komponenty které se vykreslují na stránce. 
    
    Už využívají už hooky a contexty pro vykreslení informaci bez složite logiky (ať je komponenta hezky čistá a né moc obsáhla).

  - **features/**
    Nejsou to celé stránky, ale hotové komponenty.

    Obsahuje všechny komponenty plus její hooky, API, state a utils potřebné pro jednu konkrétní funkcionalitu aplikace. (použijí se jenom jednou)
    
    Features zajišťují modularitu a přehlednost aplikace.

    Příklad: komponenta košík, která zahrnuje API volání, state management a UI komponenty.

  ---

  - **layouts/**
    Tohle je jenom komponenta, která načte další komponenty, ale používá se jako layout kde jsou například navigace footer a ostatní se opakující prvky stránky, ale hlavní obsah ještě není součastí! Ten se načte skrz <outlet/> v pages.
  - **pages/**  
    Tady se jde do finále tady se vkládají samostatné komponenty a tvoří se už hlavní obsah stránky a vkládají se komponenty a tvoří se logika mezi ně.
  - **routes/**
    tady se ukládají routy které například zabraňuji načtení stránky nepříhlášeným uživatelům nebo jenom pro ty s určitou roli/oprávněním... tyhle route komponenty se pak využívají v 

  ---

  - **assets/**  
    Obrázky, fonty, a ostatní statické soubory.

    
  ---


  - **App.tsx**  
    Root komponenta pro aplikaci, kde se nastavují routy pro jednotlivé stránky.
    Pozor nemyslím ty routy ze složky routes/ ... to jsou jenom obaly pro konktrétní routy pro jednotlivé stránky.
  - **main.tsx**
    Vstupní bod pro načítaní aplikace (načíta se první komponenta App.jsx)

  ---

    - **utils/**
    Sběrné místo pro pomocné funkce, které nejsou přímo komponenty nebo hooky, ale jsou znovupoužitelné napříč aplikací.

  ---

  - **index.css**  
    globální styly
  - **App.css**
    obsahuje stylovaní layoutu, navigace, footer, error okna atd. takové věci které zůstavjí vždy stejně
  
- **public/**  
  Složka public obsahuje statické soubory dostupné přímo přes URL (např. index.html, favicon, obrázky), které React přímo nereenderuje ani neoptimalizuje.

- **package.json**  
  něco jak requirements.txt v pythonu

- **vite.config.js / vite.config.ts**  
  Vite konfigurace pro building a serving frontend aplikace.

- **Dockerfile**
  Konfigurace pro Docker

## Getting Started :3

1. **Instalace balíčku (bere z package.json):**
   ```sh
   npm install
   ```

3. **Start dev server:**
   ```sh
   npm run dev
   ```

4. **Build pro produkci(finále):**
   ```sh
   npm run build
   ```

5. **Preview production build:**
   ```sh
   npm run preview
   ```

  ## Portfolio site structure (vontor.cz)

  New top-level navigation and sections were added to build a modern portfolio:

  - components/
    - navbar/SiteNav.tsx – sticky top navigation with dropdown
    - hero/HeroCarousel.tsx – YouTube carousel hero with overlay text
    - portfolio/PortfolioGrid.tsx – grid of projects with modal detail
    - trading/TradingGraph.tsx – placeholder for Trading212 live graph
    - donate/DonationShop.tsx – symbolic donation tiers styled as product cards
    - skills/SkillsSection.tsx – categorized skill lists
    - hosting/HostingSecuritySection.tsx – hosting & protection info panel
    - common/Modal.tsx – reusable accessible modal

  - pages/
    - home/home.tsx – composes all sections on the homepage
    - portfolio/PortfolioPage.tsx
    - skills/SkillsPage.tsx
    - hosting/HostingSecurityPage.tsx
    - donate/DonateShopPage.tsx
    - contact/ContactPage.tsx

  - layouts/
    - HomeLayout.tsx – wraps pages with SiteNav and Footer

  Routing (src/App.tsx):
  - "/" → Home (all sections)
  - "/portfolio"
  - "/skills"
  - "/hosting-security"
  - "/donate"
  - "/contact"

  Styling:
  - The global palette lives in `src/index.css` as CSS variables and Tailwind is available via `@import "tailwindcss"`.
  - Reusable helpers: `.glass`, `.glow`, `.section`, `.container`, `.divider`.

  Assets:
  - Public project images are in `public/portfolio/` and used by `PortfolioGrid`.

## Creating a New React Project with Vite

If you want to start a new project:

```sh
npm create vite@latest
# Choose 'react' or 'react-ts' for TypeScript
cd your-project
npm install
npm run dev
```