From ecb47e26dfc0f40ccdfb3356dd872271317df589 Mon Sep 17 00:00:00 2001
From: Jake Kohl <jacob.jp.kohl@gmail.com>
Date: Sat, 18 Oct 2025 12:27:15 -0500
Subject: [PATCH 1/3] feature: implemented api backend for data rendering

---
 src/views/Projects.vue | 234 +++++++++++++++--------------------------
 1 file changed, 86 insertions(+), 148 deletions(-)

diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 8ccc9c8..81ea59b 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,93 +1,31 @@
 <script setup>
 import { ref, computed } from 'vue';
 
-// Ongoing projects (In Development, Planning, etc.)
-const ongoingProjects = ref([
-  {
-    title: 'Personal Portfolio Website',
-    description: 'A modern, responsive Vue.js portfolio built with PrimeVue components, featuring automated testing with Cypress and Playwright.',
-    technologies: ['Vue.js', 'PrimeVue', 'Vite', 'Cypress', 'Playwright'],
-    skillsLeveraged: [
-      'Frontend Development',
-      'Component Architecture', 
-      'Automated Testing',
-      'Responsive Design',
-      'Git Version Control',
-      'CI/CD Pipeline',
-      'AI Agentic Development'
-    ],
-    status: 'In Development',
-    github: 'https://github.com/jakekohl/jakekohl.github.io',
-    demo: 'https://jakekohl.github.io',
-    features: [
-      'Responsive design with professional styling',
-      'Component-based architecture',
-      'Automated testing setup',
-      'GitHub Pages deployment',
-    ],
-    dataTest: 'project-portfolio',
-    images: [],
-  },
-  {
-    title: 'Calculator',
-    description: 'A simple calculator program built with tinker and pytest',
-    technologies: ['Python', 'Tinker', 'Pytest'],
-    skillsLeveraged: [
-      'Object-Oriented Programming',
-      'Unit Testing',
-      'Debugging',
-    ],
-    status: 'In Development',
-    github: 'https://github.com/jakekohl/calculator-project',
-    features: [
-      'Simple calculator interface',
-      'Basic arithmetic operations',
-      'Unit testing with pytest',
-      'CI/CD Pipeline using GitHub Actions',
-    ],
-    dataTest: 'project-calculator',
-    images: [],
-  },
-  {
-    title: 'Nurtured Heart AI',
-    description: 'A web service that generates heartfelt, meaningful compliments using the Nurtured Heart Approach. Features local LLM processing with Ollama and a beautiful Vue.js frontend.',
-    technologies: ['Vue.js', 'Python', 'FastAPI', 'Ollama', 'PrimeVue', 'Vite', 'Google Gemini', 'Docker'],
-    skillsLeveraged: [
-      'Full-Stack Development',
-      'Local LLM Integration',
-      'API Design & Development',
-      'Vue.js Development',
-      'Python Backend Development',
-      'AI/ML Application Architecture',
-      'Prompt Engineering',
-      'Docker Containerization',
-      'Responsive UI Design',
-      'Google Gemini API Integration',
-      'Cypress End-to-End Testing',
-      'CI/CD Pipeline using GitHub Actions',
-    ],
-    status: 'In Development',
-    github: 'https://github.com/jakekohl/nurtured-heart-ai',
-    demo: 'https://nurtured-heart-ai.vercel.app',
-    features: [
-      'Local LLM-powered compliment generation with Ollama',
-      'Nurtured Heart Approach methodology integration',
-      'FastAPI backend with real-time processing',
-      'Beautiful Vue.js + PrimeVue frontend',
-      'Personalized compliments with context and tone options',
-      'Containerized deployment with Docker',
-    ],
-    dataTest: 'project-nurtured-heart-ai',
-    images: [],
-  },
-]);
-
-// Completed projects
-const completedProjects = ref([
-  // Add completed projects here when available
-]);
-
-// Computed properties to check if sections have projects
+import { onMounted } from 'vue';
+
+const projects = ref([]);
+
+const fetchProjects = async () => {
+  try {
+    const response = await fetch('https://portfolio.jakekohl.dev/projects');
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    projects.value = data;
+  } catch (error) {
+    console.error('Failed to fetch projects:', error);
+    projects.value = [];
+  }
+};
+
+onMounted(() => {
+  fetchProjects();
+});
+
+const ongoingProjects = computed(() => projects.value.filter(project => project.status === 'In Development') || []);
+const completedProjects = computed(() => projects.value.filter(project => project.status === 'Completed') || []);
+
 const hasOngoingProjects = computed(() => ongoingProjects.value.length > 0);
 const hasCompletedProjects = computed(() => completedProjects.value.length > 0);
 
@@ -135,19 +73,19 @@ const openLiveDemo = (demoUrl) => {
           </h2>
           <p class="section-subtitle">Projects currently in development</p>
         </div>
-        
+
         <div class="projects-grid" data-test="ongoing-projects">
-          <PrimeCard 
-            v-for="project in ongoingProjects" 
-            :key="project.title" 
+          <PrimeCard
+            v-for="project in ongoingProjects"
+            :key="project.title"
             class="project-card"
             :data-test="project.dataTest"
           >
             <template #header>
               <div class="project-header">
                 <h3 class="project-title" data-test="project-title">{{ project.title }}</h3>
-                <PrimeTag 
-                  :value="project.status" 
+                <PrimeTag
+                  :value="project.status"
                   :severity="project.status === 'In Development' ? 'info' : 'warning'"
                   class="project-status"
                   data-test="project-status"
@@ -156,18 +94,18 @@ const openLiveDemo = (demoUrl) => {
             </template>
             <template #content>
               <p class="project-description" data-test="project-description">{{ project.description }}</p>
-              
+
               <!-- Project Images -->
               <div v-if="project.images && project.images.length > 0" class="project-images" data-test="project-images">
                 <h4>Project Screenshots:</h4>
                 <div class="images-grid">
-                  <div 
-                    v-for="(image, index) in project.images" 
+                  <div
+                    v-for="(image, index) in project.images"
                     :key="index"
                     class="image-container"
                   >
-                    <img 
-                      :src="image.src" 
+                    <img
+                      :src="image.src"
                       :alt="image.alt"
                       class="project-image"
                       @error="$event.target.style.display='none'"
@@ -176,14 +114,14 @@ const openLiveDemo = (demoUrl) => {
                   </div>
                 </div>
               </div>
-              
+
               <div class="project-technologies" data-test="project-technologies">
                 <h4>Technologies Used:</h4>
                 <div class="tech-chips">
-                  <PrimeChip 
-                    v-for="tech in project.technologies" 
-                    :key="tech" 
-                    :label="tech" 
+                  <PrimeChip
+                    v-for="tech in project.technologies"
+                    :key="tech"
+                    :label="tech"
                     class="tech-chip"
                   />
                 </div>
@@ -192,10 +130,10 @@ const openLiveDemo = (demoUrl) => {
               <div v-if="project.skillsLeveraged" class="project-skills" data-test="project-skills">
                 <h4>Skills Leveraged:</h4>
                 <div class="skills-chips">
-                  <PrimeChip 
-                    v-for="skill in project.skillsLeveraged" 
-                    :key="skill" 
-                    :label="skill" 
+                  <PrimeChip
+                    v-for="skill in project.skillsLeveraged"
+                    :key="skill"
+                    :label="skill"
                     class="skill-chip"
                   />
                 </div>
@@ -213,18 +151,18 @@ const openLiveDemo = (demoUrl) => {
             </template>
             <template #footer>
               <div class="project-actions">
-                <PrimeButton 
+                <PrimeButton
                   v-if="project.github"
-                  label="View Code" 
-                  icon="pi pi-github" 
+                  label="View Code"
+                  icon="pi pi-github"
                   outlined
                   data-test="project-code-button"
                   @click="openGithubRepo(project.github)"
                 />
-                <PrimeButton 
+                <PrimeButton
                   v-if="project.demo"
-                  label="Live Demo" 
-                  icon="pi pi-external-link" 
+                  label="Live Demo"
+                  icon="pi pi-external-link"
                   data-test="project-demo-button"
                   @click="openLiveDemo(project.demo)"
                 />
@@ -243,19 +181,19 @@ const openLiveDemo = (demoUrl) => {
           </h2>
           <p class="section-subtitle">Finished projects and accomplishments</p>
         </div>
-        
+
         <div class="projects-grid">
-          <PrimeCard 
-            v-for="project in completedProjects" 
-            :key="project.title" 
+          <PrimeCard
+            v-for="project in completedProjects"
+            :key="project.title"
             class="project-card completed-project"
             :data-test="project.dataTest"
           >
             <template #header>
               <div class="project-header">
                 <h3 class="project-title">{{ project.title }}</h3>
-                <PrimeTag 
-                  value="Completed" 
+                <PrimeTag
+                  value="Completed"
                   severity="success"
                   class="project-status"
                   data-test="project-status"
@@ -264,18 +202,18 @@ const openLiveDemo = (demoUrl) => {
             </template>
             <template #content>
               <p class="project-description">{{ project.description }}</p>
-              
+
               <!-- Project Images -->
               <div v-if="project.images && project.images.length > 0" class="project-images">
                 <h4>Project Screenshots:</h4>
                 <div class="images-grid">
-                  <div 
-                    v-for="(image, index) in project.images" 
+                  <div
+                    v-for="(image, index) in project.images"
                     :key="index"
                     class="image-container"
                   >
-                    <img 
-                      :src="image.src" 
+                    <img
+                      :src="image.src"
                       :alt="image.alt"
                       class="project-image"
                       @error="$event.target.style.display='none'"
@@ -284,14 +222,14 @@ const openLiveDemo = (demoUrl) => {
                   </div>
                 </div>
               </div>
-              
+
               <div class="project-technologies">
                 <h4>Technologies Used:</h4>
                 <div class="tech-chips">
-                  <PrimeChip 
-                    v-for="tech in project.technologies" 
-                    :key="tech" 
-                    :label="tech" 
+                  <PrimeChip
+                    v-for="tech in project.technologies"
+                    :key="tech"
+                    :label="tech"
                     class="tech-chip"
                   />
                 </div>
@@ -300,10 +238,10 @@ const openLiveDemo = (demoUrl) => {
               <div v-if="project.skillsLeveraged" class="project-skills">
                 <h4>Skills Leveraged:</h4>
                 <div class="skills-chips">
-                  <PrimeChip 
-                    v-for="skill in project.skillsLeveraged" 
-                    :key="skill" 
-                    :label="skill" 
+                  <PrimeChip
+                    v-for="skill in project.skillsLeveraged"
+                    :key="skill"
+                    :label="skill"
                     class="skill-chip"
                   />
                 </div>
@@ -321,17 +259,17 @@ const openLiveDemo = (demoUrl) => {
             </template>
             <template #footer>
               <div class="project-actions">
-                <PrimeButton 
+                <PrimeButton
                   v-if="project.github"
-                  label="View Code" 
-                  icon="pi pi-github" 
-                  outlined 
+                  label="View Code"
+                  icon="pi pi-github"
+                  outlined
                   @click="openGithubRepo(project.github)"
                 />
-                <PrimeButton 
+                <PrimeButton
                   v-if="project.demo"
-                  label="Live Demo" 
-                  icon="pi pi-external-link" 
+                  label="Live Demo"
+                  icon="pi pi-external-link"
                   @click="openLiveDemo(project.demo)"
                 />
               </div>
@@ -606,36 +544,36 @@ const openLiveDemo = (demoUrl) => {
   .projects-title {
     font-size: 2rem;
   }
-  
+
   .section-title {
     font-size: 1.5rem;
   }
-  
+
   .projects-grid {
     grid-template-columns: 1fr;
     gap: 1.5rem;
   }
-  
+
   .images-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .project-header {
     flex-direction: column;
     align-items: flex-start;
     padding: 0 1.5rem;
   }
-  
+
   .project-status {
     margin-left: 0;
     margin-top: 0.5rem;
   }
-  
+
   .project-actions {
     flex-direction: column;
     padding: 0 1.5rem;
   }
-  
+
   .project-description,
   .project-images,
   .project-technologies,
@@ -644,4 +582,4 @@ const openLiveDemo = (demoUrl) => {
     padding: 0 1.5rem;
   }
 }
-</style>
\ No newline at end of file
+</style>

From ba8db7b4e97c47e1de4c6855fff5e2fc46963361 Mon Sep 17 00:00:00 2001
From: Jake Kohl <jacob.jp.kohl@gmail.com>
Date: Sat, 18 Oct 2025 12:36:34 -0500
Subject: [PATCH 2/3] feature: api usage for contact

---
 src/views/Contact.vue | 135 ++++++++++++++----------------------------
 1 file changed, 43 insertions(+), 92 deletions(-)

diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index cdfe4db..674725b 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -1,87 +1,38 @@
 <script setup>
-import { ref } from 'vue';
-
-const contactInfo = ref([
-  {
-    type: 'Email',
-    value: 'jacob.jp.kohl@gmail.com',
-    icon: 'pi pi-envelope',
-    link: 'mailto:jacob.jp.kohl@gmail.com',
-    description: 'Best way to reach me for professional inquiries',
-    dataTest: 'contact-email'
-  },
-  {
-    type: 'LinkedIn',
-    value: 'Jacob Kohl',
-    icon: 'pi pi-linkedin',
-    link: 'https://linkedin.com/in/jacob-jp-kohl',
-    description: 'Connect with me professionally',
-    dataTest: 'contact-linkedin'
-  },
-  {
-    type: 'GitHub',
-    value: 'jakekohl',
-    icon: 'pi pi-github',
-    link: 'https://github.com/jakekohl',
-    description: 'Check out my code and projects',
-    dataTest: 'contact-github'
-  },
-  {
-    type: 'Discord',
-    value: 'hawkeye.59',
-    icon: 'pi pi-discord',
-    link: 'https://github.com/jakekohl#:~:text=https%3A//discordapp.com/users/1097326508814639194',
-    description: 'Chat with me on Discord for quick discussions',
-    dataTest: 'contact-discord'
-  },
-  {
-    type: '(Twitter)',
-    value: '@jacobofwonder',
-    icon: 'pi pi-twitter',
-    link: 'https://x.com/jacobofwonder',
-    description: 'I post on X every now and then but it\'s not my main platform',
-    dataTest: 'contact-twitter'
-  }
-]);
-
-const specialties = ref([
-  {
-    title: 'Test Automation',
-    description: 'Cypress, Playwright, and comprehensive testing strategies',
-    icon: 'pi pi-cog',
-    dataTest: 'contact-test-automation'
-  },
-  {
-    title: 'Consulting & Mentoring',
-    description: 'Technical guidance, code reviews, and team mentoring',
-    icon: 'pi pi-users',
-    dataTest: 'contact-consulting-mentoring'
-  },
-  { 
-    title: 'Development Side Projects',
-    description: 'Coding, testing, and more! Always learning and growing.',
-    icon: 'pi pi-code',
-    dataTest: 'contact-development-side-projects'
-  }
-]);
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
 
-// const openExternalLink = (url) => {
-//   if (url) {
-//     window.open(url, '_blank', 'noopener,noreferrer');
-//   }
-// };
+const contactInfo = ref([]);
+const specialties = ref([]);
+
+const fetchContactInfo = async () => {
+  try {
+    const response = await fetch('https://portfolio.jakekohl.dev/contact');
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const contactResponse = await response.json();
+    contactInfo.value = contactResponse.contact;
+    specialties.value = contactResponse.specialties;
+  } catch (error) {
+    console.error('Failed to fetch contact info:', error);
+    contactInfo.value = [];
+    specialties.value = [];
+  }
+};
 
 const copyToClipboard = async (text) => {
   try {
     await navigator.clipboard.writeText(text);
-    // In a real app, you'd show a toast notification here
-    alert(`Copied ${text} to clipboard!`);
   } catch (err) {
-    console.error('Failed to copy: ', err);
+    console.error('Failed to copy:', err);
   }
 };
-</script>
 
+onMounted(() => {
+  fetchContactInfo();
+});
+</script>
 <template>
   <div class="contact-container">
     <div class="content-wrapper">
@@ -96,8 +47,8 @@ const copyToClipboard = async (text) => {
             Ready to collaborate? Let's discuss your next project!
           </p>
           <p class="contact-description">
-            I'm always excited to work on new projects and help bring your ideas to life. 
-            Whether you need a full-stack developer, testing specialist, or technical consultant, 
+            I'm always excited to work on new projects and help bring your ideas to life.
+            Whether you need a full-stack developer, testing specialist, or technical consultant,
             I'm here to help.
           </p>
         </div>
@@ -108,9 +59,9 @@ const copyToClipboard = async (text) => {
         <section class="contact-methods">
           <h2 class="section-title">Contact Information</h2>
           <div class="contact-grid">
-            <PrimeCard 
-              v-for="contact in contactInfo" 
-              :key="contact.type" 
+            <PrimeCard
+              v-for="contact in contactInfo"
+              :key="contact.type"
               class="contact-card"
               :data-test="contact.dataTest"
             >
@@ -147,9 +98,9 @@ const copyToClipboard = async (text) => {
         <section class="specialties-section">
           <h2 class="section-title">What I Can Help You With</h2>
           <div class="specialties-grid">
-            <PrimeCard 
-              v-for="specialty in specialties" 
-              :key="specialty.title" 
+            <PrimeCard
+              v-for="specialty in specialties"
+              :key="specialty.title"
               class="specialty-card"
               :data-test="specialty.dataTest"
             >
@@ -371,42 +322,42 @@ const copyToClipboard = async (text) => {
   .page-title {
     font-size: 2.5rem;
   }
-  
+
   .section-title {
     font-size: 2rem;
   }
-  
+
   .contact-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .specialties-grid {
     grid-template-columns: 1fr;
   }
-  
+
   .contact-card-content {
     text-align: center;
   }
-  
+
   .contact-header {
     flex-direction: column;
     text-align: center;
   }
-  
+
   .contact-value-wrapper {
     justify-content: center;
   }
-  
+
   .contact-actions {
     justify-content: center;
   }
-  
+
   .contact-header {
     margin-bottom: 3rem;
   }
-  
+
   .contact-methods {
     margin-bottom: 3rem;
   }
 }
-</style>
\ No newline at end of file
+</style>

From 3aa3434e4cd6d5cccb79001dd729ccc673e3bdec Mon Sep 17 00:00:00 2001
From: Jake Kohl <jacob.jp.kohl@gmail.com>
Date: Sat, 18 Oct 2025 12:38:57 -0500
Subject: [PATCH 3/3] chore: lint

---
 src/views/Contact.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index 674725b..0911bf6 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
 
 const contactInfo = ref([]);
 const specialties = ref([]);