Added project links

Author: kabbagepatch

src/components/Projects/ProjectCard.vue

@@ -2,8 +2,9 @@
   <article class="project-card">
     <div class="project-header">
       <p v-if="category" class="project-category"> {{ category }} </p>
-      <h3 class="project-title"> {{ title }} </h3>
+      <h3 class="project-title"> {{ title }}</h3>
       <p v-if="description" class="project-description"> {{ description }} </p>
+      <a v-if="link" :href="link" target="_blank" class="project-link">Check it out here ↗</a>
 
       <ul v-if="technologies.length" class="technology-list">
         <li v-for="technology in technologies" :key="technology" class="technology-pill"> {{ technology }} </li>
@@ -60,6 +61,10 @@ export default {
       type: String,
       default: '',
     },
+    link: {
+      type: String,
+      default: '',
+    },
     technologies: {
       type: Array,
       default: () => [],
@@ -110,7 +115,7 @@ export default {
   color: hsl(17, 41%, 20%);
   display: grid;
   gap: 1.5rem;
-  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 2fr);
+  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 2fr);
   align-items: center;
   padding: 1.75rem;
 }
@@ -134,6 +139,11 @@ export default {
   margin: 0;
 }
 
+.project-link {
+  color: hsl(13, 42%, 24%);
+  text-decoration: underline;
+}
+
 .project-description {
   color: hsl(20, 29%, 31%);
   font-size: 1rem;

src/pages/Projects.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="home-container">
+  <div class="container">
+    <h3 class="header">Check out more of my work on my Github
+      <a class="link" href="https://github.com/kabbagepatch" target="_blank">@kabbagepatch</a>
+    </h3>
     <div class="projects-grid">
       <ProjectCard
         v-for="project in projects"
         :key="project.title"
         :title="project.title"
         :category="project.category"
         :description="project.description"
+        :link="project.link"
         :technologies="project.technologies"
         :media="project.media"
       />
@@ -33,6 +37,7 @@ const projects = [
   {
     title: 'Pokemon Assistant',
     category: 'Tauri Development',
+    link: 'http://pokemon-ai.netlify.app/',
     description: 'Desktop app that lets users analyze Pokémon type match-ups, manage teams, and leverage AI-'
                   + 'powered recommendations and chat assistance to determine the best counters against opponent Pokémon.',
     technologies: ['Tauri', 'Rust', 'Claude'],
@@ -44,7 +49,8 @@ const projects = [
   {
     title: 'Focus Coffee',
     category: 'Tauri Development',
-    description: 'Desktop drink companion and pomodoro timer with an added simple task list. '
+    link: 'http://focus-coffee.netlify.app/',
+    description: 'Desktop drink companion and pomodoro timer with an additional simple task list. '
                 + 'Change themes to match your favourite drink. Sits on top of your windows to help you focus',
     technologies: ['Tauri'],
     media: {
@@ -55,6 +61,7 @@ const projects = [
   {
     title: 'Hex to HSL',
     category: 'Development',
+    link: 'https://marketplace.visualstudio.com/items?itemName=kavish.hex-to-hsl',
     description: 'A simple extension that converts any hex and rgb colours in your files to the hsl format, and back to hex',
     technologies: ['TypeScript'],
     media: {
@@ -107,6 +114,7 @@ const projects = [
   {
     title: 'Priority Tracker',
     category: 'Web Development',
+    link: 'https://prioritytracker.netlify.app/',
     description: 'A JIRA-like app I built to track all my projects. You can add and categorize your projects, prioritize'
                  + ' them. Log tasks to the projects you want to focus on. Move tasks between Active, Up Next and Backlog.'
                  + 'Developed using Nuxt and Vue.js on the front-end and a Node.js API using Serverless on the backend.',
@@ -142,10 +150,10 @@ const projects = [
     title: 'Spotify Data Explorer',
     category: 'Tauri Development',
     description: 'Desktop app, written in Vue, to analyze Spotify listening history and generate user'
-                  + 'trends from large JSON datasets. Displays your yearly and monthly history, along with'
+                  + ' trends from large JSON datasets. Displays your yearly and monthly history, along with'
                   + ' individual artist and song stats. Additionally includes a custom Spotify player UI'
                   + ' (which sadly doesn\'t work anymore since Spotify changes their API terms to require'
-                  + ' a Premium subscription',
+                  + ' a Premium subscription)',
     technologies: ['Vue', 'Tauri', 'TypeScript'],
     media: {
       src: spotifyExplorer,
@@ -155,7 +163,8 @@ const projects = [
   {
     title: 'Vinyl Tracker',
     category: 'Web Development',
-    description: 'A web app to track your vinyls catalog and activity.',
+    link: 'https://vinylstracker.netlify.app/',
+    description: 'A progressive web app to track your vinyls catalog and activity. Powered by the Discogs API',
     technologies: ['Vue', 'PWA', 'TypeScript'],
     media: {
       src: vinylTracker,
@@ -178,7 +187,7 @@ export default {
 </script>
 
 <style scoped>
-.home-container {
+.container {
   color: hsl(355, 35%, 28%);
   max-width: 1800px;
   margin: 0 auto;
@@ -191,8 +200,17 @@ export default {
   grid-template-columns: auto auto;
 }
 
+.header {
+  margin-top: 0;
+}
+
+.link {
+  color: hsl(13, 42%, 24%);
+  text-decoration: none;
+}
+
 @media screen and (max-width: 1500px) {
-  .home-container {
+  .container {
     max-width: 1100px;
   }