Updated content and layout for 'projects' and 'about-me' pages

The HTML for 'projects' and 'about-me' pages has been modified. This includes adding new sections to the 'projects' page, specifically for Hack The Flag and Y-A-S, altering the layout to improve page organization, and enhancing the 'about-me' page with additional content and styling for improved readability.

about-me.html

@@ -21,7 +21,13 @@
             <div class="rounded-pill border border-2 border-dark m-auto p-2 mb-4 yellow user-image">
                 <img src="img/Me.png" class="img-fluid rounded-pill">
             </div>
-            <h1 class="nordic">Matej Mazur</h1>
+            <h1 class="h1 nordic">Matej Mazur</h1>
+            <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
+                <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+                <div style="height: 10px; width: 10px; transform: rotateY(0deg) rotate(45deg);" class="border border-2 border-dark"></div>
+                <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+            </div>
+            <h4 class="h4 fw-light">Student interested in learning new things and sharing my knowledge.</h4>
             <div class="d-flex flex-row gap-3 justify-content-center align-items-center mt-4">
                 <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
                 <div style="height: 10px; width: 10px; transform: rotateY(0deg) rotate(45deg);" class="border border-2 border-dark"></div>

projects.html

@@ -47,11 +47,8 @@ <h1 class="nordic h1 text-center">My projects</h1>
          class="border border-2 border-dark"></div>
     <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
 </div>
-
-<div class="row mx-0 w-100 d-flex flex-row mb-3">
-    <div class="border border-2 border-dark p-3 col-sm-auto" style="max-width: 60%">
-        <img src="https://sagafjord.dk/wp-content/uploads/2022/07/placeholder.png" class="p-0 img-fluid"/>
-    </div>
+<!-- HTF -->
+<div class="row mx-0 w-100 d-flex flex-row mb-4">
     <div class="col d-flex flex-column justify-content-center align-items-center">
         <h2 class="nordic h2 text-center">Hack The Flag</h2>
         <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
@@ -76,6 +73,39 @@ <h2 class="nordic h2 text-center">Hack The Flag</h2>
         </a>
 
     </div>
+    <div class="border border-2 border-dark p-3 col-sm-auto" style="max-width: 60%">
+        <img src="./img/proj/htf/HTF.png" class="p-0 img-fluid"/>
+    </div>
+</div>
+
+<!-- Y-A-S -->
+<div class="row mx-0 w-100 d-flex flex-row mb-4">
+    <div class="border border-2 border-dark p-3 col-sm-auto" style="max-width: 60%">
+        <img src="./img/proj/y-a-s/y-a-s.png" class="p-0 img-fluid"/>
+    </div>
+    <div class="col d-flex flex-column justify-content-center align-items-center">
+        <h2 class="nordic h2 text-center">Y-A-S</h2>
+        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
+                 class="border border-2 border-dark"></div>
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+        </div>
+        <p class="container">
+            Y-A-S is a group of people who are interested in creating a solution for real life problems.
+            I started this alone during high school, but soon I found more people to join and started creating a community out of it.
+        </p>
+        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
+                 class="border border-2 border-dark"></div>
+            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+        </div>
+        <a href="https://y-a-s.net" class="text-dark">
+            <i class="bi bi-link-45deg h3"></i>
+        </a>
+
+    </div>
 </div>
 
 <!-- Menu -->