# RETRO TERMINAL 90s REDESIGN — Plan transformacji orzech.me ## Wizja Strona ma wyglądać jak terminal/konsola z lat 90., z klimatem wczesnego internetu — ale pod spodem ma być w pełni nowoczesna, responsywna, z dopracowanymi animacjami. Efekt "wow" dla nostalgików, a jednocześnie perfekcyjna obsługa mobile. --- ## 1. TYPOGRAFIA I FONTY **Obecny stan:** Poppins (nowoczesny sans-serif) **Propozycja:** - Font główny: **VT323** (Google Fonts) — pikselowy monospace, idealny terminal look - Font alternatywny: **Press Start 2P** do nagłówków/tytułu (opcjonalnie) - Fallback: `"Courier New", monospace` - Efekt "typewriter" — tekst tytułu wpisywany litera po literze z migającym kursorem `█` --- ## 2. KOLORYSTYKA **Obecny stan:** Subtelne gradienty blue/gray, jasny/ciemny motyw **Propozycja — paleta retro terminala:** - **Tło:** Czarne (`#0a0a0a`) z subtlenym CRT scanline overlay - **Tekst główny:** Zielony fosforyzujący (`#00ff41`) — klasyczny "Matrix green" - **Tekst alternatywny:** Amber/pomarańczowy (`#ffb000`) — styl IBM terminal - **Akcenty:** Cyan (`#00ffff`), Magenta (`#ff00ff`), Żółty (`#ffff00`) - **Linki:** Cyan z podkreśleniem (jak w Lynx browser) - **Hover:** Inwersja kolorów (czarny tekst na zielonym tle) — klasyczny terminal selection **Motywy (zamiast light/dark):** 1. **Green Phosphor** — zielony na czarnym (domyślny) 2. **Amber Monitor** — pomarańczowy na czarnym 3. **Hacker Mode** — Matrix-style z "deszczem kodu" 4. **90s Web** — kolorowy jak GeoCities (teal tło, żółty tekst, gifowe separatory) --- ## 3. EFEKTY CRT / TERMINAL **Propozycja efektów wizualnych:** - **CRT Scanlines** — półprzezroczyste linie co 2-4px nałożone na cały ekran - **CRT Curvature** — lekkie zaokrąglenie krawędzi ekranu (CSS border-radius + box-shadow) - **Screen flicker** — subtelne migotanie luminancji (0.97-1.0 opacity, losowe interwały) - **Chromatic aberration** — lekkie przesunięcie RGB na krawędziach tekstu (text-shadow) - **Glow effect** — zielone/amber świecenie tekstu (text-shadow z blur) - **Vignette** — przyciemnienie rogów ekranu - **"Boot sequence"** — na wejście strona "bootuje się" jak stary komputer: ``` BIOS v1.0 ... OK RAM check: 640K ... OK Loading ORZECH.ME v2.0 ... C:\> _ ``` --- ## 4. LAYOUT I STRUKTURA **Obecny stan:** Centrowany card z przyciskami **Propozycja:** - Cała strona wygląda jak okno terminala/konsoli - **Ramka "okna"** — nagłówek z paskiem tytułowym: ``` ┌─────────────────────────────────────────┐ │ ORZECH.ME Terminal v2.0 [-][□][×] │ ├─────────────────────────────────────────┤ │ C:\ORZECH> dir │ │ │ │ PAULINA.EXE PAWEL.EXE │ │ BLOG.LNK KONTAKT.DAT │ │ │ │ C:\ORZECH> _ │ └─────────────────────────────────────────┘ ``` - Na mobile: pełnoekranowy terminal, bez ramki (oszczędność miejsca) - Scrollowalny "output" z komendami **Interaktywny element:** - Pseudo-komendowa linia — użytkownik "widzi" jak komendy się wpisują - Nawigacja jako komendy: `> open blog.lnk`, `> mail pawel@orzech.me` --- ## 5. ANIMACJE I EFEKTY ### 5a. Boot Sequence (na wejściu) - Tekst pojawia się linia po linii jak w terminalu - Efekt typewriter (litera po literze) na kluczowych komendach - Migający kursor `█` podczas "wpisywania" - Progressbar ASCII: `[████████░░░░░░] 56%` - Po "załadowaniu" — reveal głównej treści ### 5b. Animacje ciągłe - **Migający kursor** — klasyczne `█` co 530ms - **Scanlines** — ruch scanline overlay (subtle) - **Matrix rain** — w tle (opcjonalnie, w trybie "Hacker Mode") - **Glitch effect** — losowe krótkie "glitche" tekstu co kilka sekund - **Pulsujący glow** tekstu ### 5c. Animacje interakcji - **Hover na linkach:** Inwersja kolorów z krótkim "glitch" - **Click effect:** Krótki flash ekranu - **Przejścia między motywami:** "Static/snow" TV effect na 300ms - **Zmiana języka:** Tekst "się kasuje" i wpisuje na nowo ### 5d. Easter eggs - Konami code → specjalny efekt - Kliknięcie na 🌰 → ASCII art orzecha w terminalu - Sekretna komenda w terminalu --- ## 6. MOBILE **Propozycja:** - Terminal zajmuje 100% ekranu (full-bleed) - Ramka okna uproszczona do paska tytułowego - Font size dobrany do czytelności na mobile (min 14px monospace) - Touch-friendly: duże obszary klikalne (min 44x44px) - Swipe do zmiany motywów - Boot sequence skrócona na mobile (szybsza) - Scanlines i CRT effects zoptymalizowane (mniejsza intensywność na mobile, GPU-friendly) - Landscape mode: dwa "okna terminala" obok siebie --- ## 7. ELEMENTY 90s WEB **Propozycja dodatkowych elementów retro:** - **Visitor counter:** `You are visitor #001337` (ASCII art counter) - **"Under construction" GIF** przy Stronie Pauliny (klasyczny żółto-czarny) - **ASCII art** w tle lub jako separatory: ``` _ _ _ _ _ / \ / \ / \ / \ / \ ( O | R | Z | E | C | H ) \_/ \_/ \_/ \_/ \_/ ``` - **Marquee effect** — scrollujący tekst u góry/dołu (CSS animation, nie ``) - **Blinking text** na ważnych elementach (z umiarem) - **"Best viewed in Netscape Navigator"** badge w footerze - **Guestbook** odwołanie (link do Mastodon jako "nowoczesna księga gości") - **Hit counter** stylizowany na retro - **Separator** z ASCII: `═══════════════════════` --- ## 8. DŹWIĘK (opcjonalnie) - Klik klawiatury przy typewriter effect (Web Audio API, domyślnie wyłączony) - "Dial-up modem" sound na boot sequence (opcjonalnie) - Mute/unmute przycisk stylizowany na retro --- ## 9. ARCHITEKTURA TECHNICZNA **Podejście:** Zostajemy przy single-file HTML (zero build tools) — to pasuje do retro vibe. - Tailwind CSS (CDN) — zostaje jako utility framework - Vanilla JS — żadnych frameworków, czysty retro - CSS custom properties do motywów - `@keyframes` dla wszystkich animacji - `requestAnimationFrame` dla płynnych animacji - Intersection Observer do lazy animations - `prefers-reduced-motion` — wyłączenie animacji dla użytkowników z ustawieniem systemowym - CSS `will-change` i `transform: translateZ(0)` dla GPU acceleration --- ## 10. PLAN PRACY — AGENTY Implementacja rozdzielona na niezależnych agentów pracujących równolegle: ### Agent 1: CRT & Visual Effects - Scanlines overlay (CSS) - CRT curvature effect - Vignette effect - Screen flicker - Chromatic aberration (text-shadow) - Glow effects ### Agent 2: Boot Sequence & Typewriter - Animacja bootowania - Typewriter effect z kursorem - ASCII progress bar - Sekwencja "ładowania" systemu - Reveal głównej treści po boot ### Agent 3: Layout & Terminal Window - Ramka okna terminala (ASCII borders) - Pasek tytułowy z przyciskami - Responsywny layout terminala - Pseudo-command line - Nawigacja jako komendy - Mobile adaptacja ### Agent 4: Kolorystyka & Motywy - System motywów (Green/Amber/Hacker/90s Web) - CSS custom properties - Przejścia między motywami (static/snow effect) - Przycisk przełączania motywów (retro style) ### Agent 5: Retro Elements & Easter Eggs - Visitor counter - "Under construction" element - ASCII art - Marquee text - "Best viewed in..." badge - Konami code easter egg - 🌰 ASCII art easter egg ### Agent 6: Mobile & Performance - Mobile-first responsive adjustments - Touch interactions (swipe motywy) - Performance optimization (will-change, GPU) - `prefers-reduced-motion` support - Testowanie na różnych rozmiarach ekranu - Landscape mode support --- ## 11. KOLEJNOŚĆ IMPLEMENTACJI 1. **Faza 1:** Layout terminala + fonty + kolorystyka bazowa (Agent 3 + Agent 4) 2. **Faza 2:** CRT effects + boot sequence (Agent 1 + Agent 2) 3. **Faza 3:** Retro elements + easter eggs (Agent 5) 4. **Faza 4:** Mobile optimization + performance (Agent 6) 5. **Faza 5:** Polish & QA — wszystko dopięte na ostatni guzik --- ## 12. CO ZACHOWUJEMY - Dwujęzyczność PL/EN - Linki do emaili, bloga, strony Pauliny - Feed z Mastodona - Zegar z emoji - Orzeszek 🌰 w footerze - Link do GitHub - SEO meta tags - Accessibility (ARIA, semantic HTML) - localStorage dla preferencji --- ## PODSUMOWANIE Transformacja z eleganckiego minimalizmu w retro-terminalowy klimat lat 90. z: - 4 motywami kolorystycznymi (zamiast light/dark) - Efektami CRT (scanlines, curvature, flicker, glow) - Boot sequence na wejściu - Typewriter animations - Interaktywną pseudo-konsolą - Elementami retro web (visitor counter, under construction, marquee) - Easter eggs - Perfekcyjną obsługą mobile - Pełną dostępnością i wydajnością