🌐 Add i18n support and update language settings

Author: marcode24

astro.config.mjs

@@ -5,4 +5,11 @@ import svelte from '@astrojs/svelte';
 // https://astro.build/config
 export default defineConfig({
   integrations: [svelte()],
+  i18n: {
+    defaultLocale: 'es',
+    locales: ['es', 'en'],
+    routing: {
+      prefixDefaultLocale: false,
+    },
+  },
 });

lint-staged.config.js

@@ -1,4 +1,4 @@
 export default {
-  '*.{js,jsx,ts,tsx,astro}': ['eslint --fix', 'eslint'],
+  '*.{js,jsx,astro}': ['eslint --fix', 'eslint'],
   '**/*.ts?(x)': () => 'npm run build-types',
 };

package.json

@@ -8,9 +8,9 @@
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.astro . & npm run stylelint",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.astro . --fix & npm run stylelint:fix",
-    "lint:watch": "eslint --ext .js,.jsx,.ts,.tsx,.astro . --watch",
+    "lint": "eslint --ext .js,.jsx,.astro . & npm run stylelint",
+    "lint:fix": "eslint --ext .js,.jsx,.astro . --fix & npm run stylelint:fix",
+    "lint:watch": "eslint --ext .js,.jsx,.astro . --watch",
     "stylelint": "stylelint 'src/**/*.{css,scss,astro}'",
     "stylelint:fix": "stylelint 'src/**/*.{css,scss,astro}' --fix",
     "stylelint:watch": "stylelint 'src/**/*.{css,scss,astro}' --watch",

src/components/About.astro

@@ -1,29 +1,21 @@
 ---
-const YEARS_OLD = new Date().getFullYear() - 2001;
+import { getI18n } from '@i18n/index';
+
+const { currentLocale } = Astro;
+
+const i18n = getI18n({ currentLocale });
 ---
 
 <section id="about">
-  <span class="title">About me 👨</span>
+  <span class="title">{i18n.ABOUT_SECTION.TITLE} 👨</span>
   <div class="wrap">
     <div class="description">
-      <p>
-        My name is <span class="high">Marco Antonio Cruz Gabino</span>.
-        I am {YEARS_OLD} years old and I am currently studying computer science.
-        I am passionate about
-        <span class="high">writing code, solving problems and creating software</span>.
-        I am a responsible, self-taught, dynamic person with great capacity for teamwork.
-      </p>
-      <br>
-      <p>
-        Currently, I am expanding my skills into
-        <span class="high">backend development</span> to complement
-        my existing web development expertise
-      </p>
+      <p set:html={i18n.ABOUT_SECTION.DESCRIPTION_1}></p>
+      <p set:html={i18n.ABOUT_SECTION.DESCRIPTION_2}></p>
+      <p set:html={i18n.ABOUT_SECTION.DESCRIPTION_3}></p>
     </div>
     <div class="image">
-      <figure>
-        <img src="programming.webp" alt="programming-image">
-      </figure>
+      <img src="programming.webp" alt={i18n.ABOUT_SECTION.IMAGE.ALT}>
     </div>
   </div>
 </section>
@@ -45,30 +37,24 @@ const YEARS_OLD = new Date().getFullYear() - 2001;
 
   .description {
     font-size: 22px;
-    font-weight: 500;
+    font-weight: normal;
     line-height: 1.5;
-    color: var(--font-color-2);
+    color: var(--font-color-1);
+    text-wrap: pretty;
   }
 
-  .description .high {
-    color: var(--primary-color);
+  .description p {
+    margin-bottom: 1rem;
   }
 
   .image {
     flex: 1;
   }
 
-  section figure {
-    display: inline-block;
-    box-sizing: border-box;
-    width: 20rem;
-    height: 19rem;
-  }
-
-  section figure img {
+  section img {
     object-fit: cover;
-    width: 100%;
-    height: 100%;
+    width: 22rem;
+    height: 20rem;
     border-radius: 51% 49% 49% 51% / 49% 52% 48% 51%;
     border: 3px solid var(--primary-color);
     box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
@@ -91,7 +77,7 @@ const YEARS_OLD = new Date().getFullYear() - 2001;
   }
 
   @media (max-width: 480px) {
-    section figure {
+    section img {
       width: 15rem;
       height: 14rem;
     }

src/components/App.astro

@@ -0,0 +1,88 @@
+---
+import About from '@components/About.astro';
+import ButtonTop from '@components/buttons/button-top.svelte';
+import Contact from '@components/Contact.astro';
+import Header from '@components/Header.astro';
+import Hero from '@components/Hero.astro';
+import Navigation from '@components/Navigation.svelte';
+import Portfolio from '@components/Portfolio.astro';
+import Skills from '@components/Skills.astro';
+import { getI18n } from '@i18n/index';
+import Layout from '@layouts/Layout.astro';
+
+const { currentLocale } = Astro;
+
+const i18n = getI18n({ currentLocale });
+---
+
+<Layout title={i18n.SEO_TITLE} description={i18n.SEO_DESCRIPTION} language={i18n.LANGUAGE}>
+  <div class="wrapper">
+    <Header />
+    <Navigation client:load/>
+    <div class="content">
+      <div class="blur bottom"></div>
+      <div class="blur top"></div>
+      <Hero />
+      <About />
+      <Skills />
+      <Portfolio />
+      <Contact />
+    </div>
+  </div>
+  <ButtonTop client:idle/>
+</Layout>
+
+<style>
+  .wrapper {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 2.2s ease-in-out, visibility 2.2s ease-in-out, height 2.2s ease-in-out;
+    overflow: hidden;
+    max-width: 1200px;
+    min-width: 380px;
+    height: auto;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  .content {
+    margin: 0 1rem;
+  }
+
+  .blur {
+    position: fixed;
+    width: 14rem;
+    height: 14rem;
+    border-radius: 50%;
+    background: #60a5fa;
+    z-index: -9;
+    filter: blur(200px);
+  }
+
+  .blur.bottom {
+    top: 620px;
+    left: 25%;
+  }
+
+  .blur.top {
+    top: 100px;
+    left: 75%;
+  }
+
+  @media (max-width: 900px) {
+    .content {
+      margin: 0 1rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .blur.bottom {
+      top: 380px;
+      left: 0%;
+    }
+    .blur.top {
+      top: 90px;
+      left: 40%;
+    }
+  }
+</style>

src/components/Contact.astro

@@ -12,14 +12,18 @@ import {
   LINKEDIN_URL,
   TWITTER_URL,
 } from '@constants/urls';
+import { getI18n } from '@i18n/index';
 
+const { currentLocale } = Astro;
+
+const i18n = getI18n({ currentLocale });
 ---
 
 <section id="contact">
-  <span class="title">Contact me ✉️</span>
+  <span class="title">{i18n.CONTACT_SECTION.TITLE} ✉️</span>
   <div class="container">
     <p class="description">
-      I’m currently looking for new opportunities, my inbox is always open!
+      {i18n.CONTACT_SECTION.DESCRIPTION}
     </p>
     <div class="email-wrapper">
       <div class="email">
@@ -52,7 +56,7 @@ import {
     </div>
     <div class="detail">
       <span class="text">
-        Design and Built with ❤️ by
+        {i18n.FOOTER.DESCRIPTION}
         <a target="_blank" href={GITHUB_URL} aria-label="Github profile">
           Marco Cruz
         </a>

src/components/Hero.astro

@@ -2,20 +2,32 @@
 import GithubIcon from '@components/icons/github-icon.astro';
 import LinkedinIcon from '@components/icons/linkedin-icon.astro';
 import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
+import { getI18n } from '@i18n/index';
+
+const { currentLocale } = Astro;
+
+const i18n = getI18n({ currentLocale });
 ---
 
 <section class="home" id="home">
   <div class="main-title">
-    <h1 class="title">Hello there!<span>✌️</span></h1>
-    <h2 class="title">I'm <span class="subtitle-name">Marco Cruz</span></h2>
-    <span class="title-job">Frontend Developer</span>
+    <h1 class="title">{i18n.HERO_SECTION.TITLE}<span>✌️</span></h1>
+    <h2 class="title">
+      {i18n.HERO_SECTION.SUBTITLE_NORMAL}
+      <span class="subtitle-name">
+        {i18n.HERO_SECTION.SUBTITLE_EMPHASIS}
+      </span>
+    </h2>
+    <span class="title-job">
+      {i18n.HERO_SECTION.JOB_TITLE}
+    </span>
     <div class="bottom">
       <a
         class="btn"
         href="pdf/cv.pdf"
         download="cv - marco cruz.pdf"
-        aria-label="Download CV">
-        Download CV
+        aria-label={i18n.HERO_SECTION.CV.ARIA_LABEL}>
+        {i18n.HERO_SECTION.CV.BTN_TEXT}
       </a>
       <div class="social">
         <a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
@@ -27,9 +39,8 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
       </div>
     </div>
   </div>
-  <figure>
-    <img src="me.webp" alt="profile-image" class="profile">
-  </figure>
+
+  <img src="me.webp" alt={i18n.HERO_SECTION.IMAGE.ALT} class="profile">
 </section>
 
 <style>
@@ -126,32 +137,25 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
     color: var(--font-color-2);
   }
 
-  .home figure {
-    display: inline-block;
-    box-sizing: border-box;
-    width: 30rem;
-    height: 28rem;
-  }
-
   img {
     object-fit: cover;
-    width: 100%;
-    height: 100%;
+    width: 30rem;
+    height: 28rem;
     border-radius: 63% 37% 48% 52% / 60% 57% 43% 40%;
     border: 3px solid var(--primary-color);
     box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
     background: #3b82f6;
   }
 
   @media (max-width: 1024px) {
-    .home figure {
+    img.profile {
       width: 28rem;
       height: 23rem;
     }
   }
 
   @media (max-width: 900px) {
-    .home figure {
+    img.profile {
       width: 28rem;
       height: 23rem;
     }
@@ -174,7 +178,8 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
     span.title-job {
       font-size: 28px;
     }
-    .home figure {
+
+    img.profile {
       width: 18rem;
       height: 18rem;
     }
@@ -191,7 +196,8 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
     span.title-job {
       font-size: 28px;
     }
-    .home figure {
+
+    img.profile {
       width: 14rem;
       height: 14rem;
     }