upgrade

frontend/REACT.md

@@ -0,0 +1,153 @@
+# 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
+```