Implemented functional code and basic layout for project view

src/App.vue

@@ -17,13 +17,13 @@ import HelloWorld from './components/Contact.vue'
       </q-toolbar>
     </q-header>
 
-    <q-page-container>
-      <router-view v-slot="{ Component }">
-        <transition>
+    <transition>
+      <q-page-container>
+        <router-view v-slot="{ Component }">
           <component :is="Component" />
-        </transition>
-      </router-view>
-    </q-page-container>
+        </router-view>
+      </q-page-container>
+    </transition>
 
     <q-footer elevated class="bg-primary text-white text-center">
       <a href="https://github.com/KronemeyerJoshua/EngineerJosh">Full Source Code</a>

src/components/ProjectCard.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Project } from '@/lib/types/project'
+
+defineProps<{
+  project: Project
+}>()
+</script>
+
+<template>
+  <q-card class="p-card bg-primary" dark>
+    <q-card-section horizontal>
+      <q-card-section class="col-2">
+        <div class="text-h6">{{ project.name }}</div>
+        <div class="text-subtitle2">{{ project.company }}</div>
+      </q-card-section>
+
+      <q-card-section class="col-8 text-center">
+        <p>{{ project.description }}</p>
+      </q-card-section>
+
+      <q-card-section class="col-2 text-center">
+        <p>{{ project.techstack }}</p>
+      </q-card-section>
+
+      <!-- Maybe images in future? <q-img class="col-5" src="https://cdn.quasar.dev/img/parallax2.jpg" /> -->
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped></style>

src/lib/about.ts

@@ -14,7 +14,7 @@ export const joshContact: Contact = {
     ` year old Fullstack Engineer from Rochester, Minnesota. Most of my enterprise work has revolved around using Vue/React/Angular, .Net/FastAPI, and SQL or Cosmos Databases. 
     I am always trying new technologies and the projects represented here are a small scope of my work. Everything from game development to assembly, I've touched it all at some point! 
     Quick to learn and quick to perform. My goal as a Software Engineer is to better the lives of people through quality software making a substantial impact on their day to day to operations. 
-    I'm always open to chat about any of my projects, previous roles, and experiences I've had in this field. Let's get better together!`,
+    I'm always open to chat about any of my projects, previous roles, and experiences I've had in this field. Outside of work I am an amateur strongman and enjoy my fair share of RPGs. Let's get better together!`,
   linkedin: 'https://www.linkedin.com/in/kronemeyerj/',
   github: 'https://github.com/KronemeyerJoshua',
   email: '[email protected]'

src/lib/projects.ts

@@ -95,5 +95,6 @@ export const allprojects: Array<Project> = [
   sanctus,
   stopit,
   bazgrimstoolbar,
-  atpclassic
+  atpclassic,
+  strongapp
 ]

src/router/index.ts

@@ -16,6 +16,22 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/ResumeView.vue')
+    },
+    {
+      path: '/projects',
+      name: 'projects',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/ProjectsView.vue')
+    },
+    {
+      path: '/projects/:project',
+      name: ':project',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/ProjectView.vue')
     }
   ]
 })

src/views/ProjectView.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { allprojects } from '@/lib/projects'
+import { useRoute } from 'vue-router'
+import { onBeforeMount, ref } from 'vue'
+import type { Project } from '@/lib/types/project'
+
+const projectSelected = ref<Project>()
+
+// Determining Project via Params instead of props ensures that
+// User will always get the project, regardless of where they are coming from
+onBeforeMount(() => {
+  const route = useRoute()
+  allprojects.forEach((p) => {
+    if (p.name === route.params.project) {
+      projectSelected.value = p
+    }
+  })
+})
+</script>
+
+<template>
+  <div>{{ projectSelected?.name }}</div>
+  <div>{{ projectSelected?.company }}</div>
+  <div>{{ projectSelected?.description }}</div>
+</template>

src/views/ProjectsView.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import ProjectCard from '@/components/ProjectCard.vue'
+import { allprojects } from '@/lib/projects'
+</script>
+
+<template>
+  <RouterLink v-for="p in allprojects" :key="p.name" :to="'/projects/' + p.name">
+    <ProjectCard :project="p" class="q-mb-sm"></ProjectCard>
+  </RouterLink>
+</template>