robre/portfolio-selfmade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance HeroSection layout and content with improved grid structure and added statistics
Deploy Portfolio Selfmade / deploy (push) Successful in 26s
Details

Browse Source
This commit is contained in:
robgit21
2026-05-10 21:22:05 +02:00
parent a7e62e84fa
commit 965d2a41dd
1 changed files with 114 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/features/hero/components/HeroSection.tsx
+114 -108
View File
@@ -56,128 +56,134 @@ export const HeroSection: React.FC = () => {
variants={containerVariants} variants={containerVariants}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
className="max-w-5xl mx-auto text-center" className="max-w-7xl mx-auto w-full"
> >
{/* Profile Image with Green Border */} {/* Grid Layout: Text left, Image right on desktop, stacked on mobile */}
<motion.div <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
variants={imageVariants} {/* Text Content */}
className="mb-12 flex justify-center" <div className="text-center lg:text-left">
> {/* Badge */}
<div className="relative w-48 h-48 sm:w-56 sm:h-56"> <motion.div variants={itemVariants} className="mb-8">
{/* Animated green borders on sides */} <div className="inline-block px-4 py-2 border border-green-500/50 rounded-full bg-green-500/10 backdrop-blur-sm">
<svg <span className="text-green-400 text-sm font-medium flex items-center gap-2 justify-center lg:justify-start">
className="absolute inset-0 w-full h-full pointer-events-none" <span className="w-2 h-2 bg-green-500 rounded-full"></span>
viewBox="0 0 224 224" Softwareentwickler & Architektur-Enthusiast | Deutschland
xmlns="http://www.w3.org/2000/svg" </span>
</div>
</motion.div>
{/* Main Heading */}
<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">
Saubere, performante digitale Lösungen
</span>
</motion.h1>
{/* Subtitle */}
<motion.p
variants={itemVariants}
className="text-gray-300 text-lg sm:text-xl mb-8"
> >
<motion.line Ich entwickle moderne Anwendungen mit React, TypeScript, Tailwind, .NET, NestJS und sauberer Architektur.
x1="10" Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren Backend-Systemen.
y1="0" </motion.p>
x2="10"
y2="224"
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"
/>
</svg>
{/* Profile Image */} {/* Stats */}
<img <motion.div
src="/Bewerbungsfoto.png" variants={itemVariants}
alt="Robert Bretz" className="grid grid-cols-3 gap-3 sm:gap-6 mb-12"
className="w-full h-full object-cover rounded-3xl shadow-2xl shadow-green-500/30" >
/> <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"
>
<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"
>
<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"
>
<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>
</motion.div>
</motion.div>
{/* CTA Buttons */}
<motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12">
<Button variant="primary" size="lg">
Lass uns sprechen
</Button>
<Button variant="secondary" size="lg">
Projekte ansehen
</Button>
</motion.div>
</div> </div>
</motion.div>
{/* Badge */} {/* Profile Image - Right side on desktop, centered on mobile */}
<motion.div variants={itemVariants} className="mb-8">
<div className="inline-block px-4 py-2 border border-green-500/50 rounded-full bg-green-500/10 backdrop-blur-sm">
<span className="text-green-400 text-sm font-medium flex items-center gap-2">
<span className="w-2 h-2 bg-green-500 rounded-full"></span>
Softwareentwickler & Architektur-Enthusiast | Deutschland
</span>
</div>
</motion.div>
{/* Main Heading */}
<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">
Saubere, performante digitale Lösungen
</span>
</motion.h1>
{/* Subtitle */}
<motion.p
variants={itemVariants}
className="text-gray-300 text-lg sm:text-xl max-w-2xl mx-auto 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.
</motion.p>
{/* Stats */}
<motion.div
variants={itemVariants}
className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 mb-12 max-w-2xl mx-auto"
>
<motion.div <motion.div
whileHover={{ scale: 1.05, y: -4 }} variants={imageVariants}
transition={{ type: 'spring', stiffness: 300 }} className="flex justify-center lg:justify-end"
className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm"
> >
<div className="text-3xl font-bold text-green-500">4+</div> <div className="relative w-56 h-56 sm:w-72 sm:h-72 lg:w-96 lg:h-96">
<div className="text-gray-400 text-sm">Jahre Erfahrung</div> {/* Animated green borders on sides */}
</motion.div> <svg
<motion.div className="absolute inset-0 w-full h-full pointer-events-none"
whileHover={{ scale: 1.05, y: -4 }} viewBox="0 0 224 224"
transition={{ type: 'spring', stiffness: 300 }} xmlns="http://www.w3.org/2000/svg"
className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm" >
> <motion.line
<div className="text-3xl font-bold text-green-500">30+</div> x1="10"
<div className="text-gray-400 text-sm">Projekte umgesetzt</div> y1="0"
</motion.div> x2="10"
<motion.div y2="224"
whileHover={{ scale: 1.05, y: -4 }} stroke="#22c55e"
transition={{ type: 'spring', stiffness: 300 }} strokeWidth="3"
className="border border-green-500/30 rounded-lg p-5 bg-green-500/5 backdrop-blur-sm" variants={borderVariants}
> initial="hidden"
<div className="text-3xl font-bold text-green-500">99%</div> animate="visible"
<div className="text-gray-400 text-sm">Performance-Fokus</div> />
</motion.div> <motion.line
</motion.div> x1="214"
y1="0"
x2="214"
y2="224"
stroke="#22c55e"
strokeWidth="3"
variants={borderVariants}
initial="hidden"
animate="visible"
/>
</svg>
{/* CTA Buttons */} {/* Profile Image */}
<motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center mb-12"> <img
<Button variant="primary" size="lg"> src="/Bewerbungsfoto.png"
Lass uns sprechen alt="Robert Bretz"
</Button> className="w-full h-full object-cover rounded-3xl shadow-2xl shadow-green-500/30"
<Button variant="secondary" size="lg"> />
Projekte ansehen </div>
</Button> </motion.div>
</motion.div> </div>
{/* Scroll Indicator */} {/* Scroll Indicator */}
<motion.div <motion.div
variants={itemVariants} variants={itemVariants}
animate={{ y: [0, 12, 0] }} animate={{ y: [0, 12, 0] }}
transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }} transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
className="flex justify-center" className="flex justify-center mt-16"
> >
<ArrowDown className="text-green-500" size={32} /> <ArrowDown className="text-green-500" size={32} />
</motion.div> </motion.div>