diff --git a/src/App.vue b/src/App.vue
index 156dbd7..9136899 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,7 @@
       class="particles-bg"
     ></v-sheet>
 
-    <AppBar @toggle-theme="toggleTheme" />
+    <AppBar @scroll-to-section="scrollToSection" />
 
     <!-- Main content, with responsive margins -->
     <v-main
@@ -69,6 +69,7 @@ export default {
       snackbar: false,
       snackbarMessage: "",
       snackbarShowTime: 4000,
+      snackbarColor: "primary",
     };
   },
   methods: {
@@ -201,6 +202,12 @@ export default {
       };
       document.head.appendChild(script);
     },
+    scrollToSection(sectionId) {
+      const targetElement = document.getElementById(sectionId);
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    },
   },
   mounted() {
     this.loadParticlesJS();
@@ -210,6 +217,33 @@ export default {
 
 <style>
 /* Custom CSS to make the particles.js background cover the entire page and stay behind the main content */
+:root,
+body,
+#app {
+  min-height: 100%;
+}
+
+.v-application {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 217, 80, 0.75) 0%,
+    rgba(255, 194, 46, 0.64) 30%,
+    rgba(240, 170, 0, 0.6) 55%,
+    rgba(18, 18, 18, 0.9) 100%
+  );
+  background-attachment: fixed;
+}
+
+.v-theme--dark.v-application {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 191, 0, 0.3) 0%,
+    rgba(140, 100, 0, 0.24) 38%,
+    rgba(26, 26, 26, 0.9) 68%,
+    rgba(10, 10, 10, 1) 100%
+  );
+}
+
 .particles-bg {
   position: absolute;
   top: 0;
@@ -225,6 +259,17 @@ export default {
   z-index: 2; /* Higher z-index to place the content above the particles */
 }
 
+#mainCard {
+  background: rgba(15, 15, 15, 0.78);
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(6px);
+}
+
+.v-theme--light #mainCard {
+  background: rgba(255, 255, 255, 0.92);
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
 /* Ensures Footer is above particles.js */
 .footer-above {
   position: relative;
diff --git a/public/herowars.png b/src/assets/projects/herowars.png
similarity index 100%
rename from public/herowars.png
rename to src/assets/projects/herowars.png
diff --git a/public/mouseJigglerIcon.jpg b/src/assets/projects/mouseJigglerIcon.jpg
similarity index 100%
rename from public/mouseJigglerIcon.jpg
rename to src/assets/projects/mouseJigglerIcon.jpg
diff --git a/public/programerzombie.png b/src/assets/projects/programerzombie.png
similarity index 100%
rename from public/programerzombie.png
rename to src/assets/projects/programerzombie.png
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index 53cfca6..b588e2d 100644
--- a/src/components/AppBar.vue
+++ b/src/components/AppBar.vue
@@ -1,118 +1,19 @@
 <template>
-  <v-app-bar>
-    <v-toolbar
-      class="d-none d-md-flex"
-      color="background"
-    >
+  <v-app-bar class="glass-appbar" flat>
+    <v-toolbar color="background" class="d-none d-md-flex">
       <v-btn
+        v-for="item in navigationItems"
+        :key="item.target"
         text
         height="100%"
         color="primary"
-        class="ma-0 rounded-0"
-        to="/"
-        prepend-icon="mdi-home"
+        class="ma-0 navigation-btn"
+        @click="handleNavigation(item.target)"
       >
-        Home
+        <v-icon start :icon="item.icon"></v-icon>
+        {{ item.label }}
       </v-btn>
-      <v-menu>
-        <template #activator="{ props }">
-          <v-btn
-            color="primary"
-            height="100%"
-            class="ma-0 rounded-0"
-            v-bind="props"
-          >
-            Projects
-          </v-btn>
-        </template>
-        <v-list
-          color="primary"
-          class="ma-0 rounded-0"
-        >
-          <v-list-item
-            link
-            to="/HeroWars"
-          >
-            <v-list-item-title>HeroWars</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/ProjectZomboid"
-          >
-            <v-list-item-title>Zomboid</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/Avarice"
-          >
-            <v-list-item-title>Avarice</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-      <v-menu>
-        <template #activator="{ props }">
-          <v-btn
-            color="primary"
-            height="100%"
-            class="ma-0 rounded-0"
-            v-bind="props"
-          >
-            Games
-          </v-btn>
-        </template>
-        <v-list
-          color="primary"
-          class="ma-0 rounded-0"
-        >
-          <v-list-item
-            link
-            to="/GoldRush"
-          >
-            <v-list-item-title>Goldrush Survivors</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/OneWayFly"
-          >
-            <v-list-item-title>One Way Fly</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-      <v-menu>
-        <template #activator="{ props }">
-          <v-btn
-            color="primary"
-            height="100%"
-            class="ma-0 rounded-0"
-            v-bind="props"
-          >
-            Tools
-          </v-btn>
-        </template>
-        <v-list
-          color="primary"
-          class="ma-0 rounded-0"
-        >
-          <v-list-item
-            link
-            to="/SnowFlake"
-          >
-            <v-list-item-title>Snowflake</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/CoinAlert"
-          >
-            <v-list-item-title>Coin Alert</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/MouseJiggler"
-          >
-            <v-list-item-title>Mouse Jiggler</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
+
       <v-spacer></v-spacer>
 
       <v-select
@@ -126,89 +27,32 @@
         class="auto-width"
       ></v-select>
 
-      <v-btn
-        icon
-        @click="toggleIcon"
-        class="mr-2"
-      >
+      <v-btn icon @click="toggleIcon" class="mr-2">
         <v-icon color="primary">{{ isDark ? 'mdi-weather-night' : 'mdi-weather-sunny' }}</v-icon>
       </v-btn>
     </v-toolbar>
 
-    <v-toolbar
-      class="d-flex d-md-none"
-      color="background"
-    >
+    <v-toolbar color="background" class="d-flex d-md-none">
       <v-menu>
         <template #activator="{ props }">
-          <v-btn
-            icon
-            color="primary"
-            v-bind="props"
-          >
+          <v-btn icon color="primary" v-bind="props">
             <v-icon>mdi-menu</v-icon>
           </v-btn>
         </template>
-        <v-list
-          color="primary"
-          class="ma-0 rounded-0"
-        >
-          <v-list-item to="/">
-            <v-list-item-title>
-              <v-icon class="pb-1">mdi-home</v-icon>
-              Home
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/HeroWars"
-          >
-            <v-list-item-title>HeroWars</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/ProjectZomboid"
-          >
-            <v-list-item-title>Zomboid</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/SnowFlake"
-          >
-            <v-list-item-title>Snowflake</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/MouseJiggler"
-          >
-            <v-list-item-title>Mouse Jiggler</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/Avarice"
-          >
-            <v-list-item-title>Avarice</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/CoinAlert"
-          >
-            <v-list-item-title>Coin Alert</v-list-item-title>
-          </v-list-item>
-          <v-list-item
-            link
-            to="/GoldRush"
-          >
-            <v-list-item-title>Goldrush Survivors</v-list-item-title>
-          </v-list-item>
+        <v-list color="primary" class="ma-0">
           <v-list-item
-            link
-            to="/OneWayFly"
+            v-for="item in navigationItems"
+            :key="item.target"
+            @click="handleNavigation(item.target)"
           >
-            <v-list-item-title>One Way Fly</v-list-item-title>
+            <v-list-item-title>
+              <v-icon class="pb-1" :icon="item.icon"></v-icon>
+              {{ item.label }}
+            </v-list-item-title>
           </v-list-item>
         </v-list>
       </v-menu>
+
       <v-spacer></v-spacer>
 
       <v-select
@@ -222,14 +66,9 @@
         class="auto-width"
       ></v-select>
 
-      <v-btn
-        icon
-        @click="toggleIcon"
-        class="mr-2"
-      >
+      <v-btn icon @click="toggleIcon" class="mr-2">
         <v-icon color="primary">{{ isDark ? 'mdi-weather-night' : 'mdi-weather-sunny' }}</v-icon>
       </v-btn>
-
     </v-toolbar>
   </v-app-bar>
 </template>
@@ -244,44 +83,86 @@
   display: inline-block;
   max-width: 79px !important;
 }
+
+.navigation-btn {
+  border-radius: 0;
+  text-transform: none;
+  letter-spacing: 0.02em;
+  font-weight: 700;
+}
+
+.glass-appbar {
+  backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, 0.55) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
 </style>
 
 <script>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTheme } from "vuetify";
 
 export default {
   name: "AppBar",
-  setup() {
+  emits: ["scroll-to-section", "toggle-theme"],
+  setup(_, { emit }) {
     const theme = useTheme();
-    const isDark = ref(false);
-    const { locale } = useI18n();
+    const isDark = ref(theme.global.current.value.dark);
+    const { locale, t } = useI18n();
     const selectedLocale = ref(locale.value);
     watch(selectedLocale, (newLocale) => {
       locale.value = newLocale;
+      if (typeof window !== "undefined") {
+        localStorage.setItem("preferredLocale", newLocale);
+      }
     });
     const locales = [
       { code: "en", emoji: "🇺🇸" },
       { code: "pt", emoji: "🇧🇷" },
     ];
-    function toggleIcon() {
-      toggleTheme();
-      updateIsDark();
-    }
-    function toggleTheme() {
-      theme.global.name.value = theme.global.current.value.dark
-        ? "light"
-        : "dark";
+
+    const navigationItems = [
+      { labelKey: "nav.home", target: "intro", icon: "mdi-home" },
+      {
+        labelKey: "nav.automation",
+        target: "section-automation",
+        icon: "mdi-robot-industrial",
+      },
+      { labelKey: "nav.games", target: "section-games", icon: "mdi-gamepad-square" },
+      {
+        labelKey: "nav.tools",
+        target: "section-tools",
+        icon: "mdi-briefcase-check",
+      },
+      { labelKey: "nav.ai", target: "section-ai", icon: "mdi-brain" },
+    ];
+
+    const localizedNavigationItems = computed(() =>
+      navigationItems.map((item) => ({
+        ...item,
+        label: t(item.labelKey),
+      })),
+    );
+
+    function handleNavigation(target) {
+      emit("scroll-to-section", target);
     }
-    function updateIsDark() {
-      isDark.value = theme.global.name.value !== "dark";
+
+    function toggleIcon() {
+      const nextThemeName = theme.global.current.value.dark ? "light" : "dark";
+      theme.global.name.value = nextThemeName;
+      isDark.value = theme.global.current.value.dark;
+      emit("toggle-theme");
     }
+
     return {
       isDark,
       toggleIcon,
       selectedLocale,
       locales,
+      navigationItems: localizedNavigationItems,
+      handleNavigation,
     };
   },
 };
diff --git a/src/components/HeroWars.vue b/src/components/HeroWars.vue
index 11d9591..43a8e99 100644
--- a/src/components/HeroWars.vue
+++ b/src/components/HeroWars.vue
@@ -4,7 +4,7 @@
       <v-col>
         <a href="https://www.hero-wars.com/" target="_blank">
           <v-img
-            src="/herowars.png"
+            :src="heroWarsLogo"
             height="100"
             class="logo orange-shadow mb-6"
             alt="Hero Wars logo"
@@ -105,3 +105,16 @@
   filter: drop-shadow(0 0 2em rgb(216, 128, 12));
 }
 </style>
+
+<script>
+import heroWarsLogo from "@/assets/projects/herowars.png";
+
+export default {
+  name: "HeroWars",
+  data() {
+    return {
+      heroWarsLogo,
+    };
+  },
+};
+</script>
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 23a89fa..dfab2a3 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -1,93 +1,929 @@
 <template>
-  <v-container class="fill-height d-flex flex-column justify-center align-center text-center px-6">
-    <v-row>
-      <v-col cols="12">
-        <h1 class="text-h3 font-weight-bold mb-2">
+  <div class="landing-wrapper">
+    <section
+      id="intro"
+      class="hero-section"
+    >
+      <div class="hero-surface">
+        <p class="eyebrow">{{ $t('portfolioLabel') }}</p>
+        <h1 class="headline">
           {{ $t('greeting') }} <span class="emoji-wave">👋</span>
         </h1>
-
-        <p class="text-subtitle-1 mb-4">
+        <p class="subhead">
           {{ $t('introduction') }}
         </p>
-
-        <p class="text-subtitle-2 mb-6">
+        <p class="meta">
           {{ $t('currentlyLearning') }}
         </p>
 
-        <div class="d-flex flex-wrap justify-center ga-4 mb-5">
+        <div class="hero-actions">
           <v-btn
             color="primary"
             variant="flat"
+            class="elevated-btn"
             href="https://www.paypal.com/donate?business=gustavoperin067%40gmail.com&item_name=Support+Gustavo's+Journey&currency_code=USD"
             target="_blank"
           >
-            <v-icon
-              start
-              icon="mdi-coffee"
-            ></v-icon>
+            <v-icon start icon="mdi-coffee"></v-icon>
             {{ $t('buyCoffee') }}
           </v-btn>
 
           <v-btn
             color="primary"
             variant="outlined"
+            class="outlined-btn"
             @click="copyEmail"
           >
-            <v-tooltip
-              activator="parent"
-              location="bottom"
-            >
+            <v-tooltip activator="parent" location="bottom">
               {{ $t('copyClipboard') }}
             </v-tooltip>
-            <v-icon
-              start
-              icon="mdi-email"
-            ></v-icon>
+            <v-icon start icon="mdi-email"></v-icon>
             {{ $t('contactMe') }}
           </v-btn>
         </div>
 
-        <v-divider class="my-6"></v-divider>
-
-        <div class="d-flex justify-center flex-wrap ga-4">
+        <div class="social-actions">
           <v-btn
             size="large"
             color="black"
             variant="flat"
             href="https://github.com/Bobagi/"
             target="_blank"
+            class="pill-btn"
           >
-            <v-icon
-              start
-              icon="mdi-github"
-            ></v-icon>
+            <v-icon start icon="mdi-github"></v-icon>
             {{ $t('github') }}
           </v-btn>
-
           <v-btn
             size="large"
             color="indigo"
             variant="flat"
             href="https://www.linkedin.com/in/gustavoaperin/"
             target="_blank"
+            class="pill-btn"
           >
-            <v-icon
-              start
-              icon="mdi-linkedin"
-            ></v-icon>
+            <v-icon start icon="mdi-linkedin"></v-icon>
             {{ $t('linkedin') }}
           </v-btn>
         </div>
 
-        <p class="mt-6 text-caption">
-          <i>{{ $t('replyNote') }}</i>
-        </p>
-      </v-col>
-    </v-row>
-  </v-container>
+        <p class="note"> <i>{{ $t('replyNote') }}</i> </p>
+      </div>
+    </section>
+
+    <section class="projects-section">
+      <div class="section-header">
+        <p class="eyebrow subtle">{{ $t('projectsSection.eyebrow') }}</p>
+        <h2 class="section-title">{{ $t('projectsSection.title') }}</h2>
+        <p class="section-subtitle">{{ $t('projectsSection.subtitle') }}</p>
+      </div>
+
+      <section
+        v-for="group in groupedProjects"
+        :id="group.id"
+        :key="group.id"
+        class="project-group"
+      >
+        <div class="group-header">
+          <div>
+            <p class="eyebrow subtle">{{ group.eyebrow }}</p>
+            <h3 class="group-title">{{ group.title }}</h3>
+            <p class="group-description">{{ group.description }}</p>
+          </div>
+          <div class="group-divider"></div>
+        </div>
+
+        <v-row class="project-grid" justify="center" align="stretch" dense>
+          <v-col
+            v-for="project in group.projects"
+            :key="project.id"
+            cols="12"
+            md="6"
+            lg="6"
+            class="d-flex"
+          >
+            <section :id="project.id" class="w-100">
+              <v-hover v-slot="{ props, isHovering }">
+                <v-card
+                  v-bind="props"
+                  class="project-card"
+                  :class="{ 'project-card--hover': isHovering }"
+                  :style="project.cardStyle"
+                  rounded="xl"
+                  elevation="10"
+                  role="button"
+                  @click="openProjectPage(project.routeName)"
+                >
+                  <div class="card-glow" :style="project.glowStyle"></div>
+                  <div class="card-inner">
+                    <div class="card-header">
+                      <div class="badge accent-badge">{{ project.category }}</div>
+                      <div class="chip-row">
+                        <v-chip
+                          v-for="badge in project.badges"
+                          :key="badge"
+                          color="primary"
+                          variant="outlined"
+                          size="small"
+                          class="pill-chip"
+                        >
+                          {{ badge }}
+                        </v-chip>
+                      </div>
+                    </div>
+
+                    <v-img
+                      v-if="project.image"
+                      :src="project.image"
+                      :alt="project.title"
+                      height="160"
+                      cover
+                      class="floating-img"
+                    ></v-img>
+
+                    <h3 class="card-title">{{ project.title }}</h3>
+                    <p class="card-description">{{ project.description }}</p>
+                    <p class="card-highlight">{{ project.highlight }}</p>
+
+                    <div class="action-row">
+                      <v-btn
+                        v-for="action in project.actions"
+                        :key="action.label"
+                        :href="action.href || undefined"
+                        :to="action.routeName ? { name: action.routeName } : undefined"
+                        :target="action.href ? '_blank' : undefined"
+                        color="primary"
+                        variant="flat"
+                        class="pill-btn elevated-btn"
+                        @click.stop="handleActionClick(action)"
+                      >
+                        <v-icon :icon="action.icon" start></v-icon>
+                        {{ action.label }}
+                      </v-btn>
+                    </div>
+                  </div>
+                </v-card>
+              </v-hover>
+            </section>
+          </v-col>
+        </v-row>
+      </section>
+    </section>
+  </div>
 </template>
 
-<style>
+<script>
+import { computed as vueComputed } from "vue";
+import { useTheme } from "vuetify";
+import heroWarsImage from "@/assets/projects/herowars.png";
+import projectZomboidImage from "@/assets/projects/programerzombie.png";
+import mouseJigglerImage from "@/assets/projects/mouseJigglerIcon.jpg";
+
+const avaricePreviewImage = "/icon-llhama-alt.jpg";
+
+export default {
+  name: "HomePage",
+  setup() {
+    const theme = useTheme();
+    const isDarkTheme = vueComputed(() => theme.global.current.value.dark);
+
+    return { isDarkTheme };
+  },
+  data() {
+    return {
+      projectTypeSections: [
+        {
+          id: "section-automation",
+          titleKey: "sectionHeaders.automation.title",
+          eyebrowKey: "sectionHeaders.automation.eyebrow",
+          descriptionKey: "sectionHeaders.automation.description",
+        },
+        {
+          id: "section-games",
+          titleKey: "sectionHeaders.games.title",
+          eyebrowKey: "sectionHeaders.games.eyebrow",
+          descriptionKey: "sectionHeaders.games.description",
+        },
+        {
+          id: "section-tools",
+          titleKey: "sectionHeaders.tools.title",
+          eyebrowKey: "sectionHeaders.tools.eyebrow",
+          descriptionKey: "sectionHeaders.tools.description",
+        },
+        {
+          id: "section-ai",
+          titleKey: "sectionHeaders.ai.title",
+          eyebrowKey: "sectionHeaders.ai.eyebrow",
+          descriptionKey: "sectionHeaders.ai.description",
+        },
+      ],
+      projects: [
+        {
+          id: "project-hero-wars",
+          typeKey: "section-automation",
+          titleKey: "projects.heroWars.title",
+          categoryKey: "projects.heroWars.category",
+          descriptionKey: "projects.heroWars.description",
+          highlightKey: "projects.heroWars.highlight",
+          routeName: "HeroWars",
+          image: heroWarsImage,
+          badgeKeys: ["badges.windows", "badges.dominationEra"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.14), rgba(0,0,0,0.65));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.18), rgba(255,255,255,0.72));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,207,51,0.35), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(255,207,51,0.28), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "HeroWars",
+            },
+            {
+              labelKey: "actions.download",
+              icon: "mdi-download",
+              href: "https://bobagi.net/downloads/dist.7z",
+            },
+            {
+              labelKey: "actions.github",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi/Hero-Wars-Auto-Play-Bot",
+            },
+          ],
+        },
+        {
+          id: "project-zomboid",
+          typeKey: "section-games",
+          titleKey: "projects.zomboid.title",
+          categoryKey: "projects.zomboid.category",
+          descriptionKey: "projects.zomboid.description",
+          highlightKey: "projects.zomboid.highlight",
+          routeName: "ProjectZomboid",
+          image: projectZomboidImage,
+          badgeKeys: ["badges.ubuntu", "badges.steam", "badges.battleMetrics"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(255,255,255,0.08));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,207,51,0.16));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(0,0,0,0.12), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "ProjectZomboid",
+            },
+            {
+              labelKey: "actions.battlemetrics",
+              icon: "mdi-radar",
+              href: "https://www.battlemetrics.com/servers/zomboid/24442372",
+            },
+            {
+              labelKey: "actions.github",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi/Zomboid-Ubuntu-Server",
+            },
+          ],
+        },
+        {
+          id: "project-avarice",
+          typeKey: "section-automation",
+          titleKey: "projects.avarice.title",
+          categoryKey: "projects.avarice.category",
+          descriptionKey: "projects.avarice.description",
+          highlightKey: "projects.avarice.highlight",
+          routeName: "Avarice",
+          image: avaricePreviewImage,
+          badgeKeys: ["badges.discord", "badges.gpt", "badges.automation"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.2), rgba(0,0,0,0.7));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.2), rgba(255,255,255,0.75));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,207,51,0.3), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(255,207,51,0.22), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "Avarice",
+            },
+            {
+              labelKey: "actions.github",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi/Avarice",
+            },
+          ],
+        },
+        {
+          id: "project-goldrush",
+          typeKey: "section-games",
+          titleKey: "projects.goldrush.title",
+          categoryKey: "projects.goldrush.category",
+          descriptionKey: "projects.goldrush.description",
+          highlightKey: "projects.goldrush.highlight",
+          routeName: "GoldRush",
+          image: null,
+          badgeKeys: ["badges.webgl", "badges.unity", "badges.leaderboard"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.75));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,207,51,0.16));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(0,0,0,0.35), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(0,0,0,0.1), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "GoldRush",
+            },
+            {
+              labelKey: "actions.itchio",
+              icon: "mdi-google-controller",
+              href: "https://bobagi.itch.io/goldrush-survivors",
+            },
+          ],
+        },
+        {
+          id: "project-one-way-fly",
+          typeKey: "section-games",
+          titleKey: "projects.oneWayFly.title",
+          categoryKey: "projects.oneWayFly.category",
+          descriptionKey: "projects.oneWayFly.description",
+          highlightKey: "projects.oneWayFly.highlight",
+          routeName: "OneWayFly",
+          image: null,
+          badgeKeys: ["badges.prototype", "badges.casual", "badges.pc"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.16), rgba(0,0,0,0.65));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.18), rgba(255,255,255,0.78));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,207,51,0.25), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(255,207,51,0.2), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "OneWayFly",
+            },
+            {
+              labelKey: "actions.itchio",
+              icon: "mdi-google-controller",
+              href: "https://bobagi.itch.io/",
+            },
+          ],
+        },
+        {
+          id: "project-godot",
+          typeKey: "section-games",
+          titleKey: "projects.dracomania.title",
+          categoryKey: "projects.dracomania.category",
+          descriptionKey: "projects.dracomania.description",
+          highlightKey: "projects.dracomania.highlight",
+          routeName: "GodotGame",
+          image: null,
+          badgeKeys: ["badges.godot", "badges.web"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.7));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,207,51,0.18));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(0,0,0,0.12), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "GodotGame",
+            },
+            {
+              labelKey: "actions.itchio",
+              icon: "mdi-google-controller",
+              href: "https://bobagi.itch.io/dracomania",
+            },
+          ],
+        },
+        {
+          id: "project-snowflake",
+          typeKey: "section-ai",
+          titleKey: "projects.snowflake.title",
+          categoryKey: "projects.snowflake.category",
+          descriptionKey: "projects.snowflake.description",
+          highlightKey: "projects.snowflake.highlight",
+          routeName: "Snowflake",
+          image: null,
+          badgeKeys: ["badges.tor", "badges.privacy"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(0,0,0,0.7));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,207,51,0.14));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(0,0,0,0.12), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "Snowflake",
+            },
+            {
+              labelKey: "actions.learnMore",
+              icon: "mdi-timer-sand",
+              href: "https://snowflake.torproject.org/",
+            },
+          ],
+        },
+        {
+          id: "project-coin-alert",
+          typeKey: "section-tools",
+          titleKey: "projects.coinAlert.title",
+          categoryKey: "projects.coinAlert.category",
+          descriptionKey: "projects.coinAlert.description",
+          highlightKey: "projects.coinAlert.highlight",
+          routeName: "CoinAlert",
+          image: null,
+          badgeKeys: ["badges.crypto", "badges.notifications"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.18), rgba(0,0,0,0.68));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,207,51,0.2), rgba(255,255,255,0.8));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,207,51,0.22), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(255,207,51,0.18), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "CoinAlert",
+            },
+            {
+              labelKey: "actions.githubRepository",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi",
+            },
+          ],
+        },
+        {
+          id: "project-mouse-jiggler",
+          typeKey: "section-tools",
+          titleKey: "projects.mouseJiggler.title",
+          categoryKey: "projects.mouseJiggler.category",
+          descriptionKey: "projects.mouseJiggler.description",
+          highlightKey: "projects.mouseJiggler.highlight",
+          routeName: "MouseJiggler",
+          image: mouseJigglerImage,
+          badgeKeys: ["badges.windows", "badges.productivity"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(255,207,51,0.22));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,207,51,0.18));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,207,51,0.28), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(0,0,0,0.1), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "MouseJiggler",
+            },
+            {
+              labelKey: "actions.download",
+              icon: "mdi-download",
+              href: "https://github.com/Bobagi/MouseJiggler",
+            },
+          ],
+        },
+        {
+          id: "project-chat-trainer",
+          typeKey: "section-ai",
+          titleKey: "projects.chatTrainer.title",
+          categoryKey: "projects.chatTrainer.category",
+          descriptionKey: "projects.chatTrainer.description",
+          highlightKey: "projects.chatTrainer.highlight",
+          routeName: "ChatTrainer",
+          image: null,
+          badgeKeys: ["badges.ai", "badges.dataset"],
+          cardStyle: {
+            dark:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.72));",
+            light:
+              "background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,207,51,0.18));",
+          },
+          glowStyle: {
+            dark: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
+            light: "background: radial-gradient(circle, rgba(0,0,0,0.12), transparent 60%);",
+          },
+          actions: [
+            {
+              labelKey: "actions.viewPage",
+              icon: "mdi-open-in-new",
+              routeName: "ChatTrainer",
+            },
+            {
+              labelKey: "actions.github",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  computed: {
+    localizedProjectTypeSections() {
+      return this.projectTypeSections.map((section) => ({
+        ...section,
+        title: this.$t(section.titleKey),
+        eyebrow: this.$t(section.eyebrowKey),
+        description: this.$t(section.descriptionKey),
+      }));
+    },
+    localizedProjects() {
+      return this.projects.map((project) => ({
+        ...project,
+        title: this.$t(project.titleKey),
+        category: this.$t(project.categoryKey),
+        description: this.$t(project.descriptionKey),
+        highlight: this.$t(project.highlightKey),
+        cardStyle: this.isDarkTheme ? project.cardStyle.dark : project.cardStyle.light,
+        glowStyle: this.isDarkTheme ? project.glowStyle.dark : project.glowStyle.light,
+        badges: project.badgeKeys.map((badgeKey) => this.$t(badgeKey)),
+        actions: project.actions.map((action) => ({
+          ...action,
+          label: this.$t(action.labelKey),
+        })),
+      }));
+    },
+    groupedProjects() {
+      return this.localizedProjectTypeSections.map((section) => ({
+        ...section,
+        projects: this.localizedProjects.filter(
+          (project) => project.typeKey === section.id,
+        ),
+      }));
+    },
+  },
+  methods: {
+    async copyEmail() {
+      const email = "gustavoperin067@gmail.com";
+      try {
+        await navigator.clipboard.writeText(email);
+        alert(this.$t("emailCopied"));
+      } catch (copyError) {
+        alert(this.$t("copyFailed"));
+      }
+    },
+    handleActionClick(action) {
+      if (action.routeName) {
+        this.$router.push({ name: action.routeName });
+      }
+    },
+    openProjectPage(routeName) {
+      if (routeName) {
+        this.$router.push({ name: routeName });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+.landing-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  padding: 32px 12px 64px;
+  background: transparent;
+}
+
+.hero-section {
+  position: relative;
+  padding: 48px;
+  border-radius: 32px;
+  overflow: hidden;
+  background: radial-gradient(circle at 10% 20%, rgba(255, 207, 51, 0.18), transparent 40%),
+    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.1), transparent 35%),
+    linear-gradient(135deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.58));
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-surface {
+  position: relative;
+  z-index: 2;
+  max-width: 980px;
+  text-align: center;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.hero-section::after {
+  content: "";
+  position: absolute;
+  inset: 12px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+}
+
+:deep(.v-theme--light) .hero-section {
+  background: radial-gradient(circle at 10% 20%, rgba(255, 207, 51, 0.2), transparent 42%),
+    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.65), transparent 35%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 226, 135, 0.85));
+  color: #0f0f0f;
+}
+
+:deep(.v-theme--light) .headline,
+:deep(.v-theme--light) .subhead,
+:deep(.v-theme--light) .meta,
+:deep(.v-theme--light) .note {
+  color: rgba(0, 0, 0, 0.82);
+}
+
+.headline {
+  font-weight: 800;
+  font-size: clamp(2.2rem, 4vw, 3.5rem);
+  margin: 8px 0 12px;
+}
+
+.subhead {
+  font-size: 1.125rem;
+  color: rgba(255, 255, 255, 0.86);
+  margin-bottom: 12px;
+}
+
+.meta {
+  color: rgba(255, 255, 255, 0.65);
+  margin-bottom: 20px;
+}
+
+.hero-actions,
+.social-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 12px;
+  justify-content: center;
+}
+
+.note {
+  margin-top: 16px;
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.projects-section {
+  padding: 12px;
+  border-radius: 28px;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7));
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+:deep(.v-theme--light) .projects-section {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 223, 94, 0.2));
+  border-color: rgba(0, 0, 0, 0.06);
+  color: #0f0f0f;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  margin: 6px 0;
+}
+
+.section-subtitle {
+  max-width: 720px;
+  margin: 0 auto;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+:deep(.v-theme--light) .section-subtitle,
+:deep(.v-theme--light) .group-description {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.project-group {
+  margin-top: 26px;
+  padding: 18px 12px 8px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.6));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+:deep(.v-theme--light) .project-group {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 223, 94, 0.1));
+  border-color: rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+
+.group-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.group-title {
+  margin: 4px 0;
+  font-size: 1.35rem;
+}
+
+.group-description {
+  color: rgba(255, 255, 255, 0.78);
+  margin: 0;
+}
+
+.group-divider {
+  min-width: 140px;
+  height: 4px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(255, 207, 51, 0.1), rgba(255, 207, 51, 0.8));
+  box-shadow: 0 0 16px rgba(255, 207, 51, 0.4);
+}
+
+.project-grid {
+  margin-top: 10px;
+}
+
+.project-card {
+  position: relative;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
+  height: 100%;
+  color: #f5f5f5;
+  cursor: pointer;
+}
+
+:deep(.v-theme--light) .project-card {
+  color: #111111;
+  border-color: rgba(0, 0, 0, 0.08);
+  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.12);
+}
+
+.project-card--hover {
+  transform: translateY(-6px) scale(1.01);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 32px rgba(255, 207, 51, 0.08);
+  border-color: rgba(255, 207, 51, 0.35);
+}
+
+.card-glow {
+  position: absolute;
+  inset: -12% 0 0 0;
+  filter: blur(24px);
+  opacity: 0.8;
+}
+
+.card-inner {
+  position: relative;
+  z-index: 2;
+  padding: 22px 22px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.badge {
+  font-size: 0.9rem;
+  padding: 8px 14px;
+  border-radius: 999px;
+  color: #0b0b0b;
+  background: linear-gradient(135deg, #ffd54f, #ffca28);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.chip-row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.pill-chip {
+  border-radius: 999px;
+}
+
+.floating-img {
+  border-radius: 18px;
+  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.card-title {
+  font-weight: 700;
+  font-size: 1.25rem;
+  margin-top: 4px;
+}
+
+.card-description {
+  color: rgba(255, 255, 255, 0.82);
+  line-height: 1.5;
+}
+
+:deep(.v-theme--light) .card-description {
+  color: rgba(0, 0, 0, 0.78);
+}
+
+.card-highlight {
+  color: #ffd54f;
+  font-weight: 600;
+}
+
+:deep(.v-theme--light) .card-highlight {
+  color: #b88600;
+}
+
+.action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.pill-btn {
+  border-radius: 999px;
+  text-transform: none;
+  font-weight: 700;
+}
+
+.elevated-btn {
+  box-shadow: 0 12px 24px rgba(255, 207, 51, 0.16);
+}
+
+.outlined-btn {
+  border-color: rgba(255, 207, 51, 0.6) !important;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-weight: 700;
+  color: #ffd54f;
+  margin: 0;
+}
+
+.eyebrow.subtle {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.meta,
+.note {
+  max-width: 720px;
+}
+
 @keyframes wave {
   0% {
     transform: rotate(0deg);
@@ -115,51 +951,32 @@
   transform-origin: 70% 70%;
 }
 
-@media (max-width: 600px) {
-  h1 {
-    font-size: 1.8rem !important;
+@media (max-width: 960px) {
+  .hero-section {
+    padding: 28px;
   }
-
-  .text-subtitle-1,
-  .text-subtitle-2 {
-    font-size: 1rem !important;
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
-
-  .v-btn {
-    font-size: 0.8rem !important;
+  .group-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .group-divider {
+    width: 100%;
   }
 }
 
-@media (min-width: 600px) and (max-width: 960px) {
-  h1 {
-    font-size: 2.2rem !important;
+@media (max-width: 600px) {
+  .hero-section {
+    padding: 22px;
   }
-
-  .text-subtitle-1,
-  .text-subtitle-2 {
-    font-size: 1.1rem !important;
+  .landing-wrapper {
+    padding: 24px 10px;
   }
-
-  .v-btn {
-    font-size: 0.9rem !important;
+  .projects-section {
+    padding: 18px 12px;
   }
 }
 </style>
-
-<script>
-export default {
-  name: "HomePage",
-  methods: {
-    async copyEmail() {
-      const email = "gustavoperin067@gmail.com";
-      try {
-        await navigator.clipboard.writeText(email);
-        alert(this.$t("emailCopied"));
-      } catch (err) {
-        alert(this.$t("copyFailed"));
-      }
-    },
-  },
-};
-</script>
-
diff --git a/src/components/ProjectZomboid.vue b/src/components/ProjectZomboid.vue
index f949ef3..6aaeda9 100644
--- a/src/components/ProjectZomboid.vue
+++ b/src/components/ProjectZomboid.vue
@@ -28,7 +28,7 @@
         <v-row justify="center">
           <v-col cols="12" md="5" style="text-align: center">
             <img
-              src="/programerzombie.png"
+              :src="programmerZombieImage"
               class="logo black-shadow"
               style="max-height: 20em"
               alt="Programmer zombie"
@@ -136,7 +136,14 @@
 </style>
 
 <script>
+import programmerZombieImage from "@/assets/projects/programerzombie.png";
+
 export default {
+  data() {
+    return {
+      programmerZombieImage,
+    };
+  },
   methods: {
     handleClick() {
       alert('tusca')
diff --git a/src/locales/en.json b/src/locales/en.json
index 1bff77d..f1aa0dc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -9,5 +9,138 @@
   "copyFailed": "Failed to copy email",
   "github": "GitHub",
   "linkedin": "LinkedIn",
-  "replyNote": "(Replies might take a while... or forever — but hey, worth the try 😄)"
+  "portfolioLabel": "Portfolio",
+  "replyNote": "(Replies might take a while... or forever — but hey, worth the try 😄)",
+  "nav": {
+    "home": "Home",
+    "automation": "Automation & Bots",
+    "games": "Games",
+    "tools": "Tools",
+    "ai": "AI & Data"
+  },
+  "projectsSection": {
+    "eyebrow": "Featured projects",
+    "title": "Projects in one curated showcase",
+    "subtitle": "Pick a category in the menu to glide to the cards and see what each project delivers."
+  },
+  "sectionHeaders": {
+    "automation": {
+      "eyebrow": "Smart flows",
+      "title": "Automation & Bots",
+      "description": "Bots and integrations that automate repetitive tasks and keep everything running on its own."
+    },
+    "games": {
+      "eyebrow": "Experiments and servers",
+      "title": "Games",
+      "description": "Constant prototyping of games and infrastructure to keep online fun going."
+    },
+    "tools": {
+      "eyebrow": "Practical utilities",
+      "title": "Tools",
+      "description": "Productivity-focused utilities that always keep the yellow and black palette close by."
+    },
+    "ai": {
+      "eyebrow": "Guided insights",
+      "title": "AI & Data",
+      "description": "Dashboards and assistants that bring visual answers and fine-tuning controls."
+    }
+  },
+  "actions": {
+    "download": "Download",
+    "github": "GitHub",
+    "githubRepository": "GitHub Repository",
+    "itchio": "itch.io",
+    "battlemetrics": "BattleMetrics",
+    "learnMore": "Learn more",
+    "viewPage": "Open project page"
+  },
+  "badges": {
+    "windows": "Windows",
+    "dominationEra": "Domination Era",
+    "ubuntu": "Ubuntu",
+    "steam": "Steam",
+    "battleMetrics": "BattleMetrics",
+    "discord": "Discord",
+    "gpt": "GPT",
+    "automation": "Automation",
+    "webgl": "WebGL",
+    "unity": "Unity",
+    "leaderboard": "Leaderboard",
+    "prototype": "Prototype",
+    "casual": "Casual",
+    "pc": "PC",
+    "godot": "Godot",
+    "web": "Web",
+    "dashboard": "Dashboard",
+    "data": "Data",
+    "crypto": "Crypto",
+    "notifications": "Notifications",
+    "productivity": "Productivity",
+    "ai": "AI",
+    "dataset": "Dataset",
+    "tor": "Tor",
+    "privacy": "Privacy"
+  },
+  "projects": {
+    "heroWars": {
+      "title": "Hero Wars Auto Play Bot",
+      "category": "Bot • Automation",
+      "description": "Automates the most repetitive Domination Era routines so you can save time.",
+      "highlight": "Rework in progress to support multiple monitors and make loops smarter."
+    },
+    "zomboid": {
+      "title": "Project Zomboid Server",
+      "category": "Infra • Multiplayer",
+      "description": "Casual server hosted on Ubuntu to gather friends with stability.",
+      "highlight": "Documented so you can spin up your own host while the main server is offline."
+    },
+    "avarice": {
+      "title": "Avarice Bot",
+      "category": "Discord • GPT",
+      "description": "Connects Discord commands with a Project Zomboid server and AI-assisted conversations.",
+      "highlight": "Accepts your own API key to keep the experience modular and secure."
+    },
+    "goldrush": {
+      "title": "Goldrush Survivors",
+      "category": "Game • Unity",
+      "description": "WebGL connectivity test with Node.js backend, ranking, and item storage.",
+      "highlight": "Available on itch.io; set to draft whenever the API is under maintenance."
+    },
+    "oneWayFly": {
+      "title": "One Way Fly",
+      "category": "Game • Unity",
+      "description": "Casual gameplay experiment focused on quick movement and lightweight controls.",
+      "highlight": "Ongoing prototype to test lightweight shaders and responsive animations."
+    },
+    "dracomania": {
+      "title": "Dracomania 2024",
+      "category": "Game • Godot",
+      "description": "Fan game inspired by Dracomania, produced for the web with the Godot engine.",
+      "highlight": "Available on itch.io; embedded version coming soon directly on the page."
+    },
+    "snowflake": {
+      "title": "Snowflake (Tor)",
+      "category": "Tool • Privacy",
+      "description": "Sharing the Tor Snowflake proxy that helps people bypass censorship with encrypted connections.",
+      "highlight": "You can join by running the add-on or sharing the link with anyone who needs a safe bridge."
+    },
+    "coinAlert": {
+      "title": "Coin Alert",
+      "category": "Tools • Alerts",
+      "description": "Cryptocurrency price monitoring with quick alerts.",
+      "highlight": "Built around yellow and black tones to track the market in any theme mode."
+    },
+    "mouseJiggler": {
+      "title": "Mouse Jiggler",
+      "category": "Tools • Desktop",
+      "description": "Keeps your computer active with subtle, configurable cursor movements.",
+      "highlight": "Minimalist yellow and black interface, designed for long sessions."
+    },
+    "chatTrainer": {
+      "title": "Chat Trainer",
+      "category": "AI • Training",
+      "description": "Experimental tool to adjust chatbot responses with custom datasets.",
+      "highlight": "Visual feedback with soft glows to highlight training metrics."
+    }
+  }
 }
diff --git a/src/locales/pt.json b/src/locales/pt.json
index 604d4d1..3b65b5b 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -9,5 +9,138 @@
   "copyFailed": "Falha ao copiar o email",
   "github": "GitHub",
   "linkedin": "LinkedIn",
-  "replyNote": "(As respostas podem demorar... e talvez eu nunca veja — mas não custa tentar 😄)"
+  "portfolioLabel": "Portfólio",
+  "replyNote": "(As respostas podem demorar... e talvez eu nunca veja — mas não custa tentar 😄)",
+  "nav": {
+    "home": "Início",
+    "automation": "Automação & Bots",
+    "games": "Jogos",
+    "tools": "Ferramentas",
+    "ai": "IA & Dados"
+  },
+  "projectsSection": {
+    "eyebrow": "Projetos destacados",
+    "title": "Projetos em uma vitrine única",
+    "subtitle": "Escolha uma categoria no menu para rolar até os cartões e conhecer cada entrega em detalhes."
+  },
+  "sectionHeaders": {
+    "automation": {
+      "eyebrow": "Fluxos inteligentes",
+      "title": "Automação & Bots",
+      "description": "Bots e integrações que automatizam tarefas repetitivas e mantêm tudo funcionando sozinho."
+    },
+    "games": {
+      "eyebrow": "Experimentos e servidores",
+      "title": "Jogos",
+      "description": "Prototipagem constante de jogos e infraestrutura para manter a diversão online."
+    },
+    "tools": {
+      "eyebrow": "Utilitários práticos",
+      "title": "Ferramentas",
+      "description": "Apps focados em produtividade diária com a paleta amarelo e preto sempre presente."
+    },
+    "ai": {
+      "eyebrow": "Insights guiados",
+      "title": "IA & Dados",
+      "description": "Painéis e assistentes que trazem respostas visuais e ajustes finos de modelos."
+    }
+  },
+  "actions": {
+    "download": "Download",
+    "github": "GitHub",
+    "githubRepository": "Repositório GitHub",
+    "itchio": "itch.io",
+    "battlemetrics": "BattleMetrics",
+    "learnMore": "Saiba mais",
+    "viewPage": "Abrir página do projeto"
+  },
+  "badges": {
+    "windows": "Windows",
+    "dominationEra": "Domination Era",
+    "ubuntu": "Ubuntu",
+    "steam": "Steam",
+    "battleMetrics": "BattleMetrics",
+    "discord": "Discord",
+    "gpt": "GPT",
+    "automation": "Automação",
+    "webgl": "WebGL",
+    "unity": "Unity",
+    "leaderboard": "Ranking",
+    "prototype": "Protótipo",
+    "casual": "Casual",
+    "pc": "PC",
+    "godot": "Godot",
+    "web": "Web",
+    "dashboard": "Dashboard",
+    "data": "Dados",
+    "crypto": "Cripto",
+    "notifications": "Notificações",
+    "productivity": "Produtividade",
+    "ai": "IA",
+    "dataset": "Dataset",
+    "tor": "Tor",
+    "privacy": "Privacidade"
+  },
+  "projects": {
+    "heroWars": {
+      "title": "Hero Wars Auto Play Bot",
+      "category": "Bot • Automação",
+      "description": "Automatiza as tarefas mais repetitivas da Domination Era para liberar seu tempo.",
+      "highlight": "Rework em andamento para suportar múltiplos monitores e tornar os loops mais inteligentes."
+    },
+    "zomboid": {
+      "title": "Project Zomboid Server",
+      "category": "Infra • Multiplayer",
+      "description": "Servidor casual hospedado em Ubuntu para reunir a galera de forma estável.",
+      "highlight": "Documentado para você levantar um host próprio enquanto o servidor oficial está offline."
+    },
+    "avarice": {
+      "title": "Avarice Bot",
+      "category": "Discord • GPT",
+      "description": "Integra comandos do Discord com um servidor Project Zomboid e conversas assistidas por IA.",
+      "highlight": "Aceita sua própria API Key para manter a experiência segura e modular."
+    },
+    "goldrush": {
+      "title": "Goldrush Survivors",
+      "category": "Game • Unity",
+      "description": "Teste de conectividade WebGL com backend Node.js, ranking e armazenamento de itens.",
+      "highlight": "Disponível no itch.io; fica em modo draft quando a API está em manutenção."
+    },
+    "oneWayFly": {
+      "title": "One Way Fly",
+      "category": "Game • Unity",
+      "description": "Experimento de gameplay casual com foco em movimentos rápidos e controles leves.",
+      "highlight": "Protótipo contínuo para testar shaders leves e animações responsivas."
+    },
+    "dracomania": {
+      "title": "Dracomania 2024",
+      "category": "Game • Godot",
+      "description": "Fan game inspirado em Dracomania, produzido para web com engine Godot.",
+      "highlight": "Disponível no itch.io; versão embarcada em breve diretamente na página."
+    },
+    "snowflake": {
+      "title": "Snowflake (Tor)",
+      "category": "Ferramenta • Privacidade",
+      "description": "Divulgação do Snowflake da Tor, um proxy voluntário que ajuda pessoas a contornar censura com conexões criptografadas.",
+      "highlight": "Você pode ajudar rodando o add-on ou compartilhando o link com quem precisa de uma ponte segura."
+    },
+    "coinAlert": {
+      "title": "Coin Alert",
+      "category": "Ferramentas • Alertas",
+      "description": "Monitoramento de preços de criptomoedas com notificações rápidas.",
+      "highlight": "Foco em tons amarelos e pretos para acompanhar o mercado em qualquer modo de tema."
+    },
+    "mouseJiggler": {
+      "title": "Mouse Jiggler",
+      "category": "Ferramentas • Desktop",
+      "description": "Mantém o computador ativo com movimentos sutis e configuráveis do cursor.",
+      "highlight": "Interface minimalista em amarelo e preto, pensada para uso prolongado."
+    },
+    "chatTrainer": {
+      "title": "Chat Trainer",
+      "category": "IA • Treinamento",
+      "description": "Ferramenta experimental para ajustar respostas de chatbots com datasets customizados.",
+      "highlight": "Feedback visual realçado por brilhos suaves para destacar métricas de treino."
+    }
+  }
 }
diff --git a/src/main.js b/src/main.js
index f9f2035..74096ec 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,8 +10,47 @@ import "./assets/css/global.css";
 
 loadFonts();
 
+const supportedLocales = ["en", "pt"];
+
+function normalizePreferredLocale(localeCode) {
+  if (!localeCode) {
+    return null;
+  }
+
+  const baseLocale = localeCode.split("-")[0];
+  return supportedLocales.includes(baseLocale) ? baseLocale : null;
+}
+
+function getPersistedLocale() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  return normalizePreferredLocale(localStorage.getItem("preferredLocale"));
+}
+
+function detectNavigatorLocale() {
+  if (typeof navigator === "undefined") {
+    return null;
+  }
+
+  const navigatorLocales = navigator.languages || [navigator.language];
+
+  for (const navigatorLocale of navigatorLocales) {
+    const normalizedLocale = normalizePreferredLocale(navigatorLocale);
+    if (normalizedLocale) {
+      return normalizedLocale;
+    }
+  }
+
+  return null;
+}
+
+const resolvedLocale =
+  getPersistedLocale() || detectNavigatorLocale() || supportedLocales[0];
+
 const i18n = createI18n({
-  locale: "en",
+  locale: resolvedLocale,
   fallbackLocale: "en",
   messages: {
     en,
diff --git a/src/router.js b/src/router.js
index bdae7d5..42baa2a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -19,7 +19,7 @@ const routes = [
   { path: "/Avarice", name: "Avarice", component: AvariceBot },
   { path: "/MouseJiggler", name: "MouseJiggler", component: MouseJiggler },
   { path: "/OneWayFly", name: "OneWayFly", component: OneWayFly },
-   { path: "/GodotGame", name: "GodotGame", component: GodotGame },
+  { path: "/GodotGame", name: "GodotGame", component: GodotGame },
   { path: "/GoldRush", name: "GoldRush", component: GoldRush },
   { path: "/CoinAlert", name: "CoinAlert", component: CoinAlert },
   { path: "/ChatTrainer", name: "ChatTrainer", component: ChatTrainer },