Move client related into client/

client/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id='app'>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  components: {
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

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>

client/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

client/src/me.js

@@ -0,0 +1,21 @@
+module.exports = {
+  age: age,
+}
+
+function age() {
+  let birthdate = new Date(2002, 8, 29)
+  let now = new Date()
+
+  let age = now.getFullYear() - birthdate.getFullYear()
+
+  if (now.getMonth() < birthdate.getMonth()) {
+    age--
+  }
+  if (
+    birthdate.getMonth() === now.getMonth() &&
+    now.getDate() < birthdate.getDate()
+  ) {
+    age--
+  }
+  return age
+}

client/src/remote.js

@@ -0,0 +1,7 @@
+module.exports = {
+  postData: [
+    { title: 'A walk in the park' },
+    { title: 'Down the road', author: 'Alice' },
+    { title: 'On a summer day', author: 'Bob' },
+  ],
+}