fixed umami

.gitea/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: Build and Deploy
+on: [push]
+
+jobs:
+  Deploy:
+    runs-on: ubuntu-latest
+
+    container:
+      image: catthehacker/ubuntu:act-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Nodejs
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm install
+      - run: npm run build
+
+      - uses: docker/setup-qemu-action@v2
+      - uses: docker/setup-buildx-action@v2
+
+      - uses: docker/login-action@v2
+        with:
+          registry: gitea.xeovalyte.dev
+          username: ${{ secrets.USERNAME }}
+          password: ${{ secrets.PASSWORD }}
+
+      - run: docker buildx build -t gitea.xeovalyte.dev/xeovalyte/portfolio:latest-arm --load --platform=linux/arm64 .
+      - run: docker push gitea.xeovalyte.dev/xeovalyte/portfolio:latest-arm
+
+      - run: docker buildx build -t gitea.xeovalyte.dev/xeovalyte/portfolio:latest --load --platform=linux/amd64 .
+      - run: docker push gitea.xeovalyte.dev/xeovalyte/portfolio:latest

.prettierigonore

@@ -0,0 +1 @@
+.nuxt

.prettierrc.json

@@ -0,0 +1 @@
+{}

.woodpecker.yml

@@ -1,13 +0,0 @@
-pipeline:
-  publish:
-    image: plugins/docker
-    secrets:
-      - docker_password
-    settings:
-      username: xeovalyte
-      password:
-        from_secret: docker_password
-      repo: gitea.xeovalyte.dev/xeovalyte/portfolio
-      tags:
-        - latest
-      registry: gitea.xeovalyte.dev

Dockerfile

@@ -2,11 +2,8 @@ FROM node:18
 
 WORKDIR /usr/src/app
 
-COPY . .
+COPY .output .
-
-RUN npm install
-RUN npm run build
 
 EXPOSE 3000 
 
-CMD [ "node", ".output/server/index.mjs" ]
+CMD [ "node", "server/index.mjs" ]

assets/icons/logo.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <path
+       id="rect753"
+       style="fill:#0080ff;fill-opacity:1;stroke-width:0.367356"
+       d="M 0.8196733,1.5362707 5.1211071,5.8377046 4.3020509,6.657378 -2e-7,2.355327 V 4.81373 L 3.0725407,7.8862709 0.8196733,10.139138 H 3.2774591 L 4.3014337,9.1151643 5.1211071,9.9342203 6.35,11.163729 7.578893,9.9342203 8.3985664,9.1151643 9.4225412,10.139138 H 11.880326 L 9.6274592,7.8862709 12.7,4.81373 V 2.355327 L 8.3979491,6.657378 7.578893,5.8377046 11.880326,1.5362707 H 9.4225412 L 6.35,4.6088116 3.2774591,1.5362707 Z M 6.35,7.0665975 7.1696734,7.8856537 6.35,8.7053271 5.5303266,7.8856537 Z" />
+  </g>
+</svg>

components/layout/Leftbar.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="fixed hidden lg:block left-3 top-1/2 text-primary-500 space-y-1 z-50">
+    <div @click="scrollToElement('heading')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#heading' ? 'w-16' : 'w-8'" />
+    </div>
+    <div @click="scrollToElement('about')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#about' ? 'w-16' : 'w-8'" />
+    </div>
+    <div @click="scrollToElement('skills')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#skills' ? 'w-16' : 'w-8'" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+</script>

components/slides/About.vue

@@ -0,0 +1,41 @@
+<template>
+  <section class="flex h-screen snap-center items-center justify-center">
+    <div
+      class="my-40 mx-3 flex w-full max-w-xl flex-wrap items-center justify-center gap-5 whitespace-pre-wrap text-lg text-primary-500"
+    >
+      <h2
+        v-animate="{ preset: 'slide-right', duration: 500 }"
+        class="mb-10 text-center text-3xl font-bold"
+      >
+        {{ t("title") }}
+      </h2>
+      <div v-animate="{ preset: 'slide-right', delay: 400, duration: 500 }">
+        {{ t("message") }}
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const { t } = useI18n({ useScope: "local" });
+</script>
+
+<i18n lang="yaml">
+en:
+  message: |
+    Hi,
+    My name is Timo Boomers (16) also known as Xeovalyte. I live in the Netherlands and I have always found electronics and computers interesting.
+
+    When I was 12 I started programming. I now program Websites, Discord bots and Arduino.
+
+  title: "About"
+
+nl:
+  message: |
+    Hallo,
+    Mijn naam is Timo Boomers (16) ook wel bekend als Xeovalyte. Ik heb electronica en computers altijd interresant gevonden en ben toen gaan programmeren.
+
+    Toen ik 12 was begon ik met programmeren. Ondertussen programmeer ik Websites, Discord bots en Arduino.
+
+  title: "Over mij"
+</i18n>

components/slides/Heading.vue

@@ -0,0 +1,44 @@
+<template>
+  <section
+    class="relative flex h-screen snap-center items-center justify-center"
+  >
+    <div
+      class="flex flex-wrap items-center justify-center gap-5 text-center text-primary-500"
+    >
+      <img
+        v-animate="{ preset: 'slide-left', delay: 300 }"
+        src="../../assets/icons/logo.svg"
+        alt="Logo Xeovalyte"
+        width="150"
+      />
+      <div class="space-y-2">
+        <h1
+          v-animate="{ preset: 'slide-up', delay: 450 }"
+          class="sm:text-7xl text-6xl font-bold"
+        >
+          Xeovalyte
+        </h1>
+        <div
+          v-animate="{ preset: 'slide-right', delay: 600 }"
+          class="h-1 w-full rounded-full bg-primary-500"
+        />
+        <h3
+          v-animate="{ preset: 'slide-down', delay: 750 }"
+          class="text-4xl font-bold"
+        >
+          Timo Boomers
+        </h3>
+      </div>
+
+      <Icon
+        @click="scrollToElement('about')"
+        size="2em"
+        name="ph:arrow-fat-line-down"
+        class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup>
+</script>

components/slides/Skills.vue

@@ -0,0 +1,85 @@
+<template>
+  <section class="flex h-screen snap-center items-center justify-center">
+    <div
+      class="my-40 mx-5 flex w-full max-w-3xl flex-col text-primary-500"
+      v-animate="{ stagger: true, preset: 'slide-left', duration: 500 }"
+    >
+      <h2 class="mb-10 text-center text-3xl font-bold">
+        {{ t("skills.skills") }}
+      </h2>
+      <h2 class="text-lg font-bold">Arduino</h2>
+      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
+        <div
+          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
+        >
+          <div class="h-4 w-3/5 rounded-full bg-primary-100" />
+        </div>
+        <h2 class="hidden text-lg font-bold sm:inline-block">
+          {{ t("skills.intermediate") }}
+        </h2>
+      </div>
+      <h2 class="text-lg font-bold">Docker</h2>
+      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
+        <div
+          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
+        >
+          <div class="h-4 w-4/5 rounded-full bg-primary-100" />
+        </div>
+        <h2 class="hidden text-lg font-bold sm:inline-block">
+          {{ t("skills.advanced") }}
+        </h2>
+      </div>
+      <h2 class="text-lg font-bold">Javascript</h2>
+      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
+        <div
+          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
+        >
+          <div class="h-4 w-2/3 rounded-full bg-primary-100" />
+        </div>
+        <h2 class="hidden text-lg font-bold sm:inline-block">
+          {{ t("skills.intermediate") }}
+        </h2>
+      </div>
+      <h2 class="text-lg font-bold">Linux</h2>
+      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
+        <div
+          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
+        >
+          <div class="h-4 w-4/5 rounded-full bg-primary-100" />
+        </div>
+        <h2 class="hidden text-lg font-bold sm:inline-block">
+          {{ t("skills.advanced") }}
+        </h2>
+      </div>
+      <h2 class="text-lg font-bold">Nuxt</h2>
+      <div class="mb-5 grid grid-cols-5 items-center gap-x-4">
+        <div
+          class="col-span-5 h-4 w-full rounded-full bg-dark-600 sm:col-span-4"
+        >
+          <div class="h-4 w-3/5 rounded-full bg-primary-100" />
+        </div>
+        <h2 class="hidden text-lg font-bold sm:inline-block">
+          {{ t("skills.intermediate") }}
+        </h2>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const { t } = useI18n({ useScope: "local" });
+</script>
+
+<i18n lang="yaml">
+en:
+  skills:
+    skills: "Skills"
+    intermediate: "Intermediate"
+    advanced: "Advanced"
+
+nl:
+  skills:
+    skills: "Vaardigheden"
+    intermediate: "Gemiddeld"
+    advanced: "Geavanceerd"
+</i18n>

composables/scrollToElement.js

@@ -0,0 +1,4 @@
+export default function (hash) {
+  const element = document.getElementById(hash)
+  element.scrollIntoView({ behavior: 'smooth' })
+}

nuxt.config.ts

@@ -7,12 +7,7 @@ export default defineNuxtConfig({
     "nuxt-icons",
     "@nuxtjs/robots",
     "@nuxtjs/i18n",
-    "@nuxtjs/plausible",
   ],
-  plausible: {
-    domain: 'xeovalyte.com',
-    apiHost: 'https://plausible.xeovalyte.dev'
-  },
   app: {
     head: {
       title: 'Xeovalyte | Timo Boomers Portfolio',
@@ -25,7 +20,10 @@ export default defineNuxtConfig({
       ],
       meta: [
         { name: 'description', content: 'This is the official portfolio of Xeovalyte or Timo Boomers'}
-      ]
+      ],
+      script: [
+        { src: 'https://umami.xeovalyte.dev/script.js', async: true, 'data-website-id': '7d4c9046-c073-4d31-9bba-2da4be4499fc' },
+      ],
     }
   },
   i18n: {

package.json

@@ -8,17 +8,17 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxtjs/plausible": "^0.2.0",
+    "@nuxtjs/tailwindcss": "^6.3.1",
-    "@nuxtjs/tailwindcss": "^6.2.0",
+    "@vueuse/core": "^9.12.0",
-    "@vueuse/core": "^9.8.2",
+    "@vueuse/nuxt": "^9.12.0",
-    "@vueuse/nuxt": "^9.8.2",
+    "nuxt": "3.2.0",
-    "nuxt": "3.1.2",
+    "nuxt-icon": "^0.2.11",
-    "nuxt-icon": "^0.1.8",
+    "prettier": "^2.8.4",
-    "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.2.2"
   },
   "dependencies": {
     "@nuxtjs/i18n": "^8.0.0-beta.9",
+    "@nuxtjs/plausible": "^0.2.0",
     "@nuxtjs/robots": "^3.0.0",
     "locomotive-scroll": "^4.1.4",
     "nuxt-icons": "^3.1.0"

pages/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <LayoutLeftbar />
+  <div id="observe" class="h-screen snap-y snap-mandatory overflow-y-auto overflow-x-hidden bg-dark-200">
+    <SlidesHeading id="heading" />
+    <SlidesAbout id="about" />
+    <SlidesSkills id="skills" />
+  </div>
+</template>
+
+<script setup>
+const router = useRouter()
+
+const callback = (entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      router.replace({ hash: '#' + entry.target.id})
+    }
+  })
+}
+
+onMounted(() => {
+  let targets = document.querySelectorAll('section')
+  const observer = new IntersectionObserver(callback, { root: document.querySelector('#observe'), threshold: 0.9 })
+
+  targets.forEach(target => {
+    observer.observe(target)
+  })
+})
+</script>

plugins/motion.js

@@ -0,0 +1,101 @@
+export default defineNuxtPlugin((NuxtApp) => {
+
+  NuxtApp.vueApp.directive('animate', (el, binding) => {
+    el.classList.add('animate')
+
+    el.setAttribute('data-animate-duration', binding.value.duration || 250 )
+    el.setAttribute('data-animate-delay', binding.value.delay || 200 )
+    el.setAttribute('data-animate-preset', binding.value.preset || 'fade' )
+    el.setAttribute('data-animate-stagger', binding.value.stagger || false )
+    el.setAttribute('data-animate-stagger-delay', binding.value.staggerDelay || 100 )
+  })
+
+  NuxtApp.hook('page:finish', () => {
+    const applyClasses = (el, type) => {
+      const initialClasses = JSON.parse(el.getAttribute('data-animate-initial'))
+      const animateClasses = JSON.parse(el.getAttribute('data-animate-animate'))
+
+      if (type === 'initial') {
+        Object.keys(initialClasses).forEach(x => {
+          el.style[x] = initialClasses[x] 
+        }) 
+
+        el.style['transition-property'] = 'none'
+      }
+
+      if (type === 'animate') {
+        Object.keys(animateClasses).forEach(x => {
+          el.style[x] = animateClasses[x]
+        })
+
+        el.style['transition-property'] = 'all'
+      }
+    }
+
+    const callback = (entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          applyClasses(entry.target, 'animate')
+        } else {
+          applyClasses(entry.target, 'initial')
+        }
+      })
+    }
+
+    // Configure staggering animations
+    let targets = document.querySelectorAll('.animate')
+    targets.forEach((target) => {
+      if (target.getAttribute('data-animate-stagger') === 'true') {
+        target.classList.remove('animate')
+
+        const collection = target.children
+        Object.values(collection).forEach((child, index) => {
+          child.setAttribute('data-animate-preset', target.getAttribute('data-animate-preset') )
+          child.setAttribute('data-animate-duration', target.getAttribute('data-animate-duration') )
+
+          child.style.transitionDelay = Number(target.getAttribute('data-animate-delay')) + index * Number(target.getAttribute('data-animate-stagger-delay')) + 'ms' 
+          child.classList.add('animate') 
+        })
+      } else {
+        target.style.transitionDelay = target.getAttribute('data-animate-delay') + 'ms'
+      }
+    })
+
+    
+    // Configure presets
+    const observer = new IntersectionObserver(callback)
+    targets = document.querySelectorAll('.animate')
+    
+    targets.forEach(target => {
+      const preset = target.getAttribute('data-animate-preset')
+
+      if (preset === 'fade') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0 }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100 }))
+
+      } else if (preset === 'slide-left') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateX(-6em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateX(0)', filter: 'blur(0)' }))
+
+      } else if (preset === 'slide-right') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateX(6em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateX(0)', filter: 'blur(0px)' }))
+
+      } else if (preset === 'slide-up') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateY(-2em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateY(0)', filter: 'blur(0px)' }))
+        
+      } else if (preset === 'slide-down') {
+        target.setAttribute('data-animate-initial', JSON.stringify({ opacity: 0, transform: 'translateY(2em)', filter: 'blur(5px)' }))
+        target.setAttribute('data-animate-animate', JSON.stringify({ opacity: 100, transform: 'translateY(0)', filter: 'blur(0px)' }))
+      }
+
+      applyClasses(target, 'initial')
+
+      target.classList.add('transition-all')
+      target.style['transition-duration'] = target.getAttribute('data-animate-duration') + 'ms' 
+
+      observer.observe(target)
+    })
+  })
+})