Move client related into client/

client/src/components/aboutme.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h2>Who am I?</h2>
+    <p>
+      Hi there, good to see you on my website.
+      My name is Raymon Zutekouw({{ age }}).
+      Building software and exploring the wide variety of tools (or making them) is my passion.
+      To see it in action, checkout the stuff I make on
+      <a href='https://github.com/Raymonzut'>GitHub</a>.
+      The projects that may be useful to others are open source; for inspiring others and improving each others work.
+      That is why I am a huge fan of
+      <a href='https://www.gnu.org/philosophy/free-sw.en.html'>free software</a>.
+    </p>
+  </div>
+</template>
+
+<script>
+import me from '../me.js'
+
+export default {
+  name: 'aboutme',
+  computed: {
+    age: me.age
+  }
+};
+</script>
+
+<style scoped>
+p {
+  --margin-side: 12vw;
+  margin-left: var(--margin-side);
+  margin-right: var(--margin-side);
+}
+</style>

client/src/components/answer.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    {{ a }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'answer',
+  props: {
+    a: String
+  }
+}
+</script>
+

client/src/components/qa.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id='qa'>
+    <question :q='q'/>
+    <answer :a='a'/>
+  </div>
+</template>
+
+<script>
+import question from './question.vue'
+import answer from './answer.vue'
+
+export default {
+  name: 'qa',
+  components: {
+    question,
+    answer,
+  },
+  props: {
+    q: String,
+    a: String
+  }
+}
+</script>
+
+<style scoped>
+#qa {
+  --block-spacing: 7.5em;
+
+  margin-top: var(--block-spacing);
+  margin-bottom: var(--block-spacing);
+}
+</style>

client/src/components/question.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id='question_box'>
+    {{ q }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'question',
+  props: {
+    q: String
+  }
+}
+</script>
+
+<style scoped>
+#question_box {
+  --text-spacing: 0.75em;
+
+  font-style: italic;
+  margin-top: var(--text-spacing);
+  margin-bottom: var(--text-spacing);
+}
+</style>