Refactor FootBar and global styles for improved layout and visual consistency; simplify social link structure and update styling in Navbar and Section components for a cleaner interface.

app/components/button.tsx

@@ -11,7 +11,7 @@ export default function Button({
     variant = 'primary',
     size = 'md',
 }: ButtonProps) {
-    const baseClasses = "cursor-pointer font-medium rounded-lg transition-all duration-300 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed";
+    const baseClasses = "cursor-pointer font-medium rounded-lg transition-all duration-300 ease-out disabled:opacity-50 disabled:cursor-not-allowed";
 
     const sizeClasses = {
         sm: "px-3 py-1.5 text-sm",

app/components/card.tsx

@@ -13,9 +13,9 @@ export default function Card({
     const baseClasses = "relative overflow-hidden rounded-xl transition-all duration-300 ease-out";
 
     const variantClasses = {
-        default: "bg-gray-900/50 border border-gray-800/50 backdrop-blur-sm",
+        default: "bg-gradient-to-br bg-gradient-to-br from-stone-800 via-stone-900 to-stone-800 border border-stone-700",
-        glass: "bg-white/5 border border-white/10 backdrop-blur-md",
+        glass: "bg-gradient-to-br bg-gradient-to-br from-white/5 via-white/10 to-white/5 border border-white/10 backdrop-blur-md",
-        outlined: "bg-transparent border-2 border-gray-700/50"
+        outlined: "bg-transparent border-2 border-stone-700/50"
     };
 
     return (

app/components/section.tsx

@@ -5,7 +5,7 @@ interface SectionProps {
     title?: string;
     subtitle?: string;
     className?: string;
-    variant?: 'default' | 'hero' | 'feature' | 'minimal';
+    variant?: 'default' | 'hero' | 'minimal';
 }
 
 export default function Section({
@@ -18,9 +18,8 @@ export default function Section({
     const baseClasses = "relative py-16 lg:py-24";
 
     const variantClasses = {
-        default: "bg-gray-900/30",
+        default: "bg-stone-900",
-        hero: "bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900",
+        hero: "bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950",
-        feature: "bg-gray-800/20",
         minimal: "bg-transparent"
     };
 

app/footbar.tsx

@@ -1,14 +1,17 @@
 "use client";
 
 import Link from "next/link";
-import { Button, Badge } from "./components";
 
 export default function FootBar() {
   const currentYear = new Date().getFullYear();
 
   const socialLinks = [
-    { name: "GitHub", href: "https://github.com/GoranSalzmann", icon: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" },
+    {
-    { name: "Email", href: "mailto:karl.mike2002@gmail.com", icon: "M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-.904.732-1.636 1.636-1.636h3.819l6.545 4.91 6.545-4.91h3.819c.904 0 1.636.732 1.636 1.636z" }
+      name: "GitHub", href: "https://github.com/GoranSalzmann"
+    },
+    {
+      name: "Email", href: "mailto:karl.mike2002@gmail.com"
+    }
   ];
 
   const quickLinks = [
@@ -18,8 +21,7 @@ export default function FootBar() {
   ];
 
   return (
-    <footer className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 border-t border-gray-800/50">
+    <footer className="bg-stone-900 p-6">
-      <div className="relative container mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {/* Brand Section */}
           <div className="lg:col-span-2">
@@ -70,9 +72,7 @@ export default function FootBar() {
                   className="flex items-center gap-3 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 group"
                 >
                   <div className="w-8 h-8 bg-gray-800/50 rounded-lg flex items-center justify-center group-hover:bg-blue-500/20 transition-colors duration-300">
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    { /* Icon */ }
-                      <path d={social.icon} />
-                    </svg>
                   </div>
                   <span>{social.name}</span>
                 </a>
@@ -82,24 +82,10 @@ export default function FootBar() {
         </div>
 
         {/* Bottom Section */}
-        <div className="mt-12 pt-8 border-t border-gray-800/50">
+        <div className="mt-6 pt-4 border-t text-sm text-gray-500 flex justify-between">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <p>&copy; {currentYear} Mike Karl. All rights reserved.</p>
-            <div className="text-gray-400 text-sm">
+          <p>Built with Next.js and Tailwind CSS</p>
-              <p>&copy; {currentYear} Mike Karl. All rights reserved.</p>
-              <p className="mt-1">Built with Next.js and Tailwind CSS</p>
-            </div>
-            <div className="flex items-center gap-4">
-              <Button
-                variant="glass"
-                size="sm"
-                onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-              >
-                zum Seitenanfang
-              </Button>
-            </div>
-          </div>
         </div>
-      </div>
     </footer>
   );
 }

app/globals.css

@@ -1,22 +1,5 @@
 @import "tailwindcss";
 
-:root {
-  --background: #0a0a0a;
-  --foreground: #e0e0e0;
-  --surface: #111111;
-  --surface-elevated: #1a1a1a;
-  --border: #333333;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
 * {
   box-sizing: border-box;
 }
@@ -26,60 +9,5 @@ html {
 }
 
 body {
-  background: var(--background) linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
-  color: var(--foreground);
-  font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
-  line-height: 1.6;
   min-height: 100vh;
-  position: relative;
-}
-
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: 
-    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
-  pointer-events: none;
-  z-index: -1;
-}
-
-/* 3D Effects */
-.glass-effect {
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-}
-
-.neon-glow {
-  box-shadow: 
-    0 0 20px rgba(59, 130, 246, 0.3),
-    0 0 40px rgba(59, 130, 246, 0.1);
-}
-
-.text-glow {
-  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
-}
-
-/* Animation utilities */
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-}
-
-@keyframes pulse-glow {
-  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
-  50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); }
-}
-
-.float {
-  animation: float 6s ease-in-out infinite;
-}
-
-.pulse-glow {
-  animation: pulse-glow 2s ease-in-out infinite;
 }

app/layout.tsx

@@ -1,19 +1,8 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Navbar from "./navbar";
 import FootBar from "./footbar";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Welcome - Mike Karl",
   description: "Personal website of Mike Karl",
@@ -27,7 +16,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`bg-stone-950`}
       >
         <Navbar />
         {children}

app/navbar.tsx

@@ -14,7 +14,7 @@ export default function Navbar() {
     ];
 
     return (
-        <nav className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800/30 shadow-xl">
+        <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-gray-800/30 shadow-xl">
             <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="flex items-center justify-between h-16">
                     {/* Logo */}

app/page.tsx

@@ -2,7 +2,7 @@ import { Section, Card, CardHeader, CardContent, CardFooter, Button, Badge } fro
 
 export default function Home() {
   return (
-    <main className="pt-16">
+    <main>
       {/* Hero Section */}
       <Section variant="hero" title="Mike Karl" subtitle="Fullstack Web und Systementwickler">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -82,7 +82,7 @@ export default function Home() {
       </Section>
 
       {/* Skills Section */}
-      <Section variant="feature" title="Erfahrung" subtitle="Technisches Wissen und Skills">
+      <Section title="Erfahrung" subtitle="Technisches Wissen und Skills">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card variant="outlined">
             <CardHeader>
@@ -141,7 +141,7 @@ export default function Home() {
       </Section>
 
       {/* Portfolio Section */}
-      <Section variant="feature" title="Portfolio" subtitle="Einige meiner Projekte (allein und im Team)">
+      <Section title="Portfolio" subtitle="Einige meiner Projekte (allein und im Team)">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <Card
             variant="glass"