feat(Localization): add more text in landing page

public/locales/en/translation.json

@@ -1,5 +1,17 @@
 {
   "titles": {
-    "featuredWork": "Featured Work"
+    "featuredWork": "Featured Work",
-  }
+    "whatIveBeenUpTo": "What I've been up to...",
+    "whoAmI": "Who am I?",
+    "contact": "Contact"
+  },
+  "home": {
+    "moreProjects": "View more projects",
+    "viewCurriculum": "View full curriculum"
+  },
+  "misc": {
+    "seeMore": "See more..."
+  },
+  "blog": "blog",
+  "games": "games"
 }

public/locales/es/translation.json

@@ -1,8 +1,17 @@
 {
   "titles": {
-    "featuredWork": "Trabajo Destacado"
+    "featuredWork": "Trabajo Destacado",
+    "whatIveBeenUpTo": "Que he estado haciendo...",
+    "whoAmI": "¿Quién soy?",
+    "contact": "Contacto"
   },
   "home": {
-    "brief": "I like to code stuff, then watch my creations come to life and do things for me!"
+    "moreProjects": "Ver más proyectos",
-  }
+    "viewCurriculum": "Ver curriculum completo"
+  },
+  "misc": {
+    "seeMore": "Ver más..."
+  },
+  "blog": "blog",
+  "games": "juegos"
 }

src/assets/icons/email.svg

@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="-6 -6 36.00 36.00" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0">
+
<rect x="-6" y="-6" width="36.00" height="36.00" rx="18" fill="#c6a0f6" strokewidth="0"/>
+
</g>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7" stroke="#111111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <rect x="3" y="5" width="18" height="14" rx="2" stroke="#111111" stroke-width="2" stroke-linecap="round"/> </g>
+
</svg>

src/assets/icons/github.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#c6a0f6" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <path d="M177.1,398.4c-8.6-1.5-17.6-1.3-26.4-0.8c-20,1.1-40,3-60,1.2c-9.5-0.9-19.1-1.8-28.7-1.6c-17.4,0.3-32,6-40.6,22.6 c-4.3,8.2-5.3,17-5,26.1c0.7,25.6,11.8,40.2,36.2,47.5c19.6,5.8,39.7,6.6,59.9,6.2c7.5,0,15,0.4,22.5-0.1 c15.5-0.9,30.7-3.2,45.4-8.6c15.2-5.6,24.3-16.3,27.6-31.8c1.3-6,1.9-12.3,1.8-18.4C209.6,420,195.6,401.5,177.1,398.4z M78.7,466.1c-6.5,7.1-15.9,7.2-22.6,0.3c-4.9-5-7.7-12.7-7.7-22.3c0.2-6.5,2.1-13.6,7.7-19.3c6.7-6.9,16.1-6.8,22.6,0.2 C88.5,435.6,88.5,455.5,78.7,466.1z M169.6,466.6c-6.1,6.3-14.9,6.5-21.4,0.7c-11.2-10.2-11.2-32.9,0-43.2 c6.4-5.9,15.2-5.7,21.4,0.6c5.7,5.8,7.6,13.1,7.9,20.9C177.2,453.5,175.2,460.7,169.6,466.6z"/> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M244.2,423.4 c-1.4,11.4-3.8,23.1-7.9,33.8c-12,30.7-36,47.6-67.8,52.7c-18.2,2.9-36.9,3-57.1,4.5c-18.1-1.6-38-1.8-57.3-5.2 c-37.4-6.6-62.8-32.8-70.2-70.3c-3.8-19.1-4.9-38.3,1-57.3c3.1-9.8,8.2-18.5,14.8-26.4c0.9-1,1.7-2.5,1.6-3.8 c-1.1-17.2,0.9-34.2,6-50.6c4.2-13.7,1.1-12.9,16.3-8.9c18.3,4.8,34.3,14.7,50,25c1.8,1.2,4.6,1.7,6.8,1.3 c22.2-3.4,44.3-3.6,66.5,0.3c1.6,0.3,3.7-0.3,5.2-1.2c13.5-8.8,27.4-16.7,42.6-22.2c5.5-2,11.3-3.3,16.9-5c2.5-0.7,3.6,0.2,4.5,2.6 c6.8,19,9.6,38.5,8.6,58.6c-0.1,1.1,0.5,2.6,1.2,3.5C243,374.6,247.3,398.2,244.2,423.4z"/> </g> </g>
+
</svg>

src/assets/icons/linkedin.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#c6a0f6" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve" stroke="#c6a0f6">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M41.4,508.1H-8.5V348.4h49.9 V508.1z M15.1,328.4h-0.4c-18.1,0-29.8-12.2-29.8-27.7c0-15.8,12.1-27.7,30.5-27.7c18.4,0,29.7,11.9,30.1,27.7 C45.6,316.1,33.9,328.4,15.1,328.4z M241,508.1h-56.6v-82.6c0-21.6-8.8-36.4-28.3-36.4c-14.9,0-23.2,10-27,19.6 c-1.4,3.4-1.2,8.2-1.2,13.1v86.3H71.8c0,0,0.7-146.4,0-159.7h56.1v25.1c3.3-11,21.2-26.6,49.8-26.6c35.5,0,63.3,23,63.3,72.4V508.1z "/> </g>
+
</svg>

src/assets/style/_utils.scss

@@ -311,3 +311,19 @@
 .border-radius {
   border-radius: var(--prj-border-radius);
 }
+
+.text-none {
+  text-transform: none;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}

src/pages/es/index.astro

@@ -59,7 +59,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 +68,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 +117,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,15 +158,14 @@ 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>
@@ -249,4 +250,4 @@ const portafolio = [
       }
     }
   </style>
-</Layout>
+</Layout>out> out>

src/pages/index.astro

@@ -1,20 +1,25 @@
 ---
-import { getCollection, getEntry } from "astro:content";
+import { getCollection, getEntry } from 'astro:content';
-import { t, changeLanguage } from "i18next";
+import { t, changeLanguage } from 'i18next';
-import Layout from "../layouts/Layout.astro";
+import Layout from '../layouts/Layout.astro';
-import Card from "../components/Card.astro";
+import Card from '../components/Card.astro';
-import LocalizedMarkdown from "@components/LocalizedMarkdown.astro";
+import LocalizedMarkdown from '@components/LocalizedMarkdown.astro';
-import Button from "../components/Button/Button.astro";
+import Button from '../components/Button/Button.astro';
-import { Image } from "astro:assets";
+import { Image } from 'astro:assets';
-import portrait from "../assets/images/portrait.jpg";
+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', 'piloto-go'),
-    await getEntry("portafolio", "destino-temuco"),
+  await getEntry('portafolio', 'destino-temuco'),
-    await getEntry("portafolio", "sercotec"),
+  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: '#',
+                link: 'https://github.com/aleee-idk',
-                img: 'https://placehold.co/60',
+                img: iconGithub,
                 alt: '',
                 text: 'Github',
               },
               {
-                link: '#',
+                link: 'https://www.linkedin.com/in/alexander-navarro-parra-0516062a3',
-                img: 'https://placehold.co/60',
+                img: iconLinkedin,
                 alt: '',
                 text: 'Linkedin',
               },
               {
-                link: '#',
+                link: 'mailto:ale.navarro.parra@gmail.com',
-                img: 'https://placehold.co/60',
+                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>