Finally some text

components/Blog/Layout.tsx

@@ -14,13 +14,13 @@ const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
             <title>{title ?? "c0ntroller.de"}</title>
         </Head>
         <div id={styles.blogBody}>
-            <header>
+            <header id={"top"}>
                 <Navigation />
             </header>
             <main>
                 { children }
             </main>
-            <footer>
+            <footer id={"bottom"}>
                 Copyright und so nen Stuff
             </footer>
         </div>

pages/me.tsx

@@ -1,11 +1,15 @@
 import type { NextPage } from "next";
+import Link from "next/link";
 import { useEffect } from "react";
+import { Discord, Github, Instagram, Steam, Linkedin } from "@icons-pack/react-simple-icons";
 import Layout from "../components/Blog/Layout";
 
 import styles from "../styles/Blog/AboutMe.module.scss";
+import pic from "../public/img/me.png";
 
 import skills, { AdditionalSkill, Skill, SkillCard } from "../data/skills";
 import achievements from "../data/achievements";
+import Image from "next/image";
 
 const Badge: NextPage<{ additional: AdditionalSkill }> = ({ additional }) => {
     return <div className={styles.badge}>
@@ -70,12 +74,45 @@ const Me: NextPage = () => {
 
     return <Layout>
         <h1>This is me.</h1>
+        <div className={styles.photo}>
+            <Image src={pic} alt="Me" layout={"responsive"} />
+        </div>
+        <div className={styles.personal}>
             <p className={styles.preText}>
-            Hi! My name is <strong>Daniel</strong> and I&apos;m an automation engineer from Germany.
-        </p>
-        <p>
+                My name is <strong>Daniel</strong> and I&apos;m an prospective <strong>automation engineer</strong>, <strong>hardware enthusiast</strong>, and <strong>software developer</strong> from Germany.<br/>
                 I&apos;m currently {age} years old and studying <strong>Information Systems Engineering</strong> at the <strong>TU Dresden</strong>.
             </p>
+            <p>
+                To be hones, I don&apos;t really know what to write here.
+                What could you - some visitor of my website - possibly want to know about me?
+            </p><p>
+                Maybe you are an employer and want to know what I can do for you?
+                Then see below - I tried to list all my skills and achievements.
+                If your company is doing anything related to software development (even low level one like on embedded controllers), I&apos;m probably suited for it.
+            </p><p>
+                But maybe you are just another guy on the internet browsing through my website?
+                Well then have fun!
+                I hope you find what you are looking for.
+                If you haven&apos;t seen it already, you should check out the <Link href="/terminal"><a className="nocolor">command line</a></Link> I made.
+                Otherwise have fun poking around in my <Link href="/"><a className="nocolor">projects</a></Link>.
+            </p><p>
+                Do you want to know more about my personal life?
+                Well I like to play video games, watch anime, I love cats and <a href="https://www.reddit.com/r/blahaj" target="_blank" rel="noreferrer" className="nocolor">sharks</a>.
+                So just your ordinary nerdy student.<br/>
+                If you want to be even more invested in my personal life, check out my socials below.
+            </p><p>
+                Any questions I did not cover, but you are interested in?
+                Just contect me <a className="nocolor" href="mailto:admin-website@c0ntroller.de" rel="noreferrer">via email</a> or any of the socials below!
+            </p>
+        </div>
+        <h2>Social Media</h2>
+        <div className={styles.socials}>
+            <a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer" className="nocolor"><Github size="2em" title="Github" /></a>
+            <a href="https://www.linkedin.com/in/c0ntroller/" target="_blank" rel="noreferrer" className="nocolor"><Linkedin size="2em" title="Linked" /></a>
+            <a href="https://www.instagram.com/c0ntroller/" target="_blank" rel="noreferrer" className="nocolor"><Instagram size="2em" title="Instagram" /></a>
+            <a href="https://steamcommunity.com/id/c0ntroller/" target="_blank" rel="noreferrer" className="nocolor"><Steam size="2em" title="Steam" /></a>
+            <a href="https://discordapp.com/users/224208617820127233" target="_blank" rel="noreferrer" className="nocolor"><Discord size="2em" title="Discord" /></a>
+        </div>
         <h2>Achievements</h2>
         {achievements().map((achievement, i) => <div key={i} className={styles.achievement}>
             <span>{achievement.icon}</span><span>{achievement.description}</span>

styles/Blog/AboutMe.module.scss

@@ -1,6 +1,12 @@
-.preText {
+.personal {
+    p {
+        line-height: 1.5;
+    }
+
+    p:first-of-type {
         font-size: 1.2em;
     }
+} 
 
 .percentBar {
     position: relative;
@@ -31,6 +37,7 @@
     grid-template-columns: 2em auto;
     column-gap: 10px;
     padding: 5px;
+    padding-left: 0;
 
     & > span:first-of-type {
         height: 2em;
@@ -121,3 +128,40 @@
         margin-bottom: 0;
     }
 }
+
+.socials {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    & > * {
+        margin-right: 30px;
+    }
+
+    & > *:last-of-type {
+        margin-right: 0;
+    }
+}
+
+.photo {
+    float: right;
+    position: relative;
+    height: max-content;
+    width: 100%;
+    max-width: 250px;
+    border-radius: 1em;
+    margin-left: 30px;
+
+    & * {
+        border-radius: 1em;
+    }
+
+    @media screen and (max-width: 500px) {
+        & {
+            float: none;
+            margin: 0 auto;
+            max-width: 100%;
+            border-radius: 1em;
+        }
+    }
+}

styles/globals.scss

@@ -53,5 +53,8 @@ body {
 
 a.nostyle {
   text-decoration: inherit;
+}
+
+a.nocolor, a.nostyle {
   color: inherit;
 }