First release

This commit is contained in:
Xeovalyte 2023-11-28 16:15:51 +01:00
parent 1883dcb8bb
commit 92878dd50a
Signed by: xeovalyte
GPG Key ID: 4ECA38E66D75674B
14 changed files with 991 additions and 60 deletions

10
shell.nix Normal file
View File

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

6
website/app.config.ts Normal file
View File

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

View File

@ -1,7 +1,8 @@
<template>
<div class="min-h-screen bg-dark-900 grid grid-cols-12">
<Sidebar class="col-span-2" />
<Content id="content" class="col-span-8 col-start-4" />
<MobileNav class="xl:hidden col-span-12" />
<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) => {

View File

@ -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
}

View File

@ -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>

View File

@ -1,15 +1,20 @@
<template>
<div class="bg-dark-800 h-screen w-full sticky top-0">
<div class="flex flex-col gap-y-3 text-center">
<a href="#about" class="text-primary-600 font-bold">
<div class="bg-dark-800 h-screen w-full sticky top-0 flex flex-col justify-center">
<img src="/logo.svg" alt="Xeovalyte logo" class="mx-auto w-48">
<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>

View File

@ -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>

View File

@ -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>

View File

@ -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>
<li>Docker</li>
<li>Javascript, HTML & CSS</li>
<li>Arduino</li>
<li>Rust</li>
<h2 class="text-primary-600 font-bold text-2xl mt-10">Linux</h2>
<p class="text-bright mt-2">
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.
</p>
<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>

View File

@ -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: {
options: {
scrollBehaviorType: 'smooth',
},
},
app: {
head: {
link: [
{
rel: "icon",
href: "/logo.svg",
type: "image/svg+xml",
},
],
}
}
})

View File

@ -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"
}
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -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"
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" />
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"
inkscape:export-filename="rect753.svg"
inkscape:export-xdpi="114.66252"
inkscape:export-ydpi="114.66252" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB