Whoami

src/pages/About.jsx

@@ -1,10 +1,14 @@
 import Hero from '../sections/about/Hero.jsx'
+import Whoami from '../sections/about/Whoami.jsx'
+import Homelab from "../sections/about/Homelab.jsx";
 
 const About = () => {
   return (
       <div className='text-text-light dark:text-text-dark mx-auto'>
         <div className={"constrained-container"}>
           <Hero />
+          <Whoami />
+          <Homelab />
         </div>
       </div>
   )

src/sections/about/Homelab.jsx

@@ -0,0 +1,42 @@
+import Quote from "../../components/Quote.jsx";
+
+const Homelab = () => {
+    return (
+        <div>
+            <div className="text-center pt-24 pb-8">
+                <div className="font-body text-3xl">
+                    ~/Hobby
+                </div>
+                <div className="pt-4 font-body text-6xl">
+                    Homelabber
+                </div>
+            </div>
+            <div className="px-4 flex flex-col md:flex-row md:items-center gap-4 md:pt-12">
+                <div className="flex-1 basis-1/3 hidden md:block">
+                    <img alt="Server overview" className="border-8 rounded-3xl border-accent-light dark:border-accent-dark"
+                         src={"server-overview.png"}></img>
+                </div>
+                <div className="flex-1 basis-2/3 lg:pl-11 xl:pl-20 text-center md:text-left">
+                    <div className={"py-4"}>
+                        <p className="font-body tracking-wide lg:text-xl break-normal antialiased">
+                            Ah, the homelab - a sanctuary for tech enthusiasts, a playground for the curious minds, and a source of endless amusement in the world of IT.
+                        </p>
+                        <br />
+                        <p className="font-body tracking-wide lg:text-xl break-normal antialiased">
+                            Picture a corner of your living space transformed into a mini data center, brimming with servers, switches , and cables galore. It’s where the magic happens, where experimentation meets innovation, and where the occasional “spaghetti monster” of cables reminds you that organization is a work in progress.
+                        </p>
+                    </div>
+                    <div className={"py-6"}>
+                        <Quote
+                            p1={`"Just `}
+                            p2={"one more"}
+                            p3={` server... I promise it's the last one"`}
+                            auth={"r/Homelab community"}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Homelab

src/sections/about/Whoami.jsx

@@ -0,0 +1,22 @@
+const Whoami = () => {
+    return (
+        <div>
+            <div className={"text-center pt-24 pb-8"}>
+                <div className={"font-body text-3xl"}>
+                    $Whoami
+                </div>
+                <div className={"pt-4 font-body text-6xl"}>
+                    Who Am I?
+                </div>
+            </div>
+            <div className={"px-4 md:px-16 flex flex-col gap-4 md:pt-12"}>
+                <p className={"text-balance text-center font-body lg:text-xl"}>
+                    Glad you want to get to know me! My journey has taken me across continents, exposing me to diverse cultures and ways of life that have shaped my worldview. From a young age, I’ve been fascinated by the intricate workings of the world around me.
+                    For me, the boundaries of exploration extend far beyond the physical realm. I believe that our actions and innovations are not constrained by borders. They have the power to transcend limitations and connect us in ways previously unimaginable.
+                    Join me as I navigate this ever-evolving digital landscape. Together, let’s explore the endless possibilities that technology offers and strive to make a meaningful impact in the interconnected world we inhabit.
+                </p>
+            </div>
+        </div>
+    )
+}
+export default Whoami