refactor Experience component to use dynamic rendering for work experiences
This commit is contained in:
@@ -1,88 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="h-full overflow-auto p-6">
|
<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">
|
<div class="space-y-6">
|
||||||
<!-- Level.io -->
|
<div
|
||||||
<div class="experience-card bg-white border-2 border-[#808080] p-5 shadow-md">
|
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="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
|
<img
|
||||||
src="https://cdn.prod.website-files.com/65707faecd4cd453c0bb80ad/657087ef22ae05f257ad0b7b_Logo%20(1).svg"
|
:src="experience.logo"
|
||||||
alt="Level.io"
|
:alt="experience.company"
|
||||||
class="max-w-full max-h-full object-contain"
|
class="max-w-full max-h-full object-contain"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div class="flex-1">
|
||||||
<h2 class="text-2xl font-bold text-[#000080] mb-1">Network Engineer / IT Specialist</h2>
|
<h2 class="text-2xl font-bold text-[#000080] mb-1">
|
||||||
<h3 class="text-lg font-semibold text-gray-700 mb-2">Gordon Food Services</h3>
|
{{ experience.title }}
|
||||||
<p class="text-sm text-gray-600">June 2022 - June 2024</p>
|
</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>
|
</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">
|
<div class="ml-0 md:ml-28">
|
||||||
<p class="text-gray-700 leading-relaxed mb-3">
|
<p
|
||||||
Working with Team Hydra on a variety of projects, including developing web applications, mobile apps, Discord bots, and APIs.
|
v-if="experience.description"
|
||||||
Great team environment with continuous learning opportunities.
|
class="text-gray-700 leading-relaxed mb-3"
|
||||||
|
>
|
||||||
|
{{ experience.description }}
|
||||||
</p>
|
</p>
|
||||||
<ul class="list-disc list-inside text-gray-700 space-y-1 text-sm">
|
|
||||||
<li>Developed web applications and APIs</li>
|
<ul
|
||||||
<li>Built Discord bots and integrations</li>
|
v-if="experience.bullets?.length"
|
||||||
<li>Created mobile applications</li>
|
class="list-disc list-inside text-gray-700 space-y-1 text-sm"
|
||||||
<li>Collaborated on various client projects</li>
|
>
|
||||||
|
<li v-for="bullet in experience.bullets" :key="bullet">
|
||||||
|
{{ bullet }}
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -90,8 +57,46 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup>
|
||||||
// No script needed for static content
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user