feat(Localization): add more text in landing page

src/pages/index.astro

@@ -1,20 +1,25 @@
 ---
-import { getCollection, getEntry } from "astro:content";
-import { t, changeLanguage } from "i18next";
-import Layout from "../layouts/Layout.astro";
-import Card from "../components/Card.astro";
-import LocalizedMarkdown from "@components/LocalizedMarkdown.astro";
-import Button from "../components/Button/Button.astro";
-import { Image } from "astro:assets";
-import portrait from "../assets/images/portrait.jpg";
+import { getCollection, getEntry } from 'astro:content';
+import { t, changeLanguage } from 'i18next';
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+import LocalizedMarkdown from '@components/LocalizedMarkdown.astro';
+import Button from '../components/Button/Button.astro';
+import { Image } from 'astro:assets';
+import portrait from '../assets/images/portrait.jpg';
+import iconEmail from '../assets/icons/email.svg';
+import iconLinkedin from '../assets/icons/linkedin.svg';
+import iconGithub from '../assets/icons/github.svg';
 
-changeLanguage("en");
+changeLanguage('en');
 
-const blog = await getCollection("blog", ({ data }) => import.meta.env.PROD ? data.draft !== true : true);
+const blog = await getCollection('blog', ({ data }) =>
+  import.meta.env.PROD ? data.draft !== true : true,
+);
 const portafolio = [
-    await getEntry("portafolio", "piloto-go"),
-    await getEntry("portafolio", "destino-temuco"),
-    await getEntry("portafolio", "sercotec"),
+  await getEntry('portafolio', 'piloto-go'),
+  await getEntry('portafolio', 'destino-temuco'),
+  await getEntry('portafolio', 'sercotec'),
 ];
 ---
 
@@ -59,7 +64,7 @@ const portafolio = [
                 <p class="text-justify">{data.brief}</p>
               </a>
               <div class="text-end" slot="footer">
-                <a href={`/projects/${slug}`}>See more...</a>
+                <a href={`/projects/${slug}`}>{t('misc.seeMore')}</a>
               </div>
             </Card>
           </div>
@@ -68,16 +73,18 @@ const portafolio = [
     </div>
 
     <div class="mt-4 text-center">
-      <Button className="px-4 py-2 fs-5" href="/projects">View Work</Button>
+      <Button className="px-4 py-2 fs-5" href="/projects">
+        {t('home.moreProjects')}
+      </Button>
     </div>
   </section>
 
   <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
-    <h2 class="mb-4">What I've been up to...</h2>
+    <h2 class="mb-4">{t('titles.whatIveBeenUpTo')}</h2>
 
     <div class="hstack flex-eq flex-wrap flex-md-nowrap">
       <div class="vstack justify-content-center">
-        <h4 class="text-center">Blog</h4>
+        <h4 class="text-center text-capitalize">{t('blog')}</h4>
         <ol class="list-unstyle mt-0 fs-5">
           <li class="mb-3">
             <a href="#"
@@ -115,7 +122,7 @@ const portafolio = [
 
     <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
       <div class="vstack justify-content-center">
-        <h4 class="text-center">Games</h4>
+        <h4 class="text-center text-capitalize">{t('games')}</h4>
         <ol class="list-unstyle mt-0 fs-5">
           <li class="mb-3">
             <a href="#"
@@ -156,21 +163,20 @@ const portafolio = [
     class="bg-image"
     style="--bg-image: url(https://placehold.co/600x400)"
   >
-    <h2 class="text-center">Who am I?</h2>
-
+    <h2 class="text-center">{t('titles.whoAmI')}</h2>
     <p class="w-95 w-lg-70 mx-auto text-justify">
       <LocalizedMarkdown path="about-me.md" />
     </p>
 
     <div class="text-center fs-4 mb-0">
       <a href="">
-        <Button>View full curriculum</Button>
+        <Button>{t('home.viewCurriculum')}</Button>
       </a>
     </div>
   </section>
 
   <section>
-    <h2>Contact</h2>
+    <h2>{t('titles.contact')}</h2>
 
     <div class="grid grid-cols-1 grid-lg-cols-2">
       <div>
@@ -196,20 +202,20 @@ const portafolio = [
           {
             [
               {
-                link: '#',
-                img: 'https://placehold.co/60',
+                link: 'https://github.com/aleee-idk',
+                img: iconGithub,
                 alt: '',
                 text: 'Github',
               },
               {
-                link: '#',
-                img: 'https://placehold.co/60',
+                link: 'https://www.linkedin.com/in/alexander-navarro-parra-0516062a3',
+                img: iconLinkedin,
                 alt: '',
                 text: 'Linkedin',
               },
               {
-                link: '#',
-                img: 'https://placehold.co/60',
+                link: 'mailto:ale.navarro.parra@gmail.com',
+                img: iconEmail,
                 alt: '',
                 text: 'Email',
               },
@@ -217,10 +223,16 @@ const portafolio = [
               <li class="mb-3">
                 <a
                   href={item.link}
+                  target="_blank"
                   class="hstack flex-column flex-lg-row gap-2"
                 >
                   <>
-                    <img src={item.img} alt={item.alt} />
+                    <Image
+                      src={item.img}
+                      alt={item.alt}
+                      width="64"
+                      height="64"
+                    />
                     <span>{item.text}</span>
                   </>
                 </a>
@@ -249,4 +261,4 @@ const portafolio = [
       }
     }
   </style>
-</Layout>
+</Layout>out> out>