From 8dcc3c660d7112a7616df7235d9b555451a6d0a2 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 27 Nov 2025 22:49:43 +0100
Subject: [PATCH] feat(projects): add project scope

---
 .../projects/top-screen/scope-badge.png       | Bin 0 -> 1963 bytes
 .../Projects/TopScreen/Previews.vue           |  18 +-
 app/stores/contact.ts                         | 169 +++++++++---------
 app/stores/home.ts                            | 114 ++++++------
 app/stores/projects.ts                        |   2 +
 content.config.ts                             |   1 +
 content/projects/biobleud/index.md            |   1 +
 content/projects/lbf-bot/index.md             |   1 +
 content/projects/lilou-cat/index.md           |   1 +
 content/projects/pihkaal-me/index.md          |   1 +
 content/projects/raylib-speedruns/index.md    |   1 +
 content/projects/s3pweb/index.md              |   1 +
 content/projects/simple-qr/index.md           |   1 +
 content/projects/tlock/index.md               |   1 +
 14 files changed, 166 insertions(+), 146 deletions(-)
 create mode 100644 app/assets/images/projects/top-screen/scope-badge.png

diff --git a/app/assets/images/projects/top-screen/scope-badge.png b/app/assets/images/projects/top-screen/scope-badge.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ef0ee2629e5585c96922a6c15efe8c4b905fb1b
GIT binary patch
literal 1963
zcmeAS@N?(olHy`uVBq!ia0vp^8bHj=!N$PASatA!GLXYq9OUlAc=M!AJ&?na?&#~t
zz_78O`%fY(kgt&J5#-CjP^HGe(9pub@Czu^@PdJ%)PRBERRRNp)eHs(@q#(K0&Rd2
zoCO|{#S9F3${@^GvDCf{D9B#o>Fdh=l3Q9-R!-=qVIxq4(bL5-#6pnq8yn|O#%Em&
z|AER-022xi%E3^{lJJTFL*<_ZVhk86u^9&vBT6Ah$~#PJu$lN{ju3GQiMAS>E!f1E
z;$9GMGd2Uz#r`dlpss-+3y2DBbeCY`vn9P@U}a^co(q4?6JhxN{X6vx1i6|fVTh65
zv4syQVpKPfYOzd;F9@l9>v<WhgqfL{frXIbfshy8t_!yIh08hWrb23aMq-cA;C3L$
e!&Fby)DFdqQR>g0wdz)Y%=L8jb6Mw<&;$SjOH#-H

literal 0
HcmV?d00001

diff --git a/app/components/Projects/TopScreen/Previews.vue b/app/components/Projects/TopScreen/Previews.vue
index d2591a9..8a8aa8b 100644
--- a/app/components/Projects/TopScreen/Previews.vue
+++ b/app/components/Projects/TopScreen/Previews.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import SCOPE_BADGE_IMAGE from "~/assets/images/projects/top-screen/scope-badge.png";
+
 const store = useProjectsStore();
 
-const projectPreviews = useImages(...store.projects.map((x) => x.preview));
+const [scopeBadgeImage, ...projectPreviews] = useImages(
+  SCOPE_BADGE_IMAGE,
+  ...store.projects.map((x) => x.preview),
+);
 
 const getBounds = () => ({
   startIndex: Math.max(store.currentProject - 1, 0),
@@ -72,6 +77,7 @@ useRender((ctx) => {
     const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
     const y = (192 - previewImage.height) / 2 + 10;
 
+    // game
     ctx.save();
     ctx.translate(x, y);
 
@@ -89,6 +95,7 @@ useRender((ctx) => {
     ctx.drawImage(previewImage, 0, 0);
     ctx.restore();
 
+    // technologies
     const project = store.projects[i]!;
     if (project.technologies && project.technologies.length > 0) {
       const badgeY = previewImage.height - BADGE_HEIGHT - BADGE_MARGIN;
@@ -96,6 +103,15 @@ useRender((ctx) => {
       drawTechBadges(ctx, project.technologies, badgeX, badgeY);
     }
 
+    // scope
+    ctx.translate(previewImage.width - scopeBadgeImage!.width + 3, -2);
+    ctx.drawImage(scopeBadgeImage!, 0, 0);
+
+    ctx.font = "7px NDS7";
+    ctx.fillStyle = "#000000";
+    ctx.textBaseline = "top";
+    fillTextCentered(ctx, project.scope.toUpperCase(), 0, -5, 40);
+
     ctx.restore();
   }
 });
diff --git a/app/stores/contact.ts b/app/stores/contact.ts
index eda8a7b..9f348a2 100644
--- a/app/stores/contact.ts
+++ b/app/stores/contact.ts
@@ -30,55 +30,53 @@ export const useContactStore = defineStore("contact", {
     animateIntro() {
       this.isIntro = true;
 
-      const start = 2;
+      const timeline = gsap.timeline({
+        onComplete: () => {
+          this.isIntro = false;
+        },
+      });
 
-      gsap.fromTo(
-        this.intro,
-        {
-          stage1Opacity: 0,
-          titleY: SCREEN_HEIGHT,
-        },
-        {
-          stage1Opacity: 1,
-          titleY: SCREEN_HEIGHT - 23,
-          duration: 0.1,
-          delay: start,
-          ease: "none",
-        },
-      );
-
-      gsap.fromTo(
-        this.intro,
-        {
-          stage2Opacity: 0,
-        },
-        {
-          stage2Opacity: 1,
-          duration: 0.1,
-          delay: start + 0.15,
-          ease: "none",
-        },
-      );
-
-      gsap.fromTo(
-        this.intro,
-        {
-          stage3Opacity: 0,
-          topBarY: -20,
-          bottomBarY: SCREEN_HEIGHT - 4,
-        },
-        {
-          stage3Opacity: 1,
-          topBarY: 0,
-          bottomBarY: SCREEN_HEIGHT - 24,
-          duration: 0.1,
-          delay: start + 0.15 + 0.15,
-          ease: "none",
-          onComplete: () => {
-            this.isIntro = false;
+      timeline
+        .fromTo(
+          this.intro,
+          {
+            stage1Opacity: 0,
+            titleY: SCREEN_HEIGHT,
           },
-        },
-      );
+          {
+            stage1Opacity: 1,
+            titleY: SCREEN_HEIGHT - 23,
+            duration: 0.1,
+            ease: "none",
+          },
+          2,
+        )
+        .fromTo(
+          this.intro,
+          { stage2Opacity: 0 },
+          {
+            stage2Opacity: 1,
+            duration: 0.1,
+            ease: "none",
+          },
+          2.15,
+        )
+        .fromTo(
+          this.intro,
+          {
+            stage3Opacity: 0,
+            topBarY: -20,
+            bottomBarY: SCREEN_HEIGHT - 4,
+          },
+          {
+            stage3Opacity: 1,
+            topBarY: 0,
+            bottomBarY: SCREEN_HEIGHT - 24,
+            duration: 0.1,
+            ease: "none",
+          },
+          2.3,
+        );
     },
 
     pushNotification(content: string) {
@@ -94,49 +92,46 @@ export const useContactStore = defineStore("contact", {
     animateOutro() {
       this.isOutro = true;
 
-      gsap.fromTo(
-        this.outro,
-        {
-          stage1Opacity: 1,
+      const timeline = gsap.timeline({
+        onComplete: () => {
+          setTimeout(() => {
+            this.isOutro = false;
+            navigateTo("/");
+          }, 2000);
         },
-        {
-          stage1Opacity: 0,
-          duration: 0.2,
-          ease: "none",
-        },
-      );
+      });
 
-      gsap.fromTo(
-        this.outro,
-        {
-          stage2Opacity: 1,
-        },
-        {
-          stage2Opacity: 0,
-          duration: 0.25,
-          delay: 0.25,
-          ease: "none",
-        },
-      );
-
-      gsap.fromTo(
-        this.outro,
-        {
-          stage3Opacity: 1,
-        },
-        {
-          stage3Opacity: 0,
-          duration: 0.3,
-          delay: 0.5,
-          ease: "none",
-          onComplete: () => {
-            setTimeout(() => {
-              this.isOutro = false;
-              navigateTo("/");
-            }, 2000);
+      timeline
+        .fromTo(
+          this.outro,
+          { stage1Opacity: 1 },
+          {
+            stage1Opacity: 0,
+            duration: 0.2,
+            ease: "none",
           },
-        },
-      );
+          0,
+        )
+        .fromTo(
+          this.outro,
+          { stage2Opacity: 1 },
+          {
+            stage2Opacity: 0,
+            duration: 0.25,
+            ease: "none",
+          },
+          0.25,
+        )
+        .fromTo(
+          this.outro,
+          { stage3Opacity: 1 },
+          {
+            stage3Opacity: 0,
+            duration: 0.3,
+            ease: "none",
+          },
+          0.5,
+        );
     },
   },
 });
diff --git a/app/stores/home.ts b/app/stores/home.ts
index 450fccc..a54132d 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -24,74 +24,72 @@ export const useHomeStore = defineStore("home", {
 
       this.isIntro = true;
 
-      const start = 0.5;
-      const duration = 0.5;
-      const delay = 0.35;
+      const timeline = gsap.timeline({
+        onComplete: () => {
+          this.isIntro = false;
+          if (!appStore.booted) appStore.booted = true;
+        },
+      });
 
-      gsap.fromTo(
-        this.intro,
-        { stage1Opacity: 0 },
-        {
-          stage1Opacity: 1,
-          duration,
-          delay: start,
-          ease: "none",
-          onComplete: () => {
-            this.isIntro = false;
-            if (!appStore.booted) appStore.booted = true;
+      timeline
+        .fromTo(
+          this.intro,
+          { stage1Opacity: 0 },
+          {
+            stage1Opacity: 1,
+            duration: 0.5,
+            ease: "none",
           },
-        },
-      );
-
-      gsap.fromTo(
-        this.intro,
-        { statusBarY: -20 },
-        {
-          statusBarY: 0,
-          duration: duration - delay,
-          delay: start + delay,
-          ease: "none",
-        },
-      );
+          0.5,
+        )
+        .fromTo(
+          this.intro,
+          { statusBarY: -20 },
+          {
+            statusBarY: 0,
+            duration: 0.15,
+            ease: "none",
+          },
+          0.85,
+        );
     },
 
     animateOutro(to: "contact" | "projects" | "settings") {
       this.isOutro = true;
       this.outro.animateTop = to !== "settings";
 
-      const duration = 0.4;
-      const delay = 0.08;
-
-      gsap.fromTo(
-        this.outro,
-        {
-          buttonOffsetY: 0,
-          stage1Opacity: 1,
+      const timeline = gsap.timeline({
+        onComplete: () => {
+          this.isOutro = true;
+          navigateTo(`/${to}`);
         },
-        {
-          buttonOffsetY: -200,
-          stage1Opacity: 0,
-          duration,
-          delay,
-          ease: "none",
-          onComplete: () => {
-            this.isOutro = true;
-            navigateTo(`/${to}`);
+      });
+
+      timeline
+        .fromTo(
+          this.outro,
+          { stage2Opacity: 1 },
+          {
+            stage2Opacity: 0,
+            duration: 0.16,
+            ease: "none",
           },
-        },
-      );
-
-      gsap.fromTo(
-        this.outro,
-        {
-          stage2Opacity: 1,
-        },
-        {
-          stage2Opacity: 0,
-          ease: "none",
-          duration: duration / 2 - delay,
-        },
-      );
+          0,
+        )
+        .fromTo(
+          this.outro,
+          {
+            buttonOffsetY: 0,
+            stage1Opacity: 1,
+          },
+          {
+            buttonOffsetY: -200,
+            stage1Opacity: 0,
+            duration: 0.4,
+            ease: "none",
+          },
+          0.08,
+        );
     },
   },
 });
diff --git a/app/stores/projects.ts b/app/stores/projects.ts
index 6c1004b..114a766 100644
--- a/app/stores/projects.ts
+++ b/app/stores/projects.ts
@@ -66,6 +66,7 @@ export const useProjectsStore = defineStore("projects", {
       preview: string;
       url: string | null;
       technologies: string[];
+      scope: "hobby" | "work";
       body: MarkdownBody;
     }[],
     currentProject: 0,
@@ -92,6 +93,7 @@ export const useProjectsStore = defineStore("projects", {
           preview: `/images/projects/${id}/preview.webp`,
           url: project.url,
           technologies: project.technologies,
+          scope: project.scope,
           body: simplifyMarkdownAST(project.body),
         });
       }
diff --git a/content.config.ts b/content.config.ts
index 4d24667..8c14778 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -11,6 +11,7 @@ export default defineContentConfig({
         url: z.url().nullable(),
         order: z.number(),
         technologies: z.array(z.string()),
+        scope: z.enum(["hobby", "work"]),
       }),
     }),
   },
diff --git a/content/projects/biobleud/index.md b/content/projects/biobleud/index.md
index 2aee581..5fd2283 100644
--- a/content/projects/biobleud/index.md
+++ b/content/projects/biobleud/index.md
@@ -3,4 +3,5 @@ description: Biobleud - Automated Excel imports\nfor an ERP system
 url: null
 order: 100
 technologies: [VBA]
+scope: work
 ---
diff --git a/content/projects/lbf-bot/index.md b/content/projects/lbf-bot/index.md
index 7a19735..241b164 100644
--- a/content/projects/lbf-bot/index.md
+++ b/content/projects/lbf-bot/index.md
@@ -3,6 +3,7 @@ description: LBF Bot - Custom Discord bot for\na gaming group
 url: https://github.com/pihkaal/lbf-bot
 order: 50
 technologies: [Node, TypeScript]
+scope: hobby
 ---
 
 a
diff --git a/content/projects/lilou-cat/index.md b/content/projects/lilou-cat/index.md
index c1802c0..888db7c 100644
--- a/content/projects/lilou-cat/index.md
+++ b/content/projects/lilou-cat/index.md
@@ -3,4 +3,5 @@ description: lilou.cat - My cat's website
 url: https://lilou.cat
 order: 40
 technologies: [HTML, Go]
+scope: hobby
 ---
diff --git a/content/projects/pihkaal-me/index.md b/content/projects/pihkaal-me/index.md
index 8bc1e2e..7e69d41 100644
--- a/content/projects/pihkaal-me/index.md
+++ b/content/projects/pihkaal-me/index.md
@@ -3,6 +3,7 @@ description: pihkaal.me - my personal website
 url: https://pihkaal.me
 order: 10
 technologies: [Nuxt, TypeScript]
+scope: hobby
 ---
 
 # pihkaal.me
diff --git a/content/projects/raylib-speedruns/index.md b/content/projects/raylib-speedruns/index.md
index 6c440ee..2360aae 100644
--- a/content/projects/raylib-speedruns/index.md
+++ b/content/projects/raylib-speedruns/index.md
@@ -2,6 +2,7 @@
 description: Raylib Speedruns - Collection of simple\nRaylib setups in multiple languages
 url: https://github.com/pihkaal/raylib-speedruns
 order: 60
+scope: hobby
 ---
 
 # Raylib Speedruns
diff --git a/content/projects/s3pweb/index.md b/content/projects/s3pweb/index.md
index dd24137..7f842a6 100644
--- a/content/projects/s3pweb/index.md
+++ b/content/projects/s3pweb/index.md
@@ -3,4 +3,5 @@ description: S3PWeb - Intership and\napprenticeship
 url: null
 order: 80
 technologies: [Node, StencilJS, TypeScript]
+scope: work
 ---
diff --git a/content/projects/simple-qr/index.md b/content/projects/simple-qr/index.md
index 85284dc..d288f7c 100644
--- a/content/projects/simple-qr/index.md
+++ b/content/projects/simple-qr/index.md
@@ -3,4 +3,5 @@ description: Simple QR - Simple QR code generator\nwith straightforward API
 url: https://simple-qr.com
 order: 30
 technologies: [Nuxt, TypeScript]
+scope: hobby
 ---
diff --git a/content/projects/tlock/index.md b/content/projects/tlock/index.md
index 82f0918..1eaadc6 100644
--- a/content/projects/tlock/index.md
+++ b/content/projects/tlock/index.md
@@ -3,4 +3,5 @@ description: tlock - fully customizable and cross-\nplatform terminal based cloc
 url: https://github.com/pihkaal/tlock
 order: 20
 technologies: [Rust]
+scope: hobby
 ---