feat: add about page

Author: TechWatching

.github/copilot-instructions.md

@@ -79,6 +79,25 @@ Do NOT use `class` to style internal parts of components. Instead, use the `ui`
 - **UHeader**: `root`, `left`, `center`, `right`, `logo`
 - **UAvatar**: `root`, `image`, `fallback`
 
+### UAvatar custom sizes
+When using UAvatar with a custom size via the `ui` prop, always set explicit `width` and `height` props to match the display size. This ensures NuxtImg fetches the image at the correct resolution and avoids blurry images:
+
+```vue
+<!-- ❌ Wrong - image will be blurry (fetched at default small size) -->
+<UAvatar
+  src="/images/profile.png"
+  :ui="{ root: 'size-44' }"
+/>
+
+<!-- ✅ Correct - explicit dimensions match the display size (size-44 = 176px) -->
+<UAvatar
+  src="/images/profile.png"
+  :width="176"
+  :height="176"
+  :ui="{ root: 'size-44' }"
+/>
+```
+
 ### Always check component documentation
 Use `mcp_nuxt-ui_get-component` or `mcp_nuxt-ui_get-component-metadata` to find:
 - Available props and their types

app/pages/about.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { NuxtImg } from '#components'
+
+const route = useRoute()
+const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
+
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+useSeoMeta({
+  title: page.value.title,
+  ogTitle: page.value.title,
+  description: page.value.description,
+  ogDescription: page.value.description
+})
+</script>
+
+<template>
+  <UContainer>
+    <UPageHero
+      v-if="page"
+      :title="page.title"
+      :description="page.description"
+      orientation="horizontal"
+      :ui="{ container: 'gap-8 sm:gap-12 lg:gap-16 py-8 sm:py-12 lg:py-16', wrapper: 'py-0', title: 'text-4xl sm:text-5xl', description: 'text-lg text-muted' }"
+    >
+      <NuxtImg
+        src="/images/bordeaux_1.jpg"
+        alt="Picture of Place de la Bourse (Bordeaux) at night."
+        class="w-full rounded-md shadow-xl"
+        width="800"
+        height="533"
+        quality="90"
+      />
+    </UPageHero>
+    <UPage>
+      <UPageBody prose>
+        <ContentRenderer v-if="page" :value="page" />
+        <div class="flex justify-center mt-8">
+          <UAvatar
+            src="/images/profile.png"
+            alt="Picture of Alexandre Nédélec"
+            :width="176"
+            :height="176"
+            :ui="{ root: 'size-44' }"
+          />
+        </div>
+      </UPageBody>
+    </UPage>
+  </UContainer>
+</template>

content/about.md

@@ -0,0 +1,13 @@
+---
+title: About
+description: A few words about me and this website.
+navigation.icon: i-heroicons-user-circle-solid
+---
+Hi, my name is Alexandre Nédélec. I am a software developer living in Bordeaux.
+
+I graduated from the Engineer School [ENSEIRB-MATMECA](https://enseirb-matmeca.bordeaux-inp.fr) in Computer Sciences over 10 years ago. I am currently working for an IT consulting company specialized in Microsoft Technologies.
+I am a .NET and Azure enthusiast, primarily coding in C# but I like to discover other languages and technologies too. I want to keep learning and always become a better developer.
+
+My blog and its posts are a good way to remind me of things I have learned, solutions and workarounds to some coding issues I have encountered and helpful tools I have used. This blog is also a place to write about things I am interested in and if it can make some people learn something new or help them solve a problem, that's for the better.
+
+This website is built using [Nuxt Content](https://content.nuxt.com/) and [NuxtUI Pro](https://ui.nuxt.com/). It was initially created using the [NuxtUI Pro SaaS template](https://github.com/nuxt-ui-pro/saas) but was also inspired by other websites (like [Nuxt website](https://nuxt.com/)). Previously, my blog was generated using [Statiq](https://www.statiq.dev/), but I have switched to Nuxt to benefit from the Nuxt ecosystem.