:sparkles: sketching out components for gui

frontend/package.json

         "pug-plain-loader": "^1.1.0",
         "sass": "^1.54.4",
         "sass-loader": "^10.3.1",
-        "vite": "^2.8.6",
+        "vite": "^2.9.15",
         "vite-fs": "^0.0.2",
         "watch": "^1.0.2"
     }

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 in labels" :key="label").text-upper {{ label }}
+    w-progress(v-model="percentage" size="0.5em" round).mt4
+</template>
+
+<script>
+export default {
+    props: {
+        labels: {
+            required: true,
+            type: Array,
+            default: () => ['left', 'right'],
+        },
+        percentage: {
+            required: true,
+            type: Number,
+            default: 50,
+        },
+        size: {
+            required: true,
+            type: Number,
+            default: 50,
+        },
+    },
+    data: () => ({}),
+}
+</script>

frontend/src/components/NamePlate.vue

+<template lang="pug">
+.xs12
+    h1.text-capitalize first last
+        span O    
+    p.text-capitalize job title | location, st    
+    p.text-capitalize gender 
+        span.text-capitalize | pronouns
+        span.text-capitalize | ethnicity    
+</template>
+
+<script>
+export default {
+    props: {},
+    data: () => ({}),
+}
+</script>

frontend/src/components/PairingButton.vue

+<template lang="pug">
+w-tag(color="mint-green" bg-color="red" xl).xs12.mt4.mb4
+    p.pa4.text-upper paired    
+</template>
+
+<script>
+export default {
+    props: {},
+    data: () => ({}),
+}
+</script>

frontend/src/components/SummaryBar.vue

+<template lang="pug">
+nav.xs12
+    ul.xs12.w-flex.row
+        li(v-if="showAbout") about
+        li(v-for="[label, percentage] in summary" :key="label").w-flex.row
+            w-icon(xl).mr1 mdi mdi-heart
+            .w-flex.column.justify-start
+                p {{ percentage }}%
+                p.text-capitalize {{ label }}
+</template>
+
+<script>
+export default {
+    props: {
+        summary: {
+            required: true,
+            type: Array,
+            default: () => [
+                ['passion', 50],
+                ['aspirations', 50],
+                ['skills', 50],
+            ],
+        },
+        showAbout: {
+            required: false,
+            type: Boolean,
+            default: false,
+        },
+        showIcon: {
+            required: false,
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: () => ({}),
+}
+</script>

frontend/src/components/TagList.vue

+<template lang="pug">
+w-tag(v-for="tag in tags" color="pink-light1" bg-color="pink-light5")
+    w-icon(v-if="icon" class="mr1" sm) {{ icon.family }} {{ icon.family }}-{{ icon.shape }}
+    p {{ tag }}
+</template>
+
+<script>
+export default {
+    props: {
+        tags: {
+            required: true,
+            type: Array,
+            default: () => ['tag', 'tag', 'tag'],
+        },
+        icon: {
+            type: Object,
+        },
+    },
+    data: () => ({}),
+}
+</script>

frontend/src/views/HomeView.vue

     style='display: flex; flex-direction: column; gap: 40px; margin-top: 1em'
 )
     header
+        SummaryBar
+        TagList(:icon="{ family: 'mdi', shape: 'heart' }")
+        AspectBar
+        PairingButton
         h2 Match Queue
 
     article(v-if='cards.length && !loading')
 <script>
 import 'wave-ui/dist/wave-ui.css'
 import ProfileCardList from '../components/ProfileCardList.vue'
+import TagList from '../components/TagList.vue'
+import AspectBar from '../components/AspectBar.vue'
+import SummaryBar from '../components/SummaryBar.vue'
+import PairingButton from '../components/PairingButton.vue'
 
 import { Card } from '../entities'
 import {
 
 export default {
     name: 'HomeView',
-    components: { ProfileCardList },
+    components: {
+        ProfileCardList,
+        AspectBar,
+        TagList,
+        SummaryBar,
+        PairingButton,
+    },
     mixins: [mixins.pidMixin, mixins.cardMixin],
     methods: {
         /** Gets called from cardMixin */

frontend/src/wave.js

     WSlider,
     WSpinner,
     WSteps,
+    WTag,
     WToolbar,
 } from '../node_modules/wave-ui/src/wave-ui/components'
 
     WSlider,
     WSpinner,
     WSteps,
+    WTag,
     WToolbar,
 }