From e7754da362af4a358d91ba4ee8a6717a8c0ca94a Mon Sep 17 00:00:00 2001
From: Gustavo Perin <gustavoperin067@gmail.com>
Date: Wed, 10 Dec 2025 18:50:07 -0300
Subject: [PATCH 1/7] Refactor portfolio into single-page card showcase

---
 src/App.vue                                   |   9 +-
 {public => src/assets/projects}/herowars.png  | Bin
 .../assets/projects}/mouseJigglerIcon.jpg     | Bin
 .../assets/projects}/programerzombie.png      | Bin
 src/components/AppBar.vue                     | 250 ++-----
 src/components/HeroWars.vue                   |  15 +-
 src/components/HomePage.vue                   | 655 +++++++++++++++---
 src/components/ProjectZomboid.vue             |   9 +-
 src/router.js                                 |  23 +-
 9 files changed, 671 insertions(+), 290 deletions(-)
 rename {public => src/assets/projects}/herowars.png (100%)
 rename {public => src/assets/projects}/mouseJigglerIcon.jpg (100%)
 rename {public => src/assets/projects}/programerzombie.png (100%)

diff --git a/src/App.vue b/src/App.vue
index 156dbd7..054c95d 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();
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..4f48101 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 color="primary" class="ma-0">
           <v-list-item
-            link
-            to="/SnowFlake"
+            v-for="item in navigationItems"
+            :key="item.target"
+            @click="handleNavigation(item.target)"
           >
-            <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-item
-            link
-            to="/OneWayFly"
-          >
-            <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,6 +83,19 @@
   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>
@@ -253,7 +105,8 @@ 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();
@@ -265,23 +118,46 @@ export default {
       { code: "en", emoji: "🇺🇸" },
       { code: "pt", emoji: "🇧🇷" },
     ];
+
+    const navigationItems = [
+      { label: "Início", target: "intro", icon: "mdi-home" },
+      { label: "Hero Wars", target: "project-hero-wars", icon: "mdi-sword" },
+      { label: "Zomboid", target: "project-zomboid", icon: "mdi-biohazard" },
+      { label: "Avarice", target: "project-avarice", icon: "mdi-robot-outline" },
+      { label: "Goldrush", target: "project-goldrush", icon: "mdi-pickaxe" },
+      { label: "One Way Fly", target: "project-one-way-fly", icon: "mdi-airplane-takeoff" },
+      { label: "Dracomania", target: "project-godot", icon: "mdi-gamepad-variant" },
+      { label: "Snowflake", target: "project-snowflake", icon: "mdi-snowflake" },
+      { label: "Coin Alert", target: "project-coin-alert", icon: "mdi-currency-btc" },
+      { label: "Mouse Jiggler", target: "project-mouse-jiggler", icon: "mdi-mouse" },
+      { label: "Chat Trainer", target: "project-chat-trainer", icon: "mdi-head-cog" },
+    ];
+
+    function handleNavigation(target) {
+      emit("scroll-to-section", target);
+    }
+
     function toggleIcon() {
       toggleTheme();
       updateIsDark();
+      emit("toggle-theme");
     }
+
     function toggleTheme() {
-      theme.global.name.value = theme.global.current.value.dark
-        ? "light"
-        : "dark";
+      theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
     }
+
     function updateIsDark() {
       isDark.value = theme.global.name.value !== "dark";
     }
+
     return {
       isDark,
       toggleIcon,
       selectedLocale,
       locales,
+      navigationItems,
+      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..6036150 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -1,93 +1,618 @@
 <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">Portfolio</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 class="note"> <i>{{ $t('replyNote') }}</i> </p>
+      </div>
+    </section>
+
+    <section class="projects-section">
+      <div class="section-header">
+        <p class="eyebrow subtle">Projetos destacados</p>
+        <h2 class="section-title">Uma vitrine única com cartões imersivos</h2>
+        <p class="section-subtitle">
+          Cada projeto ganhou um cartão dedicado com luz, sombra e pequenas animações.
+          Use o menu para deslizar até qualquer cartão rapidamente.
         </p>
-      </v-col>
-    </v-row>
-  </v-container>
+      </div>
+
+      <v-row class="project-grid" justify="center" align="stretch" dense>
+        <v-col
+          v-for="project in projects"
+          :key="project.id"
+          cols="12"
+          md="6"
+          lg="4"
+          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"
+              >
+                <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"
+                      target="_blank"
+                      color="primary"
+                      variant="flat"
+                      class="pill-btn elevated-btn"
+                    >
+                      <v-icon :icon="action.icon" start></v-icon>
+                      {{ action.label }}
+                    </v-btn>
+                  </div>
+                </div>
+              </v-card>
+            </v-hover>
+          </section>
+        </v-col>
+      </v-row>
+    </section>
+  </div>
 </template>
 
-<style>
+<script>
+import heroWarsImage from "@/assets/projects/herowars.png";
+import projectZomboidImage from "@/assets/projects/programerzombie.png";
+import mouseJigglerImage from "@/assets/projects/mouseJigglerIcon.jpg";
+
+export default {
+  name: "HomePage",
+  data() {
+    return {
+      projects: [
+        {
+          id: "project-hero-wars",
+          title: "Hero Wars Auto Play Bot",
+          category: "Bot • Automação",
+          description:
+            "Automa 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.",
+          image: heroWarsImage,
+          badges: ["Windows", "Domination Era"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,207,51,0.14), rgba(0,0,0,0.55));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.35), transparent 60%);",
+          actions: [
+            {
+              label: "Download",
+              icon: "mdi-download",
+              href: "https://bobagi.net/downloads/dist.7z",
+            },
+            {
+              label: "GitHub",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi/Hero-Wars-Auto-Play-Bot",
+            },
+          ],
+        },
+        {
+          id: "project-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.",
+          image: projectZomboidImage,
+          badges: ["Ubuntu", "Steam", "BattleMetrics"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(255,255,255,0.04));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
+          actions: [
+            {
+              label: "BattleMetrics",
+              icon: "mdi-radar",
+              href: "https://www.battlemetrics.com/servers/zomboid/24442372",
+            },
+            {
+              label: "GitHub",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi/Zomboid-Ubuntu-Server",
+            },
+          ],
+        },
+        {
+          id: "project-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.",
+          image: null,
+          badges: ["Discord", "GPT", "Automação"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,207,51,0.2), rgba(0,0,0,0.65));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.3), transparent 60%);",
+          actions: [
+            {
+              label: "GitHub",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi/Avarice",
+            },
+          ],
+        },
+        {
+          id: "project-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.",
+          image: null,
+          badges: ["WebGL", "Unity", "Leaderboard"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.7));",
+          glowStyle: "background: radial-gradient(circle, rgba(0,0,0,0.35), transparent 60%);",
+          actions: [
+            {
+              label: "itch.io",
+              icon: "mdi-google-controller",
+              href: "https://bobagi.itch.io/goldrush-survivors",
+            },
+          ],
+        },
+        {
+          id: "project-one-way-fly",
+          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.",
+          image: null,
+          badges: ["Prototype", "Casual", "PC"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,207,51,0.16), rgba(0,0,0,0.6));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.25), transparent 60%);",
+          actions: [
+            {
+              label: "itch.io",
+              icon: "mdi-google-controller",
+              href: "https://bobagi.itch.io/",
+            },
+          ],
+        },
+        {
+          id: "project-godot",
+          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.",
+          image: null,
+          badges: ["Godot", "Web"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.7));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);",
+          actions: [
+            {
+              label: "itch.io",
+              icon: "mdi-google-controller",
+              href: "https://bobagi.itch.io/dracomania",
+            },
+          ],
+        },
+        {
+          id: "project-snowflake",
+          title: "Snowflake",
+          category: "Tools • Data",
+          description:
+            "Ferramentas para manipular dados com foco em visualização limpa e responsiva.",
+          highlight:
+            "Interface renovada em breve com mais gráficos e painéis modulados.",
+          image: null,
+          badges: ["Dashboard", "Data"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(0,0,0,0.65));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 60%);",
+          actions: [
+            {
+              label: "Em breve",
+              icon: "mdi-timer-sand",
+              href: "https://github.com/Bobagi",
+            },
+          ],
+        },
+        {
+          id: "project-coin-alert",
+          title: "Coin Alert",
+          category: "Tools • Alerts",
+          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.",
+          image: null,
+          badges: ["Crypto", "Notificações"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,207,51,0.18), rgba(0,0,0,0.62));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.22), transparent 60%);",
+          actions: [
+            {
+              label: "GitHub",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi",
+            },
+          ],
+        },
+        {
+          id: "project-mouse-jiggler",
+          title: "Mouse Jiggler",
+          category: "Tools • 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.",
+          image: mouseJigglerImage,
+          badges: ["Windows", "Produtividade"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(255,207,51,0.2));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.28), transparent 60%);",
+          actions: [
+            {
+              label: "Download",
+              icon: "mdi-download",
+              href: "https://github.com/Bobagi/MouseJiggler",
+            },
+          ],
+        },
+        {
+          id: "project-chat-trainer",
+          title: "Chat Trainer",
+          category: "AI • Training",
+          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.",
+          image: null,
+          badges: ["AI", "Dataset"],
+          cardStyle:
+            "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.68));",
+          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
+          actions: [
+            {
+              label: "GitHub",
+              icon: "mdi-github",
+              href: "https://github.com/Bobagi",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  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>
+
+<style scoped>
+.landing-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  padding: 32px 12px 64px;
+}
+
+.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.08), transparent 35%),
+    linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+}
+
+.hero-surface {
+  position: relative;
+  z-index: 2;
+  max-width: 980px;
+}
+
+.hero-section::after {
+  content: "";
+  position: absolute;
+  inset: 12px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+}
+
+.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;
+}
+
+.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);
+}
+
+.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);
+}
+
+.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%;
+}
+
+.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;
+}
+
+.card-highlight {
+  color: #ffd54f;
+  font-weight: 600;
+}
+
+.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 +640,25 @@
   transform-origin: 70% 70%;
 }
 
-@media (max-width: 600px) {
-  h1 {
-    font-size: 1.8rem !important;
-  }
-
-  .text-subtitle-1,
-  .text-subtitle-2 {
-    font-size: 1rem !important;
+@media (max-width: 960px) {
+  .hero-section {
+    padding: 28px;
   }
-
-  .v-btn {
-    font-size: 0.8rem !important;
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }
 
-@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/router.js b/src/router.js
index bdae7d5..5cb68b6 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,30 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "./components/HomePage.vue";
-import NotFound from "./components/NotFound.vue";
-import Snowflake from "./components/SnowFlake.vue";
-import HeroWars from "./components/HeroWars.vue";
-import ProjectZomboid from "./components/ProjectZomboid.vue";
-import AvariceBot from "./components/AvariceBot.vue";
-import MouseJiggler from "./components/MouseJiggler.vue";
-import GoldRush from "./components/GoldRush.vue";
-import OneWayFly from "./components/OneWayFly.vue";
-import GodotGame from "./components/GodotGame.vue";
-import CoinAlert from "./components/CoinAlert.vue";
-import ChatTrainer from "./components/ChatTrainer.vue";
 
 const routes = [
   { path: "/", name: "HomePage", component: HomePage },
-  { path: "/Snowflake", name: "Snowflake", component: Snowflake },
-  { path: "/HeroWars", name: "HeroWars", component: HeroWars },
-  { 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: "/GoldRush", name: "GoldRush", component: GoldRush },
-  { path: "/CoinAlert", name: "CoinAlert", component: CoinAlert },
-  { path: "/ChatTrainer", name: "ChatTrainer", component: ChatTrainer },
-  { path: "/ProjectZomboid", name: "ProjectZomboid", component: ProjectZomboid },
-  { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
+  { path: "/:pathMatch(.*)*", redirect: "/" },
 ];
 
 const router = createRouter({

From db713f1b3dcbc43b63d457a0e0f66f76b4266c48 Mon Sep 17 00:00:00 2001
From: Gustavo Perin <gustavoperin067@gmail.com>
Date: Wed, 10 Dec 2025 19:04:19 -0300
Subject: [PATCH 2/7] Organize project cards by type with two-column layout

---
 src/components/AppBar.vue   |  14 +--
 src/components/HomePage.vue | 240 ++++++++++++++++++++++++++----------
 2 files changed, 178 insertions(+), 76 deletions(-)

diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index 4f48101..d24e0ae 100644
--- a/src/components/AppBar.vue
+++ b/src/components/AppBar.vue
@@ -121,16 +121,10 @@ export default {
 
     const navigationItems = [
       { label: "Início", target: "intro", icon: "mdi-home" },
-      { label: "Hero Wars", target: "project-hero-wars", icon: "mdi-sword" },
-      { label: "Zomboid", target: "project-zomboid", icon: "mdi-biohazard" },
-      { label: "Avarice", target: "project-avarice", icon: "mdi-robot-outline" },
-      { label: "Goldrush", target: "project-goldrush", icon: "mdi-pickaxe" },
-      { label: "One Way Fly", target: "project-one-way-fly", icon: "mdi-airplane-takeoff" },
-      { label: "Dracomania", target: "project-godot", icon: "mdi-gamepad-variant" },
-      { label: "Snowflake", target: "project-snowflake", icon: "mdi-snowflake" },
-      { label: "Coin Alert", target: "project-coin-alert", icon: "mdi-currency-btc" },
-      { label: "Mouse Jiggler", target: "project-mouse-jiggler", icon: "mdi-mouse" },
-      { label: "Chat Trainer", target: "project-chat-trainer", icon: "mdi-head-cog" },
+      { label: "Automação & Bots", target: "section-automation", icon: "mdi-robot-industrial" },
+      { label: "Jogos", target: "section-games", icon: "mdi-gamepad-square" },
+      { label: "Ferramentas", target: "section-tools", icon: "mdi-briefcase-check" },
+      { label: "IA & Dados", target: "section-ai", icon: "mdi-brain" },
     ];
 
     function handleNavigation(target) {
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 6036150..842e9ac 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -81,76 +81,92 @@
         </p>
       </div>
 
-      <v-row class="project-grid" justify="center" align="stretch" dense>
-        <v-col
-          v-for="project in projects"
-          :key="project.id"
-          cols="12"
-          md="6"
-          lg="4"
-          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"
-              >
-                <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"
+      <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"
+                >
+                  <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"
+                        target="_blank"
                         color="primary"
-                        variant="outlined"
-                        size="small"
-                        class="pill-chip"
+                        variant="flat"
+                        class="pill-btn elevated-btn"
                       >
-                        {{ badge }}
-                      </v-chip>
+                        <v-icon :icon="action.icon" start></v-icon>
+                        {{ action.label }}
+                      </v-btn>
                     </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"
-                      target="_blank"
-                      color="primary"
-                      variant="flat"
-                      class="pill-btn elevated-btn"
-                    >
-                      <v-icon :icon="action.icon" start></v-icon>
-                      {{ action.label }}
-                    </v-btn>
-                  </div>
-                </div>
-              </v-card>
-            </v-hover>
-          </section>
-        </v-col>
-      </v-row>
+                </v-card>
+              </v-hover>
+            </section>
+          </v-col>
+        </v-row>
+      </section>
     </section>
   </div>
 </template>
@@ -164,9 +180,40 @@ export default {
   name: "HomePage",
   data() {
     return {
+      projectTypeSections: [
+        {
+          id: "section-automation",
+          title: "Automação & Bots",
+          eyebrow: "Fluxos inteligentes",
+          description:
+            "Bots e integrações que automatizam tarefas repetitivas e mantêm tudo funcionando sozinho.",
+        },
+        {
+          id: "section-games",
+          title: "Jogos",
+          eyebrow: "Experimentos e servidores",
+          description:
+            "Prototipagem constante de jogos e infraestrutura para manter a diversão online.",
+        },
+        {
+          id: "section-tools",
+          title: "Ferramentas",
+          eyebrow: "Utilitários práticos",
+          description:
+            "Apps focados em produtividade diária com a paleta amarelo e preto sempre presente.",
+        },
+        {
+          id: "section-ai",
+          title: "IA & Dados",
+          eyebrow: "Insights guiados",
+          description:
+            "Painéis e assistentes que trazem respostas visuais e ajustes finos de modelos.",
+        },
+      ],
       projects: [
         {
           id: "project-hero-wars",
+          typeKey: "section-automation",
           title: "Hero Wars Auto Play Bot",
           category: "Bot • Automação",
           description:
@@ -193,6 +240,7 @@ export default {
         },
         {
           id: "project-zomboid",
+          typeKey: "section-games",
           title: "Project Zomboid Server",
           category: "Infra • Multiplayer",
           description:
@@ -219,6 +267,7 @@ export default {
         },
         {
           id: "project-avarice",
+          typeKey: "section-automation",
           title: "Avarice Bot",
           category: "Discord • GPT",
           description:
@@ -240,6 +289,7 @@ export default {
         },
         {
           id: "project-goldrush",
+          typeKey: "section-games",
           title: "Goldrush Survivors",
           category: "Game • Unity",
           description:
@@ -261,6 +311,7 @@ export default {
         },
         {
           id: "project-one-way-fly",
+          typeKey: "section-games",
           title: "One Way Fly",
           category: "Game • Unity",
           description:
@@ -282,6 +333,7 @@ export default {
         },
         {
           id: "project-godot",
+          typeKey: "section-games",
           title: "Dracomania 2024",
           category: "Game • Godot",
           description:
@@ -303,6 +355,7 @@ export default {
         },
         {
           id: "project-snowflake",
+          typeKey: "section-ai",
           title: "Snowflake",
           category: "Tools • Data",
           description:
@@ -324,6 +377,7 @@ export default {
         },
         {
           id: "project-coin-alert",
+          typeKey: "section-tools",
           title: "Coin Alert",
           category: "Tools • Alerts",
           description:
@@ -345,6 +399,7 @@ export default {
         },
         {
           id: "project-mouse-jiggler",
+          typeKey: "section-tools",
           title: "Mouse Jiggler",
           category: "Tools • Desktop",
           description:
@@ -366,6 +421,7 @@ export default {
         },
         {
           id: "project-chat-trainer",
+          typeKey: "section-ai",
           title: "Chat Trainer",
           category: "AI • Training",
           description:
@@ -388,6 +444,16 @@ export default {
       ],
     };
   },
+  computed: {
+    groupedProjects() {
+      return this.projectTypeSections.map((section) => ({
+        ...section,
+        projects: this.projects.filter(
+          (project) => project.typeKey === section.id,
+        ),
+      }));
+    },
+  },
   methods: {
     async copyEmail() {
       const email = "gustavoperin067@gmail.com";
@@ -490,6 +556,41 @@ export default {
   color: rgba(255, 255, 255, 0.75);
 }
 
+.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);
+}
+
+.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;
 }
@@ -648,6 +749,13 @@ export default {
     flex-direction: column;
     align-items: flex-start;
   }
+  .group-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .group-divider {
+    width: 100%;
+  }
 }
 
 @media (max-width: 600px) {

From e4e79f27087441d098057fc142a81e60decddba0 Mon Sep 17 00:00:00 2001
From: Gustavo Perin <gustavoperin067@gmail.com>
Date: Wed, 10 Dec 2025 20:39:30 -0300
Subject: [PATCH 3/7] Internationalize project sections and update Snowflake
 details

---
 src/components/AppBar.vue   |  31 ++++--
 src/components/HomePage.vue | 211 ++++++++++++++++++------------------
 src/locales/en.json         | 134 ++++++++++++++++++++++-
 src/locales/pt.json         | 134 ++++++++++++++++++++++-
 4 files changed, 392 insertions(+), 118 deletions(-)

diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index d24e0ae..19c8304 100644
--- a/src/components/AppBar.vue
+++ b/src/components/AppBar.vue
@@ -99,7 +99,7 @@
 </style>
 
 <script>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTheme } from "vuetify";
 
@@ -109,7 +109,7 @@ export default {
   setup(_, { emit }) {
     const theme = useTheme();
     const isDark = ref(false);
-    const { locale } = useI18n();
+    const { locale, t } = useI18n();
     const selectedLocale = ref(locale.value);
     watch(selectedLocale, (newLocale) => {
       locale.value = newLocale;
@@ -120,13 +120,28 @@ export default {
     ];
 
     const navigationItems = [
-      { label: "Início", target: "intro", icon: "mdi-home" },
-      { label: "Automação & Bots", target: "section-automation", icon: "mdi-robot-industrial" },
-      { label: "Jogos", target: "section-games", icon: "mdi-gamepad-square" },
-      { label: "Ferramentas", target: "section-tools", icon: "mdi-briefcase-check" },
-      { label: "IA & Dados", target: "section-ai", icon: "mdi-brain" },
+      { 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);
     }
@@ -150,7 +165,7 @@ export default {
       toggleIcon,
       selectedLocale,
       locales,
-      navigationItems,
+      navigationItems: localizedNavigationItems,
       handleNavigation,
     };
   },
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 842e9ac..bbf7e5c 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -5,7 +5,7 @@
       class="hero-section"
     >
       <div class="hero-surface">
-        <p class="eyebrow">Portfolio</p>
+        <p class="eyebrow">{{ $t('portfolioLabel') }}</p>
         <h1 class="headline">
           {{ $t('greeting') }} <span class="emoji-wave">👋</span>
         </h1>
@@ -73,12 +73,9 @@
 
     <section class="projects-section">
       <div class="section-header">
-        <p class="eyebrow subtle">Projetos destacados</p>
-        <h2 class="section-title">Uma vitrine única com cartões imersivos</h2>
-        <p class="section-subtitle">
-          Cada projeto ganhou um cartão dedicado com luz, sombra e pequenas animações.
-          Use o menu para deslizar até qualquer cartão rapidamente.
-        </p>
+        <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
@@ -183,56 +180,50 @@ export default {
       projectTypeSections: [
         {
           id: "section-automation",
-          title: "Automação & Bots",
-          eyebrow: "Fluxos inteligentes",
-          description:
-            "Bots e integrações que automatizam tarefas repetitivas e mantêm tudo funcionando sozinho.",
+          titleKey: "sectionHeaders.automation.title",
+          eyebrowKey: "sectionHeaders.automation.eyebrow",
+          descriptionKey: "sectionHeaders.automation.description",
         },
         {
           id: "section-games",
-          title: "Jogos",
-          eyebrow: "Experimentos e servidores",
-          description:
-            "Prototipagem constante de jogos e infraestrutura para manter a diversão online.",
+          titleKey: "sectionHeaders.games.title",
+          eyebrowKey: "sectionHeaders.games.eyebrow",
+          descriptionKey: "sectionHeaders.games.description",
         },
         {
           id: "section-tools",
-          title: "Ferramentas",
-          eyebrow: "Utilitários práticos",
-          description:
-            "Apps focados em produtividade diária com a paleta amarelo e preto sempre presente.",
+          titleKey: "sectionHeaders.tools.title",
+          eyebrowKey: "sectionHeaders.tools.eyebrow",
+          descriptionKey: "sectionHeaders.tools.description",
         },
         {
           id: "section-ai",
-          title: "IA & Dados",
-          eyebrow: "Insights guiados",
-          description:
-            "Painéis e assistentes que trazem respostas visuais e ajustes finos de modelos.",
+          titleKey: "sectionHeaders.ai.title",
+          eyebrowKey: "sectionHeaders.ai.eyebrow",
+          descriptionKey: "sectionHeaders.ai.description",
         },
       ],
       projects: [
         {
           id: "project-hero-wars",
           typeKey: "section-automation",
-          title: "Hero Wars Auto Play Bot",
-          category: "Bot • Automação",
-          description:
-            "Automa 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.",
+          titleKey: "projects.heroWars.title",
+          categoryKey: "projects.heroWars.category",
+          descriptionKey: "projects.heroWars.description",
+          highlightKey: "projects.heroWars.highlight",
           image: heroWarsImage,
-          badges: ["Windows", "Domination Era"],
+          badgeKeys: ["badges.windows", "badges.dominationEra"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,207,51,0.14), rgba(0,0,0,0.55));",
           glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.35), transparent 60%);",
           actions: [
             {
-              label: "Download",
+              labelKey: "actions.download",
               icon: "mdi-download",
               href: "https://bobagi.net/downloads/dist.7z",
             },
             {
-              label: "GitHub",
+              labelKey: "actions.github",
               icon: "mdi-github",
               href: "https://github.com/Bobagi/Hero-Wars-Auto-Play-Bot",
             },
@@ -241,25 +232,23 @@ export default {
         {
           id: "project-zomboid",
           typeKey: "section-games",
-          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.",
+          titleKey: "projects.zomboid.title",
+          categoryKey: "projects.zomboid.category",
+          descriptionKey: "projects.zomboid.description",
+          highlightKey: "projects.zomboid.highlight",
           image: projectZomboidImage,
-          badges: ["Ubuntu", "Steam", "BattleMetrics"],
+          badgeKeys: ["badges.ubuntu", "badges.steam", "badges.battleMetrics"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(255,255,255,0.04));",
           glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
           actions: [
             {
-              label: "BattleMetrics",
+              labelKey: "actions.battlemetrics",
               icon: "mdi-radar",
               href: "https://www.battlemetrics.com/servers/zomboid/24442372",
             },
             {
-              label: "GitHub",
+              labelKey: "actions.github",
               icon: "mdi-github",
               href: "https://github.com/Bobagi/Zomboid-Ubuntu-Server",
             },
@@ -268,20 +257,18 @@ export default {
         {
           id: "project-avarice",
           typeKey: "section-automation",
-          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.",
+          titleKey: "projects.avarice.title",
+          categoryKey: "projects.avarice.category",
+          descriptionKey: "projects.avarice.description",
+          highlightKey: "projects.avarice.highlight",
           image: null,
-          badges: ["Discord", "GPT", "Automação"],
+          badgeKeys: ["badges.discord", "badges.gpt", "badges.automation"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,207,51,0.2), rgba(0,0,0,0.65));",
           glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.3), transparent 60%);",
           actions: [
             {
-              label: "GitHub",
+              labelKey: "actions.github",
               icon: "mdi-github",
               href: "https://github.com/Bobagi/Avarice",
             },
@@ -290,20 +277,18 @@ export default {
         {
           id: "project-goldrush",
           typeKey: "section-games",
-          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.",
+          titleKey: "projects.goldrush.title",
+          categoryKey: "projects.goldrush.category",
+          descriptionKey: "projects.goldrush.description",
+          highlightKey: "projects.goldrush.highlight",
           image: null,
-          badges: ["WebGL", "Unity", "Leaderboard"],
+          badgeKeys: ["badges.webgl", "badges.unity", "badges.leaderboard"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.7));",
           glowStyle: "background: radial-gradient(circle, rgba(0,0,0,0.35), transparent 60%);",
           actions: [
             {
-              label: "itch.io",
+              labelKey: "actions.itchio",
               icon: "mdi-google-controller",
               href: "https://bobagi.itch.io/goldrush-survivors",
             },
@@ -312,20 +297,18 @@ export default {
         {
           id: "project-one-way-fly",
           typeKey: "section-games",
-          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.",
+          titleKey: "projects.oneWayFly.title",
+          categoryKey: "projects.oneWayFly.category",
+          descriptionKey: "projects.oneWayFly.description",
+          highlightKey: "projects.oneWayFly.highlight",
           image: null,
-          badges: ["Prototype", "Casual", "PC"],
+          badgeKeys: ["badges.prototype", "badges.casual", "badges.pc"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,207,51,0.16), rgba(0,0,0,0.6));",
           glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.25), transparent 60%);",
           actions: [
             {
-              label: "itch.io",
+              labelKey: "actions.itchio",
               icon: "mdi-google-controller",
               href: "https://bobagi.itch.io/",
             },
@@ -334,20 +317,18 @@ export default {
         {
           id: "project-godot",
           typeKey: "section-games",
-          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.",
+          titleKey: "projects.dracomania.title",
+          categoryKey: "projects.dracomania.category",
+          descriptionKey: "projects.dracomania.description",
+          highlightKey: "projects.dracomania.highlight",
           image: null,
-          badges: ["Godot", "Web"],
+          badgeKeys: ["badges.godot", "badges.web"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.7));",
           glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);",
           actions: [
             {
-              label: "itch.io",
+              labelKey: "actions.itchio",
               icon: "mdi-google-controller",
               href: "https://bobagi.itch.io/dracomania",
             },
@@ -356,42 +337,38 @@ export default {
         {
           id: "project-snowflake",
           typeKey: "section-ai",
-          title: "Snowflake",
-          category: "Tools • Data",
-          description:
-            "Ferramentas para manipular dados com foco em visualização limpa e responsiva.",
-          highlight:
-            "Interface renovada em breve com mais gráficos e painéis modulados.",
+          titleKey: "projects.snowflake.title",
+          categoryKey: "projects.snowflake.category",
+          descriptionKey: "projects.snowflake.description",
+          highlightKey: "projects.snowflake.highlight",
           image: null,
-          badges: ["Dashboard", "Data"],
+          badgeKeys: ["badges.tor", "badges.privacy"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(0,0,0,0.65));",
           glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 60%);",
           actions: [
             {
-              label: "Em breve",
+              labelKey: "actions.learnMore",
               icon: "mdi-timer-sand",
-              href: "https://github.com/Bobagi",
+              href: "https://snowflake.torproject.org/",
             },
           ],
         },
         {
           id: "project-coin-alert",
           typeKey: "section-tools",
-          title: "Coin Alert",
-          category: "Tools • Alerts",
-          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.",
+          titleKey: "projects.coinAlert.title",
+          categoryKey: "projects.coinAlert.category",
+          descriptionKey: "projects.coinAlert.description",
+          highlightKey: "projects.coinAlert.highlight",
           image: null,
-          badges: ["Crypto", "Notificações"],
+          badgeKeys: ["badges.crypto", "badges.notifications"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,207,51,0.18), rgba(0,0,0,0.62));",
           glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.22), transparent 60%);",
           actions: [
             {
-              label: "GitHub",
+              labelKey: "actions.githubRepository",
               icon: "mdi-github",
               href: "https://github.com/Bobagi",
             },
@@ -400,20 +377,18 @@ export default {
         {
           id: "project-mouse-jiggler",
           typeKey: "section-tools",
-          title: "Mouse Jiggler",
-          category: "Tools • 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.",
+          titleKey: "projects.mouseJiggler.title",
+          categoryKey: "projects.mouseJiggler.category",
+          descriptionKey: "projects.mouseJiggler.description",
+          highlightKey: "projects.mouseJiggler.highlight",
           image: mouseJigglerImage,
-          badges: ["Windows", "Produtividade"],
+          badgeKeys: ["badges.windows", "badges.productivity"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(255,207,51,0.2));",
           glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.28), transparent 60%);",
           actions: [
             {
-              label: "Download",
+              labelKey: "actions.download",
               icon: "mdi-download",
               href: "https://github.com/Bobagi/MouseJiggler",
             },
@@ -422,20 +397,18 @@ export default {
         {
           id: "project-chat-trainer",
           typeKey: "section-ai",
-          title: "Chat Trainer",
-          category: "AI • Training",
-          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.",
+          titleKey: "projects.chatTrainer.title",
+          categoryKey: "projects.chatTrainer.category",
+          descriptionKey: "projects.chatTrainer.description",
+          highlightKey: "projects.chatTrainer.highlight",
           image: null,
-          badges: ["AI", "Dataset"],
+          badgeKeys: ["badges.ai", "badges.dataset"],
           cardStyle:
             "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.68));",
           glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
           actions: [
             {
-              label: "GitHub",
+              labelKey: "actions.github",
               icon: "mdi-github",
               href: "https://github.com/Bobagi",
             },
@@ -445,10 +418,32 @@ export default {
     };
   },
   computed: {
-    groupedProjects() {
+    localizedProjectTypeSections() {
       return this.projectTypeSections.map((section) => ({
         ...section,
-        projects: this.projects.filter(
+        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),
+        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,
         ),
       }));
diff --git a/src/locales/en.json b/src/locales/en.json
index 1bff77d..bd05ca3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -9,5 +9,137 @@
   "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": "A single showcase with immersive cards",
+    "subtitle": "Each project has its own card with light, shadow, and small animations. Use the menu to glide to any section quickly."
+  },
+  "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"
+  },
+  "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..e650807 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -9,5 +9,137 @@
   "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": "Uma vitrine única com cartões imersivos",
+    "subtitle": "Cada projeto ganhou um cartão dedicado com luz, sombra e pequenas animações. Use o menu para deslizar até qualquer sessão rapidamente."
+  },
+  "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"
+  },
+  "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": "Automa 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."
+    }
+  }
 }

From ebc4694e9c2c68ee325d1360eb322594bdcad50d Mon Sep 17 00:00:00 2001
From: Gustavo Perin <gustavoperin067@gmail.com>
Date: Wed, 10 Dec 2025 21:00:23 -0300
Subject: [PATCH 4/7] Refine theming and layout for unified showcase

---
 src/App.vue                 |  11 ++
 src/components/AppBar.vue   |  15 +--
 src/components/HomePage.vue | 202 ++++++++++++++++++++++++++++++------
 src/locales/en.json         |   4 +-
 src/locales/pt.json         |   4 +-
 5 files changed, 189 insertions(+), 47 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 054c95d..9673a66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -232,6 +232,17 @@ export default {
   z-index: 2; /* Higher z-index to place the content above the particles */
 }
 
+#mainCard {
+  background: linear-gradient(180deg, rgba(255, 223, 94, 0.42) 0%, rgba(255, 207, 51, 0.38) 34%, rgba(240, 180, 0, 0.35) 64%, rgba(12, 12, 12, 0.78) 100%);
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(2px);
+}
+
+.v-theme--light #mainCard {
+  background: linear-gradient(180deg, rgba(255, 238, 170, 0.7) 0%, rgba(255, 222, 104, 0.58) 40%, rgba(255, 207, 51, 0.52) 70%, rgba(255, 255, 255, 0.95) 100%);
+  border-color: rgba(0, 0, 0, 0.12);
+}
+
 /* Ensures Footer is above particles.js */
 .footer-above {
   position: relative;
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index 19c8304..51252fd 100644
--- a/src/components/AppBar.vue
+++ b/src/components/AppBar.vue
@@ -108,7 +108,7 @@ export default {
   emits: ["scroll-to-section", "toggle-theme"],
   setup(_, { emit }) {
     const theme = useTheme();
-    const isDark = ref(false);
+    const isDark = ref(theme.global.current.value.dark);
     const { locale, t } = useI18n();
     const selectedLocale = ref(locale.value);
     watch(selectedLocale, (newLocale) => {
@@ -147,19 +147,12 @@ export default {
     }
 
     function toggleIcon() {
-      toggleTheme();
-      updateIsDark();
+      const nextThemeName = theme.global.current.value.dark ? "light" : "dark";
+      theme.global.name.value = nextThemeName;
+      isDark.value = theme.global.current.value.dark;
       emit("toggle-theme");
     }
 
-    function toggleTheme() {
-      theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
-    }
-
-    function updateIsDark() {
-      isDark.value = theme.global.name.value !== "dark";
-    }
-
     return {
       isDark,
       toggleIcon,
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index bbf7e5c..4b4cf29 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -169,12 +169,20 @@
 </template>
 
 <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";
 
 export default {
   name: "HomePage",
+  setup() {
+    const theme = useTheme();
+    const isDarkTheme = vueComputed(() => theme.global.current.value.dark);
+
+    return { isDarkTheme };
+  },
   data() {
     return {
       projectTypeSections: [
@@ -213,9 +221,16 @@ export default {
           highlightKey: "projects.heroWars.highlight",
           image: heroWarsImage,
           badgeKeys: ["badges.windows", "badges.dominationEra"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,207,51,0.14), rgba(0,0,0,0.55));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.35), transparent 60%);",
+          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.download",
@@ -238,9 +253,16 @@ export default {
           highlightKey: "projects.zomboid.highlight",
           image: projectZomboidImage,
           badgeKeys: ["badges.ubuntu", "badges.steam", "badges.battleMetrics"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(255,255,255,0.04));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
+          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.battlemetrics",
@@ -263,9 +285,16 @@ export default {
           highlightKey: "projects.avarice.highlight",
           image: null,
           badgeKeys: ["badges.discord", "badges.gpt", "badges.automation"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,207,51,0.2), rgba(0,0,0,0.65));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.3), transparent 60%);",
+          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.github",
@@ -283,9 +312,16 @@ export default {
           highlightKey: "projects.goldrush.highlight",
           image: null,
           badgeKeys: ["badges.webgl", "badges.unity", "badges.leaderboard"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.7));",
-          glowStyle: "background: radial-gradient(circle, rgba(0,0,0,0.35), transparent 60%);",
+          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.itchio",
@@ -303,9 +339,16 @@ export default {
           highlightKey: "projects.oneWayFly.highlight",
           image: null,
           badgeKeys: ["badges.prototype", "badges.casual", "badges.pc"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,207,51,0.16), rgba(0,0,0,0.6));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.25), transparent 60%);",
+          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.itchio",
@@ -323,9 +366,16 @@ export default {
           highlightKey: "projects.dracomania.highlight",
           image: null,
           badgeKeys: ["badges.godot", "badges.web"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.7));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);",
+          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.itchio",
@@ -343,9 +393,16 @@ export default {
           highlightKey: "projects.snowflake.highlight",
           image: null,
           badgeKeys: ["badges.tor", "badges.privacy"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(0,0,0,0.65));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 60%);",
+          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.learnMore",
@@ -363,9 +420,16 @@ export default {
           highlightKey: "projects.coinAlert.highlight",
           image: null,
           badgeKeys: ["badges.crypto", "badges.notifications"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,207,51,0.18), rgba(0,0,0,0.62));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.22), transparent 60%);",
+          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.githubRepository",
@@ -383,9 +447,16 @@ export default {
           highlightKey: "projects.mouseJiggler.highlight",
           image: mouseJigglerImage,
           badgeKeys: ["badges.windows", "badges.productivity"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(255,207,51,0.2));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,207,51,0.28), transparent 60%);",
+          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.download",
@@ -403,9 +474,16 @@ export default {
           highlightKey: "projects.chatTrainer.highlight",
           image: null,
           badgeKeys: ["badges.ai", "badges.dataset"],
-          cardStyle:
-            "background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.68));",
-          glowStyle: "background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);",
+          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.github",
@@ -433,6 +511,8 @@ export default {
         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,
@@ -464,11 +544,14 @@ export default {
 </script>
 
 <style scoped>
+
 .landing-wrapper {
   display: flex;
   flex-direction: column;
   gap: 40px;
   padding: 32px 12px 64px;
+  background: linear-gradient(180deg, rgba(255, 223, 94, 0.28) 0%, rgba(255, 207, 51, 0.28) 32%, rgba(240, 180, 0, 0.35) 68%, rgba(10, 10, 10, 0.65) 100%);
+  border-radius: 28px;
 }
 
 .hero-section {
@@ -477,15 +560,19 @@ export default {
   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.08), transparent 35%),
-    linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
+    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;
 }
 
 .hero-surface {
   position: relative;
   z-index: 2;
   max-width: 980px;
+  text-align: center;
+  margin: 0 auto;
 }
 
 .hero-section::after {
@@ -497,6 +584,24 @@ export default {
   pointer-events: none;
 }
 
+:deep(.v-theme--light) .landing-wrapper {
+  background: linear-gradient(180deg, rgba(255, 240, 166, 0.6) 0%, rgba(255, 222, 104, 0.55) 35%, rgba(255, 207, 51, 0.52) 60%, rgba(255, 255, 255, 0.8) 100%);
+}
+
+: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);
@@ -520,6 +625,7 @@ export default {
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 12px;
+  justify-content: center;
 }
 
 .note {
@@ -535,6 +641,12 @@ export default {
   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;
@@ -551,6 +663,11 @@ export default {
   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;
@@ -560,6 +677,12 @@ export default {
   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;
@@ -597,6 +720,13 @@ export default {
   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;
+}
+
+: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 {
@@ -666,11 +796,19 @@ export default {
   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;
diff --git a/src/locales/en.json b/src/locales/en.json
index bd05ca3..16aa955 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -20,8 +20,8 @@
   },
   "projectsSection": {
     "eyebrow": "Featured projects",
-    "title": "A single showcase with immersive cards",
-    "subtitle": "Each project has its own card with light, shadow, and small animations. Use the menu to glide to any section quickly."
+    "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": {
diff --git a/src/locales/pt.json b/src/locales/pt.json
index e650807..677eeb1 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -20,8 +20,8 @@
   },
   "projectsSection": {
     "eyebrow": "Projetos destacados",
-    "title": "Uma vitrine única com cartões imersivos",
-    "subtitle": "Cada projeto ganhou um cartão dedicado com luz, sombra e pequenas animações. Use o menu para deslizar até qualquer sessão rapidamente."
+    "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": {

From 48b3190f5b29e67fb19b270ea02e997e44936832 Mon Sep 17 00:00:00 2001
From: Gustavo Perin <gustavoperin067@gmail.com>
Date: Thu, 11 Dec 2025 12:46:34 -0300
Subject: [PATCH 5/7] Adjust hero alignment and page background gradient

---
 src/App.vue                 | 33 ++++++++++++++++++++++++++++++---
 src/components/HomePage.vue |  8 ++------
 src/locales/pt.json         |  2 +-
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9673a66..9136899 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -217,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;
@@ -233,13 +260,13 @@ export default {
 }
 
 #mainCard {
-  background: linear-gradient(180deg, rgba(255, 223, 94, 0.42) 0%, rgba(255, 207, 51, 0.38) 34%, rgba(240, 180, 0, 0.35) 64%, rgba(12, 12, 12, 0.78) 100%);
+  background: rgba(15, 15, 15, 0.78);
   border: 1px solid rgba(0, 0, 0, 0.35);
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(6px);
 }
 
 .v-theme--light #mainCard {
-  background: linear-gradient(180deg, rgba(255, 238, 170, 0.7) 0%, rgba(255, 222, 104, 0.58) 40%, rgba(255, 207, 51, 0.52) 70%, rgba(255, 255, 255, 0.95) 100%);
+  background: rgba(255, 255, 255, 0.92);
   border-color: rgba(0, 0, 0, 0.12);
 }
 
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 4b4cf29..e9a65bf 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -550,8 +550,7 @@ export default {
   flex-direction: column;
   gap: 40px;
   padding: 32px 12px 64px;
-  background: linear-gradient(180deg, rgba(255, 223, 94, 0.28) 0%, rgba(255, 207, 51, 0.28) 32%, rgba(240, 180, 0, 0.35) 68%, rgba(10, 10, 10, 0.65) 100%);
-  border-radius: 28px;
+  background: transparent;
 }
 
 .hero-section {
@@ -565,6 +564,7 @@ export default {
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .hero-surface {
@@ -584,10 +584,6 @@ export default {
   pointer-events: none;
 }
 
-:deep(.v-theme--light) .landing-wrapper {
-  background: linear-gradient(180deg, rgba(255, 240, 166, 0.6) 0%, rgba(255, 222, 104, 0.55) 35%, rgba(255, 207, 51, 0.52) 60%, rgba(255, 255, 255, 0.8) 100%);
-}
-
 :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%),
diff --git a/src/locales/pt.json b/src/locales/pt.json
index 677eeb1..cfe88d7 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -84,7 +84,7 @@
     "heroWars": {
       "title": "Hero Wars Auto Play Bot",
       "category": "Bot • Automação",
-      "description": "Automa as tarefas mais repetitivas da Domination Era para liberar seu tempo.",
+      "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": {

From ce922866a39c645c75cdff6f5a7872d1b75c3bdb Mon Sep 17 00:00:00 2001
From: Gustavo Perin <gustavoperin067@gmail.com>
Date: Thu, 11 Dec 2025 12:57:37 -0300
Subject: [PATCH 6/7] Restore project detail pages and card navigation

---
 src/components/HomePage.vue | 81 +++++++++++++++++++++++++++++++++++--
 src/locales/en.json         |  3 +-
 src/locales/pt.json         |  3 +-
 src/router.js               | 23 ++++++++++-
 4 files changed, 104 insertions(+), 6 deletions(-)

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index e9a65bf..aba93c6 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -111,6 +111,8 @@
                   :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">
@@ -147,11 +149,13 @@
                       <v-btn
                         v-for="action in project.actions"
                         :key="action.label"
-                        :href="action.href"
-                        target="_blank"
+                        :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 }}
@@ -219,6 +223,7 @@ export default {
           categoryKey: "projects.heroWars.category",
           descriptionKey: "projects.heroWars.description",
           highlightKey: "projects.heroWars.highlight",
+          routeName: "HeroWars",
           image: heroWarsImage,
           badgeKeys: ["badges.windows", "badges.dominationEra"],
           cardStyle: {
@@ -232,6 +237,11 @@ export default {
             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",
@@ -251,6 +261,7 @@ export default {
           categoryKey: "projects.zomboid.category",
           descriptionKey: "projects.zomboid.description",
           highlightKey: "projects.zomboid.highlight",
+          routeName: "ProjectZomboid",
           image: projectZomboidImage,
           badgeKeys: ["badges.ubuntu", "badges.steam", "badges.battleMetrics"],
           cardStyle: {
@@ -264,6 +275,11 @@ export default {
             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",
@@ -283,6 +299,7 @@ export default {
           categoryKey: "projects.avarice.category",
           descriptionKey: "projects.avarice.description",
           highlightKey: "projects.avarice.highlight",
+          routeName: "Avarice",
           image: null,
           badgeKeys: ["badges.discord", "badges.gpt", "badges.automation"],
           cardStyle: {
@@ -296,6 +313,11 @@ export default {
             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",
@@ -310,6 +332,7 @@ export default {
           categoryKey: "projects.goldrush.category",
           descriptionKey: "projects.goldrush.description",
           highlightKey: "projects.goldrush.highlight",
+          routeName: "GoldRush",
           image: null,
           badgeKeys: ["badges.webgl", "badges.unity", "badges.leaderboard"],
           cardStyle: {
@@ -323,6 +346,11 @@ export default {
             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",
@@ -337,6 +365,7 @@ export default {
           categoryKey: "projects.oneWayFly.category",
           descriptionKey: "projects.oneWayFly.description",
           highlightKey: "projects.oneWayFly.highlight",
+          routeName: "OneWayFly",
           image: null,
           badgeKeys: ["badges.prototype", "badges.casual", "badges.pc"],
           cardStyle: {
@@ -350,6 +379,11 @@ export default {
             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",
@@ -364,6 +398,7 @@ export default {
           categoryKey: "projects.dracomania.category",
           descriptionKey: "projects.dracomania.description",
           highlightKey: "projects.dracomania.highlight",
+          routeName: "GodotGame",
           image: null,
           badgeKeys: ["badges.godot", "badges.web"],
           cardStyle: {
@@ -377,6 +412,11 @@ export default {
             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",
@@ -391,6 +431,7 @@ export default {
           categoryKey: "projects.snowflake.category",
           descriptionKey: "projects.snowflake.description",
           highlightKey: "projects.snowflake.highlight",
+          routeName: "Snowflake",
           image: null,
           badgeKeys: ["badges.tor", "badges.privacy"],
           cardStyle: {
@@ -404,6 +445,11 @@ export default {
             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",
@@ -418,6 +464,7 @@ export default {
           categoryKey: "projects.coinAlert.category",
           descriptionKey: "projects.coinAlert.description",
           highlightKey: "projects.coinAlert.highlight",
+          routeName: "CoinAlert",
           image: null,
           badgeKeys: ["badges.crypto", "badges.notifications"],
           cardStyle: {
@@ -431,6 +478,11 @@ export default {
             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",
@@ -445,6 +497,7 @@ export default {
           categoryKey: "projects.mouseJiggler.category",
           descriptionKey: "projects.mouseJiggler.description",
           highlightKey: "projects.mouseJiggler.highlight",
+          routeName: "MouseJiggler",
           image: mouseJigglerImage,
           badgeKeys: ["badges.windows", "badges.productivity"],
           cardStyle: {
@@ -458,6 +511,11 @@ export default {
             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",
@@ -472,6 +530,7 @@ export default {
           categoryKey: "projects.chatTrainer.category",
           descriptionKey: "projects.chatTrainer.description",
           highlightKey: "projects.chatTrainer.highlight",
+          routeName: "ChatTrainer",
           image: null,
           badgeKeys: ["badges.ai", "badges.dataset"],
           cardStyle: {
@@ -485,6 +544,11 @@ export default {
             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",
@@ -535,10 +599,20 @@ export default {
       try {
         await navigator.clipboard.writeText(email);
         alert(this.$t("emailCopied"));
-      } catch (err) {
+      } 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>
@@ -717,6 +791,7 @@ export default {
   transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
   height: 100%;
   color: #f5f5f5;
+  cursor: pointer;
 }
 
 :deep(.v-theme--light) .project-card {
diff --git a/src/locales/en.json b/src/locales/en.json
index 16aa955..f1aa0dc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -51,7 +51,8 @@
     "githubRepository": "GitHub Repository",
     "itchio": "itch.io",
     "battlemetrics": "BattleMetrics",
-    "learnMore": "Learn more"
+    "learnMore": "Learn more",
+    "viewPage": "Open project page"
   },
   "badges": {
     "windows": "Windows",
diff --git a/src/locales/pt.json b/src/locales/pt.json
index cfe88d7..3b65b5b 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -51,7 +51,8 @@
     "githubRepository": "Repositório GitHub",
     "itchio": "itch.io",
     "battlemetrics": "BattleMetrics",
-    "learnMore": "Saiba mais"
+    "learnMore": "Saiba mais",
+    "viewPage": "Abrir página do projeto"
   },
   "badges": {
     "windows": "Windows",
diff --git a/src/router.js b/src/router.js
index 5cb68b6..42baa2a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,9 +1,30 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "./components/HomePage.vue";
+import NotFound from "./components/NotFound.vue";
+import Snowflake from "./components/SnowFlake.vue";
+import HeroWars from "./components/HeroWars.vue";
+import ProjectZomboid from "./components/ProjectZomboid.vue";
+import AvariceBot from "./components/AvariceBot.vue";
+import MouseJiggler from "./components/MouseJiggler.vue";
+import GoldRush from "./components/GoldRush.vue";
+import OneWayFly from "./components/OneWayFly.vue";
+import GodotGame from "./components/GodotGame.vue";
+import CoinAlert from "./components/CoinAlert.vue";
+import ChatTrainer from "./components/ChatTrainer.vue";
 
 const routes = [
   { path: "/", name: "HomePage", component: HomePage },
-  { path: "/:pathMatch(.*)*", redirect: "/" },
+  { path: "/Snowflake", name: "Snowflake", component: Snowflake },
+  { path: "/HeroWars", name: "HeroWars", component: HeroWars },
+  { 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: "/GoldRush", name: "GoldRush", component: GoldRush },
+  { path: "/CoinAlert", name: "CoinAlert", component: CoinAlert },
+  { path: "/ChatTrainer", name: "ChatTrainer", component: ChatTrainer },
+  { path: "/ProjectZomboid", name: "ProjectZomboid", component: ProjectZomboid },
+  { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
 ];
 
 const router = createRouter({

From 9de8e033d9fa25ebeb73e2164875801ea2e4a946 Mon Sep 17 00:00:00 2001
From: Gustavo Perin <gustavoperin067@gmail.com>
Date: Thu, 11 Dec 2025 13:30:15 -0300
Subject: [PATCH 7/7] Improve locale detection and intro layout

---
 src/components/AppBar.vue   |  3 +++
 src/components/HomePage.vue |  8 +++++++-
 src/main.js                 | 41 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index 51252fd..b588e2d 100644
--- a/src/components/AppBar.vue
+++ b/src/components/AppBar.vue
@@ -113,6 +113,9 @@ export default {
     const selectedLocale = ref(locale.value);
     watch(selectedLocale, (newLocale) => {
       locale.value = newLocale;
+      if (typeof window !== "undefined") {
+        localStorage.setItem("preferredLocale", newLocale);
+      }
     });
     const locales = [
       { code: "en", emoji: "🇺🇸" },
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index aba93c6..dfab2a3 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -179,6 +179,8 @@ 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() {
@@ -300,7 +302,7 @@ export default {
           descriptionKey: "projects.avarice.description",
           highlightKey: "projects.avarice.highlight",
           routeName: "Avarice",
-          image: null,
+          image: avaricePreviewImage,
           badgeKeys: ["badges.discord", "badges.gpt", "badges.automation"],
           cardStyle: {
             dark:
@@ -647,6 +649,10 @@ export default {
   max-width: 980px;
   text-align: center;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
 }
 
 .hero-section::after {
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,