feat: display projects as pokemons in pokemon platinum

app/assets/app.css

@@ -12,6 +12,14 @@
   font-style: normal;
 }
 
+/* NOTE: woff2 version of this font doesn't work */
+@font-face {
+  font-family: "Pokemon DP Pro";
+  src: url("/assets/fonts/pokemon-dp-pro.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;

app/components/Projects/BottomScreen/Background.vue

@@ -1,33 +1,11 @@
 <script setup lang="ts">
-import BACKGROUND_IMAGE from "/assets/images/projects/bottom-screen/background.webp";
-import VISIT_DISABLED_IMAGE from "/assets/images/projects/bottom-screen/visit-disabled.webp";
+import BACKGROUND_IMAGE from "~/assets/images/projects/bottom-screen/background.webp";
 
-const store = useProjectsStore();
-
-const [backgroundImage, visitDisabledImage] = useImages(
-  BACKGROUND_IMAGE,
-  VISIT_DISABLED_IMAGE,
-);
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
 
 useRender((ctx) => {
   ctx.drawImage(backgroundImage!, 0, 0);
-
-  if (store.projects[store.currentProject]?.url === null) {
-    ctx.drawImage(visitDisabledImage!, 144, 172);
-  }
 });
-
-const QUIT_BUTTON: Rect = [31, 172, 80, 18];
-const OK_BUTTON: Rect = [144, 172, 80, 18];
-
-useScreenClick((x, y) => {
-  if (rectContains(QUIT_BUTTON, [x, y])) {
-    // TODO: outro
-  } else if (rectContains(OK_BUTTON, [x, y])) {
-    store.visitProject();
-  }
-});
-
 defineOptions({
   render: () => null,
 });

app/components/Projects/BottomScreen/BottomScreen.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
-import Projects from "./Projects.vue";
+import Buttons from "./Buttons.vue";
 
 const store = useProjectsStore();
 
@@ -13,5 +13,5 @@ onMounted(async () => {
 <template>
   <Background />
 
-  <Projects v-if="!store.loading" />
+  <Buttons v-if="!store.loading" />
 </template>

app/components/Projects/BottomScreen/Buttons.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const store = useProjectsStore();
+
+const PREV_BUTTON: Point = [36, 100];
+const QUIT_BUTTON: Point = [88, 156];
+const LINK_BUTTON: Point = [168, 156];
+const NEXT_BUTTON: Point = [220, 100];
+
+const CLICK_RADIUS = 22;
+
+const circleContains = (
+  [cx, cy]: Point,
+  [x, y]: Point,
+  radius: number,
+): boolean => Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2)) < radius;
+
+useScreenClick((x, y) => {
+  const project = store.projects[store.currentProject];
+  if (circleContains(PREV_BUTTON, [x, y], CLICK_RADIUS)) {
+    store.scrollProjects("left");
+  } else if (circleContains(NEXT_BUTTON, [x, y], CLICK_RADIUS)) {
+    store.scrollProjects("right");
+  } else if (circleContains(QUIT_BUTTON, [x, y], CLICK_RADIUS)) {
+    throw new Error("quit");
+  } else if (
+    circleContains(LINK_BUTTON, [x, y], CLICK_RADIUS) &&
+    project?.link
+  ) {
+    // TODO: show confirmation popup before opening the link, like "you are about to navigate to [...]"
+    store.visitProject();
+  }
+});
+
+useScreenMouseWheel((dy) => {
+  if (dy > 0) {
+    store.scrollProjects("right");
+  } else if (dy < 0) {
+    store.scrollProjects("left");
+  }
+});
+
+useKeyDown((key) => {
+  switch (key) {
+    case "ArrowLeft":
+      store.scrollProjects("left");
+      break;
+    case "ArrowRight":
+      store.scrollProjects("right");
+      break;
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/BottomScreen/Projects.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.webp";
-import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.webp";
-
-const store = useProjectsStore();
-
-const [selectorImage, projectSquareImage, ...projectThumbnails] = useImages(
-  SELECTOR_IMAGE,
-  PROJECT_SQUARE_IMAGE,
-  ...store.projects.map((x) => x.thumbnail),
-);
-
-const getBounds = () => ({
-  startIndex: Math.max(store.currentProject - 3, 0),
-  endIndex: Math.min(store.currentProject + 3 + 1, store.projects.length),
-});
-
-useRender((ctx) => {
-  const { startIndex, endIndex } = getBounds();
-
-  for (let i = startIndex; i < endIndex; i += 1) {
-    const offsetFromCenter = i - store.currentProject;
-    const x = 101 + 69 * offsetFromCenter + store.offsetX;
-
-    ctx.drawImage(projectSquareImage!, x, 81);
-    ctx.drawImage(projectThumbnails[i]!, x + 7, 88);
-  }
-
-  ctx.drawImage(selectorImage!, 96, 76);
-
-  ctx.font = "10px NDS10";
-
-  const lines = store.projects[store.currentProject]!.description.split("\\n");
-  const textY = lines.length === 1 ? 35 : 28;
-  for (let i = 0; i < lines.length; i += 1) {
-    const { actualBoundingBoxRight: width } = ctx.measureText(lines[i]!);
-    ctx.fillText(lines[i]!, Math.floor(128 - width / 2), textY + 15 * i);
-  }
-});
-
-useKeyDown((key) => {
-  switch (key) {
-    case "ArrowLeft":
-      store.scrollProjects("left");
-      break;
-    case "ArrowRight":
-      store.scrollProjects("right");
-      break;
-    case "Enter":
-    case " ":
-      store.visitProject();
-      break;
-  }
-});
-
-useScreenMouseWheel((dy) => {
-  if (dy > 0) {
-    store.scrollProjects("right");
-  } else if (dy < 0) {
-    store.scrollProjects("left");
-  }
-});
-
-useScreenClick((x, y) => {
-  const { startIndex, endIndex } = getBounds();
-
-  for (let i = startIndex; i < endIndex; i += 1) {
-    const offsetFromCenter = i - store.currentProject;
-    const rectX = 101 + 69 * offsetFromCenter + store.offsetX;
-
-    if (rectContains([rectX, 81, 54, 54], [x, y])) {
-      if (i === store.currentProject) {
-        store.visitProject();
-      } else {
-        store.scrollToProject(i);
-        break;
-      }
-    }
-  }
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>

app/components/Projects/TopScreen/Previews.vue

@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import SCOPE_BADGE_IMAGE from "~/assets/images/projects/top-screen/scope-badge.png";
-
-const store = useProjectsStore();
-
-const [scopeBadgeImage, ...projectPreviews] = useImages(
-  SCOPE_BADGE_IMAGE,
-  ...store.projects.map((x) => x.preview),
-);
-
-const getBounds = () => ({
-  startIndex: Math.max(store.currentProject - 1, 0),
-  endIndex: Math.min(store.currentProject + 1 + 1, store.projects.length),
-});
-
-const TECH_BADGES: Record<string, { label: string; color: string }> = {
-  nuxt: { label: "Nuxt", color: "#00DC82" },
-  typescript: { label: "TypeScript", color: "#3178C6" },
-  rust: { label: "Rust", color: "#CE422B" },
-  html: { label: "HTML", color: "#E34C26" },
-  go: { label: "Go", color: "#00ADD8" },
-  node: { label: "Node", color: "#339933" },
-  stenciljs: { label: "Stencil", color: "#5851FF" },
-  jira: { label: "Jira", color: "#0052CC" },
-  confluence: { label: "Confluence", color: "#2DA2E5" },
-  vba: { label: "VBA", color: "#5D2B90" },
-};
-
-const BADGE_PADDING = 2;
-const BADGE_SPACING = 2;
-const BADGE_MARGIN = 1;
-const BADGE_HEIGHT = 11;
-
-const drawTechBadges = (
-  ctx: CanvasRenderingContext2D,
-  technologies: string[],
-  x: number,
-  y: number,
-): void => {
-  ctx.font = "7px NDS7";
-
-  let currentX = x;
-  for (let i = technologies.length - 1; i >= 0; i--) {
-    const badge = TECH_BADGES[technologies[i]?.toLowerCase() ?? ""];
-    if (!badge) throw new Error(`Unknown technology: ${technologies[i]}`);
-
-    const { actualBoundingBoxRight: textWidth } = ctx.measureText(badge.label);
-    const badgeWidth = textWidth + BADGE_PADDING * 2;
-
-    currentX -= badgeWidth;
-
-    ctx.fillStyle = badge.color;
-    ctx.fillRect(currentX, y, badgeWidth, BADGE_HEIGHT);
-
-    ctx.fillStyle = "#FFFFFF";
-    ctx.textBaseline = "top";
-    ctx.fillText(badge.label, currentX + BADGE_PADDING, y + 2);
-
-    currentX -= BADGE_SPACING;
-  }
-};
-
-useRender((ctx) => {
-  const project = store.projects[store.currentProject];
-  if (!project) return;
-
-  ctx.font = "10px NDS10";
-  ctx.fillStyle = "#000000";
-
-  const { startIndex, endIndex } = getBounds();
-
-  for (let i = startIndex; i < endIndex; i += 1) {
-    const previewImage = projectPreviews[i]!;
-
-    const offsetFromCenter = i - store.currentProject;
-    const baseX = (256 - previewImage.width) / 2;
-    const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
-    const y = (192 - previewImage.height) / 2 + 10;
-
-    // game
-    ctx.save();
-    ctx.translate(x, y);
-
-    ctx.fillStyle = "#a6a6a6";
-    ctx.fillRect(0, 0, previewImage.width + 2, previewImage.height + 2);
-    ctx.fillStyle = "#000000";
-    ctx.fillRect(-1, -1, previewImage.width + 2, previewImage.height + 2);
-
-    ctx.save();
-    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-    ctx.shadowBlur = 10;
-    ctx.shadowOffsetX = 2;
-    ctx.shadowOffsetY = 2;
-
-    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;
-      const badgeX = previewImage.width - BADGE_MARGIN;
-      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();
-  }
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>

app/components/Projects/TopScreen/Project.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import BACKGROUND_IMAGE from "~/assets/images/projects/top-screen/background.webp";
+
+const store = useProjectsStore();
+
+const [backgroundImage, ...projectImages] = useImages(
+  BACKGROUND_IMAGE,
+  ...store.projects.map((project) => `/images/projects/${project.id}.webp`),
+);
+
+const drawTextWithShadow = (
+  ctx: CanvasRenderingContext2D,
+  color: "white" | "black",
+  text: string,
+  x: number,
+  y: number,
+) => {
+  ctx.fillStyle = color === "white" ? "#505050" : "#a8b8b8";
+  ctx.fillText(text, x + 1, y + 0);
+  ctx.fillText(text, x + 1, y + 1);
+  ctx.fillText(text, x + 0, y + 1);
+
+  ctx.fillStyle = color === "white" ? "#f8f8f8" : "#101820";
+  ctx.fillText(text, x, y);
+};
+
+const drawTextWithShadow2Lines = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  maxWidth: number,
+  line1Color: "white" | "black",
+  line2Color: "white" | "black",
+) => {
+  const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
+
+  if (textWidth <= maxWidth) {
+    drawTextWithShadow(ctx, line1Color, text, x, y);
+    return;
+  }
+
+  const words = text.split(" ");
+  let firstLine = "";
+  let secondLine = "";
+
+  for (let i = 0; i < words.length; i++) {
+    const testLine = firstLine + (firstLine ? " " : "") + words[i];
+    const { actualBoundingBoxRight: testWidth } = ctx.measureText(testLine);
+
+    if (testWidth > maxWidth && firstLine) {
+      secondLine = words.slice(i).join(" ");
+      break;
+    }
+    firstLine = testLine;
+  }
+
+  drawTextWithShadow(ctx, line1Color, firstLine, x, y);
+  drawTextWithShadow(ctx, line2Color, secondLine, x, y + 16);
+};
+
+useRender((ctx) => {
+  ctx.drawImage(backgroundImage!, 0, 0);
+
+  ctx.textBaseline = "hanging";
+  ctx.font = "16px Pokemon DP Pro";
+
+  const project = store.projects[store.currentProject];
+  if (!project) return;
+
+  // image
+  const projectImage = projectImages[store.currentProject]!;
+  ctx.drawImage(
+    projectImage,
+    Math.floor(52 - projectImage.width / 2),
+    Math.floor(104 - projectImage.height / 2),
+  );
+
+  // text
+  drawTextWithShadow(ctx, "white", project.title.toUpperCase(), 23, 25);
+  drawTextWithShadow(ctx, "black", project.scope, 12, 41);
+
+  drawTextWithShadow2Lines(
+    ctx,
+    project.description,
+    8,
+    161,
+    90,
+    "white",
+    "black",
+  );
+
+  const { actualBoundingBoxRight: textWidth } = ctx.measureText(
+    project.summary,
+  );
+  drawTextWithShadow(
+    ctx,
+    "black",
+    project.summary,
+    Math.floor(185 - textWidth / 2),
+    19,
+  );
+
+  let textY = 35;
+  for (let i = 0; i < project.tasks.length; i += 1) {
+    const lines = project.tasks[i]!.split("\\n");
+
+    ctx.fillStyle = i % 2 === 0 ? "#6870d8" : "#8890f8";
+    ctx.fillRect(106, textY - 1, 150, lines.length * 16);
+
+    ctx.fillStyle = i % 2 === 0 ? "#8890f8" : "#b0b8d0";
+    ctx.fillRect(105, textY - 1, 1, lines.length * 16);
+
+    for (let j = 0; j < lines.length; j += 1) {
+      drawTextWithShadow(ctx, "white", lines[j]!, 118, textY);
+      textY += 16;
+    }
+  }
+
+  drawTextWithShadow2Lines(
+    ctx,
+    project.technologies.join(", "),
+    111,
+    161,
+    145,
+    "black",
+    "black",
+  );
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/TopScreen/StatusBar.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.webp";
-import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.webp";
-import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.webp";
-import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.webp";
-
-const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
-  useImages(
-    STATUS_BAR_IMAGE,
-    GBA_DISPLAY_IMAGE,
-    STARTUP_MODE_IMAGE,
-    BATTERY_IMAGE,
-  );
-
-useRender((ctx) => {
-  const TEXT_Y = 11;
-
-  //ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
-
-  //ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
-  ctx.drawImage(statusBarImage!, 0, 0);
-
-  ctx.fillStyle = "#ffffff";
-  ctx.font = "7px NDS7";
-
-  // username
-  ctx.fillText("pihkaal", 3, TEXT_Y);
-
-  // time + date
-  const fillNumberCell = (value: number, cellX: number, offset: number) => {
-    const text = value.toFixed().padStart(2, "0");
-    const { actualBoundingBoxRight: width } = ctx.measureText(text);
-
-    const x = cellX * 16;
-    ctx.fillText(text, Math.floor(x + offset + (16 - width) / 2), TEXT_Y);
-  };
-
-  const now = new Date();
-
-  fillNumberCell(now.getHours(), 9, 1);
-  if (Math.floor(now.getMilliseconds() / 500) % 2 == 0) {
-    ctx.fillText(":", 159, TEXT_Y);
-  }
-  fillNumberCell(now.getMinutes(), 10, -1);
-
-  fillNumberCell(now.getDate(), 11, 1);
-  ctx.fillText("/", 190, TEXT_Y);
-  fillNumberCell(now.getMonth() + 1, 12, -1);
-
-  // icons
-  ctx.drawImage(gbaDisplayImage!, 210, 2);
-  ctx.drawImage(startupModeImage!, 226, 2);
-  ctx.drawImage(batteryImage!, 242, 4);
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>

app/components/Projects/TopScreen/TopScreen.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
-import StatusBar from "./StatusBar.vue";
-import Previews from "./Previews.vue";
+import Project from "./Project.vue";
 
 const store = useProjectsStore();
 </script>
@@ -9,7 +8,5 @@ const store = useProjectsStore();
 <template>
   <Background />
 
-  <StatusBar />
-
-  <Previews v-if="!store.loading" />
+  <Project v-if="!store.loading" />
 </template>

app/stores/projects.ts

@@ -1,74 +1,15 @@
-import type { MarkdownRoot } from "@nuxt/content";
+import type {
+  DataCollectionItemBase,
+  ProjectsCollectionItem,
+} from "@nuxt/content";
 import gsap from "gsap";
 
-type MarkdownBody = (
-  | {
-      type: "h1" | "p";
-      text: string;
-    }
-  | {
-      type: "img";
-      image: HTMLImageElement;
-    }
-)[];
-
-const createImage = (src: string): HTMLImageElement => {
-  // TODO: how to cleanup ?
-  const img = document.createElement("img");
-  img.src = src;
-  return img;
-};
-
-// TODO: move to utils or smth maybe
-const simplifyMarkdownAST = (root: MarkdownRoot) => {
-  const body: MarkdownBody = [];
-  for (const node of root.value) {
-    if (Array.isArray(node)) {
-      const [type, props, value] = node;
-      console.log("--------------");
-      console.log(`type = ${type}`);
-      console.log(`props = ${JSON.stringify(props)}`);
-      console.log(`value = ${value}`);
-
-      switch (type) {
-        case "h1":
-        case "p": {
-          if (typeof value !== "string")
-            throw `Unsupported node value for '${type}': '${value}'`;
-          body.push({ type, text: value });
-          break;
-        }
-
-        case "img": {
-          if (typeof props["src"] !== "string")
-            throw `Unsupported type or missing node prop "src" for '${type}': '${JSON.stringify(props)}'`;
-          body.push({ type, image: createImage(props.src) });
-          break;
-        }
-
-        default: {
-          throw `Unsupported '${type}'`;
-        }
-      }
-    } else {
-      throw `Unsupported node kind 'string'`;
-    }
-  }
-
-  return body;
-};
-
 export const useProjectsStore = defineStore("projects", {
   state: () => ({
-    projects: [] as {
-      description: string;
-      thumbnail: string;
-      preview: string;
-      url: string | null;
-      technologies: string[];
-      scope: "hobby" | "work";
-      body: MarkdownBody;
-    }[],
+    projects: [] as (Omit<
+      ProjectsCollectionItem,
+      keyof DataCollectionItemBase
+    > & { id: string })[],
     currentProject: 0,
     loading: true,
     offsetX: 0,
@@ -77,33 +18,37 @@ export const useProjectsStore = defineStore("projects", {
   actions: {
     async loadProjects() {
       this.loading = true;
+
       const { data: projects } = await useAsyncData("projects", () =>
-        queryCollection("projects").order("order", "ASC").all(),
+        queryCollection("projects")
+          .order("order", "ASC")
+          .select(
+            "id",
+            "order",
+            "scope",
+            "title",
+            "link",
+            "description",
+            "summary",
+            "technologies",
+            "tasks",
+          )
+          .all(),
       );
       if (!projects.value) throw "Cannot load projects";
+      this.projects = projects.value.map((project) => ({
+        ...project,
+        id: project.id.split("/")[2]!,
+      }));
 
-      this.projects = [];
-
-      for (const project of projects.value) {
-        const parts = project.id.replace(".md", "").split("/");
-        const id = parts[parts.length - 2]!;
-        this.projects.push({
-          description: project.description,
-          thumbnail: `/images/projects/${id}/thumbnail.webp`,
-          preview: `/images/projects/${id}/preview.webp`,
-          url: project.url,
-          technologies: project.technologies,
-          scope: project.scope,
-          body: simplifyMarkdownAST(project.body),
-        });
-      }
+      console.log(this.projects);
 
       this.loading = false;
     },
 
     visitProject() {
-      const url = this.projects[this.currentProject]!.url;
-      if (url) navigateTo(url, { external: true, open: { target: "_blank" } });
+      const link = this.projects[this.currentProject]?.link;
+      if (link) navigateTo(link, { open: { target: "_blank" } });
     },
 
     scrollProjects(direction: "left" | "right") {
@@ -133,6 +78,7 @@ export const useProjectsStore = defineStore("projects", {
       }
     },
 
+    // TODO: not used anymore
     scrollToProject(index: number) {
       if (index === this.currentProject) return;
 

content.config.ts

@@ -4,14 +4,17 @@ import { z } from "zod";
 export default defineContentConfig({
   collections: {
     projects: defineCollection({
-      type: "page",
-      source: "projects/**/index.md",
+      type: "data",
+      source: "projects/**/index.yml",
       schema: z.object({
-        description: z.string(),
-        url: z.url().nullable(),
         order: z.number(),
-        technologies: z.array(z.string()),
         scope: z.enum(["hobby", "work"]),
+        title: z.string(),
+        link: z.url().nullable(),
+        description: z.string(),
+        summary: z.string(),
+        technologies: z.array(z.string()),
+        tasks: z.array(z.string()),
       }),
     }),
   },

content/projects/biobleud/index.md

@@ -1,7 +0,0 @@
----
-description: Biobleud - Automated Excel imports\nfor an ERP system
-url: null
-order: 100
-technologies: [VBA]
-scope: work
----

content/projects/biobleud/index.yml

@@ -0,0 +1,14 @@
+order: 100
+scope: work
+title: Biobleud
+link: null
+
+description: Agri-food company
+summary: Temporary assignments
+technologies:
+  - VBA
+
+tasks:
+  - Developing Excel macros\nin VBA for ERP system\nimplementation
+  - Understanding client\nneeds
+  - Documentation

content/projects/lbf-bot/index.md

@@ -1,9 +0,0 @@
----
-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

content/projects/lbf-bot/index.yml

@@ -0,0 +1,15 @@
+order: 50
+scope: hobby
+title: LBF Bot
+link: https://github.com/pihkaal/lbf-bot
+
+description: For a gaming group
+summary: Custom Discord bot
+technologies:
+  - Node
+  - TypeScript
+
+tasks:
+  - Made for a gaming group
+  - Deployed on VPS
+  - Understanding client\nneeds

content/projects/lilou-cat/index.md

@@ -1,7 +0,0 @@
----
-description: lilou.cat - My cat's website
-url: https://lilou.cat
-order: 40
-technologies: [HTML, Go]
-scope: hobby
----

content/projects/lilou-cat/index.yml

@@ -0,0 +1,15 @@
+order: 40
+scope: hobby
+title: lilou.cat
+link: https://lilou.cat
+
+description: Lilou <3
+summary: Lilou's website
+
+technologies:
+  - HTML
+  - Go
+
+tasks:
+  - Originally made for fun\nto celebrate my cat Lilou
+  - Now preserved in her\nmemory

content/projects/pihkaal-me/index.md

@@ -1,15 +0,0 @@
----
-description: pihkaal.me - my personal website
-url: https://pihkaal.me
-order: 10
-technologies: [Nuxt, TypeScript]
-scope: hobby
----
-
-# pihkaal.me
-
-My personal website has evolved significantly over time. It began as a recreation of my Arch Linux + Hyprland setup, featuring Neovim, Cava, Spotify Player, and Waybar.
-
-Now, it's designed to resemble a Nintendo DS, my first gaming console and a gift from my mother that holds special meaning to me.
-
-I started with just a few games like Mario Kart and Professor Layton. Eventually, I got an R4 card which opened up a whole new world of possibilities.

content/projects/pihkaal-me/index.yml

@@ -0,0 +1,15 @@
+order: 10
+scope: hobby
+title: pihkaal.me
+link: https://pihkaal.me
+
+description: Portfolio and contact
+summary: My personnal website
+
+technologies:
+  - Nuxt
+  - TypeScript
+
+tasks:
+  - The website you are\ncurrently on!
+  - Recreation of the Nintendo\nDS because it was my first\never console

content/projects/raylib-speedruns/index.md

@@ -1,8 +0,0 @@
----
-description: Raylib Speedruns - Collection of simple\nRaylib setups in multiple languages
-url: https://github.com/pihkaal/raylib-speedruns
-order: 60
-scope: hobby
----
-
-# Raylib Speedruns

content/projects/raylib-speedruns/index.yml

@@ -0,0 +1,18 @@
+order: 60
+scope: hobby
+title: Raylib Spdrns
+link: https://github.com/pihkaal/raylib-speedruns
+
+description: Awesome video game library
+summary: Raylib Speedruns
+technologies:
+  - C
+  - C#
+  - D
+  - Python
+  - Rust
+  - Asm x86_64
+
+tasks:
+  - Simple Raylib setups in\nmultiple languages
+  - Inspired by Tsoding

content/projects/s3pweb/index.md

@@ -1,7 +0,0 @@
----
-description: S3PWeb - Intership and\napprenticeship
-url: null
-order: 80
-technologies: [Node, StencilJS, TypeScript]
-scope: work
----

content/projects/s3pweb/index.yml

@@ -0,0 +1,17 @@
+order: 80
+scope: work
+title: S3PWeb
+link: null
+
+description: The Transport Data Aggregator
+summary: Apprenticeship
+technologies:
+  - Node
+  - StencilJS
+  - TypeScript
+
+tasks:
+  - Automatized incidents\naggregation to Jira
+  - Web based map editor
+  - Chrome extension to\nvisualize Eramba assets
+  - Documentation

content/projects/simple-qr/index.md

@@ -1,7 +0,0 @@
----
-description: Simple QR - Simple QR code generator\nwith straightforward API
-url: https://simple-qr.com
-order: 30
-technologies: [Nuxt, TypeScript]
-scope: hobby
----

content/projects/simple-qr/index.yml

@@ -0,0 +1,15 @@
+order: 30
+scope: hobby
+title: Simple QR
+link: https://simple-qr.com
+
+description: Concise website and API
+summary: QR code generator
+technologies:
+  - Nuxt
+  - TypeScript
+
+tasks:
+  - Easy to use
+  - Large choice of logos
+  - Straightforward API

content/projects/tlock/index.md

@@ -1,7 +0,0 @@
----
-description: tlock - fully customizable and cross-\nplatform terminal based clock
-url: https://github.com/pihkaal/tlock
-order: 20
-technologies: [Rust]
-scope: hobby
----

content/projects/tlock/index.yml

@@ -0,0 +1,16 @@
+order: 20
+scope: hobby
+title: tlock
+link: https://github.com/pihkaal/tlock
+
+description: For Hyprland ricing
+summary: Terminal based clock
+technologies:
+  - Rust
+
+tasks:
+  - Fully customizable
+  - Animated
+  - Cross-platform
+  - |
+    Multiple modes: clock,\nchronometer and timer

modules/content-assets.ts

@@ -29,41 +29,39 @@ export default defineNuxtModule({
           return;
         }
 
+        if (!existsSync(publicDir)) {
+          await mkdir(publicDir, { recursive: true });
+        }
+
         const entries = await readdir(projectsDir, { withFileTypes: true });
 
         for (const entry of entries) {
           if (!entry.isDirectory()) continue;
 
           const projectName = entry.name;
-          const sourceDir = join(projectsDir, projectName);
-          const destDir = join(publicDir, projectName);
+          const sourcePath = join(projectsDir, projectName, "index.webp");
+          const destPath = join(publicDir, `${projectName}.webp`);
 
-          if (!existsSync(destDir)) {
-            await mkdir(destDir, { recursive: true });
+          if (!existsSync(sourcePath)) {
+            continue;
           }
 
-          const files = await readdir(sourceDir);
-          for (const file of files) {
-            if (!file.endsWith(".webp")) continue;
+          // only copy if destination doesn't exist, or if not the same as source
+          let shouldCopy = true;
+          if (existsSync(destPath)) {
+            const sourceChecksum = await getFileChecksum(sourcePath);
+            const destChecksum = await getFileChecksum(destPath);
 
-            const sourcePath = join(sourceDir, file);
-            const destPath = join(destDir, file);
-
-            // only copy if destination doesn't exist, or if not the same as source
-            let shouldCopy = true;
-            if (existsSync(destPath)) {
-              const sourceChecksum = await getFileChecksum(sourcePath);
-              const destChecksum = await getFileChecksum(destPath);
-
-              if (sourceChecksum === destChecksum) {
-                shouldCopy = false;
-              }
+            if (sourceChecksum === destChecksum) {
+              shouldCopy = false;
             }
+          }
 
-            if (shouldCopy) {
-              await copyFile(sourcePath, destPath);
-              logger.success(`Copied: ${projectName}/${file}`);
-            }
+          if (shouldCopy) {
+            await copyFile(sourcePath, destPath);
+            logger.success(
+              `Copied: ${projectName}/index.webp -> ${projectName}.webp`,
+            );
           }
         }
       } catch (error) {
@@ -77,9 +75,10 @@ export default defineNuxtModule({
 
     if (nuxt.options.dev) {
       nuxt.hook("ready", () => {
-        watch(contentDir, { recursive: true }, async (_, filename) => {
-          if (filename?.endsWith(".webp")) {
-            logger.info(`Detected change: ${filename}`);
+        watch(contentDir, { recursive: true }, async (_, filePath) => {
+          // NOTE: only match /PROJECT_NAME/index.webp
+          if (filePath?.endsWith("/index.webp")) {
+            logger.info(`Detected change: ${filePath}`);
             await copyWebpFiles();
           }
         });