refactor: refactor src/lib/i18n/locales

vittxr · Jul 25, 2024 · f09c384 · f09c384
1 parent da98b67
commit f09c384
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 43 deletions.
diff --git a/src/lib/i18n/locales/en.json b/src/lib/i18n/locales/en.json
@@ -1,23 +1,33 @@
 {
-  "images_alt": {
-    "profile": "Profile picture"
-  },
-  "role": "Fullstack Developer",
-  "lang_options": {
-    "en": "English",
-    "es": "Spanish",
-    "pt": "Portuguese"
-  },
-  "theme": {
-    "toggle": "Toggle theme",
-    "light": "light",
-    "dark": "dark"
+  "utils": {
+    "role": "Fullstack Developer",
+    "lang_options": {
+      "en": "English",
+      "es": "Spanish",
+      "pt": "Portuguese"
+    },
+    "theme": {
+      "toggle": "Toggle theme",
+      "light": "light",
+      "dark": "dark"
+    },
+    "technologies": "Technologies",
+    "nav": {
+      "home": "Home",
+      "about": "About",
+      "projects": "Projects"
+    }
   },
-  "hero_section": {
-    "description": "I build end-to-end apps.",
-    "read_more_about_me": "Read more about me"
+  "home_page": {
+    "hero_section": {
+      "description": "I build end-to-end apps.",
+      "read_more_about_me": "Read more about me"
+    }
   },
-  "about": {
+  "about_page": {
+    "images_alt": {
+      "profile": "Profile picture"
+    },
     "resume": "Resume",
     "description": "",
     "experience": {
@@ -28,15 +38,15 @@
           "company": "Farmpro",
           "start_date": "2022-11-03",
           "end_date": null,
-          "description": "I work in the development of a web application for the management of agricultural properties.",
+          "description": "End-to-end development of applications for internal company management",
           "technologies": "HTML, CSS, JavaScript, Bootstrap, Python, Flask, ReactJS, MySQL, Heroku and Vercel."
         },
         {
           "role": "Freelancer",
           "company": "Workana",
           "start_date": "2022-03-20",
           "end_date": "2022-11-03",
-          "description": "I work in the development of web applications for clients.",
+          "description": "Development and maintenance of web applications. Additionally, I developed a Bot for Telegram.",
           "technologies": "HTML, CSS, JavaScript, Bootstrap, Python, JQuery, Flask, ReactJS, MySQL and Heroku."
         }
       ]

diff --git a/src/routes/_fragments/Header/LangDropdown.svelte b/src/routes/_fragments/Header/LangDropdown.svelte
@@ -14,12 +14,10 @@
   id="lang-dropdown"
   options={[
     {
-      // label: $_('lang_options.en'),
       value: 'en-US',
       icon: UsFlagIcon,
     },
     {
-      // label: $_('lang_options.pt'),
       value: 'pt-BR',
       icon: BrazilFlagIcon,
     },

diff --git a/src/routes/_fragments/Header/Navbar/.editorconfig b/src/routes/_fragments/Header/Navbar/.editorconfig
diff --git a/src/routes/_fragments/Header/Navbar/index.svelte b/src/routes/_fragments/Header/Navbar/index.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Link from '$components/Link.svelte';
   import ThreeBarsIcon from '$components/icons/ThreeBarsIcon.svelte';
   import XIcon from '$components/icons/XIcon.svelte';
   import { onMount } from 'svelte';

diff --git a/src/routes/_fragments/Header/Navbar/links.svelte b/src/routes/_fragments/Header/Navbar/links.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import Link from '$components/Link.svelte';
+  import { _ } from 'svelte-i18n';
 
   const activeClassname = 'underline decoration-rose-500 decoration-[3px] before:hidden';
+
   const links = [
-    { href: '/home', label: 'Home' },
-    { href: '/about', label: 'About' },
-    { href: '/projects', label: 'Projects' },
+    { href: '/home', label: $_('utils.nav.home') },
+    { href: '/about', label: $_('utils.nav.about') },
+    { href: '/projects', label: $_('utils.nav.projects') },
   ];
 </script>
 

diff --git a/src/routes/about/fragments/Experience.svelte b/src/routes/about/fragments/Experience.svelte
@@ -5,7 +5,7 @@
   import SuitcaseIcon from '$components/icons/SuitcaseIcon.svelte';
 
   const experienceItems: ExperienceItemType[] = $_(
-    'about.experience.items',
+    'about_page.experience.items',
   ) as unknown as ExperienceItemType[];
 </script>
 

diff --git a/src/routes/about/fragments/Picture.svelte b/src/routes/about/fragments/Picture.svelte
@@ -5,7 +5,7 @@
 <div class="w-32 h-32 mb-4 flex-shrink-0 sm:mb-0 sm:mr-4 mx-auto">
   <img
     src="imgs/pfp2.jpg"
-    alt={$_('images_alt.profile')}
+    alt={$_('about_page.images_alt.profile')}
     class="w-full h-full rounded-full object-cover"
   />
 </div>
diff --git a/src/routes/about/fragments/Timeline.svelte b/src/routes/about/fragments/Timeline.svelte
@@ -5,13 +5,13 @@
   import { _ } from 'svelte-i18n';
 
   const timelineItems: TimelineItemType[] = $_(
-    'about.timeline.items',
+    'about_page.timeline.items',
   ) as unknown as TimelineItemType[];
 </script>
 
 <div class="mt-10 w-full">
   <h3 class="text-2xl font-bold">
-    {$_('about.timeline.title')}
+    {$_('about_page.timeline.title')}
   </h3>
   <Timeline initialIcon={CalendarIcon}>
     {#each timelineItems as { year, items }}

diff --git a/src/routes/home/fragments/HeroSection.svelte b/src/routes/home/fragments/HeroSection.svelte
@@ -12,7 +12,7 @@
   >
     <h1 class="text-7xl font-bold cursor-scale">Vitor Schirmer</h1>
     <h2 class="text-4xl cursor-scale">
-      {$_('hero_section.description')}
+      {$_('home_page.hero_section.description')}
     </h2>
 
     <div class="w-full mt-2 flex flex-col items-center sm:items-start cursor-scale">
@@ -21,7 +21,7 @@
         classname="group mt-2 flex items-center text-lg font-medium"
         animation={{ hover: 'underline-left-to-right' }}
       >
-        {$_('hero_section.read_more_about_me')}
+        {$_('home_page.hero_section.read_more_about_me')}
         <ArrowRightIcon className="group-hover:w-5 ml-1" />
       </Link>
     </div>