From f678313f4cb9d268fe292d4185fbcecc246f4afa Mon Sep 17 00:00:00 2001
From: Sticks <sticks@teamhydra.dev>
Date: Fri, 30 Jan 2026 19:35:20 -0500
Subject: [PATCH] refactor Experience component to use dynamic rendering for
 work experiences

---
 app/components/Experience.vue | 147 ++++++++++++++++++----------------
 1 file changed, 76 insertions(+), 71 deletions(-)

diff --git a/app/components/Experience.vue b/app/components/Experience.vue
index 71ddd9a..a69e67f 100644
--- a/app/components/Experience.vue
+++ b/app/components/Experience.vue
@@ -1,88 +1,55 @@
 <template>
   <div class="h-full overflow-auto p-6">
-    <h1 class="text-3xl font-bold mb-6 text-[#000080] border-b-2 border-[#808080] pb-3">Work Experience</h1>
+    <h1 class="text-3xl font-bold mb-6 text-[#000080] border-b-2 border-[#808080] pb-3">
+      Work Experience
+    </h1>
 
     <div class="space-y-6">
-      <!-- Level.io -->
-      <div class="experience-card bg-white border-2 border-[#808080] p-5 shadow-md">
+      <div
+        v-for="experience in experiences"
+        :key="experience.company"
+        class="experience-card bg-white border-2 border-[#808080] p-5 shadow-md"
+      >
         <div class="flex items-start gap-4 mb-4">
-          <div class="logo-container bg-white border border-gray-300 p-3 rounded flex items-center justify-center" style="min-width: 100px; height: 80px;">
+          <div
+            class="logo-container bg-white border border-gray-300 p-3 rounded flex items-center justify-center"
+            style="min-width: 100px; height: 80px;"
+          >
             <img
-              src="https://cdn.prod.website-files.com/65707faecd4cd453c0bb80ad/657087ef22ae05f257ad0b7b_Logo%20(1).svg"
-              alt="Level.io"
+              :src="experience.logo"
+              :alt="experience.company"
               class="max-w-full max-h-full object-contain"
             />
           </div>
-          <div class="flex-1">
-            <h2 class="text-2xl font-bold text-[#000080] mb-1">Support Specialist</h2>
-            <h3 class="text-lg font-semibold text-gray-700 mb-2">Level.io</h3>
-            <p class="text-sm text-gray-600">October 2024 - Present</p>
-          </div>
-        </div>
-        <div class="ml-0 md:ml-28">
-          <p class="text-gray-700 leading-relaxed">
-            Currently working as a Support Specialist at Level.io, helping customers solve technical issues and improve their experience with the platform.
-            Providing technical support, troubleshooting, and working closely with the engineering team to resolve complex problems.
-          </p>
-        </div>
-      </div>
 
-      <!-- Gordon Food Services -->
-      <div class="experience-card bg-white border-2 border-[#808080] p-5 shadow-md">
-        <div class="flex items-start gap-4 mb-4">
-          <div class="logo-container bg-white border border-gray-300 p-3 rounded flex items-center justify-center" style="min-width: 100px; height: 80px;">
-            <img
-              src="https://gfs.com/wp-content/uploads/2022/07/logo_gfs.png"
-              alt="Gordon Food Services"
-              class="max-w-full max-h-full object-contain"
-            />
-          </div>
           <div class="flex-1">
-            <h2 class="text-2xl font-bold text-[#000080] mb-1">Network Engineer / IT Specialist</h2>
-            <h3 class="text-lg font-semibold text-gray-700 mb-2">Gordon Food Services</h3>
-            <p class="text-sm text-gray-600">June 2022 - June 2024</p>
+            <h2 class="text-2xl font-bold text-[#000080] mb-1">
+              {{ experience.title }}
+            </h2>
+            <h3 class="text-lg font-semibold text-gray-700 mb-2">
+              {{ experience.company }}
+            </h3>
+            <p class="text-sm text-gray-600">
+              {{ experience.dates }}
+            </p>
           </div>
         </div>
-        <div class="ml-0 md:ml-28">
-          <p class="text-gray-700 leading-relaxed mb-3">
-            Worked with Gordon Food Services to help maintain their network infrastructure and provide IT support to employees.
-            Responsible for troubleshooting network issues, setting up new network equipment, and providing support with IT issues.
-          </p>
-          <ul class="list-disc list-inside text-gray-700 space-y-1 text-sm">
-            <li>Maintained and troubleshot network infrastructure</li>
-            <li>Set up and configured network equipment</li>
-            <li>Provided technical support to employees</li>
-            <li>Managed IT helpdesk operations</li>
-          </ul>
-        </div>
-      </div>
 
-      <!-- Team Hydra -->
-      <div class="experience-card bg-white border-2 border-[#808080] p-5 shadow-md">
-        <div class="flex items-start gap-4 mb-4">
-          <div class="logo-container bg-white border border-gray-300 p-3 rounded flex items-center justify-center" style="min-width: 100px; height: 80px;">
-            <img
-              src="https://hep.gg/hydralogo"
-              alt="Team Hydra"
-              class="max-w-full max-h-full object-contain"
-            />
-          </div>
-          <div class="flex-1">
-            <h2 class="text-2xl font-bold text-[#000080] mb-1">Software Developer</h2>
-            <h3 class="text-lg font-semibold text-gray-700 mb-2">Team Hydra</h3>
-            <p class="text-sm text-gray-600">September 2020 - Present</p>
-          </div>
-        </div>
         <div class="ml-0 md:ml-28">
-          <p class="text-gray-700 leading-relaxed mb-3">
-            Working with Team Hydra on a variety of projects, including developing web applications, mobile apps, Discord bots, and APIs.
-            Great team environment with continuous learning opportunities.
+          <p
+            v-if="experience.description"
+            class="text-gray-700 leading-relaxed mb-3"
+          >
+            {{ experience.description }}
           </p>
-          <ul class="list-disc list-inside text-gray-700 space-y-1 text-sm">
-            <li>Developed web applications and APIs</li>
-            <li>Built Discord bots and integrations</li>
-            <li>Created mobile applications</li>
-            <li>Collaborated on various client projects</li>
+
+          <ul
+            v-if="experience.bullets?.length"
+            class="list-disc list-inside text-gray-700 space-y-1 text-sm"
+          >
+            <li v-for="bullet in experience.bullets" :key="bullet">
+              {{ bullet }}
+            </li>
           </ul>
         </div>
       </div>
@@ -90,8 +57,46 @@
   </div>
 </template>
 
-<script setup lang="ts">
-// No script needed for static content
+<script setup>
+const experiences = [
+  {
+    company: "Team Hydra",
+    title: "Software Developer",
+    dates: "September 2020 - Present",
+    logo: "https://hep.gg/hydralogo",
+    description:
+      "Working with Team Hydra on a variety of projects, including developing web applications, mobile apps, Discord bots, and APIs. Great team environment with continuous learning opportunities.",
+    bullets: [
+      "Developed web applications and APIs",
+      "Built Discord bots and integrations",
+      "Created mobile applications",
+      "Collaborated on various client projects"
+    ]
+  },
+  {
+    company: "Level.io",
+    title: "Support Specialist",
+    dates: "October 2024 - Present",
+    logo:
+      "https://cdn.prod.website-files.com/65707faecd4cd453c0bb80ad/657087ef22ae05f257ad0b7b_Logo%20(1).svg",
+    description:
+      "Currently working as a Support Specialist at Level.io, helping customers solve technical issues and improve their experience with the platform. Providing technical support, troubleshooting, and working closely with the engineering team to resolve complex problems."
+  },
+  {
+    company: "Gordon Food Services",
+    title: "Network Engineer / IT Specialist",
+    dates: "June 2022 - June 2024",
+    logo: "https://gfs.com/wp-content/uploads/2022/07/logo_gfs.png",
+    description:
+      "Worked with Gordon Food Services to help maintain their network infrastructure and provide IT support to employees.",
+    bullets: [
+      "Maintained and troubleshot network infrastructure",
+      "Set up and configured network equipment",
+      "Provided technical support to employees",
+      "Managed IT helpdesk operations"
+    ]
+  }
+];
 </script>
 
 <style scoped>