feat: add picture of me in about page

src/pages/about.astro

@@ -21,6 +21,8 @@ import Container from "@components/atoms/Container.astro";
 import Navbar from "@components/widgets/Navbar.astro";
 import TechIcon from "@components/widgets/TechIcon.astro";
 import Layout from "@layouts/Layout.astro";
+import { Image } from "astro:assets";
+import me from "@assets/me.png";
 import { SKILLS } from "~/config";
 ---
 
@@ -45,20 +47,30 @@ import { SKILLS } from "~/config";
   }}
 >
   <Navbar />
-  <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
+  <h1
+    class="w-full py-20 lg:py-32 text-center text-5xl font-extrabold text-white"
+  >
     About Me
   </h1>
 
   <Container class="pb-4">
     <main class="text-2xl text-white">
-      <section>
+      <section class="flex flex-col lg:flex-row items-center">
+        <Image
+          src={me}
+          alt="me"
+          width={250}
+          class="rounded-full mb-4 lg:mb-0 lg:mr-8 h-[250px] w-[250px]"
+        />
+
+        <div>
           <p class="mb-4">
             Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl"
             - not "bel", I'm not a bell), alias <span class="text-gold-500"
               >Hyro, xHyroM, or general_kubo
             </span>. I am <span class="text-gold-500">15</span> years old developer
-          with a passion for creating innovative solutions, and I am currently engaged
+            with a passion for creating innovative solutions, and I am currently
-          in various projects. Most of my work is open-source and on <a
+            engaged in various projects. Most of my work is open-source and on <a
               class="text-gold-500"
               href="https://github.com/xHyroM">GitHub</a
             >. You can also check <a class="text-gold-500" href="/projects"
@@ -75,12 +87,14 @@ import { SKILLS } from "~/config";
               class="text-gold-500"
               href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot"
               >Mr. Infinity</a
-          >, <a class="text-gold-500" href="http://github.com/xHyroM/roles-bot"
+            >, <a
-            >Roles Bot</a
+              class="text-gold-500"
+              href="http://github.com/xHyroM/roles-bot">Roles Bot</a
             > and for different youtubers. My keen interest in the latest technologies
             motivates me to contribute to diverse projects on Github, where I hone
             my skills and expand my knowledge base.
           </p>
+        </div>
       </section>
 
       <section>

src/scripts/snow.js

@@ -253,7 +253,7 @@ class SnowStorm {
             window.scrollY ||
               document.documentElement.scrollTop ||
               (noFixed ? document.body.scrollTop : 0),
-            10
+            10,
           );
       if (isNaN(scrollY)) {
         scrollY = 0; // Netscape 6 scroll fix
@@ -589,7 +589,7 @@ class SnowStorm {
       var i;
       for (i = 0; i < limit; i++) {
         storm.flakes[storm.flakes.length] = new storm.SnowFlake(
-          parseInt(rnd(flakeTypes), 10)
+          parseInt(rnd(flakeTypes), 10),
         );
         if (allowInactive || i > storm.flakesMaxActive) {
           storm.flakes[storm.flakes.length - 1].active = -1;
@@ -627,7 +627,7 @@ class SnowStorm {
         storm.events.add(
           isIE ? document : window,
           "mousemove",
-          storm.mouseMove
+          storm.mouseMove,
         );
       }
       storm.animationInterval = Math.max(20, storm.animationInterval);
@@ -646,7 +646,7 @@ class SnowStorm {
         storm.targetElement = document.getElementById(targetID);
         if (!storm.targetElement) {
           throw new Error(
-            'Snowstorm: Unable to get targetElement "' + targetID + '"'
+            'Snowstorm: Unable to get targetElement "' + targetID + '"',
           );
         }
       }
@@ -692,7 +692,7 @@ class SnowStorm {
       storm.events.remove(
         isIE ? document : window,
         "mousemove",
-        doDelayedStart
+        doDelayedStart,
       );
     }