Conditional rendering, pages updated

pages/about.vue

@@ -42,10 +42,36 @@ useHead({
 <template>
   <section>
     <h3 class="alex">About me</h3>
+    <hr />
     <p>
-      This page is currently under construction, however, I can tell you I'm
-      Andrew and I'm {{ age }} years old. The page will be updated as time goes
-      on.
+      <strong>🚧 This page is currently under construction.</strong> Expect a
+      lot more content to be added as time passes.
+      <em>Please report all bugs you encounter via the link in the footer</em>,
+      I will make sure to sand them down.
+    </p>
+    <hr />
+    <p>
+      Nice to meet you! I'm Andrew, a {{ age }}-year-old guy from Kaluga,
+      Russia. I have been developing software since I was 10 years old, and I
+      have always been interested in technology. I'm a middle-senior C/++
+      developer and a junior full-stack engineer.
+      <sup>1</sup>
+    </p>
+    <p class="font-small">
+      <sup>1</sup>
+      All titles are based on knowledge and confidence, not on official work
+      experience.
+    </p>
+    <p><strong>Here's a little more about myself:</strong></p>
+    <ul>
+      <li>My favorite season is winter.</li>
+      <li>My favorite bands are Black Sabbath, Metallica and Opeth.</li>
+      <li>My favorite field in mathematics is Algebraic Geometry.</li>
+    </ul>
+    <p>
+      I work on all sorts of projects, most of the times simultaneously, which
+      doesn't help with adhering to deadlines at all. However, you can always
+      check them out!
     </p>
   </section>
 </template>

pages/projects.vue

@@ -1,4 +1,34 @@
 <script setup lang="ts">
+// AI-Generated test data.
+const projects = [
+  {
+    name: 'MalwareWatch',
+    description:
+      'A website that tracks malware and ransomware attacks in real time.',
+    url: 'https://malwarewatch.org',
+  },
+  {
+    name: 'You Are an Idiot! (dot cc)',
+    description: 'A recreation of the infamous "You Are an Idiot!" virus.',
+    url: 'https://youareanidiot.cc',
+  },
+  {
+    name: 'HURR-DURR (dot cc)',
+    description: 'A recreation of the infamous "HURR-DURR" virus.',
+    url: 'https://hurr-durr.cc',
+  },
+  {
+    name: 'ClickSword',
+    description: 'A clicker game with a sword theme.',
+    url: 'https://clicksword.org',
+  },
+  {
+    name: 'Windows XP Keygen / UMSKT',
+    description: 'A key generator for Windows XP.',
+    url: 'https://go.enderman.ch/xpkeygen',
+  },
+]
+
 const meta = {
   title: "Enderman's Projects",
   description:
@@ -39,14 +69,26 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Projects</h3>
-    <p>This page is under construction. My current projects are:</p>
+    <hr />
+    <p>
+      <strong>🚧 This page is currently under construction.</strong> Expect a
+      lot more content to be added as time passes.
+      <em>Please report all bugs you encounter via the link in the footer</em>,
+      I will make sure to sand them down.
+    </p>
+    <hr />
+    <p><strong>My current projects are:</strong></p>
     <ul>
-      <li>MalwareWatch</li>
-      <li>You Are an Idiot! (dot cc)</li>
-      <li>HURR-DURR (dot cc)</li>
-      <li>ClickSword</li>
-      <li>Windows XP Keygen / UMSKT</li>
+      <li v-for="(item, index) in projects" :key="index">
+        <a class="link-hi" :href="item.url">
+          {{ item.name }}
+        </a>
+      </li>
     </ul>
+    <p>
+      The list above is not exhaustive and only includes the most recent and the
+      largest projects I remembered while constructing this page.
+    </p>
   </section>
 </template>
 

pages/social.vue

@@ -89,6 +89,14 @@ useHead({
 <template>
   <section>
     <h3 class="alex">Social media</h3>
+    <hr />
+    <p>
+      <strong>🚧 This page is currently under construction.</strong> Expect a
+      lot more content to be added as time passes.
+      <em>Please report all bugs you encounter via the link in the footer</em>,
+      I will make sure to sand them down.
+    </p>
+    <hr />
     <ul class="list-style-type-none p-0">
       <li v-for="(page, index) in socials" :key="index">
         <div class="d-flex flex-row align-items-center gap-1">