Feature/i18n

astro.config.mjs

@@ -6,5 +6,15 @@ import robotsTxt from "astro-robots-txt"
 // https://astro.build/config
 export default defineConfig({
  integrations: [tailwind(), robotsTxt()],
- site: 'https://porfolio.dev/'
+ site: 'https://porfolio.dev/',
+ i18n: {
+ defaultLocale: 'es',
+ locales: ['es', 'en'],
+ routing: {
+ prefixDefaultLocale: false
+ },
+ fallback: {
+ en: 'en'
+ }
+ }
 })

src/components/AboutMe.astro

@@ -1,33 +1,17 @@
 ---
+import { getLangFromUrl, useTranslations } from "@/i18n/utils"
+
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang);
+
  const personalImageAlt = "Miguel Ángel"
 ---
 
 <article class="flex flex-col items-center justify-center gap-8 text-gray-700 dark:text-gray-300 md:flex-row">
  <div
  class="[&>p]:mb-4 [&>p>strong]:text-yellow-500 dark:[&>p>strong]:text-yellow-100 [&>p>strong]:font-normal [&>p>strong]:font-mono text-pretty order-2 md:order-1"
+ set:html={t('about.bio')}
  >
- <p>
- Me llamo Miguel Ángel pero mis amigos me llaman midu. Empecé en la
- programación con un Amstrad, tenía 10 años. Actualmente estoy <strong
- >liderando equipos de desarrollo en multinacionales</strong
- >.
- </p>
-
- <p>
- Algunos de mis éxitos incluyen <strong
- >colaborar con Mozilla para el desarrollo de las primeras apps en su
- sistema FirefoxOS</strong
- >. Aunque hoy está desaparecido fue un gran avance en el mundo del
- desarrollo web.
- </p>
-
- <p>
- Como creador de contenido, <strong
- >cuento con el canal de habla hispana más visto del mundo en la
- categoría de <em class="italic">Software & Game Development</em> en Twitch</strong
- >. Mi objetivo es mejorar la empleabilidad de la comunidad hispana y el
- acceso a contenido de calidad.
- </p>
  </div>
 
  <img width="200" height="200" src="/me.png" alt={personalImageAlt} class="order-1 object-cover w-64 h-full p-1 md:order-2 rotate-3 lg:p-2 lg:w-64 aspect-square rounded-2xl bg-black/20 dark:bg-yellow-500/5 ring-1 ring-black/70 dark:ring-white/20 " style="object-position: 50% 50%">

src/components/Experience.astro

@@ -1,29 +1,28 @@
 ---
 import ExperienceItem from "./ExperienceItem.astro"
-const EXPERIENCIE = [
- {
- date: "Actualmente...",
- title: "Creador de Contenido",
- company: "Twitch",
- description:
- "Divulgo sobre programación y desarrollo web en diferentes plataformas. Galardonado como mejor creador de contenido de habla no-inglesa en 2022 y mejor comunidad en 2023 por GitHub.",
- link: "https://twitch.tv/midudev",
- },
- {
- date: "Septiembre 2022",
- title: "Principal Frontend Engineer",
- company: "Adevinta Spain",
- description:
- "Responsable de la plataforma, componentes y utilidades para la creación y desarrollo de aplicaciones web. Mejora de un 30% en la entrega de software. Implantación de medidas de integración continua y despliegue con A/B testing en más de 15 equipos.",
- },
-]
+import { getLangFromUrl, useTranslations } from "@/i18n/utils"
+
+type tLang = (str: any) => any;
+
+const lang = getLangFromUrl(Astro.url)
+const t:tLang = useTranslations(lang);
+
+type Experience = {
+ title: string;
+ company: string;
+ date: string;
+ description: string;
+ link: string;
+}
+
+const EXP: Experience[] = t('exp');
 ---
 
 <ol class="relative mt-16">
  {
- EXPERIENCIE.map((experiencie) => (
+ EXP.map((experience) => (
  <li class="">
- <ExperienceItem {...experiencie} />
+ <ExperienceItem {...experience} />
  </li>
  ))
  }

src/components/ExperienceItem.astro

@@ -6,10 +6,11 @@ interface Props {
  company: string
  description: string
  link?: string
+ linkLabel?: string
  date: string
 }
 
-const { title, company, description, link, date } = Astro.props
+const { title, company, description, link, linkLabel, date } = Astro.props
 ---
 
 <div
@@ -31,7 +32,7 @@ const { title, company, description, link, date } = Astro.props
  {
  link && (
  <LinkInline href={link}>
- Saber más{" "}
+ {linkLabel}
  <svg
  xmlns="http://www.w3.org/2000/svg"
  class="w-5 icon icon-tabler icon-tabler-chevron-right"

src/components/Footer.astro

@@ -1,4 +1,8 @@
 ---
+import { getLangFromUrl, useTranslations } from "@/i18n/utils"
+
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang);
 const currentYear = new Date().getFullYear()
 ---
 
@@ -10,18 +14,18 @@ const currentYear = new Date().getFullYear()
  >
  <span class="text-sm sm:text-center text-zinc-800/90 dark:text-zinc-200/90"
  >© {currentYear}
- <a href="https://midu.dev/" class="hover:underline">midudev</a>. Casi
- todos los derechos reservados
+ <a href="https://midu.dev/" class="hover:underline">midudev</a>.
+ {t('footer.rights')}
  </span>
  <ul
  class="flex flex-wrap items-center mt-3 text-sm font-medium dark:text-white/90 sm:mt-0"
  >
  <li>
- <a href="/#sobre-mi" class="hover:underline me-4 md:me-6">Sobre mí</a>
+ <a href="/#sobre-mi" class="hover:underline me-4 md:me-6">{t('nav.about')}</a>
  </li>
  <li>
  <a id="contacto" href="mailto:miduga@gmail.com" class="hover:underline"
- >Contacto</a
+ >{t('nav.contact')}</a
  >
  </li>
  </ul>

src/components/Header.astro

@@ -1,28 +1,36 @@
 ---
 import ThemeToggle from "./ThemeToggle.astro"
+import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import LanguagePicker from "./LanguagePicker.astro";
+
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang);
+
+const { currentLocale } = Astro
 
 const navItems = [
  {
- title: "Experiencia",
+ title: t('nav.home'),
  label: "experiencia",
- url: "/#experiencia",
+ url: currentLocale === 'en' ? '/en/#experiencia' : '/#experiencia',
  },
  {
- title: "Proyectos",
+ title: t('nav.projects'),
  label: "proyectos",
- url: "/#proyectos",
+ url: currentLocale === 'en' ? '/en/#proyectos' : '/#proyectos',
  },
  {
- title: "Sobre mí",
+ title: t('nav.about'),
  label: "sobre-mi",
- url: "/#sobre-mi",
+ url: currentLocale === 'en' ? '/en/#sobre-mi' : '/#sobre-mi',
  },
  {
- title: "Contacto",
+ title: t('nav.contact'),
  label: "contacto",
  url: "mailto:miduga@gmail.com",
  },
 ]
+
 ---
 
 <header
@@ -31,18 +39,19 @@ const navItems = [
  <nav
  class="flex px-3 text-sm font-medium rounded-full text-gray-600 dark:text-gray-200 justify-center items-center"
  >
-  {
-  navItems.map((link) => (
-  <a
-  class="relative block px-2 py-2 transition hover:text-yellow-500 dark:hover:text-yellow-400"
-  aria-label={link.label}
-  href={link.url}
-  >
-  {link.title}
-  </a>
+ {
+ navItems.map((link) => (
+ <a
+ class="relative block px-2 py-2 transition hover:text-yellow-500 dark:hover:text-yellow-400"
+ aria-label={link.label}
+ href={link.url}
+ >
+ {link.title}
+ </a>
  ))
  }
  <ThemeToggle />
+ <LanguagePicker />
  </nav>
 </header>
 

src/components/Hero.astro

@@ -4,6 +4,10 @@ import Badge from "@/components/Badge.astro"
 import LinkedInIcon from "@/components/icons/LinkedIn.astro"
 import MailIcon from "@/components/icons/Mail.astro"
 import SocialPill from "@/components/SocialPill.astro"
+import { getLangFromUrl, useTranslations } from "@/i18n/utils"
+
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang);
 ---
 
 <div class="max-w-xl">
@@ -19,30 +23,27 @@ import SocialPill from "@/components/SocialPill.astro"
  rel="noopener"
  class="flex items-center transition md:justify-center md:hover:scale-105"
  >
- <Badge>Disponible para trabajar</Badge>
+ <Badge>{t('hero.badge')}</Badge>
  </a>
  </div>
  <h1
  class="text-4xl font-bold tracking-tight text-gray-800 sm:text-5xl dark:text-white"
  >
- Hey, soy midudev
+ {t('hero.title')}
  </h1>
  <p
+ set:html={t('hero.bio')}
  class="mt-6 text-xl text-gray-800 dark:[&>strong]:text-yellow-200 [&>strong]:text-yellow-500 [&>strong]:font-semibold dark:text-gray-300"
  >
- +15 años de experiencia. <strong
- >Ingeniero de Software y Creador de Contenido sobre Programación</strong
- > de Barcelona, España 🇪🇸. Especializado en el desarrollo de aplicaciones web
- únicas.
  </p>
  <nav class="flex flex-wrap gap-4 mt-8">
  <SocialPill href="mailto:miduga@gmail.com">
  <MailIcon class="size-4" />
- Contáctame
+ {t('hero.mail')}
  </SocialPill>
  <SocialPill href="https://linkedin.com/in/midudev">
  <LinkedInIcon class="size-4" />
- LinkedIn
+ {t('hero.linkedin')}
  </SocialPill>
  </nav>
 </div>

src/components/LanguagePicker.astro

@@ -0,0 +1,20 @@
+---
+import { languages } from '@/i18n/ui';
+import { getLangFromUrl, useTranslatedPath } from '@/i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const translatePath = useTranslatedPath(lang);
+---
+
+<div class="flex flex-row gap-1">
+ {
+ Object.entries(languages).map(([langPrefix, label]) => { 
+ if (langPrefix == lang) return <></>
+ return (
+ <a
+ href={translatePath("/", langPrefix)}
+ class="hover:scale-125 transition"
+ >{label}</a>)
+ })
+ }
+</div>