diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue index 6d7cec6..5b065bd 100644 --- a/frontend/app/pages/index.vue +++ b/frontend/app/pages/index.vue @@ -59,6 +59,66 @@ onMounted(async () => { + +
+

{{ t('pages.stats_heading') }}

+
+
+ + + + + + 50K+ + {{ t('pages.stat_lines_of_code') }} +
+
+ + + + + + 12+ + {{ t('pages.stat_projects') }} +
+
+ + + + + + ∞ + {{ t('pages.stat_coffee') }} +
+
+ + + + + + 28 + {{ t('pages.stat_board_games') }} +
+
+ + + + + + 8+ + {{ t('pages.stat_years_programming') }} +
+
+ + + + + + 150+ + {{ t('pages.stat_deployments') }} +
+
+
@@ -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; + } } \ No newline at end of file diff --git a/frontend/i18n/locales/ca.json b/frontend/i18n/locales/ca.json index 383e24b..912c9d9 100644 --- a/frontend/i18n/locales/ca.json +++ b/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." diff --git a/frontend/i18n/locales/en.json b/frontend/i18n/locales/en.json index 5af7e59..04f4fba 100644 --- a/frontend/i18n/locales/en.json +++ b/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." diff --git a/frontend/i18n/locales/es.json b/frontend/i18n/locales/es.json index 286ff84..401ffaf 100644 --- a/frontend/i18n/locales/es.json +++ b/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."