jf-homepage

Portfolio & About-Seite für Jerrit (jf) — gebaut mit Vite, TypeScript, GSAP/ScrollTrigger und Lenis.

Stack

• Vite — Dev-Server & Build
• TypeScript — Typsicherheit
• GSAP + ScrollTrigger — Scroll-Animationen, Reveals, Skill-Bars
• Lenis — Smooth Scrolling
• Reines CSS (Custom Properties, kein Framework)

Features

• Animierter Hero (Intro-Timeline, Gradient-Background)
• Reveal-on-Scroll für alle Sektionen
• Skill-Bars mit Scroll-Trigger
• Custom Cursor + Scroll-Progress-Bar
• Fixe Nav mit Blur-on-Scroll
• Responsive (Desktop / Tablet / Mobile)
• prefers-reduced-motion respektiert

Struktur

jf-homepage/
├── index.html          # Markup, Sektionen
├── src/
│   ├── style.css       # komplettes Styling
│   └── main.ts         # Animationen, Lenis, Cursor, Nav
├── package.json
└── tsconfig.json

Local dev

npm install
npm run dev      # http://localhost:5173

Build

npm run build    # tsc + vite build -> dist/
npm run preview  # dist/ lokal serven

Deploy

Statisches dist/ — hostbar auf jedem Static-Host (z. B. Gitea Pages, Netlify, Cloudflare Pages, nginx).

Git / Gitea

• Remote: https://git.jfritzsche.de/jf/jf-homepage.git (HTTPS + Token; SSH Port 22 ist von außen durch Cloudflare blockiert)
• Branches: main (prod/Release), dev (laufende Arbeit, hier wird entwickelt)
  • Feature-Branches: feature/<x>, Bugfixes: fix/<x>, Wartung: chore/<x>
  • Workflow: feature/fix -> dev -> (merge) main bei Release
• Commits: Conventional Commits (feat:, fix:, docs:, chore:)
• CI/CD (Gitea Actions, runs-on: ubuntu-latest):
  • Push auf dev -> docker-build.yml: baut das Image nur zur Validierung (kein Push)
  • Push auf main -> docker.yml: baut UND pusht zu Gitea Packages (git.jfritzsche.de/jf/jf-homepage). Registry-Login via Repo-Secret REGISTRY_TOKEN.

ToDo / Ideen

• Echte Projekt-Cases statt Platzhalter
• Dark/Light-Toggle
• Gitea-Actions-Deploy zu Gitea Pages (optional)