First release

shell.nix

@@ -0,0 +1,10 @@
+let
+  pkgs = import <nixpkgs> { };
+in
+pkgs.mkShell {
+  buildInputs = with pkgs; [
+    nodejs_18
+    nodePackages.pnpm
+    nodePackages.typescript-language-server
+  ];
+}

website/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  umami: {
+    host: 'https://umami.xeovalyte.dev/',
+    id: '7d4c9046-c073-4d31-9bba-2da4be4499fc',
+  },
+});

website/app.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="min-h-screen bg-dark-900 grid grid-cols-12">
-    <Sidebar class="col-span-2" />
+    <MobileNav class="xl:hidden col-span-12" />
-    <Content id="content" class="col-span-8 col-start-4" />
+    <Sidebar class="col-span-2 hidden xl:flex" />
+    <Content id="content" class="col-span-10 col-start-2 xl:col-span-8 xl:col-start-4" />
   </div>
 </template>
 
@@ -11,6 +12,12 @@ const router = useRouter()
 useSeoMeta({
   title: 'Timo Boomers / Xeovalyte',
   description: 'This is the portfolio of Timo Boomers, also known as Xeovalyte',
+  profileFirstName: 'Timo',
+  profileGender: 'male',
+  profileLastName: 'Boomers',
+  profileUsername: 'Xeovalyte',
+  author: 'Timo Boomers',
+  creator: 'Timo Boomers'
 })
 
 const callback = (entries)  => {

website/assets/css/tailwind.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+p > a[href^="https://"] {
+  @apply text-primary-100 hover:underline underline-offset-4
+}
+
+p > a[href^="https://"]::after  {
+  filter: invert(62%) sepia(34%) saturate(1941%) hue-rotate(174deg) brightness(103%) contrast(102%);
+  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjI0IDEwNGE4IDggMCAwIDEtMTYgMFY1OS4zMmwtNjYuMzMgNjYuMzRhOCA4IDAgMCAxLTExLjMyLTExLjMyTDE5Ni42OCA0OEgxNTJhOCA4IDAgMCAxIDAtMTZoNjRhOCA4IDAgMCAxIDggOFptLTQwIDI0YTggOCAwIDAgMC04IDh2NzJINDhWODBoNzJhOCA4IDAgMCAwIDAtMTZINDhhMTYgMTYgMCAwIDAtMTYgMTZ2MTI4YTE2IDE2IDAgMCAwIDE2IDE2aDEyOGExNiAxNiAwIDAgMCAxNi0xNnYtNzJhOCA4IDAgMCAwLTgtOFoiLz48L3N2Zz4=);
+  margin: 0 0 0 3px;
+}
+
+p {
+  position: relative;
+  z-index: 0
+}

website/components/MobileNav.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="w-full px-5 h-12 bg-dark-800/40 backdrop-blur-sm sticky z-40 top-0 left-0">
+    <div class="w-full h-full flex">
+      <img src="/logo.svg" alt="Xeovalyte logo" class="w-10 my-auto">
+      <Icon name="ph:list-bold" size="2.5em" class="ml-auto my-auto text-primary-500 hover:cursor-pointer" @click="menuOpen = true" />
+    </div>
+    <Transition>
+      <div v-if="menuOpen" class="fixed z-50 top-0 left-0 w-screen h-screen bg-dark-800/60 backdrop-blur-lg px-5 flex flex-col">
+        <div class="w-full h-12 flex">
+          <img src="/logo.svg" alt="Xeovalyte logo" class="w-10 my-auto">
+          <Icon name="ph:x-bold" size="2.5em" class="ml-auto my-auto text-primary-500 hover:cursor-pointer" @click="menuOpen = false" />
+        </div>
+        <div class="flex flex-col mx-auto mt-48 gap-y-8">
+          <a href="#about" class="font-bold text-4xl text-primary-500" :class="route.hash === '#about' ? 'opacity-100' : 'opacity-50'">
+            About
+          </a>
+          <a href="#skills" to="#skills" class="font-bold text-4xl text-primary-500" :class="route.hash === '#skills' ? 'opacity-100' : 'opacity-50'">
+            Skills
+          </a>
+          <a href="#projects" class="font-bold text-4xl text-primary-500" :class="route.hash === '#projects' ? 'opacity-100' : 'opacity-50'">
+            Projects
+          </a>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+const menuOpen = ref(false);
+
+const route = useRoute()
+</script>
+
+<style>
+.v-enter-active,
+.v-leave-active {
+  transition: transform 0.3s ease-out;
+}
+
+.v-enter-from,
+.v-leave-to {
+  transform: translateY(-100%);
+}
+</style>

website/components/Sidebar.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="bg-dark-800 h-screen w-full sticky top-0">
+  <div class="bg-dark-800 h-screen w-full sticky top-0 flex flex-col justify-center">
-    <div class="flex flex-col gap-y-3 text-center">
+    <img src="/logo.svg" alt="Xeovalyte logo" class="mx-auto w-48">
-      <a href="#about" class="text-primary-600 font-bold">
+    <div class="flex flex-col gap-y-3 text-center mt-10">
+      <a href="#about" class="font-bold text-xl text-primary-500" :class="route.hash === '#about' ? 'opacity-100' : 'opacity-50'">
         About
       </a>
-      <a href="#skills" to="#skills" class="text-primary-600 font-bold">
+      <a href="#skills" to="#skills" class="font-bold text-xl text-primary-500" :class="route.hash === '#skills' ? 'opacity-100' : 'opacity-50'">
         Skills
       </a>
-      <a href="#projects" class="text-primary-600 font-bold">
+      <a href="#projects" class="font-bold text-xl text-primary-500" :class="route.hash === '#projects' ? 'opacity-100' : 'opacity-50'">
         Projects
       </a>
     </div>
   </div>
 </template>
+
+<script setup>
+const route = useRoute()
+</script>

website/components/sections/Heading.vue

@@ -4,7 +4,17 @@
     <h3 class="text-primary-700 font-bold text-xl">aka Xeovalyte</h3>
 
     <p class="text-bright mt-10">
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, in architecto et fugiat aperiam ipsum vitae accusantium quasi doloremque quidem aspernatur adipisci voluptatum ut est nobis voluptates doloribus quas obcaecati sequi? Quis neque ab ipsa quo maiores veniam officiis dignissimos soluta illo laborum, non odit incidunt id officia corporis doloribus saepe labore ducimus qui libero nostrum nemo. Molestiae iste quam quaerat sequi debitis, in eos dolore dolorum illo voluptates laudantium at tempora perspiciatis qui, error expedita, animi cupiditate nesciunt aut fuga corrupti! Incidunt possimus magnam natus laborum laboriosam veniam sequi repudiandae, doloribus esse, nesciunt sapiente in aperiam? Voluptatibus, dolorem reiciendis!
+      Hello everyone! My name is Timo Boomers also known as Xeovalyte. I live in the Netherlands and have always found electronics and computers interesting. Since I was about 12 years old I started to wander in the world of computers and programming. At this moment I program various things like websites, Discord bots, desktop applications and Arduino.
     </p>
+    <div class="text-primary-500 flex gap-5 text-lg mt-16 font-bold">
+      <NuxtLink to="https://gitea.xeovalyte.dev/xeovalyte" :external="true" class="border-b pb-1 border-dotted hover:border-solid border-bright flex gap-1.5 hover:text-primary-100">
+        <Icon name="simple-icons:gitea" size="1.6em"/>
+        Gitea
+      </NuxtLink>
+      <NuxtLink to="mailto:contact@xeovalyte.dev" :external="true" class="border-b pb-1 border-dotted hover:border-solid border-bright flex gap-1.5 hover:text-primary-100">
+        <Icon name="simple-icons:maildotru" size="1.5em"/>
+        Email
+      </NuxtLink>
+    </div>
   </div>
 </template>

website/components/sections/Projects.vue

@@ -2,14 +2,21 @@
   <div class="py-40">
     <h1 class="text-primary-500 font-bold text-6xl">Projects</h1>
 
-    <h2 class="text-primary-600 font-bold text-2xl mt-10">LED hologram</h2>
+    <h2 class="text-primary-600 font-bold text-2xl mt-10">Homelab</h2>
     <p class="text-bright mt-2">
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio commodi, atque dolorem beatae recusandae ipsum culpa vel accusantium. Autem at nostrum est libero excepturi numquam iste recusandae expedita ab laborum, fugit architecto soluta dolores non itaque aliquid reprehenderit alias eum cupiditate esse doloribus minus praesentium? Architecto totam sunt libero minus?
+      In 2021 I bought a <a href="https://www.raspberrypi.com/">Raspberry Pi</a> to selfhost some applications with docker. I really loved to learn about networking and deploying applications, and so my homelab needed an upgrade. In 2022 I bough myself a dedicated computer to host a <a href="https://minecraft.net">Minecraft</a> server for me and my friends and some other applications. My homelab now consists of a <a href="https://www.zimaboard.com/">Zimaboard</a> running <a href="https://opnsense.org/">OPNsense</a>, a dedicated server running Linux with <a href="https://docker.io">Docker</a> applications and a <a href="raspberrypi.com">Raspberry Pi</a> as a backup server.
     </p>
 
+    <h2 class="text-primary-600 font-bold text-2xl mt-10">LED hologram</h2>
+    <p class="text-bright mt-2">
+      Work in progress...
+    </p>
+
+    <!--
     <h2 class="text-primary-600 font-bold text-2xl mt-10">WRB App</h2>
     <p class="text-bright mt-2">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio commodi, atque dolorem beatae recusandae ipsum culpa vel accusantium. Autem at nostrum est libero excepturi numquam iste recusandae expedita ab laborum, fugit architecto soluta dolores non itaque aliquid reprehenderit alias eum cupiditate esse doloribus minus praesentium? Architecto totam sunt libero minus?
     </p>
+    -->
   </div>
 </template>

website/components/sections/Skills.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="py-40">
     <h1 class="text-6xl font-bold text-primary-500">Skills</h1>
-    <ul class="text-bright mt-10">
+
-      <li>Linux</li>
+    <h2 class="text-primary-600 font-bold text-2xl mt-10">Linux</h2>
-      <li>Docker</li>
+    <p class="text-bright mt-2">
-      <li>Javascript, HTML & CSS</li>
+      I have been using Linux as my daily driver since 2020. I started out with <a href="https://pop.system76.com/">Pop!_OS</a> and at that moment my love started with Linux. Early 2021 I switch to <a href="https://archlinux.org/">Archlinux</a> and was very happy with the customizability. Later in 2022 I started using a tiling window manager instead of a stacking window manager, because I wanted to be more productive and learn more about how a desktop works. Since late 2023 until now I use <a href="https://nixos.org/">NixOS</a> because I loved the idea of an declarative system.
-      <li>Arduino</li>
+    </p>
-      <li>Rust</li>
+
+    <h2 class="text-primary-600 font-bold text-2xl mt-10">Programming</h2>
+    <p class="text-bright mt-2">
+      My programming journey started in 2018 with learning the basics of <a href="https://arduino.cc">Arduino</a>. Later I started learning html, css and javascript to learn about the web. I found the framework <a href="https://nuxt.com">Nuxt</a> and now use this to create websites and progressive web apps. Since late 2023 I started learning the <a href="https://rustlang.org">Rust</a> programming language, because I wanted to create native desktop applications without electron.
+    </p>
+
+    <h2 class="text-primary-600 font-bold text-2xl mt-10">Tools</h2>
+    <ul class="mt-2">
+      <li class="text-bright">
+        Docker, Git, Ionic
+      </li>
     </ul>
   </div>
 </template>

website/nuxt.config.ts

@@ -1,12 +1,20 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  extends: ['nuxt-umami'],
   modules: [
     '@nuxtjs/tailwindcss',
+    'nuxt-icon',
   ],
-  router: {
+  app: {
-    options: {
+    head: {
-      scrollBehaviorType: 'smooth',
+      link: [
-    },
+        {
+          rel: "icon",
+          href: "/logo.svg",
+          type: "image/svg+xml",
         },
+      ],
+    }
+  }
 })

website/package.json

@@ -13,7 +13,11 @@
     "@nuxt/devtools": "latest",
     "@nuxtjs/tailwindcss": "^6.9.5",
     "nuxt": "^3.8.1",
+    "nuxt-icon": "^0.6.6",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
+  },
+  "dependencies": {
+    "nuxt-umami": "^2.5.5"
   }
 }

website/public/logo.svg

@@ -7,8 +7,31 @@
    viewBox="0 0 10.632943 8.0604894"
    version="1.1"
    id="svg5"
+   sodipodi:docname="inkscape.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview46"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="9.8333334"
+     inkscape:cx="33.966101"
+     inkscape:cy="22.627119"
+     inkscape:window-width="1896"
+     inkscape:window-height="1022"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
   <defs
      id="defs2" />
   <g
@@ -16,7 +39,10 @@
      transform="translate(-1.0335286,-2.7486694)">
     <path
        id="rect753"
-       style="fill:#00bfff;fill-opacity:1;stroke-width:0.307565"
+       style="fill:#00aaff;fill-opacity:1;stroke-width:0.307565"
-       d="M 1.7197917,2.7486694 5.3211222,6.35 4.635376,7.036263 1.0335286,3.4344157 V 5.492688 L 3.6059814,8.0651408 1.7197917,9.9513306 H 3.7775472 L 4.6348592,9.0940186 5.3211222,9.7797648 6.35,10.809159 7.3788778,9.7797648 8.0651408,9.0940186 8.9224528,9.9513306 H 10.980208 L 9.0940186,8.0651408 11.666471,5.492688 V 3.4344157 L 8.064624,7.036263 7.3788778,6.35 10.980208,2.7486694 H 8.9224528 L 6.35,5.3211222 3.7775472,2.7486694 Z M 6.35,7.3788778 7.036263,8.064624 6.35,8.750887 5.663737,8.064624 Z" />
+       d="M 1.7197917,2.7486694 5.3211222,6.35 4.635376,7.036263 1.0335286,3.4344157 V 5.492688 L 3.6059814,8.0651408 1.7197917,9.9513306 H 3.7775472 L 4.6348592,9.0940186 5.3211222,9.7797648 6.35,10.809159 7.3788778,9.7797648 8.0651408,9.0940186 8.9224528,9.9513306 H 10.980208 L 9.0940186,8.0651408 11.666471,5.492688 V 3.4344157 L 8.064624,7.036263 7.3788778,6.35 10.980208,2.7486694 H 8.9224528 L 6.35,5.3211222 3.7775472,2.7486694 Z M 6.35,7.3788778 7.036263,8.064624 6.35,8.750887 5.663737,8.064624 Z"
+       inkscape:export-filename="rect753.svg"
+       inkscape:export-xdpi="114.66252"
+       inkscape:export-ydpi="114.66252" />
   </g>
 </svg>