AI funny icons

frontend/app/pages/index.vue

@@ -59,6 +59,66 @@ onMounted(async () => {
           </div>
         </div>
       </section>
+
+      <section class="stats-section">
+        <h2 class="section-title">{{ t('pages.stats_heading') }}</h2>
+        <div class="stats-grid">
+          <div class="stat-card">
+            <span class="stat-card-corner tl"></span>
+            <span class="stat-card-corner tr"></span>
+            <span class="stat-card-corner bl"></span>
+            <span class="stat-card-corner br"></span>
+            <svg class="stat-pixel-art" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 3h2v2H3V3zm4 0h2v2H7V3zm4 0h2v2h-2V3zM3 7h2v2H3V7zm6 0h2v2H9V7zm4 0h2v2h-2V7zM3 11h2v2H3v-2zm4 0h2v2H7v-2zm4 0h2v2h-2v-2z"/></svg>
+            <span class="stat-number">50K+</span>
+            <span class="stat-label">{{ t('pages.stat_lines_of_code') }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-card-corner tl"></span>
+            <span class="stat-card-corner tr"></span>
+            <span class="stat-card-corner bl"></span>
+            <span class="stat-card-corner br"></span>
+            <svg class="stat-pixel-art" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 3h8v2H6v2h6v2H8v2h4v2H4V3z"/></svg>
+            <span class="stat-number">12+</span>
+            <span class="stat-label">{{ t('pages.stat_projects') }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-card-corner tl"></span>
+            <span class="stat-card-corner tr"></span>
+            <span class="stat-card-corner bl"></span>
+            <span class="stat-card-corner br"></span>
+            <svg class="stat-pixel-art" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 5h8v2H4V5zm-2 2h2v1H2V7zm10 0h2v1h-2V7zM3 9h1v3h1v-1h3v1h1V9h1v3h1v-1h2v1h1v-4H3z"/></svg>
+            <span class="stat-number">∞</span>
+            <span class="stat-label">{{ t('pages.stat_coffee') }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-card-corner tl"></span>
+            <span class="stat-card-corner tr"></span>
+            <span class="stat-card-corner bl"></span>
+            <span class="stat-card-corner br"></span>
+            <svg class="stat-pixel-art" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h3v2H3v1h2v2H8v-2h2V6h-1V4h3v2h-2v3H5V6H4V4zm7 2h2v2h-2V6z"/></svg>
+            <span class="stat-number">28</span>
+            <span class="stat-label">{{ t('pages.stat_board_games') }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-card-corner tl"></span>
+            <span class="stat-card-corner tr"></span>
+            <span class="stat-card-corner bl"></span>
+            <span class="stat-card-corner br"></span>
+            <svg class="stat-pixel-art" viewBox="0 0 16 16" aria-hidden="true"><path d="M5 2h6v2H5V2zm-2 4h10v1H3V6zm1 2h8v1H4V8zm2 2h4v1H6v-1zM6 2h4v12H6V2z"/></svg>
+            <span class="stat-number">8+</span>
+            <span class="stat-label">{{ t('pages.stat_years_programming') }}</span>
+          </div>
+          <div class="stat-card">
+            <span class="stat-card-corner tl"></span>
+            <span class="stat-card-corner tr"></span>
+            <span class="stat-card-corner bl"></span>
+            <span class="stat-card-corner br"></span>
+            <svg class="stat-pixel-art" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 3h8v2H9v2h2v2h-2v2h-2v2h6v2H2v-2h2v-2H2V7h2V5H2V3z"/></svg>
+            <span class="stat-number">150+</span>
+            <span class="stat-label">{{ t('pages.stat_deployments') }}</span>
+          </div>
+        </div>
+      </section>
     </Container>    
   </FixedLayout>
   <Footer></Footer>
@@ -153,6 +213,74 @@ onMounted(async () => {
   box-shadow: 2px -2px 0px 0px rgba(0, 0, 0, 0.3);
 }
 
+.stats-section {
+  margin-top: 32px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.stat-card {
+  position: relative;
+  background: var(--color-background-fore);
+  border: 1px solid var(--color-border-color);
+  box-shadow: 3px -3px 0px 0px var(--color-container-shadow);
+  padding: 14px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 6px;
+}
+
+.stat-card-corner {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-color: #cfcfcf;
+
+  &.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
+  &.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
+  &.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
+  &.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
+}
+
+.stat-pixel-art {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 4px;
+  fill: var(--color-link);
+  filter: drop-shadow(0 0 6px var(--color-link));
+  image-rendering: pixelated;
+}
+
+.stat-number {
+  font-family: 'Hurmit', monospace;
+  font-size: 1.8rem;
+  color: var(--color-link);
+  text-shadow: 0 0 8px var(--color-link), 0 0 4px var(--color-link);
+  font-weight: bold;
+  letter-spacing: 2px;
+}
+
+.stat-label {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-text);
+  font-size: 0.7rem;
+  line-height: 1.35;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+@media (max-width: 900px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 @media (max-width: 640px) {
   .section-title {
     font-size: 1.1rem;
@@ -169,5 +297,23 @@ onMounted(async () => {
   .project-description {
     font-size: 0.82rem;
   }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+
+  .stat-card {
+    padding: 10px 6px;
+  }
+
+  .stat-number {
+    font-size: 1.4rem;
+  }
+
+  .stat-pixel-art {
+    width: 32px;
+    height: 32px;
+  }
 }
 </style>

frontend/i18n/locales/ca.json

@@ -28,7 +28,14 @@
         }
     },
     "pages": {
-        "projects_heading": "Projectes"
+        "projects_heading": "Projectes",
+        "stats_heading": "Estad\u00edstiques i Info",
+        "stat_lines_of_code": "L\u00ednies de Codi Escrites",
+        "stat_projects": "Projectes Completats",
+        "stat_coffee": "Tasses de Caf\u00e8 Consumides",
+        "stat_board_games": "Jocs de Taula Propis",
+        "stat_years_programming": "Anys Programant",
+        "stat_deployments": "Desplegaments a Producci\u00f3"
     },
     "prefooter": "Aquesta pàgina web ha sigut construida per un humà.",
     "footer": "(C) 2026 Aran Roig. Tots els drets no sé que."

frontend/i18n/locales/en.json

@@ -29,7 +29,14 @@
     },
     "pages": {
         "root": "",
-        "projects_heading": "Projects"
+        "projects_heading": "Projects",
+        "stats_heading": "Stats & Info",
+        "stat_lines_of_code": "Lines of Code Written",
+        "stat_projects": "Projects Completed",
+        "stat_coffee": "Cups of Coffee Consumed",
+        "stat_board_games": "Board Games Owned",
+        "stat_years_programming": "Years Programming",
+        "stat_deployments": "Deployments to Production"
     },
     "prefooter": "This webpage has been made by a human.",
     "footer": "(C) 2026 Aran Roig. All rights whatever."

frontend/i18n/locales/es.json

@@ -28,7 +28,14 @@
         }
     },
     "pages": {
-        "projects_heading": "Proyectos"
+        "projects_heading": "Proyectos",
+        "stats_heading": "Estad\u00edsticas e Info",
+        "stat_lines_of_code": "L\u00edneas de C\u00f3digo Escritas",
+        "stat_projects": "Proyectos Completados",
+        "stat_coffee": "Tazas de Caf\u00e9 Consumidas",
+        "stat_board_games": "Juegos de Mesa Propios",
+        "stat_years_programming": "A\u00f1os Programando",
+        "stat_deployments": "Desplegues a Producci\u00f3n"
     },
     "prefooter": "Esta página web ha sido construida por un humano.",
     "footer": "(C) 2026 Aran Roig. Todos los derechos no se que."