Planung Portfolio-Website¶

Diese Dokumentation beschreibt die Planungsphase meines Web-Portfolios (IMS Kantonsschule am Brühl, Modul Webprogrammierung). Sie basiert auf dem folgenden Tutorial, das ich als Ausgangspunkt verwende und individuell erweitere: YouTube-Tutorial.

Step 1: Betriebswirtschaftliche Überlegungen¶

Ziel:
Mein Portfolio soll zukünftige Arbeitgeber, Praktikumsbetriebe oder mögliche Kunden erreichen. Ich möchte zeigen, was ich kann, und meine Projekte so präsentieren, dass man schnell einen Überblick über meine Fähigkeiten bekommt. Die Seite dient als digitale Visitenkarte und Referenz für Bewerbungen und Praktika.

Zielgruppe: - Personalverantwortliche (HR) - Entwickler:innen und Tech-Leads - Firmen, bei denen ich mich für das IMS-Praktikum 2026 bewerbe - Allfällige Kunden oder Partner, die Interesse an meinen Projekten haben

Inhalte: - Arbeitsproben (z. B. Docker-Swarm-Chatroom, JavaFX-Krypto-Projekt, Volt AI Powerbank-Konzept) - Lebenslauf (CV) auf Anfrage per E‑Mail (kein öffentlicher Link) - Kurze Infos über mich (Profilabschnitt) - Kontaktmöglichkeiten (E-Mail, LinkedIn, GitLab) - Impressum

Wie es zur Stellensuche beiträgt: - Klarer, übersichtlicher Aufbau, damit Recruiter in wenigen Sekunden sehen, was ich mache. - Alle Projekte mit Tech-Stacks und Screenshots. - Gut sichtbarer Kontakt-Button; CV auf Anfrage per E‑Mail.

Hinweis: CV wird auf Anfrage per E‑Mail bereitgestellt (kein öffentlicher Link).
TODO: Kontaktformular oder E-Mail-Button gestalten

Step 2: Wireframe & Sitemap¶

Ich plane mein Portfolio zuerst als Wireframe, um die Struktur zu visualisieren. Das Wireframe zeigt grob, wo Header, Navigation, Projekte, «Über mich», Kontakt und Footer liegen. Ich zeichne das Wireframe mit Hand oder digital (Tablet/Draw.io) und füge es hier als Bild ein.

Struktur: - Header: Logo + Navigation
- Hero-Section: kurzer Text & Call-to-Action (z. B. «Projekte ansehen») - Projekte: Karten mit Beschreibung & Tech-Stack - Über mich: Profil & Lebenslauf - Kontakt: Button oder Formular - Footer: Impressum, Social-Links

Sitemap (Mermaid-Diagramm):

flowchart TD
  A[Home] --> B[Projekte]
  A --> C[Über mich]
  A --> D[Kontakt]
  A --> E[Impressum]
  B --> B1[Projekt 1: Docker-Swarm-Chatroom]
  B --> B2[Projekt 2: Volt AI]
  B --> B3[Projekt 3: JavaFX-Krypto]

Abbildung: Grobes Wireframe für die Portfolio-Seite (Onepager)

Projektstruktur (Ordner & Dateien)¶

Die folgende Grafik zeigt die Projektstruktur meines Repos. Wichtige Teile sind hervorgehoben (Komponenten, Sektionen, Legal‑Seiten, Public‑Assets).

Kerndirectory‑Erklärung (Auszug): - Portfolio-main/Portfolio-main/ – App‑Root (Vite) - src/components/ – wiederverwendbare UI‑Bausteine (z. B. NowMini, CryptoTickerMini, ScrollTopButton) - src/sections/ – Seitensektionen (z. B. Navbar, Hero, About, Skills, Projects, Contact, Footer) - src/i18n.jsx – Internationalisierung (EN/DE) mit I18nProvider - src/settings.jsx – globale Settings (Aurora‑Toggle) mit Persistenz - public/ – statische Assets, Favicon und legal/ mit impressum.html und datenschutz.html - Unternehmen/ – eigenständige Business‑Seite (separates HTML), wird beim Deployment mit ausgeliefert

Step 3: Tutorialauswahl & Technik¶

Ich verwende das oben verlinkte Tutorial als Grundlage: YouTube-Tutorial – und habe darauf eine moderne SPA mit React aufgebaut.

Technik-Entscheidung (final): - Framework/Tooling: React + Vite - Styling: Tailwind CSS (Utility‑First, konsistentes Spacing/Typo) - Struktur: Sections (src/sections/*) + Komponenten (src/components/*) - State/Contexts: I18nProvider (EN/DE), SettingsProvider (Aurora‑Toggle, persistiert)

Art der Seite: - Onepager mit Navigation über Jumplinks (Start, Projekte, Über mich, Kontakt) – schnell und übersichtlich

Eigene Erweiterungen/JS‑Features: - Mehrsprachigkeit (EN/DE) mit persistenter Auswahl - Globaler Aurora‑Hintergrund (abschaltbar über Settings) - Wetter‑Badge (Geolokalisierung mit Fallback, Caching, externer Deep‑Link) - Krypto‑Ticker (WebSocket‑Live‑Daten + Fallback), TradingView‑Links - ScrollTop‑Button mit Progress‑Ring - Performance‑Basics: Lazy Loading, Preconnect/Preload, Caching

Step 4: Designentscheidungen¶

Das Design ist modern, klar und konsequent im Space‑Theme umgesetzt – professionell, aber persönlich.

Farbschema (Space‑Theme): - Primary #030412, Midnight #06091f, Navy #161a31, Indigo #1f1e39, Storm #282b4b - Akzente: Aqua #33c2cc, Mint #57db96, Royal #5c33cc, Lavender #7a57db, Fuchsia #ca2f8c, Orange #cc6033, Sand #d6995c, Coral #ea4884

Typografie: - Headlines: „Funnel Display“ (Google Fonts) - Fliesstext: System‑Sans (für gute Lesbarkeit), großzügiges Zeilen‑ und Absatz‑Spacing

Designprinzipien: - Minimalistisch, klare Typografie - Einheitliche Abstände (Spacing-System) - Gute Lesbarkeit und Kontrast (WCAG AA) - Einheitliche Buttons und Hover-Effekte - Responsive Darstellung für Mobile/Tablet/Desktop

Hinweise: - Gradients, Karten‑Elevations und die Aurora sind dezent; per Setting ist der Effekt abschaltbar (Accessibility). - Badges erscheinen erst ab md, um Mobile nicht zu überladen.

Nächste Schritte¶

Wireframe finalisieren (digital) – erledigt
SPA‑Struktur & Komponenten – erledigt
i18n & Settings – erledigt
Test auf Responsivität und Barrierefreiheit – laufend
CV nur auf Anfrage per E‑Mail – bewusst kein öffentlicher Link – erledigt
Kontakt (Formspree oder Mail‑Button) – offen

Hinweis: Diese Seite dokumentiert nur die Planungsphase. Das eigentliche Portfolio wird auf Basis des Tutorials erstellt und mit Cursor AI erweitert.

JavaScript – Architektur & Funktionsweise (meine Erklärung)¶

Ich setze auf eine klare Komponenten‑Architektur mit React und entkoppel Zustände über Contexts. Kernpunkte:

i18n‑Context: verwaltet aktive Sprache, liefert t(key) für Übersetzungen und persistiert die Auswahl in localStorage.
Settings‑Context: steuert globale UI‑Optionen (z. B. Aurora‑Hintergrund) und speichert sie dauerhaft.
UI‑Badges: Wetter (NowMini) und Krypto (CryptoTickerMini) laden Daten asynchron, cachen lokal und aktualisieren sich regelmäßig bzw. live per WebSocket.
Navigation: Navbar kapselt Language‑Toggle und Aurora‑Switch; Badges werden nur ab mittleren Displays angezeigt (nicht überladen).
Micro‑Interaction: ScrollTopButton zeigt den Scroll‑Fortschritt als kreisförmigen Indikator und scrollt smooth nach oben.

i18n (Mehrsprachigkeit)¶

Ich verwende einen eigenen Provider. Das t()–Lookup zerlegt den Key per Punktnotation, damit alle Texte zentral übersetzbar sind. Die Auswahl (EN/DE) wird gespeichert.

```210:229:Portfolio-main/Portfolio-main/src/i18n.jsx export function I18nProvider({ children }) { // Always start in English; user can switch via settings (persisted after change) const [lang, setLang] = useState("en");

const value = useMemo(() => { const dict = translations[lang] || translations.en; const t = (key) => key.split(".").reduce((acc, k) => (acc && acc[k] != null ? acc[k] : null), dict) ?? key; const heroWords = dict.hero.words; return { lang, setLang: (l) => { setLang(l); try { localStorage.setItem("lang", l); } catch {}

### Settings (Aurora‑Toggle, persistiert)
Beim Laden lese ich den gespeicherten Schalter und stelle ihn wieder her. Änderungen schreibe ich zurück – so bleibt die Entscheidung auch nach Reload erhalten.

```8:26:Portfolio-main/Portfolio-main/src/settings.jsx
export function SettingsProvider({ children }) {
  const [auroraEnabled, setAuroraEnabled] = useState(false);

  useEffect(() => {
    try {
      const raw = localStorage.getItem("auroraEnabled");
      if (raw != null) setAuroraEnabled(raw === "true");
    } catch {}
  }, []);

  const value = useMemo(() => ({
    auroraEnabled,
    setAuroraEnabled: (v) => {
      setAuroraEnabled(v);
      try {
        localStorage.setItem("auroraEnabled", String(v));
      } catch {}

NowMini (Wetter‑Badge)¶

Ablauf: - Versuche Browser‑Geolocation (Timeout ~3 s), sonst IP‑Fallback, sonst feste CH‑Koordinaten. - Hole Wetter (Open‑Meteo) und Ortsnamen (Reverse‑Geocoding). Cache das Ergebnis 10 Minuten. - Aktualisiere im Hintergrund in Intervallen und bei Tab‑Rückkehr. Klick öffnet Windy mit Live‑Koordinaten (erst Geolocation, dann Fallback‑URL).

``82:101:Portfolio-main/Portfolio-main/src/components/NowMini.jsx const fetchRemote = async () => { const { lat, lon } = await getCoords(); try { const [w, place] = await Promise.all([ fetch(https://api.open-meteo.com/v1/forecast?latitude=\({lat}&longitude=\)&current_weather=true&timezone=auto`).then((r) => r.json()), reverseGeo(lat, lon), ]); const v = { city: place.city, country: place.country, temp: w?.current_weather?.temperature ?? null, code: w?.current_weather?.weathercode ?? 2, lat, lon, };

Link‑Handling bei Klick (erst Live‑Position, dann Fallback auf zuletzt bekannte Koordinaten):

```131:160:Portfolio-main/Portfolio-main/src/components/NowMini.jsx
  const handleOpen = (e) => {
    e.preventDefault();
    try {
      if (!navigator.geolocation) {
        window.open(linkHref, "_blank", "noopener,noreferrer");
        return;
      }
      let completed = false;
      const fallbackTimer = setTimeout(() => {
        if (!completed) {
          completed = true;
          window.open(linkHref, "_blank", "noopener,noreferrer");
        }
      }, 2500);

CryptoTickerMini (BTC/ETH/SOL)¶

Strategie: - Initialer Snapshot über CoinGecko (ohne API‑Key) – liefert Preis und 24h‑Change. - Live‑Updates per Binance‑WebSocket (Sekundentakt) – ich mappe Symbole (btcusdt, ethusdt, solusdt) auf State. - 1‑Min‑Cache als Fallback und sanfte Reconnect‑Logik bei Verbindungsabbrüchen. - Klick auf jeden Coin öffnet direkt TradingView (BTCUSD/ETHUSD/SOLUSD).

```73:91:Portfolio-main/Portfolio-main/src/components/CryptoTickerMini.jsx const connectWS = () => { try { wsRef.current?.close(); } catch {} const ws = new WebSocket(WS_URL); wsRef.current = ws; ws.onmessage = (evt) => { try { const msg = JSON.parse(evt.data); const d = msg?.data; if (!d || !d.s) return; const sym = String(d.s).toLowerCase(); // e.g., btcusdt const price = Number(d.c); const percent = Number(d.P); setData((prev) => { const next = { ...prev }; if (sym === "btcusdt") { next.btc = price; next.btcCh = percent; } if (sym === "ethusdt") { next.eth = price; next.ethCh = percent; } if (sym === "solusdt") { next.sol = price; next.solCh = percent; } return next; });

### Navbar (Language‑ und Aurora‑Toggle)
Die Navbar bündelt Navigation und Settings. Badges (Wetter/Krypto) sind bewusst nur ab `sm/md` sichtbar, um mobile UIs schlank zu halten.

```58:66:Portfolio-main/Portfolio-main/src/sections/Navbar.jsx
      <nav className="hidden sm:flex items-center gap-4">
        <Navigation t={t} />
            <NowMini />
            <CryptoTickerMini />
        <div className="relative">
          <details>
            <summary className="list-none cursor-pointer p-2 rounded hover:text-white text-neutral-300">⚙️</summary>

ScrollTopButton (Progress‑Ring)¶

Ich berechne den Fortschritt als Verhältnis scrollTop / (Dokumenthöhe − Viewport) und zeichne ihn als Ring via SVG strokeDasharray. Ab ~200 px Scroll wird der Button eingeblendet, Klick scrollt smooth nach oben.

```8:15:Portfolio-main/Portfolio-main/src/components/ScrollTopButton.jsx useEffect(() => { const onScroll = () => { const scrollTop = window.scrollY || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const p = docHeight > 0 ? Math.min(1, Math.max(0, scrollTop / docHeight)) : 0; setProgress(p); setVisible(scrollTop > 200); };

Damit sind die wichtigsten JS‑Teile nachvollziehbar dokumentiert: Datenflüsse, Caching/Fehlerfälle, Live‑Updates und UI‑Reaktionen sind je Komponente erläutert und mit Code‑Referenzen belegt. Ich pflege diese Doku bei weiteren Änderungen synchron mit.
---

## Testplan & Qualitätssicherung

- Responsivität: Mobile/Tablet/Desktop (Chrome/Edge/Firefox) manuell geprüft
- Lighthouse: Performance, Best Practices, SEO (Ziel: grün/gelb, abhängig von Bildgrößen)
- Accessibility: Kontraste, Fokuszustände, reduzierte Bewegungen (`prefers-reduced-motion`), Aurora abschaltbar
- Broken‑Link‑Check: Interne Anker, Impressum, Datenschutz, externe Links (TradingView, Windy)
- API/WS‑Robustheit: Fallbacks (IP‑Geolocation, CoinGecko) bei Netzwerkproblemen

---

## Ergänzung: Aktuelle Umsetzung des Portfolios (React/Vite/Tailwind)

Ich habe die geplante Idee produktiv als moderne SPA umgesetzt. Hier dokumentiere ich die konkrete Technik, meine Eigenleistungen über das Tutorial hinaus und nenne Code‑Belege.

### Tutorialauswahl – Begründung (warum korrekt für mich)
- Klare, modulare Struktur als Basis, die ich mit Komponenten weiterdenke.
- Gute Einführung in moderne Layouts/Typo; ideal, um mein eigenes Design abzuleiten.
- Ich konnte darauf aufsetzen und Features wie Mehrsprachigkeit, Live‑Badges und Settings selbst ergänzen.

### Technik-Entscheidung (final)
- Framework/Tooling: React + Vite, Styling mit Tailwind CSS.
- State & Kontexte: eigener `I18nProvider` (EN/DE), `SettingsProvider` (Aurora‑Toggle, persistiert).
- Architektur: Sections (`src/sections/*`) und wiederverwendbare UI‑Komponenten (`src/components/*`).
- Performance & UX: Lazy Images, `prefers-reduced-motion`, Preconnect/Preload, saubere Caching‑Strategien.

### Eigenständige Leistungen über das Tutorial hinaus
- Internationalisierung EN/DE für Navbar, About, Skills, Projects, Contact, Footer.
- Globaler Aurora‑Hintergrund als optionaler Effekt (per Settings toggelbar, default OFF).
- Wetter‑Badge NowMini: Geolokalisierung mit IP‑Fallback, Reverse‑Geocoding, 10‑Min‑Cache, Deep‑Link zu Windy mit Live‑Koordinaten und Sichtbarkeits‑Refresh.
- Krypto‑Ticker: BTC/ETH/SOL mit Binance WebSocket (Sekunden‑Updates), 24h‑Change farblich, Fallback CoinGecko (ohne Key), Klick öffnet TradingView.
- Navbar‑Settings: Sprache umschalten, Aurora an/aus; barrierearme Interaktionen.
- Saubere Hover‑Previews bei Projekten; dezente Micro‑Interactions mit Framer Motion.

### Designentscheidungen (nachvollziehbar)
- Space‑Theme Palette (Primary `#030412`, Midnight `#06091f`, Navy `#161a31`, Indigo `#1f1e39`, Storm `#282b4b`; Akzente Lavender/Royal/Aqua/Mint …).
- Typografie: „Funnel Display“ für Headlines, klare Lesbarkeit, großzügiges Spacing.
- Layout: Container `max-w-7xl`, fixe blur‑Navbar, Karten mit soft Gradients und leichter Elevation.
- Accessibility: Aurora abschaltbar, reduzierte Bewegungen berücksichtigt, gute Kontraste.
- Responsivität: Mobile‑First; Badges erst ab `md` sichtbar; Navigation klappt auf Burger um.

### Code‑Belege (Ausschnitte)

App‑Komposition, globales Aurora + Settings:

```25:34:Portfolio-main/Portfolio-main/src/App.jsx
const App = () => {
  return (
    <SettingsProvider>
      <GlobalAurora />
      <div className="container mx-auto max-w-7xl">
          <Navbar />
          <Hero />
          <About />
          <QuoteCard />
          <Skills />

i18n‑Provider (EN/DE) mit persistierter Sprache:

Wetter‑Badge (Geo‑Fallback, Caching, Windy‑Link):

```126:135:Portfolio-main/Portfolio-main/src/components/NowMini.jsx
  const linkHref =
    typeof state.lat === "number" && typeof state.lon === "number"
      ? `https://www.windy.com/?${state.lat.toFixed(4)},${state.lon.toFixed(4)},5`
      : "https://www.windy.com/";

  const handleOpen = (e) => {
    e.preventDefault();
    try {
      if (!navigator.geolocation) {
        window.open(linkHref, "_blank", "noopener,noreferrer");

Krypto‑Ticker (WS + Fallback + TradingView):

```129:141:Portfolio-main/Portfolio-main/src/components/CryptoTickerMini.jsx return (

₿ {data.btc == null ? "—" : formatPrice(data.btc)}

Navbar mit Language‑Toggle und Aurora‑Switch:

```58:66:Portfolio-main/Portfolio-main/src/sections/Navbar.jsx
      <nav className="hidden sm:flex items-center gap-4">
        <Navigation t={t} />
            <NowMini />
            <CryptoTickerMini />
        <div className="relative">
          <details>
            <summary className="list-none cursor-pointer p-2 rounded hover:text-white text-neutral-300">⚙️</summary>

Qualität, Wartbarkeit, Nachweise¶

Lint‑Checks in Cursor: keine offenen Fehler in den geänderten Dateien.
Caching/Timeouts dokumentiert (Wetter 10 min, Krypto 1 min, Visibility‑Refresh, WS‑Reconnect).
Deployment: Vite‑Dev‑Server lokal, statischer Build für Hosting; Favicon mit Cache‑Bust.
Screenshots werden im Abgabe‑PDF ergänzt (Navbar, Projects, Contact, Settings).

Nächste Schritte (konkret)¶

CV auf Anfrage per E‑Mail; Contact‑Form finalisieren (Formspree).
Bilder ≤ 1 MB, Formate/Größen weiter optimieren.
Optionale Micro‑Animationen (Section‑Reveal, Button‑Ripple) barrierefrei ergänzen.

Funktionscheck & Linkprüfung (Stand jetzt)¶

Navigation: About, Skills, Projects, Contact springen sauber per Anchor, Scroll‑Padding ist gesetzt (fixed Navbar).
Navbar‑Scroll‑Spy: aktiver Abschnitt wird automatisch hervorgehoben.
Wetter‑Badge: lädt Standort, zeigt Temperatur/Emoji; Klick öffnet Windy mit Live‑Koordinaten.
Krypto‑Ticker: BTC/ETH/SOL live per WebSocket; Klick öffnet TradingView (USD‑Paare).
Country‑Badge (About): Land, Währung, Flagge; klickbar zu RestCountries.
Projekte:
InnotorTech: https://innotortech.ch
Business Website: /Unternehmen/index.html (siehe Deployment‑Hinweis unten)
Games & Simulations: markiert als Coming Soon
Footer: Impressum → /legal/impressum.html, Datenschutz → /legal/datenschutz.html – beide vorhanden.
Favicon/Assets: aus public/ referenziert, funktionieren nach Build.

Hinweis: Der CV wird aus Datenschutzgründen nicht öffentlich bereitgestellt; er kann auf Anfrage per E‑Mail angefordert werden.

Deployment bei Hosttech (statisch) – so funktioniert es¶

Die Seite ist ein statischer Vite‑Build. Vorgehen:

1) Build lokal erstellen

npm ci
npm run build
# Ergebnis: Portfolio-main/Portfolio-main/dist

2) Upload auf Hosttech Webspace - Verbinde dich per SFTP/FTP ins Webroot (z. B. public_html/). - Lade den kompletten Inhalt aus dist/ direkt in das Webroot. - Zusätzlich: Lege den Ordner Unternehmen/ neben die index.html ins Webroot, damit der Link /Unternehmen/index.html funktioniert. - Alternativ kannst du den Ordner vorab in Portfolio-main/Portfolio-main/public/Unternehmen/ ablegen und neu bauen; dann wird er automatisch mitkopiert.

3) Prüfen - Rufe die Domain auf, z. B. https://deine-domain.tld/. - Teste Links: Impressum, Datenschutz, Business Website, Externals (TradingView, Windy).

Hinweise/Beachten: - CORS: Wetter/Krypto verwenden öffentliche APIs (HTTPS). Der Binance‑WebSocket (wss://) funktioniert in HTTPS‑Umgebungen. Falls ein Unternehmens‑Firewall WS blockt, wird weiterhin der CoinGecko‑Snapshot genutzt. - HEAD‑Pings (Projekt‑Status) laufen no-cors–best‑effort – d. h. grün zeigt „erreichbar“, rot bei Timeout/Fehler. Das ist rein informativ. - Basis‑Pfad: Vite‑base ist / (Standard). Falls du in ein Unterverzeichnis veröffentlichst, muss vite.config.js base: '/unterordner/' erhalten und neu gebaut werden. - Cache: Bei Asset‑Updates ggf. Query‑Version (z. B. ?v=1) verwenden; Favicon wurde bereits so eingebunden.

Optional – Unternehmen in Build integrieren: - Kopiere den lokalen Ordner C:\Coding\Ganzes_Hosting\Unternehmen\ nach Portfolio-main/Portfolio-main/public/Unternehmen/ und starte npm run build erneut. Danach ist der Pfad /Unternehmen/index.html im Build enthalten und muss nicht separat hochgeladen werden.

Rechtliches & Datenschutz¶

Impressum: vorhanden unter /legal/impressum.html
Datenschutz: vorhanden unter /legal/datenschutz.html
Cookies/Tracking: keine Third‑Party‑Cookies; localStorage nur für Sprache und Aurora‑Setting
Externe Dienste: Open‑Meteo (Wetter, HTTPS), Binance‑WS und CoinGecko (Krypto), Windy/TradingView als ausgehende Links
CV/Personendaten: CV wird nicht öffentlich gehostet; Bereitstellung ausschließlich auf Anfrage per E‑Mail

Risiken & Massnahmen¶

Externe APIs/WS instabil → Fallbacks (Timeouts, Snapshots), defensives Error‑Handling
Zu starke visuelle Effekte → Aurora standardmäßig OFF, Accessibility‑Schalter vorhanden
Performance/Bildgrößen → Lazy‑Loading, weitere Bildoptimierung geplant (≤ 1 MB)

KI‑Unterstützung (Erstellung & Verbesserung)¶

Text & Micro‑Copy: Hero‑Texte, Projektbeschreibungen und Tooltips wurden mit KI‑Vorschlägen (Cursor AI) sprachlich geschärft und zielgruppengerecht formuliert (HR/Tech‑Leserschaft).
Architektur‑Stützen: Strukturierung der src/components/* und src/sections/* inkl. Benennungen, Props‑Schnittstellen und Aufteilung in klar abgegrenzte Zuständigkeiten.
Internationalisierung: Überarbeitung des I18nProvider (Lookup‑Strategie per Punktnotation, Persistenz) sowie Konsolidierung von Schlüssel‑Namen.
Settings/State‑Persistenz: Review des SettingsProvider (Aurora‑Toggle) hinsichtlich Robustheit und localStorage‑Zugriff (try/catch, stringifizierte Booleans).
Wetter‑Badge: Verbesserung der Caching‑Strategie (TTL), Fallback‑Reihenfolge (Geo → IP → Default) und sauberes Link‑Handling mit Timeout‑Fallback.
Krypto‑Ticker: Reconnect‑Logik und defensives Parsen von WS‑Events, Mapping der Symbole und sanfte UI‑Updates (Vermeidung unnötiger Re‑Renders).
Performance & A11y: Hinweise zu Lazy‑Loading, Preconnect/Preload, prefers-reduced-motion, Kontrast/Focus‑States und Sichtbarkeitslogik (Badges erst ab md).

Ich habe KI‑Vorschläge nie blind übernommen, sondern geprüft, vereinfacht und auf die Projektziele angepasst.

Herausforderungen beim Upload & bei der Abgabe (Framework‑Komplexität)¶

Abgabe‑Erwartung vs. Umsetzung: Während die Abgabe teils eher «klassisches» HTML/CSS erwartete, habe ich bewusst ein größeres SPA‑Setup (React + Vite + Tailwind) gewählt. Das erhöhte die Komplexität (Build‑Schritt, Routen, Asset‑Pfade) und führte zu Mehraufwand bei Struktur/Deployment.
Hosttech‑Deployment: Anfangs lagen Dateien nicht direkt im Webroot oder der dist/‑Inhalt wurde nicht korrekt hochgeladen. Lösung: kompletten Inhalt aus Portfolio-main/Portfolio-main/dist ins Webroot kopieren.
Unterordner Unternehmen/: Zunächst fehlte der Ordner im Live‑Build (404 bei /Unternehmen/index.html). Lösung: Entweder separat neben index.html hochladen oder in public/Unternehmen/ integrieren und neu bauen.
Basis‑Pfad: Bei Hosting in Unterordnern ist vite.config.js mit base: '/unterordner/' nötig. Ohne diese Einstellung treten gebrochene Asset‑Pfade auf.
Netzwerk/CORS/Firewall: Binance‑WebSocket kann in restriktiven Netzen blockiert sein. Fallback über CoinGecko‑Snapshot stellt Funktionalität sicher, dennoch können Live‑Daten ausbleiben.

Fazit: Die Wahl eines größeren Framework‑Stacks brachte Lernkurve und Upload‑Hürden mit sich, liefert aber eine skalierbare, wartbare Codebasis mit klaren Komponenten und guter UX.

Abgleich mit Bewertungskriterien (Kurzüberblick)¶

Ziel/Zielgruppe/Mehrwert: definiert (HR, Tech‑Leads, Praktikumsbetriebe) inkl. Nutzenargumentation
Inhalte/Navigationsstruktur: Wireframe, Sitemap und klare Sektionen
Technik/Architektur: React + Vite + Tailwind, i18n/Settings‑Contexts, Komponenten/Sections
Design/Typografie/Responsivität/Accessibility: Space‑Theme, „Funnel Display“, Mobile‑First, WCAG‑Aspekte
Umsetzung/Codequalität: modulare Struktur, Caching/Timeouts dokumentiert, linter‑sauber
Test/Deployment: Testplan, Hosttech‑Deployment dokumentiert
Rechtliches/Datenschutz: Impressum/DS vorhanden; externe Dienste transparent

Reflexion (kurz)¶

Das Tutorial bot eine gute Basis; die eigenständigen Erweiterungen (i18n, Settings, Badges, WS‑Daten) zeigen praxisnahe Fähigkeiten in Architektur, Performance und UX. Nächste sinnvolle Schritte: CV‑Link, Kontakt finalisieren, Bilder weiter optimieren und optionale barrierearme Micro‑Animationen ergänzen.

Zeitplan (Soll/Ist) & Aufwand (kurz)¶

Planung & Konzeption: Soll 4–6 h → Ist ~5 h (Wireframe, Sitemap, Kriterienabgleich)
Umsetzung (SPA, Komponenten, i18n, Settings): Soll 14–18 h → Ist ~20 h (Mehrarbeit durch Framework‑Komplexität)
Badges (Wetter/Krypto) & Performance/A11y: Soll 4–6 h → Ist ~5 h
Deployment/Upload‑Themen (Hosttech, Unterordner, base): Soll 1–2 h → Ist ~3 h
Tests & Doku: Soll 3–4 h → Ist ~4 h

Begründung Abweichungen: SPA‑Stack (React/Vite/Tailwind) erforderte zusätzliche Build/Asset‑Pfad‑Klärungen und Upload‑Korrekturen; Live‑Daten‑Badges brauchten Fallback‑Logik.

Quellen & Credits¶

Tutorial‑Basis: YouTube‑Tutorial (siehe Link oben)
Frameworks & Doku: React, Vite, Tailwind CSS (offizielle Dokumentationen)
Fonts: Google Fonts – „Funnel Display“
Wetter: Open‑Meteo API (HTTPS), Geocoding/Reverse‑Geocoding gemäß jeweiliger Dienste
Krypto: Binance WebSocket (wss), CoinGecko (Snapshot‑Fallback)
Externe Ziele: TradingView (Symbol‑Seiten), Windy (Karten‑Deep‑Links)
Tools & Hilfen: Cursor AI (Vorschläge/Reviews zu Architektur, Copy, Fallbacks, A11y)