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,42 +47,54 @@ 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">
-        <p class="mb-4">
+        <Image
-          Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl"
+          src={me}
-          - not "bel", I'm not a bell), alias <span class="text-gold-500"
+          alt="me"
-            >Hyro, xHyroM, or general_kubo
+          width={250}
-          </span>. I am <span class="text-gold-500">15</span> years old developer
+          class="rounded-full mb-4 lg:mb-0 lg:mr-8 h-[250px] w-[250px]"
-          with a passion for creating innovative solutions, and I am currently 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"
-            >Projects</a
-          > page on this website.
-        </p>
 
-        <p class="mb-4">
+        <div>
-          Apart from my open-source projects, I'm working/have also worked on
+          <p class="mb-4">
-          other notable projects such as <a
+            Hey, my name is <span class="text-gold-500">Jozef Steinhübl</span> ("bl"
-            class="text-gold-500"
+            - not "bel", I'm not a bell), alias <span class="text-gold-500"
-            href="https://rajce.pro">rajce.pro</a
+              >Hyro, xHyroM, or general_kubo
-          >, <a class="text-gold-500" href="https://lendmark.sk">LendMark</a>, <a
+            </span>. I am <span class="text-gold-500">15</span> years old developer
-            class="text-gold-500"
+            with a passion for creating innovative solutions, and I am currently
-            href="https://discord.com/api/oauth2/authorize?client_id=720321585625694239&permissions=8&scope=applications.commands%20bot"
+            engaged in various projects. Most of my work is open-source and on <a
-            >Mr. Infinity</a
+              class="text-gold-500"
-          >, <a class="text-gold-500" href="http://github.com/xHyroM/roles-bot"
+              href="https://github.com/xHyroM">GitHub</a
-            >Roles Bot</a
+            >. You can also check <a class="text-gold-500" href="/projects"
-          > and for different youtubers. My keen interest in the latest technologies
+              >Projects</a
-          motivates me to contribute to diverse projects on Github, where I hone
+            > page on this website.
-          my skills and expand my knowledge base.
+          </p>
-        </p>
+
+          <p class="mb-4">
+            Apart from my open-source projects, I'm working/have also worked on
+            other notable projects such as <a
+              class="text-gold-500"
+              href="https://rajce.pro">rajce.pro</a
+            >, <a class="text-gold-500" href="https://lendmark.sk">LendMark</a>, <a
+              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">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,
       );
     }