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);
+};