Komponenten, Daten, Hooks und Layout hinzugefügt

apps/web/src/App.tsx

@@ -1,38 +1,12 @@
-function App() {
+import Navbar from "./components/layout/Navbar";
-  return (
-    <div className="min-h-screen bg-black text-white p-8">
-      <div className="text-center max-w-2xl mx-auto pt-20">
-        <span className="text-primary text-sm font-medium tracking-widest uppercase">Full-Stack Entwickler</span>
-        <h1 className="text-7xl font-bold mt-4 mb-6 leading-tight">Robert Bretz</h1>
-        <p className="text-xl text-gray-400 max-w-lg mx-auto leading-relaxed">
-          Ich baue moderne Webanwendungen mit React, .NET und Docker. Minimalistisch, schnell und zuverlässig.
-        </p>
-        <div className="mt-10 flex gap-4 justify-center">
-          <a
-            href="#"
-            className="px-6 py-3 bg-primary text-black font-semibold rounded-full hover:opacity-80 transition"
-          >
-            Projekte
-          </a>
-          <a
-            href="#"
-            className="px-6 py-3 border border-gray-700 text-gray-300 font-semibold rounded-full hover:border-primary hover:text-primary transition"
-          >
-            Kontakt
-          </a>
-        </div>
-      </div>
 
-      {/* SCROLL-TEST: Diese Blöcke erzwingen Scrollen */}
+const App = () => {
-      <div className="mt-20 space-y-8 max-w-2xl mx-auto">
+  return (
-        {[...Array(5)].map((_, i) => (
+    <div className="min-h-screen bg-black">
-          <div key={i} className="h-64 bg-gray-900 rounded-xl flex items-center justify-center text-gray-500 text-2xl">
+      <Navbar />
-            Sektion {i + 1}
+      <main>{/* <Hero /> */}</main>
-          </div>
-        ))}
-      </div>
     </div>
   );
-}
+};
 
 export default App;

apps/web/src/components/layout/Footer.tsx

@@ -0,0 +1,5 @@
+const Footer = () => {
+  return <div>Navbar</div>;
+};
+
+export default Footer;

apps/web/src/components/layout/Navbar.tsx

@@ -0,0 +1,5 @@
+const Navbar = () => {
+  return <div>Navbar</div>;
+};
+
+export default Navbar;

apps/web/src/data/projects.ts

@@ -0,0 +1,64 @@
+export const projects = [
+  {
+    id: 1,
+    title: "E-Commerce Platform",
+    description:
+      "Full-stack online shopping application with real-time inventory management, secure payment processing via Stripe, and an admin dashboard for order tracking.",
+    image: "/images/projects/project3.png",
+    category: "Full Stack",
+    technologies: ["React", "Node.js", "MongoDB", "Stripe"],
+    metrics: "40% increase in conversion",
+    demoUrl: "https://timetoprogram.com/projects",
+    githubUrl: "https://github.com",
+  },
+  {
+    id: 2,
+    title: "Task Management Dashboard",
+    description:
+      "Collaborative project management tool with drag-and-drop kanban boards, real-time updates via WebSockets, and team workload analytics.",
+    image: "/images/projects/project6.png",
+    category: "Web Apps",
+    technologies: ["React", "TypeScript", "Firebase", "Tailwind"],
+    metrics: "500+ active users",
+    demoUrl: "https://timetoprogram.com/projects",
+    githubUrl: "https://github.com",
+  },
+  {
+    id: 3,
+    title: "Component Library",
+    description:
+      "Comprehensive React component library with 50+ customizable components, built with accessibility-first principles and full TypeScript support.",
+    image: "/images/projects/project1.png",
+    category: "UI Components",
+    technologies: ["React", "TypeScript", "Storybook", "CSS Modules"],
+    metrics: "1K+ npm downloads",
+    demoUrl: "https://timetoprogram.com",
+    githubUrl: "https://github.com",
+  },
+  {
+    id: 4,
+    title: "Fitness Tracker PWA",
+    description:
+      "Installable Progressive Web App for tracking workouts. Built with React, .NET 8, SQLite, and Docker. Features offline support and automatic CI/CD deployment to a VPS.",
+    image: "/images/projects/fitness.png",
+    category: "Full Stack",
+    technologies: ["React", ".NET 8", "SQLite", "Docker", "Gitea CI/CD"],
+    metrics: "Deployed on own VPS",
+    demoUrl: "http://185.209.229.167",
+    githubUrl: "https://github.com",
+  },
+  {
+    id: 5,
+    title: "Portfolio Website",
+    description:
+      "Minimalist portfolio page with custom Urbanist font, dark theme, and automatic deployment pipeline. You're looking at it right now!",
+    image: "/images/projects/portfolio.png",
+    category: "Frontend",
+    technologies: ["React", "TypeScript", "Tailwind CSS", "Docker"],
+    metrics: "Live in production",
+    demoUrl: "http://185.209.229.167:8081",
+    githubUrl: "https://github.com",
+  },
+];
+
+export const categories = ["All", "Web Apps", "UI Components", "Full Stack"];

apps/web/src/data/testimonials.ts

@@ -0,0 +1,42 @@
+export const testimonials = [
+  {
+    id: 1,
+    name: "Sarah Mitchell",
+    role: "CTO",
+    company: "TechStart Inc.",
+    image: "/images/testimonials/person1.jpg",
+    quote:
+      "Outstanding work on our React application. The performance and scalability exceeded our expectations. Highly recommended!",
+    rating: 5,
+  },
+  {
+    id: 2,
+    name: "Michael Chen",
+    role: "Product Manager",
+    company: "Digital Innovations",
+    image: "/images/testimonials/person2.jpg",
+    quote:
+      "Working together was a game-changer for our project. The UI components were beautifully designed and implemented flawlessly.",
+    rating: 5,
+  },
+  {
+    id: 3,
+    name: "Emily Rodriguez",
+    role: "Founder",
+    company: "StartupHub",
+    image: "/images/testimonials/person3.jpg",
+    quote:
+      "Transformed our vision into reality with a stunning, user-friendly interface. The project was delivered on time and on budget.",
+    rating: 5,
+  },
+  {
+    id: 4,
+    name: "David Thompson",
+    role: "Lead Developer",
+    company: "CodeWorks GmbH",
+    image: "/images/testimonials/person4.jpg",
+    quote:
+      "Exceptional attention to detail and clean code architecture. A pleasure to review and maintain. Would collaborate again anytime.",
+    rating: 5,
+  },
+];

apps/web/src/index.css

@@ -94,4 +94,61 @@
   .hide-scrollbar::-webkit-scrollbar {
     display: none;
   }
+
+  /* Animation Keyframes */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Utility Classes */
+  .animate-fadeIn {
+    animation: fadeIn 0.5s ease-out;
+  }
+
+  .animate-pulse {
+    animation: pulse 3s ease-in-out infinite;
+  }
+
+  .animate-spin-slow {
+    animation: spin 8s linear infinite;
+  }
+
+  /* Line Clamp */
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
 }

apps/web/src/utils/constants.ts

@@ -0,0 +1,38 @@
+export const PERSONAL_INFO = {
+  name: "Robert Bretz",
+  title: "Full-Stack Entwickler & DevOps Enthusiast",
+  email: "robert@robre.de",
+  location: "Deutschland",
+  tagline: "Moderne Webanwendungen mit React, .NET und Docker – minimalistisch, schnell und zuverlässig.",
+  resume: "/resume.pdf",
+  bio: [
+    "Ich bin ein leidenschaftlicher Full-Stack-Entwickler mit Fokus auf React, .NET 8 und Docker. Wenn ich nicht code, experimentiere ich mit CI/CD-Pipelines, self-hosted Infrastruktur auf meinem eigenen VPS und automatisiere alles, was sich automatisieren lässt.",
+    "Meine Projekte reichen von PWAs mit Offline-Support bis zu automatisch deployten Microservices – immer mit dem Ziel, saubere Architektur und DevOps-Best-Practices zu verbinden.",
+  ],
+};
+
+export const SOCIAL_LINKS = {
+  github: "https://github.com",
+  linkedin: "https://linkedin.com",
+  twitter: "https://twitter.com",
+};
+
+export const STATS = [
+  { label: "Jahre Erfahrung", value: "3+" },
+  { label: "Projekte", value: "15+" },
+  { label: "Technologien", value: "12+" },
+];
+
+export const ABOUT_STATS = [
+  { label: "Happy Clients", value: "10+" },
+  { label: "Code Commits", value: "1K+" },
+  { label: "CI/CD Pipelines", value: "5+" },
+];
+
+export const NAV_LINKS = [
+  { id: "about", label: "About" },
+  { id: "skills", label: "Skills" },
+  { id: "projects", label: "Projects" },
+  { id: "services", label: "Services" },
+  { id: "contact", label: "Contact" },
+];