mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 20:15:04 +01:00
parent 6244425551
commit cb32b9d62f
19 changed files with 722 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/web/src/components/HeroSection.tsx
View File

@@ -20,17 +20,17 @@ export const HeroSection: React.FC = () => {
const opacity = useTransform(scrollY, [0, 600], [1, 0]);
return (
<section className="relative min-h-[100vh] flex items-center justify-center overflow-hidden bg-white">
<section className="relative min-h-[85dvh] md:min-h-[100dvh] flex items-center justify-center overflow-hidden bg-white px-5 md:px-0">
{/* 1. The Binary Architecture (Background) */}
<div className="absolute inset-0 z-0">
<AbstractCircuit />
</div>
{/* 2. Content Layer */}
<div className="relative z-10 container mx-auto px-6 h-full flex flex-col justify-center items-center">
<div className="relative z-10 container mx-auto h-full flex flex-col justify-center items-center">
<motion.div
style={{ y, opacity }}
className="text-center relative max-w-[90vw]"
className="text-center relative max-w-full md:max-w-[90vw]"
>
{/* Architectural Coordinate Labels */}
<div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none">
@@ -47,19 +47,19 @@ export const HeroSection: React.FC = () => {
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1, delay: 0.2 }}
className="mb-10 inline-flex items-center gap-4 px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
className="mb-4 md:mb-10 inline-flex items-center gap-3 md:gap-4 px-4 md:px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
>
<div className="flex gap-1">
<div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
<div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
</div>
<span className="text-[10px] font-mono font-bold tracking-[0.4em] text-slate-500 uppercase">
<span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.3em] md:tracking-[0.4em] text-slate-500 uppercase">
Digital_Architect // v.2026
</span>
</motion.div>
{/* Headline */}
<h1 className="text-7xl md:text-[11rem] font-black tracking-tighter leading-[0.8] text-slate-900 mb-12 uppercase">
<h1 className="text-3xl md:text-[11rem] font-black tracking-tighter leading-[0.9] md:leading-[0.8] text-slate-900 mb-6 md:mb-12 uppercase">
<div className="block">
<GlitchText delay={0.5} duration={1.2}>
Websites
@@ -80,20 +80,26 @@ export const HeroSection: React.FC = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.8 }}
className="flex flex-col items-center gap-12"
className="flex flex-col items-center gap-6 md:gap-12"
>
<p className="text-xl md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed">
Ein Entwickler. Ein Ansprechpartner. <br />
<p className="text-base md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed px-4">
Ein Entwickler. Ein Ansprechpartner.{" "}
<br className="hidden md:block" />
<span className="text-slate-900 font-bold tracking-tight">
Systematische Architekturen für das Web.
</span>
</p>
<div className="flex flex-wrap items-center justify-center gap-6">
<Button href="/contact" size="large">
<div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 w-full px-5 md:px-0">
<Button href="/contact" size="large" className="w-full md:w-auto">
Projekt anfragen
</Button>
<Button href="/websites" variant="outline" size="large">
<Button
href="/websites"
variant="outline"
size="large"
className="w-full md:w-auto"
>
Prozess ansehen
</Button>
</div>
@@ -102,13 +108,13 @@ export const HeroSection: React.FC = () => {
</div>
{/* 3. Blueprint Frame (Decorative Borders) */}
<div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-8 opacity-40" />
<div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-4 md:m-8 opacity-40 md:opacity-40" />
<div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
<span className="text-[10px] font-mono tracking-widest text-slate-400">
POS_TRANSMISSION_001
</span>
</div>
<div className="absolute bottom-8 right-8 p-4 hidden md:block opacity-20 transition-opacity hover:opacity-100">
<div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 p-4 opacity-20 transition-opacity hover:opacity-100 scale-75 md:scale-100 origin-bottom-right">
<span className="text-[10px] font-mono tracking-widest text-slate-400">
EST_2026 // M-ARCH
</span>
@@ -116,10 +122,10 @@ export const HeroSection: React.FC = () => {
{/* 4. Scroll Indicator */}
<motion.div
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
style={{ opacity }}
>
<div className="w-[1px] h-12 bg-slate-200" />
<div className="w-[1px] h-8 md:h-12 bg-slate-200" />
<span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400">
Scroll
</span>