fix(Landing): fix layout brake

.woodpecker.yml

@@ -3,6 +3,8 @@ when:
 
 steps:
   build-and-publish:
+    when:
+      branch: main
     image: node:20-alpine
     secrets:
       - codeberg_ssh_key

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",

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!"
   }
 }

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!"
+  }
 }

src/pages/es/index.astro

@@ -31,18 +31,14 @@ 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
-  </section>
+    <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">
@@ -53,8 +49,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
         />
         <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.
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
         </p>
 
         <div class="text-end">
@@ -100,7 +96,7 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
     <div class="mt-4 text-center">
       <Button className="px-4 py-2 fs-5 ">View Work</Button>
     </div>
-</Layout>
+  </section>
 
   <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
     <h2 class="mb-4">What I've been up to...</h2>
@@ -182,7 +178,10 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
     </div>
   </section>
 
-<section class="bg-image" style="--bg-image: url(https://placehold.co/600x400)">
+  <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">
@@ -194,8 +193,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
       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.
+      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">
@@ -251,7 +250,10 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
               },
             ].map((item) => (
               <li class="mb-3">
-              <a href={item.link} class="hstack flex-column flex-lg-row gap-2">
+                <a
+                  href={item.link}
+                  class="hstack flex-column flex-lg-row gap-2"
+                >
                   <>
                     <img src={item.img} alt={item.alt} />
                     <span>{item.text}</span>
@@ -274,3 +276,4 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
       min-height: 50vh;
     }
   </style>
+</Layout>

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,18 +31,14 @@ 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
-  </section>
+    <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">
@@ -53,8 +49,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
         />
         <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.
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
         </p>
 
         <div class="text-end">
@@ -100,7 +96,7 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
     <div class="mt-4 text-center">
       <Button className="px-4 py-2 fs-5 ">View Work</Button>
     </div>
-</Layout>
+  </section>
 
   <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
     <h2 class="mb-4">What I've been up to...</h2>
@@ -182,7 +178,10 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
     </div>
   </section>
 
-<section class="bg-image" style="--bg-image: url(https://placehold.co/600x400)">
+  <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">
@@ -194,8 +193,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
       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.
+      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">
@@ -251,7 +250,10 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
               },
             ].map((item) => (
               <li class="mb-3">
-              <a href={item.link} class="hstack flex-column flex-lg-row gap-2">
+                <a
+                  href={item.link}
+                  class="hstack flex-column flex-lg-row gap-2"
+                >
                   <>
                     <img src={item.img} alt={item.alt} />
                     <span>{item.text}</span>
@@ -274,3 +276,4 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
       min-height: 50vh;
     }
   </style>
+</Layout>