diff --git a/.woodpecker.yml b/.woodpecker.yml
index ffc055f..1e18e29 100644
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@@ -3,6 +3,8 @@ when:
 
 steps:
   build-and-publish:
+    when:
+      branch: main
     image: node:20-alpine
     secrets:
       - codeberg_ssh_key
diff --git a/package.json b/package.json
index 447236c..ca75317 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "localize": "astro-i18next generate"
   },
   "dependencies": {
     "@astrojs/react": "^3.0.7",
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index ae10e63..cd3cd98 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -1,5 +1,8 @@
 {
   "titles": {
     "featuredWork": "Featured Work"
+  },
+  "home": {
+    "brief": "I'm a software developer from Chile.\nI like to code stuff for the web, for the terminal or whatever seems fun!\nI enjoy problem solving and creating solutions, then watch my creations come to life and do things for me!"
   }
 }
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
index 6f1e189..778fec6 100644
--- a/public/locales/es/translation.json
+++ b/public/locales/es/translation.json
@@ -2,4 +2,7 @@
   "titles": {
     "featuredWork": "Trabajo Destacado"
   }
+  "home": {
+    "brief": "I like to code stuff, then watch my creations come to life and do things for me!"
+  }
 }
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
index a19fd04..b54b50b 100644
--- a/src/pages/es/index.astro
+++ b/src/pages/es/index.astro
@@ -31,246 +31,249 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
       <div>
         <h1 class="my-0">Alexander Navarro</h1>
         <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet,
-          repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
-          porro, neque officia nisi error quia deleniti nesciunt provident vitae
-          consequuntur quod?
+          {t('home.brief')}
         </p>
       </div>
     </div>
   </section>
 
   <section>
-    <h2 class="text-center">{t('titles.featuredWork')}</h2>Featured Work
+    <h2 class="text-center">{t('titles.featuredWork')}</h2>
+
+    <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
+      <Card className="anim-hover-zoom">
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          cillum sint consectetur cupidatat.
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card className="anim-hover-zoom">
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card className="anim-hover-zoom">
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+    </div>
+
+    <div class="mt-4 text-center">
+      <Button className="px-4 py-2 fs-5 ">View Work</Button>
+    </div>
   </section>
 
-  <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
-    <Card className="anim-hover-zoom">
-      <img
-        src="https://placehold.co/600x400"
-        alt="project img"
-        class="border-radius"
-      />
-      <h3 class="fs-4 text-center my-1">Project N°1</h3>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
-      </p>
+  <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
+    <h2 class="mb-4">What I've been up to...</h2>
 
-      <div class="text-end">
-        <a href="">See more...</a>
+    <div class="hstack flex-eq flex-wrap flex-md-nowrap">
+      <div class="vstack justify-content-center">
+        <h4 class="text-center">Blog</h4>
+        <ol class="list-unstyle mt-0 fs-5">
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+        </ol>
       </div>
-    </Card>
 
-    <Card className="anim-hover-zoom">
-      <img
-        src="https://placehold.co/600x400"
-        alt="project img"
-        class="border-radius"
-      />
-      <h3 class="fs-4 text-center my-1">Project N°1</h3>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
-      </p>
-
-      <div class="text-end">
-        <a href="">See more...</a>
+      <div>
+        <div class="text-center mb-2">
+          <img class="" src="https://placehold.co/400x200" alt="project img" />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
+          consequatur iste molestiae blanditiis eligendi consectetur ullam.
+          Excepturi quasi sed est animi laudantium necessitatibus, tempore
+          delectus nulla aspernatur quod nesciunt fugiat.
+        </p>
       </div>
-    </Card>
+    </div>
 
-    <Card className="anim-hover-zoom">
-      <img
-        src="https://placehold.co/600x400"
-        alt="project img"
-        class="border-radius"
-      />
-      <h3 class="fs-4 text-center my-1">Project N°1</h3>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
-      </p>
-
-      <div class="text-end">
-        <a href="">See more...</a>
+    <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
+      <div class="vstack justify-content-center">
+        <h4 class="text-center">Games</h4>
+        <ol class="list-unstyle mt-0 fs-5">
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+        </ol>
       </div>
-    </Card>
-  </div>
 
-  <div class="mt-4 text-center">
-    <Button className="px-4 py-2 fs-5 ">View Work</Button>
-  </div>
+      <div>
+        <div class="text-center mb-2">
+          <img class="" src="https://placehold.co/400x200" alt="project img" />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
+          consequatur iste molestiae blanditiis eligendi consectetur ullam.
+          Excepturi quasi sed est animi laudantium necessitatibus, tempore
+          delectus nulla aspernatur quod nesciunt fugiat.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section
+    class="bg-image"
+    style="--bg-image: url(https://placehold.co/600x400)"
+  >
+    <h2 class="text-center">Who am I?</h2>
+
+    <p class="w-95 w-lg-70 mx-auto text-justify">
+      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+      labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
+      Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
+      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
+      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
+      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
+      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
+      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
+      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
+      ut ea consectetur et est culpa et culpa duis.
+    </p>
+
+    <div class="text-center fs-4 mb-0">
+      <a href="">
+        <Button>View full curriculum</Button>
+      </a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Contact</h2>
+
+    <div class="grid grid-cols-1 grid-lg-cols-2">
+      <div>
+        <div class="text-center">
+          <img
+            class="respect-width border-radius"
+            src="https://placehold.co/500x300"
+            alt="project img"
+          />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+          reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
+          exercitationem harum itaque perferendis praesentium asperiores vitae
+          pariatur ad culpa mollitia necessitatibus hic!
+        </p>
+      </div>
+
+      <div class="vstack justify-content-center">
+        <ul
+          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
+        >
+          {
+            [
+              {
+                link: '#',
+                img: 'https://placehold.co/60',
+                alt: '',
+                text: 'Github',
+              },
+              {
+                link: '#',
+                img: 'https://placehold.co/60',
+                alt: '',
+                text: 'Linkedin',
+              },
+              {
+                link: '#',
+                img: 'https://placehold.co/60',
+                alt: '',
+                text: 'Email',
+              },
+            ].map((item) => (
+              <li class="mb-3">
+                <a
+                  href={item.link}
+                  class="hstack flex-column flex-lg-row gap-2"
+                >
+                  <>
+                    <img src={item.img} alt={item.alt} />
+                    <span>{item.text}</span>
+                  </>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <style>
+    #portrait {
+      border-radius: 50%;
+      border: 5px solid var(--prj-text);
+    }
+    #hero {
+      min-height: 50vh;
+    }
+  </style>
 </Layout>
-
-<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
-  <h2 class="mb-4">What I've been up to...</h2>
-
-  <div class="hstack flex-eq flex-wrap flex-md-nowrap">
-    <div class="vstack justify-content-center">
-      <h4 class="text-center">Blog</h4>
-      <ol class="list-unstyle mt-0 fs-5">
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-      </ol>
-    </div>
-
-    <div>
-      <div class="text-center mb-2">
-        <img class="" src="https://placehold.co/400x200" alt="project img" />
-      </div>
-      <p class="text-justify">
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
-        consequatur iste molestiae blanditiis eligendi consectetur ullam.
-        Excepturi quasi sed est animi laudantium necessitatibus, tempore
-        delectus nulla aspernatur quod nesciunt fugiat.
-      </p>
-    </div>
-  </div>
-
-  <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
-    <div class="vstack justify-content-center">
-      <h4 class="text-center">Games</h4>
-      <ol class="list-unstyle mt-0 fs-5">
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-      </ol>
-    </div>
-
-    <div>
-      <div class="text-center mb-2">
-        <img class="" src="https://placehold.co/400x200" alt="project img" />
-      </div>
-      <p class="text-justify">
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
-        consequatur iste molestiae blanditiis eligendi consectetur ullam.
-        Excepturi quasi sed est animi laudantium necessitatibus, tempore
-        delectus nulla aspernatur quod nesciunt fugiat.
-      </p>
-    </div>
-  </div>
-</section>
-
-<section class="bg-image" style="--bg-image: url(https://placehold.co/600x400)">
-  <h2 class="text-center">Who am I?</h2>
-
-  <p class="w-95 w-lg-70 mx-auto text-justify">
-    Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
-    labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
-    Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
-    Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
-    Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
-    occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
-    officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
-    Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
-    excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut
-    ea consectetur et est culpa et culpa duis.
-  </p>
-
-  <div class="text-center fs-4 mb-0">
-    <a href="">
-      <Button>View full curriculum</Button>
-    </a>
-  </div>
-</section>
-
-<section>
-  <h2>Contact</h2>
-
-  <div class="grid grid-cols-1 grid-lg-cols-2">
-    <div>
-      <div class="text-center">
-        <img
-          class="respect-width border-radius"
-          src="https://placehold.co/500x300"
-          alt="project img"
-        />
-      </div>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-        reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
-        exercitationem harum itaque perferendis praesentium asperiores vitae
-        pariatur ad culpa mollitia necessitatibus hic!
-      </p>
-    </div>
-
-    <div class="vstack justify-content-center">
-      <ul
-        class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
-      >
-        {
-          [
-            {
-              link: '#',
-              img: 'https://placehold.co/60',
-              alt: '',
-              text: 'Github',
-            },
-            {
-              link: '#',
-              img: 'https://placehold.co/60',
-              alt: '',
-              text: 'Linkedin',
-            },
-            {
-              link: '#',
-              img: 'https://placehold.co/60',
-              alt: '',
-              text: 'Email',
-            },
-          ].map((item) => (
-            <li class="mb-3">
-              <a href={item.link} class="hstack flex-column flex-lg-row gap-2">
-                <>
-                  <img src={item.img} alt={item.alt} />
-                  <span>{item.text}</span>
-                </>
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </div>
-  </div>
-</section>
-
-<style>
-  #portrait {
-    border-radius: 50%;
-    border: 5px solid var(--prj-text);
-  }
-  #hero {
-    min-height: 50vh;
-  }
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5520175..c1df8ea 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,10 @@
 ---
 import { getCollection } from "astro:content";
+import { t, changeLanguage } from "i18next";
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 import Button from "../components/Button/Button.astro";
 import { Image } from "astro:assets";
-import { t, changeLanguage } from "i18next";
 import portrait from "../assets/images/portrait.jpg";
 
 changeLanguage("en");
@@ -31,246 +31,249 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
       <div>
         <h1 class="my-0">Alexander Navarro</h1>
         <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet,
-          repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
-          porro, neque officia nisi error quia deleniti nesciunt provident vitae
-          consequuntur quod?
+          {t('home.brief')}
         </p>
       </div>
     </div>
   </section>
 
   <section>
-    <h2 class="text-center">{t('titles.featuredWork')}</h2>Featured Work
+    <h2 class="text-center">{t('titles.featuredWork')}</h2>
+
+    <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
+      <Card className="anim-hover-zoom">
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          cillum sint consectetur cupidatat.
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card className="anim-hover-zoom">
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+
+      <Card className="anim-hover-zoom">
+        <img
+          src="https://placehold.co/600x400"
+          alt="project img"
+          class="border-radius"
+        />
+        <h3 class="fs-4 text-center my-1">Project N°1</h3>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </p>
+
+        <div class="text-end">
+          <a href="">See more...</a>
+        </div>
+      </Card>
+    </div>
+
+    <div class="mt-4 text-center">
+      <Button className="px-4 py-2 fs-5 ">View Work</Button>
+    </div>
   </section>
 
-  <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
-    <Card className="anim-hover-zoom">
-      <img
-        src="https://placehold.co/600x400"
-        alt="project img"
-        class="border-radius"
-      />
-      <h3 class="fs-4 text-center my-1">Project N°1</h3>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
-      </p>
+  <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
+    <h2 class="mb-4">What I've been up to...</h2>
 
-      <div class="text-end">
-        <a href="">See more...</a>
+    <div class="hstack flex-eq flex-wrap flex-md-nowrap">
+      <div class="vstack justify-content-center">
+        <h4 class="text-center">Blog</h4>
+        <ol class="list-unstyle mt-0 fs-5">
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+        </ol>
       </div>
-    </Card>
 
-    <Card className="anim-hover-zoom">
-      <img
-        src="https://placehold.co/600x400"
-        alt="project img"
-        class="border-radius"
-      />
-      <h3 class="fs-4 text-center my-1">Project N°1</h3>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
-      </p>
-
-      <div class="text-end">
-        <a href="">See more...</a>
+      <div>
+        <div class="text-center mb-2">
+          <img class="" src="https://placehold.co/400x200" alt="project img" />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
+          consequatur iste molestiae blanditiis eligendi consectetur ullam.
+          Excepturi quasi sed est animi laudantium necessitatibus, tempore
+          delectus nulla aspernatur quod nesciunt fugiat.
+        </p>
       </div>
-    </Card>
+    </div>
 
-    <Card className="anim-hover-zoom">
-      <img
-        src="https://placehold.co/600x400"
-        alt="project img"
-        class="border-radius"
-      />
-      <h3 class="fs-4 text-center my-1">Project N°1</h3>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        cillum sint consectetur cupidatat.
-      </p>
-
-      <div class="text-end">
-        <a href="">See more...</a>
+    <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
+      <div class="vstack justify-content-center">
+        <h4 class="text-center">Games</h4>
+        <ol class="list-unstyle mt-0 fs-5">
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+          <li class="mb-3">
+            <a href="#"
+              >Qui minim labore adipisicing minim sint cillum sint consectetur
+              cupidatat.</a
+            >
+          </li>
+        </ol>
       </div>
-    </Card>
-  </div>
 
-  <div class="mt-4 text-center">
-    <Button className="px-4 py-2 fs-5 ">View Work</Button>
-  </div>
+      <div>
+        <div class="text-center mb-2">
+          <img class="" src="https://placehold.co/400x200" alt="project img" />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
+          consequatur iste molestiae blanditiis eligendi consectetur ullam.
+          Excepturi quasi sed est animi laudantium necessitatibus, tempore
+          delectus nulla aspernatur quod nesciunt fugiat.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section
+    class="bg-image"
+    style="--bg-image: url(https://placehold.co/600x400)"
+  >
+    <h2 class="text-center">Who am I?</h2>
+
+    <p class="w-95 w-lg-70 mx-auto text-justify">
+      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+      labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
+      Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
+      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
+      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
+      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
+      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
+      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
+      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
+      ut ea consectetur et est culpa et culpa duis.
+    </p>
+
+    <div class="text-center fs-4 mb-0">
+      <a href="">
+        <Button>View full curriculum</Button>
+      </a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Contact</h2>
+
+    <div class="grid grid-cols-1 grid-lg-cols-2">
+      <div>
+        <div class="text-center">
+          <img
+            class="respect-width border-radius"
+            src="https://placehold.co/500x300"
+            alt="project img"
+          />
+        </div>
+        <p class="text-justify">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+          reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
+          exercitationem harum itaque perferendis praesentium asperiores vitae
+          pariatur ad culpa mollitia necessitatibus hic!
+        </p>
+      </div>
+
+      <div class="vstack justify-content-center">
+        <ul
+          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
+        >
+          {
+            [
+              {
+                link: '#',
+                img: 'https://placehold.co/60',
+                alt: '',
+                text: 'Github',
+              },
+              {
+                link: '#',
+                img: 'https://placehold.co/60',
+                alt: '',
+                text: 'Linkedin',
+              },
+              {
+                link: '#',
+                img: 'https://placehold.co/60',
+                alt: '',
+                text: 'Email',
+              },
+            ].map((item) => (
+              <li class="mb-3">
+                <a
+                  href={item.link}
+                  class="hstack flex-column flex-lg-row gap-2"
+                >
+                  <>
+                    <img src={item.img} alt={item.alt} />
+                    <span>{item.text}</span>
+                  </>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <style>
+    #portrait {
+      border-radius: 50%;
+      border: 5px solid var(--prj-text);
+    }
+    #hero {
+      min-height: 50vh;
+    }
+  </style>
 </Layout>
-
-<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
-  <h2 class="mb-4">What I've been up to...</h2>
-
-  <div class="hstack flex-eq flex-wrap flex-md-nowrap">
-    <div class="vstack justify-content-center">
-      <h4 class="text-center">Blog</h4>
-      <ol class="list-unstyle mt-0 fs-5">
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-      </ol>
-    </div>
-
-    <div>
-      <div class="text-center mb-2">
-        <img class="" src="https://placehold.co/400x200" alt="project img" />
-      </div>
-      <p class="text-justify">
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
-        consequatur iste molestiae blanditiis eligendi consectetur ullam.
-        Excepturi quasi sed est animi laudantium necessitatibus, tempore
-        delectus nulla aspernatur quod nesciunt fugiat.
-      </p>
-    </div>
-  </div>
-
-  <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
-    <div class="vstack justify-content-center">
-      <h4 class="text-center">Games</h4>
-      <ol class="list-unstyle mt-0 fs-5">
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-        <li class="mb-3">
-          <a href="#"
-            >Qui minim labore adipisicing minim sint cillum sint consectetur
-            cupidatat.</a
-          >
-        </li>
-      </ol>
-    </div>
-
-    <div>
-      <div class="text-center mb-2">
-        <img class="" src="https://placehold.co/400x200" alt="project img" />
-      </div>
-      <p class="text-justify">
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
-        consequatur iste molestiae blanditiis eligendi consectetur ullam.
-        Excepturi quasi sed est animi laudantium necessitatibus, tempore
-        delectus nulla aspernatur quod nesciunt fugiat.
-      </p>
-    </div>
-  </div>
-</section>
-
-<section class="bg-image" style="--bg-image: url(https://placehold.co/600x400)">
-  <h2 class="text-center">Who am I?</h2>
-
-  <p class="w-95 w-lg-70 mx-auto text-justify">
-    Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
-    labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
-    Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
-    Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
-    Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
-    occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
-    officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
-    Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
-    excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut
-    ea consectetur et est culpa et culpa duis.
-  </p>
-
-  <div class="text-center fs-4 mb-0">
-    <a href="">
-      <Button>View full curriculum</Button>
-    </a>
-  </div>
-</section>
-
-<section>
-  <h2>Contact</h2>
-
-  <div class="grid grid-cols-1 grid-lg-cols-2">
-    <div>
-      <div class="text-center">
-        <img
-          class="respect-width border-radius"
-          src="https://placehold.co/500x300"
-          alt="project img"
-        />
-      </div>
-      <p class="text-justify">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
-        reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
-        exercitationem harum itaque perferendis praesentium asperiores vitae
-        pariatur ad culpa mollitia necessitatibus hic!
-      </p>
-    </div>
-
-    <div class="vstack justify-content-center">
-      <ul
-        class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
-      >
-        {
-          [
-            {
-              link: '#',
-              img: 'https://placehold.co/60',
-              alt: '',
-              text: 'Github',
-            },
-            {
-              link: '#',
-              img: 'https://placehold.co/60',
-              alt: '',
-              text: 'Linkedin',
-            },
-            {
-              link: '#',
-              img: 'https://placehold.co/60',
-              alt: '',
-              text: 'Email',
-            },
-          ].map((item) => (
-            <li class="mb-3">
-              <a href={item.link} class="hstack flex-column flex-lg-row gap-2">
-                <>
-                  <img src={item.img} alt={item.alt} />
-                  <span>{item.text}</span>
-                </>
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </div>
-  </div>
-</section>
-
-<style>
-  #portrait {
-    border-radius: 50%;
-    border: 5px solid var(--prj-text);
-  }
-  #hero {
-    min-height: 50vh;
-  }
-</style>