hobokenchicken/webdev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add metrics section with lighthouse scores and circular gauges

Browse Source
This commit is contained in:
Dustin Newkirk
2026-02-11 23:09:54 -05:00
parent 60a4437bc4
commit e328725331
2 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@@ -534,6 +534,38 @@
</div>
</section>
<!-- Metrics Section -->
<section id="metrics" class="metrics-banner" aria-label="Performance Metrics">
<div class="container">
<div class="row g-4 row-cols-2 row-cols-md-4 justify-content-center">
<div class="col">
<div class="metric-item">
<div class="gauge" style="--percent: 98%;" data-score="98"></div>
<span class="metric-label">Performance</span>
</div>
</div>
<div class="col">
<div class="metric-item">
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
<span class="metric-label">Accessibility</span>
</div>
</div>
<div class="col">
<div class="metric-item">
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
<span class="metric-label">Best Practices</span>
</div>
</div>
<div class="col">
<div class="metric-item">
<div class="gauge" style="--percent: 100%;" data-score="100"></div>
<span class="metric-label">SEO Score</span>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section-padding">
<div class="container">

59
styles.css
View File

@@ -798,3 +798,62 @@ footer {
animation: none;
}
}
/* Metrics Banner */
.metrics-banner {
background-color: var(--color-coffee-dark);
color: var(--color-cream);
padding-block: 4rem;
position: relative;
z-index: 2;
}
.metric-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1rem;
transition: transform 0.3s ease;
}
.metric-item:hover {
transform: translateY(-5px);
}
.gauge {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(var(--color-secondary) var(--percent), rgba(255,255,255,0.1) 0);
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.gauge::before {
content: attr(data-score);
position: absolute;
width: 84%;
height: 84%;
background-color: var(--color-coffee-dark);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.75rem;
color: var(--color-cream);
font-family: var(--font-sans);
}
.metric-label {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.9rem;
opacity: 0.9;
text-align: center;
}