106 lines
5 KiB
TypeScript
106 lines
5 KiB
TypeScript
export default function Aboutme() {
|
||
return (
|
||
<section
|
||
id="aboutme"
|
||
className="relative py-8 px-6 md:px-12 max-w-5xl mx-auto border-t border-slate-900/50 scroll-mt-20"
|
||
>
|
||
{/* Titel */}
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<h2 className="text-3xl font-bold text-white tracking-tight">
|
||
About me<span className="text-blue-500">.</span>
|
||
</h2>
|
||
<div className="h-px bg-slate-800 grow max-w-md" />
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
|
||
{/* Left column */}
|
||
<div className="md:col-span-7 space-y-6 text-slate-200 leading-relaxed text-base">
|
||
<p>
|
||
Hey there! André here—a full-stack developer based in Karlsruhe. A
|
||
childhood fascination with computers sparked this journey, which has
|
||
since evolved into a true passion for software development.
|
||
{/*
|
||
German:
|
||
Hey! Hier ist André – ein Full-Stack-Entwickler aus Karlsruhe.
|
||
Eine Faszination für Computer seit meiner Kindheit hat diesen Weg geebnet,
|
||
der sich seitdem zu einer echten Leidenschaft für Softwareentwicklung entwickelt hat.
|
||
*/}
|
||
</p>
|
||
<p>
|
||
Through my training at Developer Akademie, I gained hands-on
|
||
experience building real-world software, backed by rigorous code
|
||
reviews. This technical background has been put into practice and
|
||
expanded across a variety of solo and collaborative group projects.
|
||
{/*
|
||
German:
|
||
Während meiner Ausbildung an der Developer Akademie habe ich viel praktische
|
||
Erfahrung beim Bauen von echter Software gesammelt, unterstützt durch gründliche Code-Reviews.
|
||
Diesen technischen Hintergrund konnte ich in vielen eigenen Projekten sowie in
|
||
Gruppenprojekten direkt in die Praxis umsetzen und vertiefen.
|
||
*/}
|
||
</p>
|
||
<p>
|
||
Feel free to explore my recent work below to see these skills and
|
||
problem-solving approaches in action.
|
||
{/*
|
||
German:
|
||
Schau dir gerne unten meine aktuellen Arbeiten an, um meine Fähigkeiten
|
||
und Lösungsansätze in Aktion zu sehen.
|
||
*/}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Right column */}
|
||
<div className="md:col-span-5">
|
||
<div className="relative group p-6 rounded-2xl border border-slate-800 bg-slate-900/50 backdrop-blur-sm space-y-6 hover:border-slate-700/80 transition-colors duration-300">
|
||
<div className="absolute top-0 right-0 w-24 h-24 bg-blue-500/5 rounded-full blur-2xl pointer-events-none group-hover:bg-blue-500/10 transition-colors duration-300" />
|
||
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||
<span className="text-blue-500 font-mono text-sm">//</span> Quick
|
||
Facts
|
||
</h3>
|
||
|
||
<ul className="space-y-4 text-sm">
|
||
<li className="flex items-center gap-3">
|
||
<span className="text-blue-500 font-mono">▸</span>
|
||
<span className="text-slate-400 font-medium">Location:</span>
|
||
<span className="text-slate-200 ml-auto">Germany</span>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<span className="text-blue-500 font-mono">▸</span>
|
||
<span className="text-slate-400 font-medium">Languages:</span>
|
||
<span className="text-slate-200 ml-auto">German, English</span>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<span className="text-blue-500 font-mono">▸</span>
|
||
<span className="text-slate-400 font-medium">Core Stack:</span>
|
||
<span className="text-slate-200 ml-auto text-right">
|
||
Angular (TS), React (Next.js)
|
||
</span>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<span className="text-blue-500 font-mono">▸</span>
|
||
<span className="text-slate-400 font-medium">Core Focus:</span>
|
||
<span className="text-slate-200 ml-auto">
|
||
Clean Code & Architecture
|
||
</span>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<span className="text-blue-500 font-mono">▸</span>
|
||
<span className="text-slate-400 font-medium">Status:</span>
|
||
<span className="text-emerald-400 font-medium ml-auto flex items-center gap-1.5">
|
||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||
Available for projects
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<div className="pt-4 border-t border-slate-800/80 text-xs text-slate-500 font-mono text-center">
|
||
`Keep it simple, keep it clean.`
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|