From 23fb11fb97755e1f1a9685f8e04a338160eb7d10 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Tue, 21 Apr 2026 08:12:08 -0400
Subject: [PATCH] feat: replace skill bars with service cards, drop metrics
 banner, singular headings

---
 dist/index.html | 141 ++++++++++++++++++++++--------------------------
 index.html      | 141 ++++++++++++++++++++++--------------------------
 2 files changed, 130 insertions(+), 152 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 0d0e4f3..1eb9fb4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -112,7 +112,7 @@
         <!-- About Section -->
         <section id="about" class="section-padding">
             <div class="container">
-                <h2>About Us</h2>
+                <h2>About Me</h2>
                 <div class="row">
                     <div class="col-lg-8">
                         <p class="lead mb-4 drop-cap">Welcome to d@n tech! I specialize in creating stunning and efficient websites for businesses of all sizes.</p>
@@ -126,50 +126,71 @@
         <section id="services" class="section-padding section-alt">
             <div class="container">
                 <h2>Services</h2>
-                <div class="row align-items-center">
-                    <div class="col-lg-8">
-                        <ul class="list-group skill-bars">
-                            <li class="list-group-item skill-item" data-skill="95">
-                                <span class="skill-name">Custom Website Development</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 95%;"></div>
+                <div class="row g-4 row-cols-1 row-cols-md-2">
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="90">
-                                <span class="skill-name">Responsive Design</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 90%;"></div>
-                                </div>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="85">
-                                <span class="skill-name">E-commerce Solutions</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 85%;"></div>
-                                </div>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="92">
-                                <span class="skill-name">SEO Optimization</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 92%;"></div>
-                                </div>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="98">
-                                <span class="skill-name">Website Maintenance</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 98%;"></div>
-                                </div>
-                            </li>
-                        </ul>
+                                <h5 class="card-title">Custom Website Development</h5>
+                                <p class="card-text">Tailored websites built from scratch to match your brand, goals, and user needs.</p>
+                            </div>
+                        </div>
                     </div>
-                    <div class="col-lg-4 d-none d-lg-block text-center opacity-75">
-                         <!-- Decorative Icon/Illustration placeholder or just empty space for balance -->
-                         <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
-                            <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
-                            <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
-                            <line x1="6" y1="1" x2="6" y2="4"></line>
-                            <line x1="10" y1="1" x2="10" y2="4"></line>
-                            <line x1="14" y1="1" x2="14" y2="4"></line>
-                         </svg>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line>
+                                    </svg>
+                                </div>
+                                <h5 class="card-title">Responsive Design</h5>
+                                <p class="card-text">Sites that look and function beautifully on every device, from phones to desktops.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                                    </svg>
+                                </div>
+                                <h5 class="card-title">E-commerce Solutions</h5>
+                                <p class="card-text">Online stores designed to convert visitors into customers with secure checkout.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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>
+                                <h5 class="card-title">SEO Optimization</h5>
+                                <p class="card-text">Improved visibility on search engines to help clients find you organically.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+                                    </svg>
+                                </div>
+                                <h5 class="card-title">Website Maintenance</h5>
+                                <p class="card-text">Ongoing updates, security patches, and support to keep your site running smoothly.</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -534,43 +555,11 @@
             </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="coffee-stain stain-2" aria-hidden="true"></div>
             <div class="container">
-                <h2>Contact Us</h2>
+                <h2>Contact Me</h2>
                 <div class="row justify-content-center">
                     <div class="col-md-8 text-center">
                         <div class="card bg-transparent border-0 shadow-none">
diff --git a/index.html b/index.html
index 329b26d..78dd240 100644
--- a/index.html
+++ b/index.html
@@ -112,7 +112,7 @@
         <!-- About Section -->
         <section id="about" class="section-padding">
             <div class="container">
-                <h2>About Us</h2>
+                <h2>About Me</h2>
                 <div class="row">
                     <div class="col-lg-8">
                         <p class="lead mb-4 drop-cap">Welcome to d@n tech! I specialize in creating stunning and efficient websites for businesses of all sizes.</p>
@@ -126,50 +126,71 @@
         <section id="services" class="section-padding section-alt">
             <div class="container">
                 <h2>Services</h2>
-                <div class="row align-items-center">
-                    <div class="col-lg-8">
-                        <ul class="list-group skill-bars">
-                            <li class="list-group-item skill-item" data-skill="95">
-                                <span class="skill-name">Custom Website Development</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 95%;"></div>
+                <div class="row g-4 row-cols-1 row-cols-md-2">
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="90">
-                                <span class="skill-name">Responsive Design</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 90%;"></div>
-                                </div>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="85">
-                                <span class="skill-name">E-commerce Solutions</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 85%;"></div>
-                                </div>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="92">
-                                <span class="skill-name">SEO Optimization</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 92%;"></div>
-                                </div>
-                            </li>
-                            <li class="list-group-item skill-item" data-skill="98">
-                                <span class="skill-name">Website Maintenance</span>
-                                <div class="skill-bar-track">
-                                    <div class="skill-bar-fill" style="--skill-level: 98%;"></div>
-                                </div>
-                            </li>
-                        </ul>
+                                <h5 class="card-title">Custom Website Development</h5>
+                                <p class="card-text">Tailored websites built from scratch to match your brand, goals, and user needs.</p>
+                            </div>
+                        </div>
                     </div>
-                    <div class="col-lg-4 d-none d-lg-block text-center opacity-75">
-                         <!-- Decorative Icon/Illustration placeholder or just empty space for balance -->
-                         <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
-                            <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
-                            <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
-                            <line x1="6" y1="1" x2="6" y2="4"></line>
-                            <line x1="10" y1="1" x2="10" y2="4"></line>
-                            <line x1="14" y1="1" x2="14" y2="4"></line>
-                         </svg>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line>
+                                    </svg>
+                                </div>
+                                <h5 class="card-title">Responsive Design</h5>
+                                <p class="card-text">Sites that look and function beautifully on every device, from phones to desktops.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                                    </svg>
+                                </div>
+                                <h5 class="card-title">E-commerce Solutions</h5>
+                                <p class="card-text">Online stores designed to convert visitors into customers with secure checkout.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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>
+                                <h5 class="card-title">SEO Optimization</h5>
+                                <p class="card-text">Improved visibility on search engines to help clients find you organically.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="mb-3 text-primary">
+                                    <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="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+                                    </svg>
+                                </div>
+                                <h5 class="card-title">Website Maintenance</h5>
+                                <p class="card-text">Ongoing updates, security patches, and support to keep your site running smoothly.</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -534,43 +555,11 @@
             </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="coffee-stain stain-2" aria-hidden="true"></div>
             <div class="container">
-                <h2>Contact Us</h2>
+                <h2>Contact Me</h2>
                 <div class="row justify-content-center">
                     <div class="col-md-8 text-center">
                         <div class="card bg-transparent border-0 shadow-none">