:sparkles: summary bar font and spacing styles added, no color or icon styles added

frontend/src/components/AspectBar.vue

@@ -21,3 +21,6 @@ export default {
     data: () => ({}),
 }
 </script>
+<style lang="sass">
+   
+</style>

frontend/src/components/ProfileCard.vue

@@ -120,6 +120,9 @@ const onPass = async () => {
 .profile-card-list--card
     background-color: #000
     color: #fff
+    width: 100%
+    max-width: 450px
+    margin: 11px auto
     header > .w-button
         background-color: #116006
         color: #fff

frontend/src/components/SummaryBar.vue

@@ -54,8 +54,9 @@ section.w-flex.column.pb5
                 li.w-flex.row(v-if='item !== "about"')
                     w-icon.mr1(xl) mdi mdi-heart
                     .w-flex.column.justify-start
-                        p {{ tabContent[item].matchPerc }}%
-                        p {{ item }}
+                        p 
+                            span {{ tabContent[item].matchPerc }}%
+                        p.text-capitalize {{ item }}
 </template>
 
 <script>
@@ -95,3 +96,17 @@ export default {
     },
 }
 </script>
+<style lang="sass">
+    section
+        font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
+        ul
+            margin: 11px 0
+            li
+                margin: 0 7px
+                font-size: .8em
+                p > span
+                    font-weight: bold
+                    font-size: 1em
+            li:not(:last-child)
+                border-right: 1px solid #fff
+</style>

frontend/src/entities/card/card.js

@@ -1,10 +1,10 @@
 /** @module card/card */
 
 const DEFAULT_ABOUT =
-    'A really really really really really. Really really really really really really really really really really really long bio.'
+    'Hello! My name is L.L. and I am a nurse from New York. I have been in the healthcare industry for over 6 years.'
 
 class SummaryGroup {
-    constructor() {
+    constructor () {
         this.about = {
             tab: null,
             matchPerc: null,
@@ -40,7 +40,7 @@ class SummaryGroup {
 }
 
 class Aspect {
-    constructor({ name, labels, percentage = 50 }) {
+    constructor ({ name, labels, percentage = 50 }) {
         this.name = name
         this.labels = labels
         this.percentage = percentage
@@ -54,7 +54,7 @@ class Aspect {
  * card facade
  */
 class Card {
-    constructor({ pid, name, role }) {
+    constructor ({ pid, name, role }) {
         this.pid = pid
 
         /**  Fields */