chore: add all projects content

app/app.vue

@@ -10,7 +10,7 @@
   --secondary-color: #000;
 }
 
-html, body, p, a, address {
+html, body, p, a, address, h2 {
   font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont,
     'Segoe UI', sans-serif;
 }
@@ -18,4 +18,8 @@ html, body, p, a, address {
 a {
   text-decoration: none;
 }
+
+html {
+  scroll-behavior: smooth;
+}
 </style>

app/components/VProject.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ProjectsCollectionItem } from '@nuxt/content';
+
+defineProps<{
+  project: ProjectsCollectionItem
+}>()
+
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+</script>
+
+<template>
+  <article class="project">
+    <header>
+      <h2>↓ {{  project.title }}</h2>
+      <p v-if="isLargeScreen">{{ project.description }}</p>
+      <p v-else>{{ project.shortDescription }}</p>
+    </header>
+    <img :src="project.image" :alt="project.title" />
+  </article>
+</template>
+
+<style lang="css" scoped>
+article {
+  border-top: 1px solid var(--primary-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+h2 {
+  padding: 0.5rem 0rem;
+}
+
+img {
+  width: 100%;
+}
+</style>

app/layouts/default.vue

@@ -4,6 +4,6 @@
     <main>
       <slot />
     </main>
-    <AppFooter />
+    <AppFooter id="contact"/>
   </div>
 </template>

app/pages/index.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
-const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())
+const route = useRoute()
+
+const { data: projects } = await useAsyncData(`projects-${route.path}`, async () => {
+  return await queryCollection('projects').order('order', 'ASC').all()
+})
+
+const { data: about } = await useAsyncData(`about-${route.path}`, async () => {
+  return await queryCollection('content').path('/about').first()
+})
 
 useSeoMeta({
   title: appConfig.title,
@@ -9,13 +17,46 @@ useSeoMeta({
 </script>
 
 <template>
-  <ContentRenderer class="nuxt-content" v-if="home" :value="home" />
-  <div v-else>Home not found</div>
+  <template v-if="projects?.length">
+    <section class="nuxt-content">
+      <VProject
+        v-for="project in projects"
+        :key="project.title"
+        :project="project"
+      />
+    </section>
+    <section id="about" v-if="about">
+      <article>
+        <h2>↓ {{ about.title }}</h2>
+        <p>{{ about.description }}</p>
+      </article>
+    </section>
+  </template>
+  <template v-else>
+    <div>No project at the moment ...</div>
+  </template>
 </template>
 
 <style lang="css" scoped>
 .nuxt-content {
   background-color: var(--secondary-color);
   color: var(--primary-color);
+  padding: 1rem;
+}
+
+#about {
+  padding: 0 1rem;
+  margin-top: 1rem;
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+
+#about article {
+  border-top: 1px solid var(--secondary-color);
+  border-bottom: 1px solid var(--secondary-color);
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 </style>