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

style: drop icon slop, swap primary to caramel, kill particles
CI & Lighthouse / test (push) Has been cancelled
Details

Browse Source 
- Remove 8 duplicated generic SVG icons from tech cards
- Switch --color-primary from teal (#1D7874) to gold (#D4A574)
- Remove particle canvas system (~70 lines JS, canvas element, CSS)
- Grain texture + steam now carry atmosphere alone
This commit is contained in:
Dustin Newkirk
2026-04-30 13:07:23 -04:00
parent 841794830b
commit f40cf11ef8
5 changed files with 123 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+58 -105
View File
@@ -49,9 +49,8 @@
<body>
<!-- Scroll Progress Bar -->
<div class="scroll-progress" role="progressbar" aria-label="Page scroll progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<!-- Particle Canvas -->
<canvas id="particles" aria-hidden="true"></canvas>
<!-- Particle canvas removed -- grain texture + steam carry the atmosphere -->
<!-- Decorative Layer (Background Elements) -->
<div class="decorative-layer" aria-hidden="true">
@@ -201,108 +200,62 @@
<div class="container">
<h2>Technologies & Tools</h2>
<div class="row g-4 row-cols-2 row-cols-md-3 row-cols-lg-4">
<!-- HTML5 -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<h3 class="tech-name">HTML5</h3>
<p class="tech-desc">Semantic Markup</p>
</div>
</div>
<!-- CSS3 -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<h3 class="tech-name">CSS3</h3>
<p class="tech-desc">Modern Styling</p>
</div>
</div>
<!-- JavaScript -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 18l6-6-6-6"/>
<path d="M8 6l-6 6 6 6"/>
</svg>
</div>
<h3 class="tech-name">JavaScript</h3>
<p class="tech-desc">Interactive Logic</p>
</div>
</div>
<!-- Bootstrap -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"/>
</svg>
</div>
<h3 class="tech-name">Bootstrap 5</h3>
<p class="tech-desc">Responsive UI</p>
</div>
</div>
<!-- Vite -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</div>
<h3 class="tech-name">Vite</h3>
<p class="tech-desc">Fast Build Tool</p>
</div>
</div>
<!-- Git -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="6" y1="3" x2="6" y2="15"></line>
<circle cx="18" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M18 9a9 9 0 0 1-9 9"></path>
</svg>
</div>
<h3 class="tech-name">Git</h3>
<p class="tech-desc">Version Control</p>
</div>
</div>
<!-- SEO -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<h3 class="tech-name">SEO</h3>
<p class="tech-desc">Search Visibility</p>
</div>
</div>
<!-- Accessibility -->
<div class="col">
<div class="tech-card">
<div class="tech-icon-wrapper">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="5" r="1"></circle>
<path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"/>
</svg>
</div>
<h3 class="tech-name">Accessibility</h3>
<p class="tech-desc">Inclusive Design</p>
</div>
</div>
<!-- HTML5 -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">HTML5</h3>
<p class="tech-desc">Semantic Markup</p>
</div>
</div>
<!-- CSS3 -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">CSS3</h3>
<p class="tech-desc">Modern Styling</p>
</div>
</div>
<!-- JavaScript -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">JavaScript</h3>
<p class="tech-desc">Interactive Logic</p>
</div>
</div>
<!-- Bootstrap -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">Bootstrap 5</h3>
<p class="tech-desc">Responsive UI</p>
</div>
</div>
<!-- Vite -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">Vite</h3>
<p class="tech-desc">Fast Build Tool</p>
</div>
</div>
<!-- Git -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">Git</h3>
<p class="tech-desc">Version Control</p>
</div>
</div>
<!-- SEO -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">SEO</h3>
<p class="tech-desc">Search Visibility</p>
</div>
</div>
<!-- Accessibility -->
<div class="col">
<div class="tech-card">
<h3 class="tech-name">Accessibility</h3>
<p class="tech-desc">Inclusive Design</p>
</div>
</div>
</div>
</div>
</section>