From 48475c989f38a0c8288b65561a306e6ef40fc4e9 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 19 Jul 2026 15:00:36 +0200
Subject: [PATCH] feat: add about me section

---
 src/app/page.tsx           |  2 ++
 src/components/Aboutme.tsx | 60 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/components/Aboutme.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9f4032a..6be08bf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
 import Hero from "../components/Hero";
+import Aboutme from "@/components/Aboutme";
 
 export default function Home() {
   return (
     <main className="min-h-screen bg-slate-950 text-slate-100 selection:bg-blue-500/30 selection:text-blue-200">
       <Hero />
+      <Aboutme />
     </main>
   );
 }
diff --git a/src/components/Aboutme.tsx b/src/components/Aboutme.tsx
new file mode 100644
index 0000000..5f0a652
--- /dev/null
+++ b/src/components/Aboutme.tsx
@@ -0,0 +1,60 @@
+export default function Aboutme() {
+  return (
+    <section
+      id="aboutme"
+      className="relative py-14 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-1px 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-400 leading-relaxed text-base">
+          <p>
+            Hey there! I'm André, a full-stack developer from Karlsruhe. I had a
+            passion for coding since childhood when I first got my hands on a
+            computer. Over the years, that fascination has grown into a genuine
+            love for the craft.
+            {/* 
+            German:
+            Hey! Ich bin Andre, ein Full-Stack-Entwickler aus Karlsruhe. 
+            Schon seit meiner Kindheit habe ich mich fürs Programmieren begeistert, 
+            als ich das erste Mal einen Computer in die Hände bekam. Diese Faszination 
+            hat sich im Laufe der Jahre zu einer echten Leidenschaft entwickelt.
+             */}
+          </p>
+          <p>
+            During my training at Developer Akademie, I gained plenty of
+            practical experience through projects and code reviews. I was able
+            to deepen and implement this knowledge in many of my own projects as
+            well as group projects. Symbol of problem-solving
+            {/* 
+            German:
+            Während meiner Ausbildung an der Developer Akademie habe ich viel praktische 
+            Erfahrung durch Projekte und Code-Reviews gesammelt. Ich konnte dieses Wissen 
+            in vielen meiner eigenen Projekte sowie in Gruppenprojekten vertiefen und umsetzen. 
+             */}
+          </p>
+          <p>
+            In case I've piqued your curiosity, I warmly invite you to take a
+            look at my previous works. This way, you can gain an impression of
+            my skills.
+            {/* 
+            German:
+            Falls ich deine Neugier geweckt habe, lade ich dich herzlich ein, 
+            einen Blick auf meine bisherigen Arbeiten zu werfen. So kannst du 
+            dir einen Eindruck von meinen Fähigkeiten verschaffen. 
+             */}
+          </p>
+        </div>
+
+        {/* Right column */}
+      </div>
+    </section>
+  );
+}