LupusMalus.dev - Portfolio Website

Das Problem

Als Freelancer brauche ich einen professionellen Webauftritt, der meine Skills zeigt. Portfolio-Websites sind oft langweilig und austauschbar - Standard-Templates, statische Inhalte und keine Persönlichkeit.

Die Frage: Wie zeigt man Entwickler-Skills besser als durch eine Website, die selbst alle diese Skills demonstriert?

Die Lösung

Eine hochmoderne Portfolio-Website, die selbst das beste Portfolio-Stück ist:

• 5 wechselbare Themes - Blood Moon, Arctic Wolf, Forest Pack, Neon Hunt, Terminal
• Custom Cursor Effects - Wolf-Pfote, Particle Trail, Magnetische Buttons
• GSAP Scroll-Animationen - Parallax, Reveal-on-Scroll, Horizontal Gallery
• Interaktiver Spielbereich - Cursor-Labor, Filter-Studio, 3D WebGL
• Terminal Mode - Die komplette Website als CLI-Interface (F2)
• KI-Chat "Frag den Wolf" - Interaktive Besucherberatung
• Blog & Newsletter - Content-Marketing integriert

Technische Umsetzung

Bereich	Technologie
Backend	ASP.NET Core 8, C#, Razor Pages
Frontend	Tailwind CSS, Alpine.js
Animationen	GSAP, ScrollTrigger
3D/WebGL	Three.js
E-Mail	Infomaniak SMTP
Deployment	Docker, GitHub Actions, Hetzner VPS
Reverse Proxy	Caddy (automatisches SSL)

Architektur

┌─────────────────┐     ┌─────────────────┐
│   Browser       │────▶│   Caddy         │
│   (Client)      │     │   (HTTPS/SSL)   │
└─────────────────┘     └────────┬────────┘
                                 │
                        ┌────────▼────────┐
                        │  ASP.NET Core   │
                        │  (Docker)       │
                        └────────┬────────┘
                                 │
                   ┌─────────────┴─────────────┐
                   │                           │
          ┌────────▼────────┐         ┌────────▼────────┐
          │  File-based CMS │         │  Infomaniak SMTP│
          │  (Markdown)     │         │   (E-Mails)     │
          └─────────────────┘         └─────────────────┘

Features im Detail

Theme-System

Fünf komplett durchdesignte Themes mit CSS Variables, persistent über LocalStorage. Wechsel per Tastenkürzel oder Theme-Switcher.

Cursor-Effekte

Custom Wolf-Pfoten-Cursor, Particle Trail beim Bewegen, magnetische Buttons und fliehende Buchstaben im Spielbereich.

Responsive Design

Mobile-First Ansatz mit optimierten Touch-Interaktionen. Alle Features funktionieren auf Desktop und Mobile.

CI/CD Pipeline

Automatisches Deployment via GitHub Actions. Push auf main = Live in unter 2 Minuten.

Ergebnis

• Lighthouse Performance Score > 90
• Unique Visitor Engagement durch interaktive Features
• Auto-Deploy via GitHub Actions in < 2 Minuten
• HTTPS automatisch via Caddy/Let's Encrypt