feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign
This commit is contained in:
@@ -39,16 +39,16 @@ export default function AboutPage() {
|
||||
<AbstractCircuit />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-24 overflow-hidden border-b border-slate-50">
|
||||
<section className="relative pt-12 md:pt-32 pb-8 md:pb-24 overflow-hidden border-b border-slate-50">
|
||||
<Container variant="narrow" className="relative z-10">
|
||||
<div className="flex flex-col items-center text-center space-y-12">
|
||||
<div className="flex flex-col items-center text-center space-y-6 md:space-y-12">
|
||||
<Reveal>
|
||||
<div className="relative">
|
||||
{/* Structural rings around avatar */}
|
||||
<div className="absolute inset-0 -m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
|
||||
<div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
|
||||
<div className="absolute inset-0 -m-6 md:-m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
|
||||
<div className="absolute inset-0 -m-3 md:-m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
|
||||
|
||||
<div className="relative w-40 h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
|
||||
<div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
|
||||
<div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
|
||||
<img
|
||||
src={getImgproxyUrl("/marc-mintel.png", {
|
||||
@@ -65,14 +65,14 @@ export default function AboutPage() {
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div className="space-y-6 max-w-3xl">
|
||||
<div className="space-y-3 md:space-y-6 max-w-3xl">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="flex items-center justify-center gap-4 mb-4">
|
||||
<div className="h-px w-8 bg-slate-900"></div>
|
||||
<MonoLabel className="text-slate-900">
|
||||
<div className="flex items-center justify-center gap-2 md:gap-4 mb-1 md:mb-4">
|
||||
<div className="h-px w-6 md:w-8 bg-slate-900"></div>
|
||||
<MonoLabel className="text-slate-900 text-[10px] md:text-sm">
|
||||
Digital Architect
|
||||
</MonoLabel>
|
||||
<div className="h-px w-8 bg-slate-900"></div>
|
||||
<div className="h-px w-6 md:w-8 bg-slate-900"></div>
|
||||
</div>
|
||||
</Reveal>
|
||||
<PageHeader
|
||||
@@ -89,7 +89,7 @@ export default function AboutPage() {
|
||||
</Container>
|
||||
|
||||
{/* Connector to first section */}
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-16 bg-gradient-to-b from-transparent to-slate-200" />
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-12 md:h-16 bg-gradient-to-b from-transparent to-slate-200" />
|
||||
</section>
|
||||
|
||||
{/* Section 01: Story */}
|
||||
@@ -99,17 +99,17 @@ export default function AboutPage() {
|
||||
borderTop
|
||||
illustration={<ExperienceIllustration className="w-24 h-24" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-8 md:space-y-12">
|
||||
<Reveal>
|
||||
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
Vom Designer <br />
|
||||
<span className="text-slate-400">zum Architekten.</span>
|
||||
</H3>
|
||||
</Reveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
|
||||
<Reveal delay={0.1}>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-6 md:space-y-8">
|
||||
<LeadText className="text-xl md:text-2xl text-slate-400">
|
||||
Agenturen, Konzerne, Startups – ich habe die Branche von allen
|
||||
Seiten kennengelernt. Was hängen geblieben ist:{" "}
|
||||
@@ -140,7 +140,7 @@ export default function AboutPage() {
|
||||
padding="normal"
|
||||
className="group"
|
||||
>
|
||||
<H4 className="text-2xl mb-6">
|
||||
<H4 className="text-xl mb-6">
|
||||
Heute: Direkte Zusammenarbeit ohne Reibungsverluste.
|
||||
</H4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
@@ -170,7 +170,7 @@ export default function AboutPage() {
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<Reveal>
|
||||
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
So läuft ein Projekt <br />
|
||||
<span className="text-slate-400">bei mir ab.</span>
|
||||
</H3>
|
||||
@@ -204,7 +204,7 @@ export default function AboutPage() {
|
||||
},
|
||||
].map((item, i) => (
|
||||
<Reveal key={i} delay={0.1 + i * 0.1}>
|
||||
<div className="flex gap-6 py-6 group">
|
||||
<div className="flex gap-4 md:gap-6 py-2 md:py-6 group">
|
||||
<div className="relative z-10 shrink-0">
|
||||
<div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500">
|
||||
<span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
|
||||
@@ -212,9 +212,13 @@ export default function AboutPage() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 pt-1">
|
||||
<H4 className="text-xl">{item.title}</H4>
|
||||
<BodyText className="text-slate-500">{item.desc}</BodyText>
|
||||
<div className="space-y-1 md:space-y-2 pt-1">
|
||||
<H4 className="text-base md:text-xl font-bold">
|
||||
{item.title}
|
||||
</H4>
|
||||
<BodyText className="text-slate-500 text-sm md:text-base">
|
||||
{item.desc}
|
||||
</BodyText>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -225,9 +229,9 @@ export default function AboutPage() {
|
||||
|
||||
{/* Section 03: Philosophie – what drives me */}
|
||||
<Section number="03" title="Philosophie" borderTop>
|
||||
<div className="space-y-16">
|
||||
<div className="space-y-12 md:space-y-16">
|
||||
<Reveal>
|
||||
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
Ich stehe für <br />
|
||||
<span className="text-slate-400">meine Arbeit gerade.</span>
|
||||
</H3>
|
||||
@@ -236,7 +240,7 @@ export default function AboutPage() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="space-y-8">
|
||||
<Reveal delay={0.1}>
|
||||
<LeadText className="text-xl text-slate-400">
|
||||
<LeadText className="text-lg md:text-xl text-slate-400">
|
||||
Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt,
|
||||
liegt die Verantwortung bei mir – und ich{" "}
|
||||
<span className="text-slate-900">
|
||||
@@ -244,7 +248,7 @@ export default function AboutPage() {
|
||||
</span>
|
||||
</LeadText>
|
||||
</Reveal>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{[
|
||||
"Vollständige Transparenz",
|
||||
"Ein Ansprechpartner",
|
||||
@@ -256,7 +260,9 @@ export default function AboutPage() {
|
||||
<div className="w-6 h-6 rounded-full bg-white border border-slate-200 flex items-center justify-center shrink-0 group-hover:bg-slate-900 group-hover:border-slate-900 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
|
||||
<Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" />
|
||||
</div>
|
||||
<Label className="text-slate-900">{item}</Label>
|
||||
<Label className="text-slate-900 text-xs md:text-sm">
|
||||
{item}
|
||||
</Label>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
@@ -280,9 +286,9 @@ export default function AboutPage() {
|
||||
illustration={<ContactIllustration className="w-24 h-24" />}
|
||||
effects={<GradientMesh variant="metallic" className="opacity-60" />}
|
||||
>
|
||||
<div className="space-y-12">
|
||||
<div className="space-y-10 md:space-y-12">
|
||||
<Reveal>
|
||||
<H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
|
||||
<H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
|
||||
Bereit für eine <br />
|
||||
<span className="text-slate-400">Zusammenarbeit?</span>
|
||||
</H3>
|
||||
@@ -291,12 +297,12 @@ export default function AboutPage() {
|
||||
<Card
|
||||
variant="glass"
|
||||
hover={false}
|
||||
padding="large"
|
||||
padding="normal"
|
||||
techBorder
|
||||
className="rounded-3xl shadow-xl relative overflow-hidden group"
|
||||
>
|
||||
<div className="relative z-10 space-y-8">
|
||||
<LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400">
|
||||
<div className="relative z-10 space-y-6 md:space-y-8">
|
||||
<LeadText className="text-lg md:text-4xl leading-tight max-w-2xl text-slate-400">
|
||||
Lassen Sie uns gemeinsam etwas bauen, das{" "}
|
||||
<span className="text-slate-900">
|
||||
<Marker delay={0.3} color="rgba(148,163,184,0.15)">
|
||||
@@ -305,8 +311,10 @@ export default function AboutPage() {
|
||||
</span>
|
||||
</LeadText>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button href="/contact">Projekt anfragen</Button>
|
||||
<div className="pt-2 md:pt-4">
|
||||
<Button href="/contact" className="w-full md:w-auto">
|
||||
Projekt anfragen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user