:art: commented profile.service.js to help my own understanding of functions, add aspirations and skills json to the data() property on SummaryBar.vue to match mockup data. Switched from WListItem to WTimeline to allow for title and content in display. #TODO style html and add icons to complete issue tasks

frontend/src/components/AspectBar.vue

 <template lang="pug">
 figure.w-flex.column
     figcaption.w-flex.xs12.justify-space-between.align-center
-        p(v-for="(label, index) in labels" :key="label" :class="{ 'main': index === 1 }")  {{ label }}
+        p(v-for="(label, index) in labels" :key="label" :class="{ 'main': index === 1 }")  {{ label }} 
     w-progress(v-model="percentage" size="0.5em" round).mb7
 </template>
 

frontend/src/components/ProfileCard.vue

 import PairingButton from './PairingButton.vue'
 
 const router = useRouter()
-// const isPaired = ref(true)
-const isPaired = ref(false)
+const isPaired = ref(true)
+//const isPaired = ref(false)
 
 const props = defineProps({
     card: {

frontend/src/components/SummaryBar.vue

             template(#item-content.3='{ item }')
                 .tab--aspirations
                     p {{ tabContent[item].tab }}
+                    w-timeline(:items='aspirations')
+                    
 
             // Skills Tab
             template(#item-content.4='{ item }')
                 .tab--skills
-                    p {{ tabContent[item].tab }}
+                    p Education
+                    w-timeline(:items='skills.education')
+                    
+                    p Licenses & Certificates
+                    w-timeline(:items='skills.licenses')
+
+                    p Skills
+                    w-timeline(:items='skills.skills')
+
+                    p Experience
+                    w-timeline(:items='skills.experience')
 
         // Untabbed Layout
         ul.w-flex.row.justify-space-between(v-else)
 
 <script>
 import SpiderChart from './SpiderChart.vue'
+
 import { currentProfile } from '../services'
 
 export default {
         },
     },
     emits: ['tab-change'],
+    data: () => ({
+        aspirations: [
+            {  title: 'Full-Time', content: 'Full-time for me is working 40 hrs a week in a non-contractual position.', icon: 'wi-check-circle' },
+            {  title: 'On-site', content: 'I prefer to be onsite 5 days a week at my primary hospital location.', icon: 'wi-cross-circle' },
+            { title: 'Relocate', content: 'I am willing to relocate to states on the east coast. My family is back east.', icon: 'wi-warning-circle' },
+            { title: 'Management Skills', content: 'Proactive with leading teams and managing benchmark goals for the department.', icon: 'wi-info-circle' },
+            { title: 'Mentorship', content: 'I am seeking mentorship in leadership and building a strong team dynamic.', icon: 'wi-cross-circle' },
+            { title: 'Work in Los Angeles, California', content: 'I am eager to work in Los Angeles, California to explore new opportunities in healthcare.', icon: 'wi-warning-circle' },
+            { title: 'Work in ICU', content: 'Passionate about working in ICU, providing critical care and making a difference in patients\' lives.', icon: 'wi-info-circle' },
+        ],
+        skills: {
+            education: [
+                { title: 'Masters Degree, Science in Nursing', content: 'UCLA', icon: 'wi-check-circle' },
+            ],
+            licenses: [
+                { title: 'California RN License', content: 'FRXD45643YHT678', icon: 'wi-cross-circle' },
+                { title: 'ACLS & PALS', content: 'IIDVg909473662678', icon: 'wi-warning-circle' },
+                { title: 'BCLS Certification', content: 'LUB9839582', icon: 'wi-cross-circle' },
+                { title: 'Diversity Training', content: '', icon: 'wi-warning-circle' },
+            ],
+            skills: [
+                { title: 'Excel Spreadsheet', content: 'Advanced Excel user, adept at creating complex formulas, charts, and pivot tables for data analysis.', icon: 'wi-info-circle' },
+                { title: 'fetal heart monitoring', content: 'Proficient in fetal heart monitoring, interpreting data, and promptly acting to ensure fetal well-being.', icon: 'wi-info-circle' },
+                { title: 'problem-solving', content: 'Strong problem-solving skills, able to identify issues and implement effective solutions under pressure.', icon: 'wi-info-circle' },
+            ],
+            experience: [
+                { title: 'surgical settings', content: 'Experienced in surgical settings, assisting surgeons and managing patient care during procedures.', icon: 'wi-info-circle' },
+
+            ],
+        },
+    }),
     computed: {
         targetScore(){
             try{
             this.$emit('tab-change', tabs)
         },
     },
+    
 }
 </script>
 <style lang="sass">

frontend/src/services/profile.service.js

     }
     return validProfileInstances
 }
-
+/**
+ * Creates a new profile for a user ID with the given responses and returns
+ * the created profile.
+ */
 const createProfileForUserId = async (userId, responses) => {
     const profile = await db.post(`/user/${userId}/profile`, responses)
     return profile
 }
 
+/**
+ * Fetches a profile by its profile ID, creates an instance of the Profile
+ * class, validates the profile data, and returns the profile instance.
+ **/
 const fetchProfileByProfileId = async profileId => {
     let profile
     try {
     }
     return profile
 }
-
+/**
+ * Reveals profile information based on the given grouping ID, profile ID,
+ * and tag ID.
+ */
 const revealProfileInfo = async (groupingId, profileId, tagId) => {
     const revealed = await db.post(
         `/membership/${groupingId}/reveal?profile_id=${profileId}&tag_id=${tagId}`,

frontend/src/wave.js

     WSteps,
     WTag,
     WToolbar,
+    WTimeline,
 } from '../node_modules/wave-ui/src/wave-ui/components'
 
 export default {
     WSteps,
     WTag,
     WToolbar,
+    WTimeline,
 }