SEO

2026-06-09 18:36:09 +02:00
parent 3da7424418
commit 09b44952df
23 changed files with 3652 additions and 8 deletions
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -2,7 +2,7 @@

 <template>
  <head>
-    <title>Aran Roig</title>
+    <title>Aran Roig — Developer, Artist & Designer</title>
  </head>
  <div>
    <NuxtRouteAnnouncer />
@@ -13,6 +13,21 @@
 </template>

 <script setup lang="ts">
+const { locale } = useI18n()
+
+// Set global html lang attribute based on current locale
+useHead({
+  htmlAttrs: {
+    lang: computed(() => {
+      const map: Record<string, string> = { en: 'en-US', es: 'es-ES', ca: 'ca-ES' }
+      return map[locale.value] || 'en-US'
+    })
+  },
+  meta: [
+    { name: 'author', content: 'Aran Roig' },
+    { name: 'robots', content: 'index, follow' }
+  ]
+})

 onMounted(() => {
  setupTheme()
--- a/frontend/app/assets/css/shared.scss
+++ b/frontend/app/assets/css/shared.scss
@@ -0,0 +1,32 @@
+// Shared TUI transition mixin
+@mixin tui-transition($steps: 2) {
+  transition: all 0.1s steps($steps, end);
+}
+
+// Box-drawing content string for borders (top/bottom frame lines)
+$box-line-top: "═══════════════════";
+
+/* Global rules - no-sprite pages hide the undertable sprite area */
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+
+// Dropdown transition keyframes (used by LanguageSelector and ThemeSelector)
+.dropdown-enter-active, .dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+// Dropdown button shared styles
+.tui-dropdown-button {
+  background: var(--color-background-fore);
+  color: var(--color-text);
+  font-size: 1em;
+  border: 1px solid var(--color-border-color);
+  padding: 8px 12px;
+  border-radius: 0;
+  cursor: pointer;
+}
--- a/frontend/app/components/content/ArtGrid.vue
+++ b/frontend/app/components/content/ArtGrid.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface ArtItem {
+  slug: string;
+  title: string;
+  thumb: string;
+}
+
+defineProps<{
+  items: ArtItem[];
+}>();
+</script>
+
+<template>
+  <div class="grid">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(250px, 1fr));
+  gap: 16px;
+  padding: 24px 0;
+}
+
+@media (max-width: 900px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(1, minmax(200px, 1fr));
+    padding: 16px 0;
+  }
+}
+</style>
--- a/frontend/app/components/content/ArtSelector.vue
+++ b/frontend/app/components/content/ArtSelector.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+defineProps<{
+  item: { title: string; thumb?: string };
+  nuxtImg?: boolean;
+  imgWidth?: number;
+  imgHeight?: number;
+}>();
+</script>
+
+<template>
+  <div class="selector">
+    <span class="selector-border-top" aria-hidden="true">────────</span>
+    <component :is="nuxtImg ? 'NuxtImg' : 'img'"
+      v-if="item.thumb"
+      :src="item.thumb"
+      :alt="item.title"
+      class="selector-img"
+      width="600" height="250"
+      fit="cover"
+    />
+    <span class="selector-border-bottom" aria-hidden="true">────────</span>
+    <div class="overlay-label">{{ item.title }}</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.selector {
+  width: 100%;
+  height: 250px;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.1s steps(3, end);
+  display: block;
+  border: 2px solid var(--color-border-color);
+  background-color: var(--color-background-fore);
+
+  &:hover {
+    border-color: var(--color-link);
+    transform: translateY(-2px);
+    box-shadow: 4px -4px 0px 0px var(--color-link);
+  }
+
+  .selector-border-top,
+  .selector-border-bottom {
+    position: absolute;
+    left: 30px;
+    right: 30px;
+    height: 0;
+    color: var(--color-border-color);
+    font-size: 0;
+    line-height: 0;
+    white-space: nowrap;
+    z-index: 10;
+    transition: color 0.1s steps(2, end);
+  }
+
+  .selector-border-top {
+    top: -2px;
+  }
+
+  .selector-border-bottom {
+    bottom: -2px;
+  }
+}
+
+.selector-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.overlay-label {
+  position: absolute;
+  bottom: -2px;
+  left: 30px;
+  background-color: var(--color-link);
+  color: var(--color-background-fore);
+  padding: 2px 8px;
+  font-size: 0.7rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  box-shadow: inset 0 -2px 0px 0px rgba(0,0,0,0.3);
+  pointer-events: none;
+}
+
+/* Ensure hovered state works when selector is wrapped in a link */
+.selector-wrap {
+  display: block;
+  text-decoration: none;
+}
+
+@media (max-width: 900px) {
+  .selector {
+    height: 200px;
+  }
+}
+
+@media (max-width: 640px) {
+  .selector {
+    height: 180px;
+  }
+}
+</style>
--- a/frontend/app/components/content/BlogEntryList.vue
+++ b/frontend/app/components/content/BlogEntryList.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  description: string;
+}
+
+defineProps<{
+  posts: Post[];
+  linkTo?: (slug: string) => string;
+}>();
+</script>
+
+<template>
+  <section class="blog-section">
+    <ul class="tui-list">
+      <li v-for="post in posts" :key="post.slug" class="blog-entry">
+        <NuxtLink v-if="linkTo" class="entry-link" :to="linkTo(post.slug)">
+          <span class="entry-title">{{ post.title }}</span>
+        </NuxtLink>
+        <NuxtLink v-else class="entry-link" :to="`#${post.slug}`">
+          <span class="entry-title">{{ post.title }}</span>
+        </NuxtLink>
+        <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.tui-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.blog-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 16px;
+  border-left: 2px solid var(--color-border-color);
+  margin-bottom: 4px;
+  transition: all 0.1s steps(2, end);
+
+  &:hover {
+    border-left-color: var(--color-link);
+    background-color: var(--color-hover);
+  }
+
+  &::before {
+    display: none;
+  }
+}
+
+.entry-link {
+  text-decoration: none;
+  color: var(--color-text);
+
+  &:hover {
+    color: var(--color-link);
+    text-shadow: 0 0 6px var(--color-link);
+  }
+}
+
+.entry-title {
+  font-size: 1rem;
+  transition: all 0.1s steps(2, end);
+}
+
+.entry-meta {
+  color: var(--color-text);
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
+@media screen and (max-width: 600px) {
+  .blog-entry {
+    padding: 6px 12px;
+  }
+
+  .entry-title {
+    font-size: 0.9rem;
+  }
+}
+</style>
--- a/frontend/app/composables/seo.ts
+++ b/frontend/app/composables/seo.ts
@@ -0,0 +1,76 @@
+import { useHead, useSeoMeta, useRoute } from '#imports'
+
+interface SeoOptions {
+  title?: string
+  description?: string
+  ogImage?: string
+  canonicalUrl?: string
+  articleDate?: string
+  structuredData?: Record<string, unknown>
+}
+
+export function useSeo(options: SeoOptions = {}) {
+  const { locale } = useI18n()
+  const route = useRoute()
+  const baseURL = 'https://aranroig.com'
+
+  // Map locale codes to BCP 47 tags
+  const localeToIso: Record<string, string> = {
+    en: 'en-US',
+    es: 'es-ES',
+    ca: 'ca-ES'
+  }
+
+  const canonicalPath = computed(() => {
+    if (!options.canonicalUrl) return ''
+    return options.canonicalUrl.startsWith('http') ? options.canonicalUrl : `${baseURL}${options.canonicalUrl}`
+  })
+
+  // Hreflang alternate links for all locales
+  const hreflangs = computed(() => {
+    const currentPath = typeof route.path === 'string' ? route.path : ''
+    const base = currentPath.replace(/^(\/en|\/es|\/ca)?\//, '/')
+
+    return [
+      { rel: 'alternate', hreflang: 'en', href: `${baseURL}/en${base}` },
+      { rel: 'alternate', hreflang: 'es', href: `${baseURL}/es${base}` },
+      { rel: 'alternate', hreflang: 'ca', href: `${baseURL}/ca${base}` }
+    ] as Array<{rel: string; hreflang: string; href: string}>
+  })
+
+  const seoTitle = computed(() => {
+    if (options.title) return `${options.title} | Aran Roig`
+    return 'Aran Roig — Developer, Artist & Designer'
+  })
+
+  const seoDescription = options.description || 'Personal website of Aran Roig — developer, artist, and designer. Explore projects, blog posts, art gallery, and more.'
+
+  useSeoMeta({
+    title: seoTitle.value,
+    description: seoDescription,
+    ogTitle: seoTitle.value,
+    ogDescription: seoDescription,
+    ogImage: options.ogImage || `${baseURL}/og-image.png`,
+    ogUrl: canonicalPath.value,
+    ogType: 'website',
+    twitterCard: 'summary_large_image',
+    twitterTitle: seoTitle.value,
+    twitterDescription: seoDescription,
+    twitterImage: options.ogImage || `${baseURL}/og-image.png`,
+    canonical: canonicalPath.value
+  })
+
+  useHead({
+    htmlAttrs: { lang: computed(() => localeToIso[locale.value] || 'en-US') },
+    link: [
+      ...hreflangs.value,
+      ...(canonicalPath.value ? [{ rel: 'canonical', href: canonicalPath.value }] : [])
+    ],
+    script: options.structuredData ? [
+      {
+        type: 'application/ld+json',
+        innerHTML: JSON.stringify(options.structuredData)
+      }
+    ] : []
+  })
+}
--- a/frontend/app/pages/art/[slug].vue
+++ b/frontend/app/pages/art/[slug].vue
@@ -1,5 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';

 const slug = useRoute().params.slug;
 const { locale } = useI18n();
@@ -7,14 +8,37 @@ const { locale } = useI18n();
 const { data: post } = await useAsyncData(`art-${slug}`, () => 
  queryCollection(`art`).path(`/art/${locale.value}/${slug}`).first()
 , {watch: [locale]})
+
+useSeo({
+  title: post.value?.title || '',
+  description: `Art piece: ${post.value?.title || ''} by Aran Roig`,
+  canonicalUrl: `/art/${locale.value}/${slug}`,
+  structuredData: post.value ? {
+    '@context': 'https://schema.org',
+    '@type': 'CreativeWork',
+    name: post.value.title,
+    description: `Art piece by Aran Roig titled "${post.value.title}"`,
+    author: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    },
+    datePublished: post.value.date,
+    image: post.value.thumb ? `${post.value.thumb.startsWith('http') ? '' : 'https://aranroig.com'}${post.value.thumb}` : undefined,
+    creativeWorkTheme: {
+      '@type': 'Thing',
+      name: 'Digital Art'
+    }
+  } : undefined,
+  ogImage: post.value?.thumb
+});
 </script>

 <template>
-  <!-- Render the blog post as Prose & Vue components -->
  <div class="no-sprite">
      <TableHeader></TableHeader>
    </div>
  <div class="extended-container">
+    <h1 v-if="post" class="art-title">{{ post.title }}</h1>
    <ContentRenderer v-if="post" :value="post" class="art" />
  </div>
 </template>
@@ -26,6 +50,44 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
    margin-top: 32px;
 }

+.art {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 77vh;
+        max-width: 100%;
+    }
+}
+
+.art-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 1.8rem;
+  color: var(--color-text);
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>
+
+<style lang="scss">
+.extended-container {
+    width: 100%;
+    margin: auto;
+    margin-top: 32px;
+}
+
 .art {
    h2 {
        a {
--- a/frontend/app/pages/art/index.vue
+++ b/frontend/app/pages/art/index.vue
@@ -2,10 +2,36 @@
 import { ref, computed } from 'vue';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';

 const { locale, t } = useI18n();
 const localePath = useLocalePath();

+useSeo({
+  title: 'Art Gallery',
+  description: 'Browse the digital art gallery of Aran Roig. Explore original artwork, generative art, pixel art, and creative visual experiments.',
+  canonicalUrl: '/art'
+});
+
+// WebPage structured data for art gallery listing
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'CollectionPage',
+      headline: 'Art Gallery by Aran Roig',
+      description: 'Browse the digital art gallery of Aran Roig. Explore original artwork, generative art, pixel art, and creative visual experiments.',
+      url: 'https://aranroig.com/art',
+      author: {
+        '@type': 'Person',
+        name: 'Aran Roig'
+      },
+      inLanguage: ['en', 'es', 'ca']
+    })
+  }]
+});
+
 const { data: posts } = useAsyncData('art-posts', async () => {
  const currentLocale = locale.value;

@@ -58,7 +84,7 @@ const displayedArt = computed(() => {
    </div>
    <FixedLayout>
        <Container>
-            <h2 class="section-title">ART GALLERY</h2>
+            <h1 class="section-title">{{ t('pages.art_heading') }}</h1>
            <div class="grid">
                <NuxtLink v-for="art in displayedArt"
                :key="art.slug"
--- a/frontend/app/pages/blog/[slug].vue
+++ b/frontend/app/pages/blog/[slug].vue
@@ -1,6 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';
+import { computed, onBeforeMount } from 'vue';

 const slug = useRoute().params.slug;
 const { locale } = useI18n();
@@ -8,21 +10,81 @@ const { locale } = useI18n();
 const { data: post } = await useAsyncData(`blog-${slug}`, () => 
  queryCollection(`blog`).path(`/blog/${locale.value}/${slug}`).first()
 , {watch: [locale]})
+
+useSeo({
+  title: post.value?.title || '',
+  description: post.value?.description || '',
+  canonicalUrl: `/blog/${locale.value}/${slug}`,
+  articleDate: post.value?.date,
+  structuredData: post.value ? {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.value.title,
+    description: post.value.description,
+    datePublished: post.value.date,
+    dateModified: post.value.date,
+    author: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Aran Roig',
+      url: 'https://aranroig.com'
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://aranroig.com/blog/${locale.value}/${slug}`
+    }
+  } : undefined,
+  ogImage: post.value ? `https://aranroig.com/blog/${locale.value}/${slug}/cover.png` : undefined
+});
 </script>

 <template>
-  <!-- Render the blog post as Prose & Vue components -->
  <div class="no-sprite">
      <TableHeader></TableHeader>
    </div>
  <FixedLayout>
    <Container>
+      <h1 v-if="post" class="blog-post-title">{{ post.title }}</h1>
      <ContentRenderer v-if="post" :value="post" class="blog" />
    </Container>
  </FixedLayout>
  <Footer></Footer>
 </template>

+<style lang="scss">
+.blog {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 400px;
+    }
+}
+
+.blog-post-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 1.8rem;
+  color: var(--color-text);
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>
+
 <style lang="scss">
 .blog {
    h2 {
--- a/frontend/app/pages/blog/index.vue
+++ b/frontend/app/pages/blog/index.vue
@@ -2,10 +2,36 @@
 import TableHeader from '~/components/parts/TableHeader.vue';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import { ref, computed } from 'vue';
+import { useSeo } from '~/composables/seo'
 const { locale } = useI18n();
 const { t } = useI18n();
 const localePath = useLocalePath()

+useSeo({
+  title: 'Blog',
+  description: 'Read blog posts by Aran Roig on software engineering, web development, digital art, and creative coding.',
+  canonicalUrl: '/blog'
+});
+
+// WebPage structured data for blog listing
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'CollectionPage',
+      headline: 'Blog Posts by Aran Roig',
+      description: 'Read blog posts by Aran Roig on software engineering, web development, digital art, and creative coding.',
+      url: 'https://aranroig.com/blog',
+      author: {
+        '@type': 'Person',
+        name: 'Aran Roig'
+      },
+      inLanguage: ['en', 'es', 'ca']
+    })
+  }]
+});
+
 const {data: posts, refresh} = useAsyncData('blog-posts', async () => 
 await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
 , {watch: [locale, () => useRoute().path]});
@@ -30,8 +56,9 @@ const displayedPosts = computed(() => {
    </div>
    <FixedLayout>
      <Container>
+        <h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">Blog — Aran Roig</h1>
        <section class="blog-section">
-          <h2 class="section-title">BLOG ENTRIES</h2>
+          <h2 class="section-title">{{ t('pages.blog_heading') }}</h2>
          <ul class="tui-list">
            <li v-for="post in displayedPosts" :key="post.slug" class="blog-entry">
              <NuxtLink class="entry-link" :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">
--- a/frontend/app/pages/contact/index.vue
+++ b/frontend/app/pages/contact/index.vue
@@ -1,15 +1,37 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
+import { useSeo } from '~/composables/seo';

 const { get, post } = api();
 const { locale } = useI18n();

+useSeo({
+  title: 'Contact',
+  description: 'Get in touch with Aran Roig. Reach out for collaborations, freelance projects, or just to say hello.',
+  canonicalUrl: '/contact'
+});
+
+// WebPage structured data for contact page
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'WebPage',
+      name: 'Contact Aran Roig',
+      description: 'Get in touch with Aran Roig for collaborations, freelance projects, or inquiries.',
+      url: 'https://aranroig.com/contact',
+      inLanguage: ['en', 'es', 'ca']
+    })
+  }]
+});
+

 // Move useAsyncData to top level — NOT inside onMounted
 const { data: markdown } = await useAsyncData(`fixed`, async () =>
 await queryCollection(`fixed`).path(`/fixed/${locale.value}/contact`).first()
-, {watch: [locale]})
+ ,{watch: [locale]})
 </script>

 <template>
@@ -19,6 +41,7 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>

    <FixedLayout>
        <Container>
+            <h1>Contact Aran Roig</h1>
            <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
        </Container>
    </FixedLayout>
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -2,11 +2,47 @@
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
 import api from '~/composables/api'
+import { useSeo } from '~/composables/seo'

 const { get, post } = api();
 const { locale } = useI18n();
 const { t } = useI18n();

+useSeo({
+  title: 'Home',
+  description: 'Aran Roig — Developer, Artist & Designer. Exploring projects in software engineering, digital art, and interactive design.',
+  canonicalUrl: '/',
+  structuredData: {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    '@id': 'https://aranroig.com/#webpage',
+    url: 'https://aranroig.com',
+    name: 'Aran Roig — Developer, Artist & Designer',
+    description: 'Personal website of Aran Roig — developer, artist, and designer.',
+    inLanguage: ['en', 'es', 'ca'],
+    publisher: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    }
+  }
+});
+
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'Person',
+        name: 'Aran Roig',
+        url: 'https://aranroig.com',
+        sameAs: [],
+        jobTitle: 'Developer, Artist & Designer'
+      })
+    }
+  ]
+});
+
 const currentPath = computed(() => route.path);
 const route = useRoute();

@@ -126,6 +162,7 @@ const sectionTargets = {
 <template>
  <TableHeader></TableHeader>
  
+   <h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">Aran Roig — Developer, Artist & Designer</h1>
   <div id="top" style="scroll-margin-top: 60px;">&nbsp;</div>

  <FixedLayout>
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -27,5 +27,20 @@ export default defineNuxtConfig({
    vueI18n: './i18n.config.ts',
    langDir: 'locales/'
  },
+  app: {
+    head: {
+      htmlAttrs: { lang: 'en' },
+      bodyAttrs: { class: '' },
+      title: 'Aran Roig — Developer, Artist & Designer',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: 'Personal website of Aran Roig — developer, artist, and designer. Explore projects, blog posts, art gallery, and more.' },
+        { name: 'author', content: 'Aran Roig' },
+        { name: 'robots', content: 'index, follow' }
+      ]
+    }
+  },
+
  modules: ['@nuxtjs/i18n', '@nuxt/content', '@nuxt/image']
 })