:sparkles: skills and aspirations w-timeline customized to match design

frontend/assets/sass/main.scss

@@ -1,13 +1,12 @@
 @import 'variables';
 @import 'icons';
 
-
 // Global Styles
 html {
     background-color: $black;
     font-size: $base-font-size;
 }
-body{
-    margin:0;
+body {
+    margin: 0;
     font-family: 'Source Code Pro', monospace;
-}
+}

frontend/assets/sass/variables.scss

@@ -1,14 +1,14 @@
 // Color Variables
-$yellow: #F7F5A6;
-$light-green: #C2F279;
-$dark-green: #4D9127;
-$red: #FF3660;
-$light-blue: #05DBF2;
+$yellow: #f7f5a6;
+$light-green: #c2f279;
+$dark-green: #4d9127;
+$red: #ff3660;
+$light-blue: #05dbf2;
 $dark-blue: #183770;
-$dark-grey: #1F2024;
-$grey: #4C5264;
-$light-grey: #D5D5D5;
-$black: #000;
+$dark-grey: #1f2024;
+$grey: #4c5264;
+$light-grey: #d5d5d5;
+$black: #060607;
 
 // Define the base font size
 $base-font-size: 14px;
@@ -45,4 +45,4 @@ html {
     html {
         font-size: $desktop-font-size;
     }
-}
+}

frontend/src/components/SummaryBar.vue

@@ -18,8 +18,6 @@ section.w-flex.column.pb5
             // About Tab
             template(#item-content.1='{ item }')
                 .tab--about
-                    p {{ tabContent[item].tab }}
-                    br
                     p {{ tabContent[item].tab }}
                     br
                     hr
@@ -50,13 +48,13 @@ section.w-flex.column.pb5
                     w-timeline(:items='skills.education' color='primary')
                     
                     p Licenses & Certificates
-                    w-timeline(:items='skills.licenses')
+                    w-timeline(:items='skills.licenses' color='primary')
 
                     p Skills
-                    w-timeline(:items='skills.skills')
+                    w-timeline(:items='skills.skills' color='primary')
 
                     p Experience
-                    w-timeline(:items='skills.experience')
+                    w-timeline(:items='skills.experience' color='primary')
 
         // Untabbed Layout
         ul.w-flex.row.justify-space-between(v-else)
@@ -106,31 +104,31 @@ 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' },
+            {  title: 'Full-Time', content: 'Full-time for me is working 40 hrs a week in a non-contractual position.', icon: 'icon-clock' },
+            {  title: 'On-site', content: 'I prefer to be onsite 5 days a week at my primary hospital location.', icon: 'icon-location' },
+            { title: 'Relocate', content: 'I am willing to relocate to states on the east coast. My family is back east.', icon: 'icon-truck' },
+            { title: 'Management Skills', content: 'Proactive with leading teams and managing benchmark goals for the department.', icon: 'icon-graduation-cap' },
+            { title: 'Mentorship', content: 'I am seeking mentorship in leadership and building a strong team dynamic.', icon: 'icon-address' },
+            { title: 'Work in Los Angeles, California', content: 'I am eager to work in Los Angeles, California to explore new opportunities in healthcare.', icon: 'icon-home' },
+            { title: 'Work in ICU', content: 'Passionate about working in ICU, providing critical care and making a difference in patients\' lives.', icon: 'icon-heart' },
         ],
         skills: {
             education: [
-                { title: 'Masters Degree, Science in Nursing', content: 'UCLA', icon: 'wi-check-circle' },
+                { title: 'Masters Degree, Science in Nursing', content: 'UCLA', icon: 'icon-graduation-cap' },
             ],
             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' },
+                { title: 'California RN License', content: 'FRXD45643YHT678', icon: 'icon-certified' },
+                { title: 'ACLS & PALS', content: 'IIDVg909473662678', icon: 'icon-certified' },
+                { title: 'BCLS Certification', content: 'LUB9839582', icon: 'icon-certified' },
+                { title: 'Diversity Training', content: '', icon: 'icon-certified' },
             ],
             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' },
+                { title: 'Excel Spreadsheet', content: 'Advanced Excel user, adept at creating complex formulas, charts, and pivot tables for data analysis.', icon: 'icon-guage' },
+                { title: 'fetal heart monitoring', content: 'Proficient in fetal heart monitoring, interpreting data, and promptly acting to ensure fetal well-being.', icon: 'icon-chat' },
+                { title: 'problem-solving', content: 'Strong problem-solving skills, able to identify issues and implement effective solutions under pressure.', icon: 'icon-emoji-happy' },
             ],
             experience: [
-                { title: 'surgical settings', content: 'Experienced in surgical settings, assisting surgeons and managing patient care during procedures.', icon: 'wi-info-circle' },
+                { title: 'surgical settings', content: 'Experienced in surgical settings, assisting surgeons and managing patient care during procedures.', icon: 'icon-heart' },
 
             ],
         },
@@ -159,6 +157,7 @@ export default {
 <style lang="sass">
 section
     font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+
     ul
         margin: 11px 0
         li
@@ -167,6 +166,32 @@ section
             p > span
                 font-weight: bold
                 font-size: 1em
-        li:not(:last-child)
-            border-right: 1px solid #fff
+
+.w-timeline
+
+    &-item
+        font-size: 16px
+        margin-bottom: 29px
+
+        &__bullet
+            width: 40px !important
+            height: 40px !important
+            background-color: rgba(226, 232, 237, 0.1) !important
+            border: none !important
+            border-radius: 10px !important
+
+            .w-icon
+                display: none !important
+
+        &::after
+            content: none !important    
+        
+        &__title
+            margin-left: 11px
+            font-weight: 600
+            color: white !important
+        
+        &__content
+            font-weight: normal
+            margin-left: 11px
 </style>