This commit is contained in:
349
app/about/page.tsx
Normal file
349
app/about/page.tsx
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { PageHeader } from '../../src/components/PageHeader';
|
||||||
|
import { Section } from '../../src/components/Section';
|
||||||
|
import { Reveal } from '../../src/components/Reveal';
|
||||||
|
import {
|
||||||
|
ExperienceIllustration,
|
||||||
|
ResponsibilityIllustration,
|
||||||
|
ResultIllustration,
|
||||||
|
ConceptSystem,
|
||||||
|
ConceptTarget,
|
||||||
|
ContactIllustration,
|
||||||
|
ConnectorBranch,
|
||||||
|
ConnectorStart,
|
||||||
|
ConnectorEnd,
|
||||||
|
ConnectorSplit,
|
||||||
|
HeroLines,
|
||||||
|
ParticleNetwork,
|
||||||
|
GridLines
|
||||||
|
} from '../../src/components/Landing';
|
||||||
|
import { Check, ArrowRight } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col bg-white overflow-hidden relative">
|
||||||
|
{/* Background Elements */}
|
||||||
|
<ParticleNetwork className="opacity-20" />
|
||||||
|
<div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.015]" style={{
|
||||||
|
backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
|
||||||
|
backgroundSize: '80px 80px'
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative pt-40 pb-32 overflow-hidden border-b border-slate-50">
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full opacity-10 pointer-events-none">
|
||||||
|
<HeroLines className="w-full h-full" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute right-0 top-0 w-96 h-96 opacity-5 pointer-events-none">
|
||||||
|
<GridLines />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="narrow-container relative z-10">
|
||||||
|
<div className="flex flex-col items-center text-center 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_20s_linear_infinite] opacity-50" />
|
||||||
|
<div className="absolute inset-0 -m-4 border border-slate-200 rounded-full animate-[spin_15s_linear_infinite_reverse] opacity-30" />
|
||||||
|
|
||||||
|
<div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-2xl shadow-slate-200/50 bg-white p-1">
|
||||||
|
<div className="w-full h-full rounded-full overflow-hidden">
|
||||||
|
<img
|
||||||
|
src="/header.webp"
|
||||||
|
alt="Marc Mintel"
|
||||||
|
className="w-full h-full object-cover grayscale transition-all duration-1000 ease-in-out scale-110 hover:scale-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div className="space-y-6 max-w-2xl">
|
||||||
|
<Reveal delay={0.1}>
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-4">
|
||||||
|
<div className="h-px w-8 bg-slate-900"></div>
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900">Digital Architect</span>
|
||||||
|
<div className="h-px w-8 bg-slate-900"></div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<PageHeader
|
||||||
|
title={<>Über <span className="text-slate-300">mich.</span></>}
|
||||||
|
description="(oder: Warum das hier kein Agentur-Zirkus ist)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Section 01: Experience */}
|
||||||
|
<Section
|
||||||
|
number="01"
|
||||||
|
title="Erfahrung"
|
||||||
|
borderTop
|
||||||
|
connector={<ConnectorStart className="h-full" />}
|
||||||
|
illustration={<ExperienceIllustration className="w-32 h-32" />}
|
||||||
|
>
|
||||||
|
<div className="space-y-12">
|
||||||
|
<Reveal>
|
||||||
|
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||||
|
Ich baue Websites und Systeme seit über 15 Jahren. <br />
|
||||||
|
<span className="text-slate-300">Weil ich es hasse, wenn Dinge nicht funktionieren.</span>
|
||||||
|
</h3>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<Reveal delay={0.1}>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<p className="text-xl text-slate-600 font-serif italic">
|
||||||
|
In diesen 15 Jahren habe ich Agenturen von innen gesehen, Konzerne erlebt und Startups aufgebaut.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{[
|
||||||
|
'Marketingversprechen zerlegt',
|
||||||
|
'Systeme repariert, die „fertig“ waren',
|
||||||
|
'Gelernt, wie man Dinge baut, die einfach laufen'
|
||||||
|
].map((item, i) => (
|
||||||
|
<li key={i} className="flex items-center gap-3 text-slate-500">
|
||||||
|
<div className="w-1.5 h-1.5 bg-slate-300 rounded-full shrink-0" />
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.2}>
|
||||||
|
<div className="p-8 bg-slate-50 rounded-3xl border border-slate-100">
|
||||||
|
<p className="text-slate-900 font-bold text-lg mb-4">Heute mache ich das ohne Agentur-Zwischenschichten.</p>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
{['Direkt', 'Sauber', 'Verantwortlich'].map((tag, i) => (
|
||||||
|
<span key={i} className="px-4 py-2 bg-white border border-slate-200 rounded-full text-xs font-bold uppercase tracking-widest text-slate-400">
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Section 02: Responsibility */}
|
||||||
|
<Section
|
||||||
|
number="02"
|
||||||
|
title="Verantwortung"
|
||||||
|
variant="gray"
|
||||||
|
borderTop
|
||||||
|
connector={<ConnectorBranch className="h-full" />}
|
||||||
|
illustration={<ResponsibilityIllustration className="w-32 h-32" />}
|
||||||
|
>
|
||||||
|
<div className="space-y-12">
|
||||||
|
<Reveal>
|
||||||
|
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||||
|
Ich habe fast alle Fehler schon für Sie gemacht. <br />
|
||||||
|
<span className="text-slate-300">(Damit Sie sie nicht machen müssen)</span>
|
||||||
|
</h3>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||||||
|
<div className="md:col-span-7 space-y-8">
|
||||||
|
<Reveal delay={0.1}>
|
||||||
|
<p className="text-xl text-slate-600 font-serif italic">
|
||||||
|
Ich habe als Designer angefangen, bin dann Entwickler geworden, und habe irgendwann gemerkt: Das Problem ist selten Technik. Es ist immer Zuständigkeit.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={0.2}>
|
||||||
|
<div className="flex items-start gap-6 p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||||
|
<div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold">!</div>
|
||||||
|
<p className="text-slate-900 font-medium">
|
||||||
|
Wenn keiner verantwortlich ist, passiert nichts. Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Section 03: Systems */}
|
||||||
|
<Section
|
||||||
|
number="03"
|
||||||
|
title="Philosophie"
|
||||||
|
borderTop
|
||||||
|
connector={<ConnectorSplit className="h-full" />}
|
||||||
|
illustration={<ConceptSystem className="w-32 h-32" />}
|
||||||
|
>
|
||||||
|
<div className="space-y-16">
|
||||||
|
<Reveal>
|
||||||
|
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||||
|
Warum ich Websites wie Systeme baue.
|
||||||
|
</h3>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<Reveal delay={0.1}>
|
||||||
|
<p className="text-slate-500 font-serif italic text-lg">
|
||||||
|
Ich war viele Jahre Senior Developer in Firmen, in denen Millionenumsätze dranhingen, Fehler teuer waren und Performance nicht optional war.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{['Schnell', 'Stabil', 'Boring', 'Erweiterbar', 'Wartungsarm', 'Unabhängig'].map((item, i) => (
|
||||||
|
<Reveal key={i} delay={0.2 + i * 0.05}>
|
||||||
|
<div className="flex items-center gap-2 text-slate-900 font-bold text-sm uppercase tracking-widest">
|
||||||
|
<Check className="w-4 h-4 text-slate-400" />
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Reveal delay={0.3}>
|
||||||
|
<div className="relative p-10 bg-slate-900 text-white rounded-3xl overflow-hidden group">
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/5 -translate-y-16 translate-x-16 rounded-full blur-3xl group-hover:bg-white/10 transition-colors" />
|
||||||
|
<h4 className="text-2xl font-bold mb-6 relative z-10">Das prägt.</h4>
|
||||||
|
<p className="text-slate-400 font-serif italic text-lg relative z-10">
|
||||||
|
Meine Websites sind nicht abhängig von Plugins oder Agenturen. Sie sind gebaut, um zu bleiben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Section 04: Roles */}
|
||||||
|
<Section
|
||||||
|
number="04"
|
||||||
|
title="Perspektive"
|
||||||
|
variant="gray"
|
||||||
|
borderTop
|
||||||
|
connector={<ConnectorBranch className="h-full" />}
|
||||||
|
illustration={<ConceptTarget className="w-32 h-32" />}
|
||||||
|
>
|
||||||
|
<div className="space-y-12">
|
||||||
|
<Reveal>
|
||||||
|
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||||
|
Ich habe beide Seiten gesehen.
|
||||||
|
</h3>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
{[
|
||||||
|
'Webdesigner', 'Entwickler', 'Marketing', 'Vertrieb',
|
||||||
|
'Agentur', 'Inhouse', 'Dienstleister', 'Unternehmer'
|
||||||
|
].map((role, i) => (
|
||||||
|
<Reveal key={i} delay={i * 0.05}>
|
||||||
|
<div className="p-4 bg-white border border-slate-100 rounded-xl text-center hover:border-slate-300 transition-colors group">
|
||||||
|
<span className="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-colors">{role}</span>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Reveal delay={0.4}>
|
||||||
|
<p className="text-2xl text-slate-600 font-serif italic max-w-2xl">
|
||||||
|
Ich weiß, was Unternehmen brauchen – und was sie nicht brauchen. (Meetings, Tickets, Workshops, PowerPoint.)
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Section 05: Result */}
|
||||||
|
<Section
|
||||||
|
number="05"
|
||||||
|
title="Ergebnis"
|
||||||
|
borderTop
|
||||||
|
connector={<ConnectorBranch className="h-full" />}
|
||||||
|
illustration={<ResultIllustration className="w-32 h-32" />}
|
||||||
|
>
|
||||||
|
<div className="space-y-16">
|
||||||
|
<Reveal>
|
||||||
|
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||||
|
Was Kunden davon haben.
|
||||||
|
</h3>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Sie bekommen kein:</span>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{['Projektmanager', 'Prozess', 'Team', 'Ticket', 'CMS-Drama'].map((item, i) => (
|
||||||
|
<span key={i} className="px-4 py-2 border border-slate-100 rounded-full text-slate-400 line-through text-sm italic font-serif">
|
||||||
|
{item}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-900">Sie bekommen:</span>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{[
|
||||||
|
{ label: 'Eine Person', desc: 'Direkter Kontakt, keine Stille Post.' },
|
||||||
|
{ label: 'Eine Verantwortung', desc: 'Ich stehe für das Ergebnis gerade.' },
|
||||||
|
{ label: 'Ein Ergebnis', desc: 'Funktionierende Systeme, keine Ausreden.' }
|
||||||
|
].map((item, i) => (
|
||||||
|
<Reveal key={i} delay={0.2 + i * 0.1}>
|
||||||
|
<div className="flex gap-4 items-start">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-slate-900 flex items-center justify-center shrink-0 mt-1">
|
||||||
|
<Check className="w-3 h-3 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-bold text-slate-900">{item.label}</div>
|
||||||
|
<div className="text-slate-500 text-sm font-serif italic">{item.desc}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
{/* Section 06: Today */}
|
||||||
|
<Section
|
||||||
|
number="06"
|
||||||
|
title="Heute"
|
||||||
|
variant="gray"
|
||||||
|
borderTop
|
||||||
|
connector={<ConnectorEnd className="h-full" />}
|
||||||
|
illustration={<ContactIllustration className="w-32 h-32" />}
|
||||||
|
>
|
||||||
|
<div className="space-y-12">
|
||||||
|
<Reveal>
|
||||||
|
<h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
|
||||||
|
Heute baue ich Websites für Unternehmen, die keine Lust mehr auf Chaos haben.
|
||||||
|
</h3>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<div className="p-12 bg-white rounded-[3rem] border border-slate-100 shadow-2xl shadow-slate-200/50 relative overflow-hidden group">
|
||||||
|
<div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -translate-y-32 translate-x-32 rounded-full blur-3xl group-hover:bg-slate-100 transition-colors" />
|
||||||
|
|
||||||
|
<div className="relative z-10 space-y-8">
|
||||||
|
<p className="text-2xl text-slate-600 font-serif italic leading-relaxed max-w-2xl">
|
||||||
|
Ich übernehme das Thema komplett – damit es für Sie kein Thema mehr ist.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="pt-8">
|
||||||
|
<a
|
||||||
|
href="/contact"
|
||||||
|
className="inline-flex items-center gap-4 px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-slate-800 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-900/20 group"
|
||||||
|
>
|
||||||
|
Projekt anfragen
|
||||||
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
123
docs/ABOUT.md
Normal file
123
docs/ABOUT.md
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
Über mich
|
||||||
|
|
||||||
|
Ich baue Websites und Systeme seit über 15 Jahren.
|
||||||
|
Nicht weil ich Websites so liebe – sondern weil ich es hasse, wenn Dinge nicht funktionieren.
|
||||||
|
|
||||||
|
In diesen 15 Jahren habe ich:
|
||||||
|
• Agenturen von innen gesehen
|
||||||
|
• Konzerne erlebt
|
||||||
|
• Startups aufgebaut
|
||||||
|
• Marketingversprechen zerlegt
|
||||||
|
• Systeme repariert, die „fertig“ waren
|
||||||
|
• und gelernt, wie man Dinge baut, die einfach laufen
|
||||||
|
|
||||||
|
Heute mache ich das ohne Agentur-Zwischenschichten.
|
||||||
|
Direkt. Sauber. Verantwortlich.
|
||||||
|
|
||||||
|
⸻
|
||||||
|
|
||||||
|
Ich habe fast alle Fehler schon für Sie gemacht
|
||||||
|
|
||||||
|
(damit Sie sie nicht machen müssen)
|
||||||
|
|
||||||
|
Ich habe als Designer angefangen,
|
||||||
|
bin dann Entwickler geworden,
|
||||||
|
und habe irgendwann gemerkt:
|
||||||
|
|
||||||
|
Das Problem ist selten Technik.
|
||||||
|
Es ist immer Zuständigkeit.
|
||||||
|
|
||||||
|
Wenn keiner verantwortlich ist, passiert nichts.
|
||||||
|
Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
|
||||||
|
|
||||||
|
⸻
|
||||||
|
|
||||||
|
Warum ich Websites wie Systeme baue
|
||||||
|
|
||||||
|
Ich war viele Jahre Senior Developer in Firmen, in denen:
|
||||||
|
• Millionenumsätze dranhingen
|
||||||
|
• Fehler teuer waren
|
||||||
|
• Performance nicht optional war
|
||||||
|
• Sicherheit kein Nice-to-Have war
|
||||||
|
• „kurz mal ändern“ trotzdem passieren musste
|
||||||
|
|
||||||
|
Das prägt.
|
||||||
|
|
||||||
|
Deshalb sind meine Websites:
|
||||||
|
• schnell
|
||||||
|
• stabil
|
||||||
|
• boring (im besten Sinne)
|
||||||
|
• erweiterbar
|
||||||
|
• wartungsarm
|
||||||
|
• und nicht abhängig von Plugins oder Agenturen
|
||||||
|
|
||||||
|
⸻
|
||||||
|
|
||||||
|
Ich habe beide Seiten gesehen
|
||||||
|
|
||||||
|
Ich war:
|
||||||
|
• Webdesigner
|
||||||
|
• Entwickler
|
||||||
|
• Marketing
|
||||||
|
• Vertrieb
|
||||||
|
• Agentur
|
||||||
|
• Inhouse
|
||||||
|
• Dienstleister
|
||||||
|
• Unternehmer
|
||||||
|
|
||||||
|
Das heißt:
|
||||||
|
|
||||||
|
Ich weiß, was Unternehmen brauchen –
|
||||||
|
und was sie nicht brauchen.
|
||||||
|
|
||||||
|
(Meetings, Tickets, Workshops, PowerPoint.)
|
||||||
|
|
||||||
|
⸻
|
||||||
|
|
||||||
|
Was Kunden davon haben
|
||||||
|
|
||||||
|
Sie bekommen:
|
||||||
|
• keinen Projektmanager
|
||||||
|
• keinen Prozess
|
||||||
|
• kein Team
|
||||||
|
• kein Ticket
|
||||||
|
• kein CMS-Drama
|
||||||
|
|
||||||
|
Sie bekommen:
|
||||||
|
• eine Person
|
||||||
|
• eine Verantwortung
|
||||||
|
• ein Ergebnis
|
||||||
|
|
||||||
|
⸻
|
||||||
|
|
||||||
|
Ein kurzer Überblick (ohne Lebenslauf-Gefühl)
|
||||||
|
|
||||||
|
Ich habe u. a. gearbeitet bei:
|
||||||
|
• Agenturen
|
||||||
|
• E-Commerce-Plattformen
|
||||||
|
• SaaS-Firmen
|
||||||
|
• Marketing-Teams
|
||||||
|
• internationalen Unternehmen
|
||||||
|
• Mittelständlern
|
||||||
|
• und Konzernen
|
||||||
|
|
||||||
|
Als:
|
||||||
|
• Web Designer
|
||||||
|
• Frontend Developer
|
||||||
|
• Software Developer
|
||||||
|
• Senior Developer
|
||||||
|
• und später Gründer
|
||||||
|
|
||||||
|
Das Ergebnis daraus ist nicht ein Titel.
|
||||||
|
Sondern eine Arbeitsweise.
|
||||||
|
|
||||||
|
⸻
|
||||||
|
|
||||||
|
Heute
|
||||||
|
|
||||||
|
Heute baue ich Websites und Systeme für Unternehmen,
|
||||||
|
die keine Lust mehr auf Agenturen haben
|
||||||
|
und keine Zeit für Chaos.
|
||||||
|
|
||||||
|
Ich übernehme das Thema komplett –
|
||||||
|
damit es für Sie kein Thema mehr ist.
|
||||||
BIN
public/header.webp
Executable file
BIN
public/header.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
@@ -23,6 +23,7 @@ export const Footer: React.FC = () => {
|
|||||||
<div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
|
<div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
|
||||||
<span>© {currentYear}</span>
|
<span>© {currentYear}</span>
|
||||||
<div className="flex gap-8">
|
<div className="flex gap-8">
|
||||||
|
<a href="/about" className="hover:text-slate-900 transition-colors no-underline">Über mich</a>
|
||||||
<a href="/contact" className="hover:text-slate-900 transition-colors no-underline">Kontakt</a>
|
<a href="/contact" className="hover:text-slate-900 transition-colors no-underline">Kontakt</a>
|
||||||
<a href="https://github.com/marcmintel" className="hover:text-slate-900 transition-colors no-underline">GitHub</a>
|
<a href="https://github.com/marcmintel" className="hover:text-slate-900 transition-colors no-underline">GitHub</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -39,6 +39,14 @@ export const Header: React.FC = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<nav className="flex items-center gap-8">
|
<nav className="flex items-center gap-8">
|
||||||
|
<Link
|
||||||
|
href="/about"
|
||||||
|
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
|
||||||
|
isActive('/about') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Über mich
|
||||||
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/websites"
|
href="/websites"
|
||||||
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
|
className={`text-xs font-bold uppercase tracking-widest transition-colors ${
|
||||||
|
|||||||
@@ -0,0 +1,64 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { IllustrationProps } from './types';
|
||||||
|
|
||||||
|
export const ExperienceIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
|
||||||
|
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
{/* Timeline line */}
|
||||||
|
<motion.path
|
||||||
|
d="M 20 100 H 100"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
className="text-slate-200"
|
||||||
|
initial={{ pathLength: 0 }}
|
||||||
|
whileInView={{ pathLength: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 1.5, delay }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Experience nodes */}
|
||||||
|
{[
|
||||||
|
{ x: 30, y: 80, label: "Agency" },
|
||||||
|
{ x: 50, y: 60, label: "Corp" },
|
||||||
|
{ x: 70, y: 40, label: "Startup" },
|
||||||
|
{ x: 90, y: 20, label: "Now" }
|
||||||
|
].map((node, i) => (
|
||||||
|
<React.Fragment key={i}>
|
||||||
|
<motion.circle
|
||||||
|
cx={node.x} cy={node.y} r="4"
|
||||||
|
className={i === 3 ? "fill-slate-900" : "fill-slate-300"}
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
whileInView={{ scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: delay + 0.5 + i * 0.2, type: "spring" }}
|
||||||
|
/>
|
||||||
|
{i > 0 && (
|
||||||
|
<motion.path
|
||||||
|
d={`M ${30 + (i-1)*20} ${80 - (i-1)*20} L ${node.x} ${node.y}`}
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
className="text-slate-200"
|
||||||
|
initial={{ pathLength: 0 }}
|
||||||
|
whileInView={{ pathLength: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: delay + 0.5 + (i-1) * 0.2 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* 15+ Years indicator */}
|
||||||
|
<motion.text
|
||||||
|
x="20" y="115"
|
||||||
|
className="text-[8px] font-bold fill-slate-400 uppercase tracking-widest"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: delay + 1.5 }}
|
||||||
|
>
|
||||||
|
15+ YEARS
|
||||||
|
</motion.text>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { IllustrationProps } from './types';
|
||||||
|
|
||||||
|
export const ResponsibilityIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
|
||||||
|
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
{/* Shield / Responsibility shape */}
|
||||||
|
<motion.path
|
||||||
|
d="M 60 20 L 90 35 V 65 C 90 85 60 100 60 100 C 60 100 30 85 30 65 V 35 L 60 20 Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
className="text-slate-900"
|
||||||
|
initial={{ pathLength: 0, fill: "rgba(15, 23, 42, 0)" }}
|
||||||
|
whileInView={{ pathLength: 1, fill: "rgba(15, 23, 42, 0.05)" }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 1.5, delay }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Core point */}
|
||||||
|
<motion.circle
|
||||||
|
cx="60" cy="55" r="8"
|
||||||
|
className="fill-slate-900"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
whileInView={{ scale: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: delay + 1, type: "spring" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Responsibility lines */}
|
||||||
|
{[0, 120, 240].map((angle, i) => {
|
||||||
|
const x1 = 60 + Math.cos((angle * Math.PI) / 180) * 12;
|
||||||
|
const y1 = 55 + Math.sin((angle * Math.PI) / 180) * 12;
|
||||||
|
const x2 = 60 + Math.cos((angle * Math.PI) / 180) * 30;
|
||||||
|
const y2 = 55 + Math.sin((angle * Math.PI) / 180) * 30;
|
||||||
|
return (
|
||||||
|
<motion.line
|
||||||
|
key={i}
|
||||||
|
x1={x1} y1={y1} x2={x2} y2={y2}
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
className="text-slate-400"
|
||||||
|
initial={{ pathLength: 0 }}
|
||||||
|
whileInView={{ pathLength: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: delay + 1.2 + i * 0.2 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
54
src/components/Landing/Illustrations/ResultIllustration.tsx
Normal file
54
src/components/Landing/Illustrations/ResultIllustration.tsx
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { IllustrationProps } from './types';
|
||||||
|
|
||||||
|
export const ResultIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
|
||||||
|
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
{/* Result Box */}
|
||||||
|
<motion.rect
|
||||||
|
x="30" y="30" width="60" height="60" rx="4"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
className="text-slate-900"
|
||||||
|
initial={{ pathLength: 0, rotate: -10, opacity: 0 }}
|
||||||
|
whileInView={{ pathLength: 1, rotate: 0, opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 1, delay }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Checkmark */}
|
||||||
|
<motion.path
|
||||||
|
d="M 45 60 L 55 70 L 75 50"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="text-slate-900"
|
||||||
|
initial={{ pathLength: 0 }}
|
||||||
|
whileInView={{ pathLength: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5, delay: delay + 1 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Sparkles */}
|
||||||
|
{[
|
||||||
|
{ x: 25, y: 25 },
|
||||||
|
{ x: 95, y: 35 },
|
||||||
|
{ x: 85, y: 95 }
|
||||||
|
].map((pos, i) => (
|
||||||
|
<motion.path
|
||||||
|
key={i}
|
||||||
|
d={`M ${pos.x} ${pos.y-4} V ${pos.y+4} M ${pos.x-4} ${pos.y} H ${pos.x+4}`}
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
className="text-slate-300"
|
||||||
|
initial={{ scale: 0, opacity: 0 }}
|
||||||
|
whileInView={{ scale: 1, opacity: 1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: delay + 1.5 + i * 0.2, type: "spring" }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
@@ -10,3 +10,6 @@ export * from './ConceptTarget';
|
|||||||
export * from './ConceptMessy';
|
export * from './ConceptMessy';
|
||||||
export * from './HeroArchitecture';
|
export * from './HeroArchitecture';
|
||||||
export * from './HeroMainIllustration';
|
export * from './HeroMainIllustration';
|
||||||
|
export * from './ExperienceIllustration';
|
||||||
|
export * from './ResponsibilityIllustration';
|
||||||
|
export * from './ResultIllustration';
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
export * from './AbstractLines';
|
export * from './AbstractLines';
|
||||||
export * from './ExplanatoryIllustrations';
|
export * from './ExplanatoryIllustrations';
|
||||||
export * from './ConceptIllustrations';
|
export * from './ConceptIllustrations';
|
||||||
|
export * from './Illustrations';
|
||||||
export * from './ComparisonRow';
|
export * from './ComparisonRow';
|
||||||
export * from './FeatureCard';
|
export * from './FeatureCard';
|
||||||
export * from './HeroItem';
|
export * from './HeroItem';
|
||||||
|
|||||||
24
src/types/images.d.ts
vendored
Normal file
24
src/types/images.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
declare module '*.svg' {
|
||||||
|
const content: any;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.webp' {
|
||||||
|
const content: any;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.png' {
|
||||||
|
const content: any;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.jpg' {
|
||||||
|
const content: any;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.jpeg' {
|
||||||
|
const content: any;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
4
src/types/svg.d.ts
vendored
4
src/types/svg.d.ts
vendored
@@ -1,4 +0,0 @@
|
|||||||
declare module '*.svg' {
|
|
||||||
const content: any;
|
|
||||||
export default content;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user