feat: improve SEO, index /gallery and bump age

app/components/Settings/BottomScreen/Menus/User/Birthday.vue

@@ -5,10 +5,6 @@ import gsap from "gsap";
 const store = useSettingsStore();
 const confirmationModal = useConfirmationModal();
 
-const BIRTHDAY_DAY = 25;
-const BIRTHDAY_MONTH = 4;
-const BIRTHDAY_YEAR = 2002;
-
 const isAnimating = ref(true);
 
 const bLabel = ref($t("common.goBack"));

app/pages/gallery.vue

@@ -6,7 +6,17 @@ import gsap from "gsap";
 
 const { t } = useI18n();
 useHead({
-  title: computed(() => `${t("screens.gallery")} | Pihkaal - Developper`),
+  title: computed(() => `${t("screens.gallery")} | Pihkaal - Developer`),
+  link: [{ rel: "canonical", href: "https://pihkaal.me/gallery" }],
+});
+const GALLERY_DESCRIPTION =
+  "Macro photography by Pihkaal: plants, insects and arachnids from Brittany, France.";
+useSeoMeta({
+  description: GALLERY_DESCRIPTION,
+  ogDescription: GALLERY_DESCRIPTION,
+  twitterDescription: GALLERY_DESCRIPTION,
+  ogUrl: "https://pihkaal.me/gallery",
+  ogTitle: computed(() => `${t("screens.gallery")} | Pihkaal - Developer`),
 });
 
 const { data: images } = await useAsyncData(

app/spa-loading-template.html

@@ -0,0 +1,38 @@
+<main
+  style="
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  "
+>
+  <h1>Stevan Corre (pihkaal) - Full-Stack Developer</h1>
+  <p>
+    Developer from Brittany, France. I love programming and taking photos. This
+    portfolio is an interactive 3D Nintendo DS.
+  </p>
+  <h2>Projects and experiences</h2>
+  <ul>
+    <li><a href="https://s3pweb.com">S3PWeb</a> - Apprenticeship</li>
+    <li><a href="https://biobleud.fr/">Biobleud</a> - Temporary assignments</li>
+    <li><a href="https://simple-qr.com">Simple QR</a> - QR code generator</li>
+    <li><a href="https://lilou.cat">lilou.cat</a> - Lilou's website</li>
+    <li><a href="https://git.pihkaal.me/tlock">tlock</a> - Terminal based clock</li>
+    <li><a href="https://git.pihkaal.me/lbf-bot">LBF Bot</a> - Custom Discord bot</li>
+    <li><a href="https://git.pihkaal.me/raylib-speedruns">Raylib Speedruns</a></li>
+    <li><a href="https://git.pihkaal.me/pihkaal-me">pihkaal.me</a> - My personal website</li>
+  </ul>
+  <h2>Contact</h2>
+  <ul>
+    <li><a href="mailto:hello@pihkaal.me">hello@pihkaal.me</a></li>
+    <li><a href="https://git.pihkaal.me">Git</a></li>
+    <li><a href="https://linkedin.com/in/stevancorre/">LinkedIn</a></li>
+    <li><a href="/cv.pdf">CV</a></li>
+    <li><a href="/gallery">Photo gallery</a></li>
+  </ul>
+</main>

app/utils/birthday.ts

@@ -0,0 +1,10 @@
+export const BIRTHDAY_DAY = 25;
+export const BIRTHDAY_MONTH = 4;
+export const BIRTHDAY_YEAR = 2002;
+
+export const getAge = (now = new Date()) => {
+  const hadBirthdayThisYear =
+    now.getMonth() > BIRTHDAY_MONTH - 1 ||
+    (now.getMonth() === BIRTHDAY_MONTH - 1 && now.getDate() >= BIRTHDAY_DAY);
+  return now.getFullYear() - BIRTHDAY_YEAR - (hadBirthdayThisYear ? 0 : 1);
+};

nuxt.config.ts

@@ -1,6 +1,7 @@
+import { getAge } from "./app/utils/birthday";
+
 const TITLE = "Pihkaal - Developer";
-const DESCRIPTION =
-  "23yo developer from Brittany. I love programming and taking photos.";
+const DESCRIPTION = `${getAge()}yo developer from Brittany. I love programming and taking photos.`;
 const URL = "https://pihkaal.me";
 const IMAGE = `${URL}/thumbnail.png`;
 
@@ -27,7 +28,7 @@ export default defineNuxtConfig({
       ],
       meta: [
         { name: "description", content: DESCRIPTION },
-        { name: "author", content: "pihkaal" },
+        { name: "author", content: "Stevan Corre" },
         { name: "robots", content: "index, follow" },
         { name: "theme-color", content: "#181818" },
         { property: "og:type", content: "website" },
@@ -56,7 +57,8 @@ export default defineNuxtConfig({
           innerHTML: JSON.stringify({
             "@context": "https://schema.org",
             "@type": "Person",
-            name: "pihkaal",
+            name: "Stevan Corre",
+            alternateName: "pihkaal",
             url: URL,
             email: "hello@pihkaal.me",
             jobTitle: "Full-Stack Developer",
@@ -76,7 +78,7 @@ export default defineNuxtConfig({
             name: TITLE,
             url: URL,
             description: DESCRIPTION,
-            author: { "@type": "Person", name: "pihkaal", url: URL },
+            author: { "@type": "Person", name: "Stevan Corre", url: URL },
           }),
         },
       ],

public/robots.txt

@@ -1,2 +1,4 @@
 User-Agent: *
 Disallow:
+
+Sitemap: https://pihkaal.me/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://pihkaal.me/</loc>
+  </url>
+  <url>
+    <loc>https://pihkaal.me/gallery</loc>
+  </url>
+</urlset>