Syndria98/aranroig.com
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

AI funny icons

Browse Source
This commit is contained in:
BinarySandia04
2026-06-08 15:50:33 +02:00
parent 4252965f63
commit 8859ee5a5f
4 changed files with 170 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/app/pages/index.vue
View File

@@ -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>