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