Create a professional portfolio website for Joachim Hummel

Implement a React-Vite portfolio website for Joachim Hummel, featuring sections for bio, competencies, projects, and contact information. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 93e1822d-6468-4db0-9e37-4f1f19334ba5 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e678fe28-87ab-4437-945b-7a15e872a292/6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805/MG2yXVH Replit-Helium-Checkpoint-Created: true
2026-05-15 15:27:21 +00:00
parent 758e23e905
commit 67f0e12a21
82 changed files with 7373 additions and 0 deletions
--- a/artifacts/joachim-portfolio/src/index.css
+++ b/artifacts/joachim-portfolio/src/index.css
@@ -0,0 +1,105 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-card-border: hsl(var(--card-border));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-popover-border: hsl(var(--popover-border));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --font-sans: 'Space Grotesk', 'Inter', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Menlo', monospace;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  /* Dark technical industrial theme as default */
+  --background: 224 25% 6%;
+  --foreground: 210 40% 98%;
+
+  --card: 224 25% 8%;
+  --card-foreground: 210 40% 98%;
+  --card-border: 224 25% 12%;
+
+  --popover: 224 25% 6%;
+  --popover-foreground: 210 40% 98%;
+  --popover-border: 224 25% 12%;
+
+  --primary: 186 100% 42%; /* Cyan */
+  --primary-foreground: 224 25% 6%;
+
+  --secondary: 224 25% 12%;
+  --secondary-foreground: 210 40% 98%;
+
+  --muted: 224 25% 14%;
+  --muted-foreground: 215 20% 65%;
+
+  --accent: 224 25% 14%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 224 25% 15%;
+  --input: 224 25% 15%;
+  --ring: 186 100% 42%;
+
+  --radius: 0.25rem;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply font-sans antialiased bg-background text-foreground selection:bg-primary/30;
+  }
+}
+
+.glow-text {
+  text-shadow: 0 0 20px hsl(var(--primary) / 0.5);
+}
+
+.glow-box {
+  box-shadow: 0 0 30px hsl(var(--primary) / 0.1);
+}
+
+/* Grid background pattern */
+.bg-grid-pattern {
+  background-size: 40px 40px;
+  background-image: 
+    linear-gradient(to right, hsl(var(--border) / 0.3) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(var(--border) / 0.3) 1px, transparent 1px);
+}