Updated project view and added new attributes

src/App.vue

@@ -1,7 +1,4 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/Contact.vue'
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <q-layout view="hHh lpR fFf">

src/assets/main.scss

@@ -49,3 +49,9 @@ body {
     0 4px 8px 0 rgba(0, 0, 0, 0.2),
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
+
+.container-box-shadow {
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}

src/lib/projects.ts

@@ -3,13 +3,19 @@ import { type Project } from './types/project'
 export const infoAssist: Project = {
   name: 'Information Assistant',
   description: `Retrieval Augmented Generation (RAG) Chatbot where you can chat with your own data leveraging Azure OpenAI's GPT models.`,
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Microsoft',
   techstack: 'FastAPI, React, Azure, Cosmos'
 }
 
 export const medsis: Project = {
   name: 'MEDSIS',
   description: `Statewide disease reporting and tracking system for the state of Arizona.`,
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Arizona Department of Health Services',
   techstack: '.Net Core, React, AWS'
 }
@@ -18,6 +24,9 @@ export const banner: Project = {
   name: 'Banner Patient Portal',
   description:
     'Hospital patient portal where patients can link and retrieve records from health insurance providers',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Banner Health',
   techstack: '.Net, Angular, Boomi, Azure'
 }
@@ -26,6 +35,9 @@ export const wab: Project = {
   name: 'Alliance Association Bank Portal',
   description:
     'Homeowners association portal where users can conventiently track and pay Homeowners Association costs and fees',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Western Alliance Bank',
   techstack: 'Angular, .Net, RestAssured, Selenium, Protractor, SQL Server'
 }
@@ -34,6 +46,9 @@ export const wells: Project = {
   name: 'Identity Access and Managment',
   description:
     'Identity and Access Management (IAM) system that tracks, grants, and removes elevated privileges across the organization',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Wells Fargo',
   techstack: '.Net, Angular, Vue, RestAssured, ASP.Net, SQL Server'
 }
@@ -42,6 +57,9 @@ export const ibiley: Project = {
   name: 'Admin Dashboard',
   description:
     'Administration dashboard that features various metrics, package tracking for School Uniforms, and QR Code generation',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Ibiley',
   techstack: 'React, .Net Core, SQL Server'
 }
@@ -50,6 +68,9 @@ export const sanctus: Project = {
   name: 'Sanctus Inn',
   description:
     'A custom built community website POC for Ashes of Creation. Features include completely custom forums, identity management, WYSIWYG, Twitch and Discord integration',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Personal Projects',
   techstack: 'Laravel, Vue'
 }
@@ -58,6 +79,9 @@ export const stopit: Project = {
   name: 'StopIt!',
   description:
     'A simple addon that stops the camera from spinning when you open menus in Elder Scrolls Online',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Personal Projects',
   techstack: 'Lua'
 }
@@ -66,6 +90,9 @@ export const bazgrimstoolbar: Project = {
   name: 'Bazgrims Toolbar and Subtitles',
   description:
     'An addon that keeps tracks of various metrics at the bottom of your screen and allows the use of subtitles in Elder Scrolls Online. Now integerated into Wykkyds Framework',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Personal Projects',
   techstack: 'Lua'
 }
@@ -74,13 +101,19 @@ export const atpclassic: Project = {
   name: 'ATP Classic Scoreboard',
   description:
     'Strongman Scoreboard with an auto-refresh, retrieval from Google Docs, and in-memory cache',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Advanced Training and Powerlifting',
   techstack: 'Vue, FastAPI, Google Docs API'
 }
 
 export const strongapp: Project = {
   name: 'Strongapp',
   description: 'Barbell plate calculation app that features a simple to use user interface',
+  detailedDescription: ``,
+  contributions: ``,
+  challenges: ``,
   company: 'Personal Projects',
   techstack: 'Ionic, Vue, Android'
 }

src/lib/types/project.ts

@@ -1,8 +1,12 @@
 export interface Project {
   name: string
   description: string
+  detailedDescription: string
+  contributions: string
+  challenges: string
   company: string
   techstack: string
   link?: string
-  image?: string
+  github?: string
+  images?: Array<string>
 }

src/views/ProjectView.vue

@@ -5,7 +5,7 @@ import { onBeforeMount, ref } from 'vue'
 import type { Project } from '@/lib/types/project'
 
 const projectSelected = ref<Project>()
-
+const tab = ref('summary')
 // Determining Project via Params instead of props ensures that
 // User will always get the project, regardless of where they are coming from
 onBeforeMount(() => {
@@ -19,9 +19,48 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div class="container">
-    <div>{{ projectSelected?.name }}</div>
-    <div>{{ projectSelected?.company }}</div>
-    <div>{{ projectSelected?.description }}</div>
-  </div>
+  <q-card class="bg-primary">
+    <q-tabs
+      v-model="tab"
+      class="bg-deep-purple-10"
+      active-color="accent"
+      indicator-color="accent"
+      active-bg-color="deep-purple-8"
+      align="justify"
+    >
+      <q-tab name="summary" label="Summary" />
+      <q-tab name="images" label="Images" />
+      <q-tab name="techstack" label="Tech Stack" />
+    </q-tabs>
+    <p class="text-h3 text-center q-pt-md">{{ projectSelected?.name }}</p>
+    <p class="text-h5 text-center">{{ projectSelected?.company }}</p>
+    <q-separator />
+    <q-tab-panels class="bg-primary" v-model="tab" animated>
+      <q-tab-panel name="summary">
+        <div class="text-h6 text-center">High Level</div>
+        <p class="text-center">{{ projectSelected?.description }}</p>
+
+        <div class="text-h6 text-center">Detailed Description</div>
+        <p class="text-center">{{ projectSelected?.detailedDescription }}</p>
+
+        <div class="text-h6 text-center">My Contributions</div>
+        <p class="text-center">{{ projectSelected?.contributions }}</p>
+
+        <div class="text-h6 text-center">Challenges</div>
+        <p class="text-center">{{ projectSelected?.challenges }}</p>
+      </q-tab-panel>
+
+      <q-tab-panel name="images">
+        <img v-for="(item, index) in projectSelected?.images" :key="index" src="i" />
+        <h4 v-if="!projectSelected?.images" class="text-center">
+          Sorry, this project doesn't have any images
+        </h4>
+      </q-tab-panel>
+
+      <q-tab-panel name="techstack">
+        <div class="text-h6 text-center">Tech Stack</div>
+        <p class="text-center">{{ projectSelected?.techstack }}</p>
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
 </template>