[add] initial commit

src/assets/sass/fonts.scss

@@ -0,0 +1,73 @@
+@charset "utf-8";
+/* latin-ext */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Overpass Mono Light'), local('OverpassMono-Light'), url('~@/assets/fonts/OverpassMono-Light_ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Overpass Mono Light'), local('OverpassMono-Light'), url('~@/assets/fonts/OverpassMono-Light.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url('~@/assets/fonts/OverpassMono-Regular_ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url('~@/assets/fonts/OverpassMono-Regular.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url('~@/assets/fonts/OverpassMono-SemiBold_ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Overpass Mono SemiBold'), local('OverpassMono-SemiBold'), url('~@/assets/fonts/OverpassMono-SemiBold.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url('~@/assets/fonts/OverpassMono-Bold_ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Overpass Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Overpass Mono Bold'), local('OverpassMono-Bold'), url('~@/assets/fonts/OverpassMono-Bold.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/assets/sass/global.scss

@@ -0,0 +1,49 @@
+@charset "utf-8";
+
+// theme
+$family-monospace: 'Overpass Mono', monospace;
+$dark-theme: (
+        background-color: #2E2E2E,
+        background: #3d3d3d,
+        text: #ccc,
+        text-darker: #bbb,
+        highlight: #f17603,
+        highlight-hover: #ffab5c
+);
+
+// bulma global variables
+$grey-light: map-get($dark-theme, "text");
+$grey-dark: map-get($dark-theme, "text");
+$grey-darker: map-get($dark-theme, "text-darker");
+$warning: map-get($dark-theme, "highlight");
+$primary: map-get($dark-theme, "highlight");
+$background: map-get($dark-theme, 'background');
+$family-primary: $family-monospace;
+$link-hover: map-get($dark-theme, "highlight");
+$link: map-get($dark-theme, "text");
+
+// bulma component variables
+$body-background-color: map-get($dark-theme, 'background-color');
+
+// bulma tooltip extension
+$tooltip-background-color: map-get($dark-theme, 'background');
+$tooltip-color: map-get($dark-theme, "text");
+
+// general css
+.link {
+  margin-left: 1rem;
+}
+
+.hash-list {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  div {
+    margin-left: 2em;
+  }
+}
+
+#app {
+  .highlight {
+    color: map-get($dark-theme, "highlight");
+  }
+}

src/assets/sass/includes.scss

@@ -0,0 +1,23 @@
+@charset "utf-8";
+
+// import fonts
+@import '~@/assets/sass/fonts.scss';
+
+// import global
+@import '~@/assets/sass/global.scss';
+
+// import bulma
+@import 'bulma/sass/utilities/_all.sass';
+@import 'bulma/sass/base/_all.sass';
+@import 'bulma/sass/components/navbar.sass';
+@import 'bulma/sass/elements/container.sass';
+@import 'bulma/sass/elements/title.sass';
+@import 'bulma/sass/elements/icon.sass';
+@import 'bulma/sass/elements/content.sass';
+@import 'bulma/sass/elements/tag.sass';
+@import 'bulma/sass/grid/columns.sass';
+@import 'bulma/sass/form/all';
+@import 'bulma/sass/form/tools.sass';
+@import 'bulma/sass/layout/_all.sass';
+@import '@creativebulma/bulma-tooltip/src/sass/index.sass'; //https://github.com/CreativeBulma/bulma-tooltip https://wikiki.github.io/elements/tooltip/
+

src/components/Gelvin.vue

@@ -0,0 +1,57 @@
+<template>
+  <a
+    class="link icon-text"
+    href="#"
+    @click="toggle_locale()"
+  >
+    <span class="icon highlight">
+      <font-awesome-icon icon="fa-solid fa-temperature-three-quarters" />
+    </span><span style="font-size: 1em">{{ temperature }}</span>
+    <slot />
+  </a>
+</template>
+
+
+<script>
+export default {
+  name: 'Gelvin',
+  props: {
+    addr: {
+      type: String,
+      required: true
+    },
+    id: {
+      type: Number,
+      required: true
+    },
+  },
+  data() {
+    return {
+      fetcher: null,
+      value: NaN,
+      celsius: false
+    };
+  },
+  computed: {
+    temperature() {
+      return this.celsius ?
+          this.value.toFixed(2).toLocaleString() + "°C" :
+          (this.value * 9/5 + 32).toFixed(2).toLocaleString() + "°F" ;
+    }
+  },
+  mounted() {
+    this.fetch_temp();
+    this.fetcher = setInterval(this.fetch_temp, 30000)
+  },
+  methods: {
+    fetch_temp() {
+      fetch(this.addr + "/gelvin/measurements/" + this.id)
+          .then(response => response.json())
+          .then(json => this.value = json.value);
+    },
+    toggle_locale() {
+      this.celsius = ! this.celsius;
+    }
+  }
+}
+</script>

src/components/HashList.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="hash-list">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="content is-small"
+    >
+      <span class="highlight">#</span> {{ item }}
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'HashList',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+}
+</script>
+

src/components/XorLink.vue

@@ -0,0 +1,49 @@
+<template>
+  <a
+    class="link icon-text"
+    href="#"
+    @click="attachUrl()"
+  >
+    <span
+      v-if="icon"
+      class="icon highlight"
+    ><font-awesome-icon :icon="icon" /></span>{{ text }}
+    <slot />
+  </a>
+</template>
+
+
+<script>
+export default {
+  name: 'XorLink',
+  props: {
+    addr: {
+      type: Array,
+      required: true
+    },
+    otp: {
+      type: Array,
+      required: true
+    },
+    text: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  methods: {
+    xorArray(a, b) {
+      return a.length < b.length ? null : a.map((c, i) => {
+        return c ^ b[i];
+      })
+    },
+    attachUrl() {
+      window.location.href = String.fromCharCode(...this.xorArray(this.addr, this.otp));
+    }
+  }
+}
+</script>

src/layouts/Default.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="layout">
+    <header class="header">
+      <strong>
+        <g-link
+          to="/"
+          style="font-size: 1.5em"
+        ><span style="color: #ccc">{{ $static.metadata.siteName }}</span><span
+          class="highlight"
+        >#</span></g-link>
+      </strong>
+      <nav class="nav">
+        <Gelvin
+          :id="2"
+          addr="https://api.pdev.dev"
+          class="has-tooltip-bottom"
+          data-tooltip="office temperature"
+        />
+        <XorLink
+          text="git"
+          icon="fa-solid fa-code-branch"
+          :addr="[0x03, 0x18, 0x40, 0x56, 0x4a, 0x09, 0x1f, 0x63, 0x2d, 0x03, 0x18, 0x47, 0x17, 0x55, 0x4c, 0x42, 0x03, 0x4f, 0x58, 0x12]"
+          :otp="[0x6b, 0x6c, 0x34, 0x26, 0x39, 0x33, 0x30, 0x4c, 0x4a, 0x6a, 0x6c, 0x69, 0x67, 0x31, 0x29, 0x34, 0x2d, 0x2b, 0x3d, 0x64]"
+        />
+        <XorLink
+          text="mail"
+          icon="fa-solid fa-envelope"
+          :addr="[0x59, 0x12, 0x02, 0x4a, 0x40, 0x07, 0x76, 0x1b, 0x00, 0x19, 0x45, 0x52, 0x06, 0x0e, 0x1b, 0x03, 0x09, 0x5e, 0x45, 0x08, 0x51, 0x53]"
+          :otp="[0x34, 0x73, 0x6b, 0x26, 0x34, 0x68, 0x4c, 0x6b, 0x61, 0x6a, 0x26, 0x33, 0x6a, 0x4e, 0x6b, 0x67, 0x6c, 0x28, 0x6b, 0x6c, 0x34, 0x25]"
+        />
+        <XorLink
+          text="pgp"
+          icon="fa-solid fa-key"
+          :addr="[0x45, 0x07, 0x02, 0x32, 0x56, 0x1b, 0x48, 0x1b, 0x3e, 0x5b, 0x59, 0x5c, 0x49, 0x44, 0x43, 0x0b, 0x1b]"
+          :otp="[0x6a, 0x61, 0x6b, 0x5e, 0x33, 0x68, 0x67, 0x6b, 0x4b, 0x39, 0x35, 0x35, 0x2a, 0x6a, 0x33, 0x6c, 0x6b]"
+        />
+      </nav>
+    </header>
+    <slot />
+  </div>
+</template>
+
+<static-query>
+query {
+metadata {
+siteName
+}
+}
+</static-query>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+}
+
+.layout {
+  max-width: 760px;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  height: 80px;
+}
+
+.nav {
+  text-align: right;
+}
+</style>

src/main.js

@@ -0,0 +1,36 @@
+// This is the main.js file. Import global CSS and scripts here.
+// The Client API can be used here. Learn more: gridsome.org/docs/client-api
+
+// icons import
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import {config, library} from '@fortawesome/fontawesome-svg-core';
+import {
+    faGitAlt
+} from '@fortawesome/free-brands-svg-icons';
+import {
+    faEnvelope,
+    faKey,
+    faCodeBranch,
+    faTemperatureThreeQuarters
+} from '@fortawesome/free-solid-svg-icons';
+
+import DefaultLayout from '~/layouts/Default.vue'
+import XorLink from '~/components/XorLink.vue'
+import Gelvin from '~/components/Gelvin.vue'
+import HashList from '~/components/HashList.vue'
+
+// sass
+import '~/assets/sass/includes.scss'
+
+// icons config
+config.autoAddCss = true;
+library.add(faGitAlt, faEnvelope, faKey, faCodeBranch, faTemperatureThreeQuarters)
+
+export default function (Vue) {
+    // Set default layout as a global component
+    Vue.component('FontAwesomeIcon', FontAwesomeIcon);
+    Vue.component('Layout', DefaultLayout);
+    Vue.component('XorLink', XorLink);
+    Vue.component('Gelvin', Gelvin);
+    Vue.component('HashList', HashList);
+}

src/pages/Index.vue

@@ -0,0 +1,40 @@
+<template>
+  <Layout>
+    <div class="container content">
+      <div class="field is-grouped is-grouped-multiline">
+        <div class="control">
+          <h2><span class="highlight">#</span>EHLO</h2>
+        </div>
+        <div class="control">
+          <div class="tags has-addons">
+            <span class="tag is-medium is-white">I am </span><span class="tag is-medium is-warning">Pascal</span>
+          </div>
+        </div>
+      </div>
+      <p>
+        I'm a Software Engineer. I mostly work on embedded network devices, though I like to dabble in web development and server management. When I'm not coding, I'm soldering things to code on.
+
+        <HashList
+          :items="['Linux, OpenWrt, Yoctu, Arduino, RaspberryPi, Xilinx FPGA',
+                   'C/C++, Java/Scala, Python, Shell, Lua, HTML/CSS/JS, SQL, VHDL',
+                   'Autotools, Bitmake, CMake, Doxygen, Docker, Jenkins, Apache, Nginx']"
+        />
+      </p>
+    </div>
+  </Layout>
+</template>
+
+<script>
+export default {
+  metaInfo: {
+    title: '/root'
+  }
+}
+</script>
+
+<style>
+.home-links a {
+  margin-right: 1rem;
+}
+
+</style>