Move client related into client/

client/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+}

client/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "personal-website",
+  "version": "0.0.0",
+  "private": true,
+  "description": "",
+  "main": "src/main.js",
+  "scripts": {
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "serve": "vue-cli-service serve",
+    "test": "mocha"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Raymonzut/Personal-Website.git"
+  },
+  "author": "Raymonzut",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Raymonzut/Personal-Website/issues"
+  },
+  "homepage": "https://github.com/Raymonzut/Personal-Website#readme",
+  "dependencies": {
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.3",
+    "chai": "^4.2.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.1.2",
+    "mocha": "^7.1.1",
+    "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-service": "~4.2.0",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

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' },
+  ],
+}

client/test/me.js

@@ -0,0 +1,10 @@
+const assert = require('chai').assert
+const me = require('../src/me')
+
+describe('me', () => {
+  describe('age', () => {
+    it('should return a positive number', () => {
+      assert.isAbove(me.age(), 0)
+    })
+  })
+})

client/test/remote.js

@@ -0,0 +1,25 @@
+const assert = require('chai').assert
+const remote = require('../src/remote')
+
+describe('remote', () => {
+  const data = remote.postData
+
+  describe('postData', () => {
+    it('should return an array', () => {
+      assert.typeOf(data, 'array')
+    })
+    it('should not be empty', () => {
+      assert.isAtLeast(data.length, 1)
+    })
+    it('should contain objects', () => {
+      for (obj of data) {
+        assert.typeOf(obj, 'object')
+      }
+    })
+    it('should have objects with properties', () => {
+      for (obj of data) {
+        assert.isAtLeast(Object.keys(obj).length, 1)
+      }
+    })
+  })
+})