Update '.gitea/workflows/ci.yml'

.gitea/workflows/ci.yml

@@ -0,0 +1,40 @@
+name: Build and Deploy
+on: [push]
+
+jobs:
+  Build:
+    runs-on: ubuntu-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
+
+
+  Deploy:
+    runs-on: ubuntu-docker
+
+    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
+        with:
+          platforms: linux/amd64,linux/arm64
+      - 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 --platform=linux/amd64,linux/arm64 .
+      - run: docker inspect gitea.xeovalyte.dev/xeovalyte/portfolio
+      - run: docker push gitea.xeovalyte.dev/xeovalyte/portfolio

.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/website
-      tags:
-        - latest
-      registry: gitea.xeovalyte.dev

Dockerfile

@@ -2,11 +2,8 @@ FROM node:18
 
 WORKDIR /usr/src/app
 
-COPY . .
-
-RUN npm install
-RUN npm run build
+COPY .output .
 
 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

@@ -1,7 +1,7 @@
 <template>
   <section class="flex h-screen snap-center items-center justify-center">
     <div
-      class="my-40 flex w-full max-w-xl flex-wrap items-center justify-center gap-5 whitespace-pre-wrap text-lg text-primary-500"
+      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 }"

components/slides/Heading.vue

@@ -7,14 +7,14 @@
     >
       <img
         v-animate="{ preset: 'slide-left', delay: 300 }"
-        src="../assets/icons/logo.svg"
+        src="../../assets/icons/logo.svg"
         alt="Logo Xeovalyte"
         width="150"
       />
       <div class="space-y-2">
         <h1
           v-animate="{ preset: 'slide-up', delay: 450 }"
-          class="text-7xl font-bold"
+          class="sm:text-7xl text-6xl font-bold"
         >
           Xeovalyte
         </h1>
@@ -31,6 +31,7 @@
       </div>
 
       <Icon
+        @click="scrollToElement('about')"
         size="2em"
         name="ph:arrow-fat-line-down"
         class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"
@@ -38,3 +39,6 @@
     </div>
   </section>
 </template>
+
+<script setup>
+</script>

composables/scrollToElement.js

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

nuxt.config.ts

@@ -7,7 +7,27 @@ 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',
+      link: [
+        {
+          "rel": "icon",
+          "href": "/favicon.ico",
+          "type": "image/png"
+        }
+      ],
+      meta: [
+        { name: 'description', content: 'This is the official portfolio of Xeovalyte or Timo Boomers'}
+      ]
+    }
+  },
   i18n: {
     baseUrl: 'https://xeovalyte.com',
     locales: [

package.json

@@ -8,19 +8,19 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^6.2.0",
-    "@vueuse/core": "^9.8.2",
-    "@vueuse/nuxt": "^9.8.2",
-    "nuxt": "3.0.0",
-    "nuxt-icon": "^0.1.8",
-    "prettier": "^2.8.3",
+    "@nuxtjs/tailwindcss": "^6.3.1",
+    "@vueuse/core": "^9.12.0",
+    "@vueuse/nuxt": "^9.12.0",
+    "nuxt": "3.2.0",
+    "nuxt-icon": "^0.2.11",
+    "prettier": "^2.8.4",
     "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",
-    "motion": "^10.15.5",
     "nuxt-icons": "^3.1.0"
   }
 }

pages/index.vue

@@ -1,9 +1,29 @@
 <template>
-  <div class="h-screen snap-y snap-mandatory overflow-y-auto bg-dark-200">
-    <Heading />
-    <About />
-    <Skills />
+  <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></script>
+<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>