diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 0f99119..62c3ab7 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -1,38 +1,12 @@ -function App() { - return ( -
-
- Full-Stack Entwickler -

Robert Bretz

-

- Ich baue moderne Webanwendungen mit React, .NET und Docker. Minimalistisch, schnell und zuverlässig. -

-
- - Projekte - - - Kontakt - -
-
+import Navbar from "./components/layout/Navbar"; - {/* SCROLL-TEST: Diese Blöcke erzwingen Scrollen */} -
- {[...Array(5)].map((_, i) => ( -
- Sektion {i + 1} -
- ))} -
+const App = () => { + return ( +
+ +
{/* */}
); -} +}; export default App; diff --git a/apps/web/src/components/FadeIn.tsx b/apps/web/src/components/FadeIn.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/web/src/components/backgrounds/RadialGradientBackground.tsx b/apps/web/src/components/backgrounds/RadialGradientBackground.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/web/src/components/layout/Footer.tsx b/apps/web/src/components/layout/Footer.tsx new file mode 100644 index 0000000..6e4db3f --- /dev/null +++ b/apps/web/src/components/layout/Footer.tsx @@ -0,0 +1,5 @@ +const Footer = () => { + return
Navbar
; +}; + +export default Footer; diff --git a/apps/web/src/components/layout/Navbar.tsx b/apps/web/src/components/layout/Navbar.tsx new file mode 100644 index 0000000..37b10ab --- /dev/null +++ b/apps/web/src/components/layout/Navbar.tsx @@ -0,0 +1,5 @@ +const Navbar = () => { + return
Navbar
; +}; + +export default Navbar; diff --git a/apps/web/src/components/sections/Hero.tsx b/apps/web/src/components/sections/Hero.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/web/src/components/ui/Card.tsx b/apps/web/src/components/ui/Card.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/web/src/components/ui/ProjectCard.tsx b/apps/web/src/components/ui/ProjectCard.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/web/src/data/projects.ts b/apps/web/src/data/projects.ts new file mode 100644 index 0000000..12a758f --- /dev/null +++ b/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"]; diff --git a/apps/web/src/data/testimonials.ts b/apps/web/src/data/testimonials.ts new file mode 100644 index 0000000..73cf75b --- /dev/null +++ b/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, + }, +]; diff --git a/apps/web/src/hooks/useScrollReveal.ts b/apps/web/src/hooks/useScrollReveal.ts new file mode 100644 index 0000000..e69de29 diff --git a/apps/web/src/hooks/useScrollSpy.ts b/apps/web/src/hooks/useScrollSpy.ts new file mode 100644 index 0000000..e69de29 diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 9a64d74..7aa7872 100644 --- a/apps/web/src/index.css +++ b/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; + } } diff --git a/apps/web/src/utils/constants.ts b/apps/web/src/utils/constants.ts new file mode 100644 index 0000000..b78714d --- /dev/null +++ b/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" }, +];