Back to Projects

fdrechsler.de

Professional personal website built entirely using AI-assisted development through the AI Development Framework. This project served as the first real-world validation of the framework, demonstrating how coordinated AI agents can deliver production-ready systems efficiently. Built with Next.js 15.x, containerized with Docker, and deployed with automated CI/CD. Features include comprehensive analytics (Umami, Google Analytics 4), dark mode support, SEO optimizations with JSON-LD structured data, and full German legal compliance. The project progressed from initial setup to a fully deployed production website through a structured workflow of research, implementation, testing, and review phases, with human oversight at critical checkpoints. Key achievements include comprehensive documentation (ADRs, deployment guides), infrastructure as code, and successful framework bug discovery and resolution.

Active
Next.jsTypeScriptDockerCI/CDProduction
Project Timeline

Start Date

October 24, 2025

End Date

Ongoing

Duration

4+ months

Key Metrics

Tickets Created

65

Tickets Completed

54

AI Sessions

25

Development Journey
Technical Stack
Next.js 15React 19TypeScriptTailwind CSSDockerGitHub ActionsUmami AnalyticsGoogle Analytics 4Self-Hosted (Netcup VPS)MDX
Achievements
  • ✅ Production deployment completed (2024-11-08)
  • ✅ Full CI/CD pipeline with automated deployment
  • ✅ Docker-based infrastructure on self-hosted VPS
  • ✅ Modern responsive design with dark mode support
  • ✅ Comprehensive analytics (Umami + GA4) with public dashboard
  • ✅ SEO optimization with JSON-LD structured data
  • ✅ German legal compliance (Impressum & Datenschutz)
  • ✅ SSL encryption with Let's Encrypt
  • ✅ WCAG 2.2 AA accessibility compliance
  • ✅ Optimized Core Web Vitals (LCP, INP, CLS)
  • ✅ Security hardening (Docker + CI/CD scanning)
  • ✅ FAQ sections with FAQPage schema
  • ✅ Successfully validated AI Development Framework in production
  • ✅ Blog infrastructure with MDX support
  • ✅ RSS feed for blog content syndication
  • ✅ Homepage restructured into landing page with subpages
  • ✅ CardCroc trilingual landing page (DE/EN/ES)
  • ✅ LLM-optimized content restructuring
  • ✅ Updated branding with FD monogram logo
  • ✅ SoftwareApplication structured data for CardCroc
  • ✅ SSL certificate automation fix
Repository Information

This project follows a multi-repository architecture with specialized repositories for different concerns.

Meta Repository

Private Repository

Private

Frontend

Private Repository

Private

Backend

Private Repository

Private

Infrastructure

Private Repository

Private

AI Conversations

Private Repository

Private