Refactor code structure for improved readability and maintainability

2026-05-10 21:30:31 +02:00
parent 965d2a41dd
commit 52bf3b96b1
8 changed files with 1216 additions and 800 deletions
@@ -1,9 +1,12 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { ArrowDown } from 'lucide-react';
-import Button from '../../../shared/components/Button';
+import { motion } from "framer-motion";
+import { ArrowDown } from "lucide-react";
+import React from "react";
+import Button from "../../../shared/components/Button";
+import { useScrollToSection } from "../../../shared/hooks/useScrollToSection";

 export const HeroSection: React.FC = () => {
+  const handleScrollToSection = useScrollToSection();
+
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
@@ -33,14 +36,6 @@ export const HeroSection: React.FC = () => {
    },
  };

-  const borderVariants = {
-    hidden: { pathLength: 0 },
-    visible: {
-      pathLength: 1,
-      transition: { duration: 2, delay: 0.6 },
-    },
-  };
-
  return (
    <section
      id="home"
@@ -52,14 +47,9 @@ export const HeroSection: React.FC = () => {
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl"></div>
      </div>

-      <motion.div
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-        className="max-w-7xl mx-auto w-full"
-      >
+      <motion.div variants={containerVariants} initial="hidden" animate="visible" className="max-w-7xl mx-auto w-full">
        {/* Grid Layout: Text left, Image right on desktop, stacked on mobile */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 lg:items-start">
          {/* Text Content */}
          <div className="text-center lg:text-left">
            {/* Badge */}
@@ -73,7 +63,10 @@ export const HeroSection: React.FC = () => {
            </motion.div>

            {/* Main Heading */}
-            <motion.h1 variants={itemVariants} className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+            <motion.h1
+              variants={itemVariants}
+              className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+            >
              <span className="text-white">Robert Bretz</span>
              <br />
              <span className="bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
@@ -82,39 +75,34 @@ export const HeroSection: React.FC = () => {
            </motion.h1>

            {/* Subtitle */}
-            <motion.p
-              variants={itemVariants}
-              className="text-gray-300 text-lg sm:text-xl mb-8"
-            >
+            <motion.p variants={itemVariants} className="text-gray-300 text-lg sm:text-xl mb-8">
              Ich entwickle moderne Anwendungen mit React, TypeScript, Tailwind, .NET, NestJS und sauberer Architektur.
-              Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren Backend-Systemen.
+              Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren
+              Backend-Systemen.
            </motion.p>

            {/* Stats */}
-            <motion.div
-              variants={itemVariants}
-              className="grid grid-cols-3 gap-3 sm:gap-6 mb-12"
-            >
+            <motion.div variants={itemVariants} className="grid grid-cols-3 gap-3 sm:gap-6 mb-12">
              <motion.div
                whileHover={{ scale: 1.05, y: -4 }}
-                transition={{ type: 'spring', stiffness: 300 }}
-                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+                transition={{ type: "spring", stiffness: 300 }}
+                className="border-2 border-green-500/60 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
              >
                <div className="text-2xl sm:text-3xl font-bold text-green-500">4+</div>
                <div className="text-gray-400 text-xs sm:text-sm">Jahre Erfahrung</div>
              </motion.div>
              <motion.div
                whileHover={{ scale: 1.05, y: -4 }}
-                transition={{ type: 'spring', stiffness: 300 }}
-                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+                transition={{ type: "spring", stiffness: 300 }}
+                className="border-2 border-green-500/60 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
              >
                <div className="text-2xl sm:text-3xl font-bold text-green-500">30+</div>
                <div className="text-gray-400 text-xs sm:text-sm">Projekte umgesetzt</div>
              </motion.div>
              <motion.div
                whileHover={{ scale: 1.05, y: -4 }}
-                transition={{ type: 'spring', stiffness: 300 }}
-                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
+                transition={{ type: "spring", stiffness: 300 }}
+                className="border-2 border-green-500/60 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
              >
                <div className="text-2xl sm:text-3xl font-bold text-green-500">99%</div>
                <div className="text-gray-400 text-xs sm:text-sm">Performance-Fokus</div>
@@ -122,7 +110,10 @@ export const HeroSection: React.FC = () => {
            </motion.div>

            {/* CTA Buttons */}
-            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12">
+            <motion.div
+              variants={itemVariants}
+              className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"
+            >
              <Button variant="primary" size="lg">
                Lass uns sprechen
              </Button>
@@ -133,38 +124,28 @@ export const HeroSection: React.FC = () => {
          </div>

          {/* Profile Image - Right side on desktop, centered on mobile */}
-          <motion.div
-            variants={imageVariants}
-            className="flex justify-center lg:justify-end"
-          >
+          <motion.div variants={imageVariants} className="flex justify-center lg:justify-end">
            <div className="relative w-56 h-56 sm:w-72 sm:h-72 lg:w-96 lg:h-96">
-              {/* Animated green borders on sides */}
+              {/* Animated circular green border */}
              <svg
-                className="absolute inset-0 w-full h-full pointer-events-none"
-                viewBox="0 0 224 224"
+                className="absolute inset-0 w-full h-full pointer-events-none -scale-x-100"
+                viewBox="0 0 400 400"
                xmlns="http://www.w3.org/2000/svg"
              >
-                <motion.line
-                  x1="10"
-                  y1="0"
-                  x2="10"
-                  y2="224"
+                <motion.circle
+                  cx="200"
+                  cy="200"
+                  r="200"
+                  fill="none"
                  stroke="#22c55e"
-                  strokeWidth="3"
-                  variants={borderVariants}
-                  initial="hidden"
-                  animate="visible"
-                />
-                <motion.line
-                  x1="214"
-                  y1="0"
-                  x2="214"
-                  y2="224"
-                  stroke="#22c55e"
-                  strokeWidth="3"
-                  variants={borderVariants}
-                  initial="hidden"
-                  animate="visible"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  initial={{ strokeDasharray: 1200, strokeDashoffset: 1200, opacity: 1 }}
+                  animate={{
+                    strokeDashoffset: [1200, 0, -1200],
+                    opacity: [1, 1, 0],
+                  }}
+                  transition={{ duration: 4, delay: 0.8, ease: "easeInOut" }}
                />
              </svg>

@@ -172,21 +153,22 @@ export const HeroSection: React.FC = () => {
              <img
                src="/Bewerbungsfoto.png"
                alt="Robert Bretz"
-                className="w-full h-full object-cover rounded-3xl shadow-2xl shadow-green-500/30"
+                className="w-full h-full object-cover rounded-full shadow-2xl shadow-green-500/30"
              />
            </div>
          </motion.div>
        </div>

        {/* Scroll Indicator */}
-        <motion.div
-          variants={itemVariants}
+        <motion.button
+          //   onClick={() => handleScrollToSection("skills")}
          animate={{ y: [0, 12, 0] }}
-          transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
-          className="flex justify-center mt-16"
+          transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
+          className="flex justify-center mt-20 w-full cursor-pointer hover:text-green-400 transition-colors text-green-500"
+          aria-label="Scroll to skills section"
        >
-          <ArrowDown className="text-green-500" size={32} />
-        </motion.div>
+          <ArrowDown size={32} />
+        </motion.button>
      </motion.div>
    </section>
  );