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

feat(ui): add technologies and stack section with responsive grid and alternating backgrounds

Browse Source
This commit is contained in:
Dustin Newkirk
2026-02-11 23:01:13 -05:00
parent ae6dd34c07
commit fb205569e3
2 changed files with 164 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
index.html
View File

@@ -136,8 +136,119 @@
</div>
</section>
<!-- Technologies & Stack Section -->
<section id="technologies" class="section-padding">
<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>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="section-padding">
<section id="portfolio" class="section-padding section-alt">
<div class="container">
<h2>Portfolio</h2>
<div class="row g-4">
@@ -207,7 +318,7 @@
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="section-padding section-alt">
<section id="testimonials" class="section-padding">
<div class="container">
<h2>Testimonials</h2>
<div class="row g-4">
@@ -239,7 +350,7 @@
</section>
<!-- Contact Section -->
<section id="contact" class="section-padding">
<section id="contact" class="section-padding section-alt">
<div class="container">
<h2>Contact Us</h2>
<div class="row justify-content-center">