From ea18dcdb8ec2476d687927c76934a732a55d2437 Mon Sep 17 00:00:00 2001
From: badbl0cks <4161747+badbl0cks@users.noreply.github.com>
Date: Thu, 17 Jul 2025 23:05:39 -0700
Subject: [PATCH] feat: add project card component and clean up homepage

---
 app/app.vue                    |  6 +--
 app/components/ContactForm.vue |  2 +-
 app/components/ProjectCard.vue | 44 ++++++++++++++++
 app/pages/index.vue            | 95 +++++++++++-----------------------
 4 files changed, 79 insertions(+), 68 deletions(-)
 create mode 100644 app/components/ProjectCard.vue

diff --git a/app/app.vue b/app/app.vue
index 66c135a..c968ebd 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -11,7 +11,7 @@
         <div>
           <span class="footer-title">Social</span>
           <div class="grid grid-flow-col gap-4">
-            <a
+            <a href="https://bsky.app/profile/badblocks.fyi"
               ><svg
                 role="img"
                 width="24"
@@ -24,7 +24,7 @@
                   d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
                 /></svg
             ></a>
-            <a
+            <a href="https://github.com/badbl0cks"
               ><svg
                 role="img"
                 width="24"
@@ -37,7 +37,7 @@
                   d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
                 /></svg
             ></a>
-            <a
+            <a href="https://git.badblocks.dev"
               ><svg
                 role="img"
                 width="24"
diff --git a/app/components/ContactForm.vue b/app/components/ContactForm.vue
index 8c344eb..9b09926 100644
--- a/app/components/ContactForm.vue
+++ b/app/components/ContactForm.vue
@@ -127,7 +127,7 @@
           :disabled="!isVerified || isSendingMessage || isMessageSent"
         >
           <span v-if="isSendingMessage" class="loading loading-spinner"></span>
-          Text Me!
+          Text Me! (Rob ☺️)
         </button>
       </div>
     </form>
diff --git a/app/components/ProjectCard.vue b/app/components/ProjectCard.vue
new file mode 100644
index 0000000..8b0833c
--- /dev/null
+++ b/app/components/ProjectCard.vue
@@ -0,0 +1,44 @@
+<template>
+  <!-- Project Card -->
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title">{{ title }}</h2>
+      <p>{{ description }}</p>
+      <div class="card-actions justify-end">
+        <button 
+          v-if="liveDemoLink" 
+          class="btn btn-primary" 
+          @click="openLink(liveDemoLink)"
+        >
+          Live Demo
+        </button>
+        <button 
+          v-if="sourceCodeLink" 
+          class="btn btn-secondary" 
+          @click="openLink(sourceCodeLink)"
+        >
+          Source Code
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, default: "Lorem Ipsum" },
+  description: {
+    type: String,
+    default:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  liveDemoLink: { type: [String, null], default: null },
+  sourceCodeLink: { type: [String, null], default: null },
+});
+</script>
+
+<script>
+function openLink(url) {
+  window.open(url, "_blank");
+}
+</script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index dd10256..882aa25 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -31,14 +31,14 @@
           </div>
           <div class="md:w-2/3">
             <p class="text-lg mb-4">
-              Hello! I'm a passionate and creative junior web developer with a
-              knack for building beautiful and functional websites. I love
-              learning new technologies and I'm always looking for exciting
-              projects to work on.
+              Hiya! I'm a passionate and creative web developer with a knack for
+              building beautiful and functional websites. I love learning new
+              technologies and I'm always looking for exciting projects to work
+              on.
             </p>
             <h3 class="text-2xl font-bold mb-4">My Skills</h3>
             <div class="flex flex-wrap gap-4">
-              <div class="badge badge-primary badge-lg">HTML</div>
+              <div class="badge badge-primary badge-lg">HTML5</div>
               <div class="badge badge-primary badge-lg">CSS</div>
               <div class="badge badge-primary badge-lg">JavaScript</div>
               <div class="badge badge-primary badge-lg">Git</div>
@@ -51,68 +51,35 @@
         </div>
       </div>
     </section>
-
-    <!-- Projects Section -->
+    <!-- Current Projects Section -->
     <section id="projects" class="py-20 bg-base-200">
       <div class="container mx-auto px-4">
-        <h2 class="text-4xl font-bold text-center mb-12">My Projects</h2>
+        <h2 class="text-4xl font-bold text-center mb-12">Current Projects</h2>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <!-- Project Card 1 -->
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h2 class="card-title">Project One</h2>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-              <div class="card-actions justify-end">
-                <button class="btn btn-primary">Live Demo</button>
-                <button class="btn btn-secondary">Source Code</button>
-              </div>
-            </div>
-          </div>
-          <!-- Project Card 2 -->
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h2 class="card-title">Project Two</h2>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-              <div class="card-actions justify-end">
-                <button class="btn btn-primary">Live Demo</button>
-                <button class="btn btn-secondary">Source Code</button>
-              </div>
-            </div>
-          </div>
-          <!-- Project Card 3 -->
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h2 class="card-title">Project Three</h2>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-              <div class="card-actions justify-end">
-                <button class="btn btn-primary">Live Demo</button>
-                <button class="btn btn-secondary">Source Code</button>
-              </div>
-            </div>
-          </div>
-          <!-- Project Card 4 -->
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h2 class="card-title">Project Four</h2>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-              <div class="card-actions justify-end">
-                <button class="btn btn-primary">Live Demo</button>
-                <button class="btn btn-secondary">Source Code</button>
-              </div>
-            </div>
-          </div>
+          <ProjectCard
+            title="PKMNTradeClub"
+            description="A web app to facilitate trading between players of Pokémon TCG Pocket, which frustratingly lacks trade matching features. Currently in development!"
+          />
+        </div>
+      </div>
+    </section>
+    <!-- Inactive Projects Section -->
+    <section id="projects" class="py-20 bg-base-200">
+      <div class="container mx-auto px-4">
+        <h2 class="text-4xl font-bold text-center mb-12">Inactive Projects</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <ProjectCard
+            title="PokeEmerald Mods"
+            description="Various mods for one of my favorite games, Pokémon Emerald, to streamline my replays with custom QoL features."
+          />
+          <ProjectCard
+            title="EditMii"
+            description="A Python script that allows users to view their WiiU Mii character's data and optionally change the Mii's name. Created in order to easily set flashy, custom names for online play."
+          />
+          <ProjectCard
+            title="BOTW Completer"
+            description="A Nintendo Switch application that helps users find missing items and locations in Breath of the Wild by modifying the save file to add stamps to the in-game map."
+          />
         </div>
       </div>
     </section>