3D Portfolio-Website

Originales Portfolio / Interaktives 3D-Web / Archiviertes Showcase

Kurz-Zusammenfassung: Eine vollständig responsive persönliche Portfolio-Website mit einer beeindruckenden 3D-Landingcard, fortgeschrittenen UI-Effekten und interaktiven Elementen. Von Grund auf mit modernen Webtechnologien gebaut, um technisches und gestalterisches Können zu demonstrieren.

Entwicklungsdauer: Juni 2025

Hinweis(e):

• Haftungsausschluss für Hosting/Code-Verfügbarkeit: Archiviert als Showcase-Projekt. Quellcode auf Anfrage erhältlich. Das aktualisierte, optimierte Portfolio ist jetzt live unter archivedportfolio.franzdomingo.tech.
• Kontakt für weitere Infos oder Demos: Kontaktieren Sie Franz Phillip G. Domingo über franzdomingo.tech.
• Navigationshinweis: Diese Seite dokumentiert den ursprünglichen Build; das aktuelle Portfolio ist über den oben genannten Link erreichbar.

---

Funktionen

• 3D-Landingcard mit Echtzeit-Rotation und Glassmorphismus
• MDX-gesteuerter Blog und Projektinhalte
• Responsives Mobile-First-Layout
• Theme-Umschalter mit Persistenz
• Fortgeschrittenes Modalsystem mit Morphing-Übergängen
• Framer Motion-gesteuerte Animationen und Seitenübergänge
• Befehlspalette (CMD+K) zur Navigation
• Ziehbare Dock-UI mit localStorage-Persistenz
• Magnetische Buttons mit animierten Effekten
• Live-Uhr und eingebetteter KI-Chatbot
• Glassmorphismus, Neon-Akzente, animierte Hintergründe
• System für benutzerdefinierte Cursor
• PWA-fähig, SEO-optimiert, Accessibility-First
• Benutzerdefinierte Error Boundaries

---

Meine Beiträge (Rolle & Verantwortlichkeiten)

Design & Engineering:

• Design und Implementierung der gesamten UI/UX, 3D-Effekte und interaktiven Funktionen.

Animation & Interaktivität:

• Erstellung benutzerdefinierter Framer Motion-Primitive, magnetischer Buttons, ziehbarem Dock und Befehlspalette.

Performance & Barrierefreiheit:

• Optimierung der Animationen, SEO-Anpassungen und Sicherstellung der Barrierefreiheit auf allen Geräten.

Inhaltsebene:

• Integration von MDX für flexibles Erstellen von Blog- und Projektbeiträgen.

Technische Dokumentation:

• Dokumentation der Architektur, Herausforderungen und technischen Highlights für zukünftige Referenz.

---

Herausforderungen

• MDX + App Router Integration: Manuelle Einrichtung für Content-Loader, dynamisches Routing und Hydrierung in Next.js 15.

• Framer Motion Performance-Tuning: Balance zwischen flüssigen Animationen und den GPU/CPU-Limits der Geräte.

• iOS/Safari Rendering-Bugs: Bedingte Workarounds für GPU-Textur-Artefakte in Safari.

• Browserübergreifende Layout-Konsistenz: Sicherstellung, dass fortgeschrittene Effekte überall konsistent gerendert werden.

• Performance-Kompromisse: Schwere Animationen führten zu hohem Ressourcenverbrauch, was zu einem Redesign für Einfachheit und Barrierefreiheit anregte.

---

Projektarchitektur

• Architekturstil: Modulares React-Komponentensystem, atomares CSS, MDX-Inhaltsebene.

• Komponentenorganisation:

  • ui/, core/, motion-primitives/: Wiederverwendbare, atomare Komponenten
  • MDX-Inhalte für Blog und Projekte
  • Klare Routenführung unter app/projects/, app/blog/, dynamische [slug]-Routen

• Zustandsverwaltung: Kontextbasierte Theme-Verwaltung, localStorage für Dock-/Cursor-Status

• Integrationen: Framer Motion, Radix UI, Tailwind CSS, cmdk, embla-carousel, lucide-react

---

Demo-Vorschau

• Screenshots/Video: Diese Seite dokumentiert den ursprünglichen Build. Für eine Live-Demo besuchen Sie archivedportfolio.franzdomingo.tech. Das aktuelle Portfolio ist ebenfalls unter archivedportfolio.franzdomingo.tech verfügbar.

• Plattform-Ansichten: Web (responsiv, Mobile-First)

• Gezeigte Funktionalität:

  • 3D-Landingcard und interaktive UI
  • Animierte Übergänge, Modale und Hintergründe
  • Befehlspalette, Dock, magnetische Buttons
  • MDX-gesteuerte Inhalte, Live-Uhr, eingebetteter Chatbot

• Demo-Anleitung: Besuchen Sie archivedportfolio.franzdomingo.tech, um die archivierte Demo anzusehen. Das neueste Portfolio finden Sie unter portfolio.franzdomingo.tech.

---

Entwicklungsressourcen (Optional)

• Leitfäden/Dokumentation:
  • Dokumentationen zu Framer Motion, Tailwind CSS, Radix UI, MDX

---

Wenn Sie weitere Details benötigen oder die Codebasis sehen möchten, wenden Sie sich bitte direkt an den Autor.

---