working

src/assets/css/tailwind.css

@@ -4,7 +4,7 @@
 
 @layer components {
   .w-container {
-    @apply mx-auto max-w-7xl lg:px-24 md:px-12 sm:px-4;
+    @apply mx-auto max-w-7xl px-4 lg:px-32 md:px-16 sm:px-8;
   }
 
   .text-subtitle {

src/components/Announcement.vue

@@ -9,7 +9,7 @@ function getColor() {
 </script>
 
 <template>
-  <div v-if="announce" class="w-full flex justify-center mt-8">
+  <div v-if="announce" class="w-container flex justify-center mt-8">
     <div class="relative">
       <h1 class="px-4 py-2 bg-white dark:bg-zinc-900 rounded-md border border-zinc-100 dark:border-zinc-300/10" v-html="announce.content" />
       <span class="absolute -top-0.5 -right-0.5 flex h-2 w-2">

src/components/MainPhotos.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
+    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
+      First
+    </div>
+    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl -rotate-2">
+      Second
+    </div>
+    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
+      Third
+    </div>
+    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl -rotate-2">
+      Forth
+    </div>
+    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
+      Fifth
+    </div>
+  </div>
+</template>

src/components/content/GridSection.vue

@@ -12,7 +12,7 @@ const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
 </script>
 
 <template>
-  <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-24">
+  <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-24 px-4">
     <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
       <h2 class="relative text-sm font-semibold pl-3.5" :class="getColor">
         <span class="md:hidden absolute inset-y-0 left-0 flex items-center">

src/layouts/default.vue

@@ -11,12 +11,10 @@ const getColor = computed(() => appConfig.ui.primary)
         <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
       </div>
     </section>
-    <div class="relative z-50 min-h-[100svh]">
+    <main class="relative z-50 min-h-[100svh]">
       <Header />
-      <UContainer>
-        <NuxtPage />
-      </UContainer>
+      <NuxtPage />
       <Footer />
-    </div>
+    </main>
   </div>
 </template>

src/pages/about.vue

@@ -10,16 +10,25 @@ const { data: experiences } = await useWorkExperiences()
 
 <template>
   <section class="w-container lg:my-24 my-16">
-    <div class="max-w-2xl space-y-8 mb-16">
-      <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
-        I'm Arthur, I live and study in France where I learn new things.
-      </h1>
-      <p class="leading-relaxed text-subtitle">
-        As a software engineer with a passion for AI and the cloud, I have a deep understanding of emerging technologies that are transforming the way businesses and organizations operate. I am at the heart of an ever-changing and rapidly growing field. My background in mathematics also gives me an edge in understanding the mathematical concepts and theories behind these technologies as well as how to design them.
-      </p>
-      <p class="leading-relaxed text-subtitle">
-        I enjoy sharing my knowledge and learning new theorems and technologies. I am a curious person and eager to continue learning and growing throughout your life. My passion and commitment to these subjects are admirable qualities and will help me succeed in my career and education.
-      </p>
+    <div class="px-4 grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
+      <div class="lg:pl-20">
+        <div class="max-w-xs px-2.5 lg:max-w-none">
+          <NuxtImage src="/about.jpg" class="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800" placeholder />
+        </div>
+      </div>
+      <div class="lg:order-first lg:row-span-2">
+        <div class="max-w-2xl space-y-8 mb-16">
+          <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
+            I'm Arthur, I live and study in France where I learn new things.
+          </h1>
+          <p class="leading-relaxed text-subtitle">
+            As a software engineer with a passion for AI and the cloud, I have a deep understanding of emerging technologies that are transforming the way businesses and organizations operate. I am at the heart of an ever-changing and rapidly growing field. My background in mathematics also gives me an edge in understanding the mathematical concepts and theories behind these technologies as well as how to design them.
+          </p>
+          <p class="leading-relaxed text-subtitle">
+            I enjoy sharing my knowledge and learning new theorems and technologies. I am a curious person and eager to continue learning and growing throughout your life. My passion and commitment to these subjects are admirable qualities and will help me succeed in my career and education.
+          </p>
+        </div>
+      </div>
     </div>
     <GridSection title="Interests">
       <GridSlot title="Development">

src/pages/index.vue

@@ -8,5 +8,6 @@ useHead({
   <section>
     <Announcement />
     <MainBanner />
+    <MainPhotos />
   </section>
 </template>

src/pages/uses.vue

@@ -19,9 +19,12 @@ useHead({
           path="/uses"
         />
         <template #fallback>
-          <p class="my-16 text-subtitle">
-            The content of the page is loading...
-          </p>
+          <div class="my-16 text-subtitle">
+            <div class="flex gap-2 items-center">
+              <UIcon name="i-eos-icons-loading" />
+              <p>The content of the page is loading...</p>
+            </div>
+          </div>
         </template>
       </ClientOnly>
     </div>

src/pages/work.vue

@@ -11,7 +11,7 @@ const { data: projects } = await useProjects()
 
 <template>
   <section class="w-container lg:my-24 my-16">
-    <div class="max-w-3xl space-y-8">
+    <div class="px-4 max-w-3xl space-y-8">
       <div>
         <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
           All my projects can be found on GitHub and by scrolling down.

src/pages/writing/index.vue

@@ -11,7 +11,7 @@ const { data: posts } = await usePosts()
 
 <template>
   <section class="w-container lg:my-24 my-16">
-    <div class="max-w-3xl space-y-8">
+    <div class="px-4 max-w-3xl space-y-8">
       <div>
         <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
           Writing on my life, development and my passions.