diff --git a/index.html b/index.html
index bbcefc0..d3e8a24 100644
--- a/index.html
+++ b/index.html
@@ -259,6 +259,20 @@
                             <div class="card-body">
                                 <h5 class="card-title">Pemu Counseling and Wellness</h5>
                                 <p class="card-text">Pemu Counseling and Wellness is a comprehensive mental health service provider offering personalized counseling and wellness programs to help individuals achieve their mental health goals.</p>
+                                <div class="d-flex flex-wrap gap-2 mb-3">
+                                    <span class="badge-coffee" aria-label="Technology: Responsive Design">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> Responsive
+                                    </span>
+                                    <span class="badge-coffee" aria-label="Technology: SEO Optimized">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> SEO
+                                    </span>
+                                    <span class="badge-coffee" aria-label="Technology: Accessibility">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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"></path></svg> A11y
+                                    </span>
+                                    <span class="badge-coffee" aria-label="Technology: Bootstrap Framework">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l9 4.9V17L12 22l-9-4.9V7z"></path></svg> Bootstrap
+                                    </span>
+                                </div>
                                 <div class="mt-auto">
                                     <a href="https://pemucounselingandwellness.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Pemu Counseling and Wellness project">View project<span class="visually-hidden"> about Pemu Counseling and Wellness</span></a>
                                 </div>
@@ -271,6 +285,17 @@
                             <div class="card-body">
                                 <h5 class="card-title">Kayla Newkirk</h5>
                                 <p class="card-text">Kayla Newkirk is a PhD candidate specializing in mental health counseling and supervision, dedicated to advancing the field through research and practice.</p>
+                                <div class="d-flex flex-wrap gap-2 mb-3">
+                                    <span class="badge-coffee" aria-label="Technology: Responsive Design">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> Responsive
+                                    </span>
+                                    <span class="badge-coffee" aria-label="Technology: Academic Research">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"></path><path d="M6 12v5c3 3 9 3 12 0v-5"></path></svg> Academic
+                                    </span>
+                                    <span class="badge-coffee" aria-label="Technology: SEO Optimized">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> SEO
+                                    </span>
+                                </div>
                                 <div class="mt-auto">
                                     <a href="https://kaylassafe.space" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Kayla Newkirk project">View project<span class="visually-hidden"> about Kayla Newkirk</span></a>
                                 </div>
@@ -283,6 +308,17 @@
                             <div class="card-body">
                                 <h5 class="card-title">4th & Goal</h5>
                                 <p class="card-text">4th & Goal is a hardcore band based out of Syracuse, NY, known for their intense performances and powerful music that resonates with fans across the state.</p>
+                                <div class="d-flex flex-wrap gap-2 mb-3">
+                                    <span class="badge-coffee" aria-label="Technology: High Performance">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> Fast
+                                    </span>
+                                    <span class="badge-coffee" aria-label="Technology: Media Integration">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg> Media
+                                    </span>
+                                    <span class="badge-coffee" aria-label="Technology: Responsive Design">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> Responsive
+                                    </span>
+                                </div>
                                 <div class="mt-auto">
                                     <a href="https://4th.hobokenchicken.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View 4th & Goal project">View project<span class="visually-hidden"> about 4th & Goal</span></a>
                                 </div>
@@ -295,6 +331,17 @@
                              <div class="card-body">
                                  <h5 class="card-title">Powerful Healing Arts</h5>
                                  <p class="card-text">Powerful Healing Arts is a sanctuary for women seeking to move beyond physical healing into deeper, energetic and spiritual transformation.</p>
+                                 <div class="d-flex flex-wrap gap-2 mb-3">
+                                     <span class="badge-coffee" aria-label="Technology: CMS Integration">
+                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> Content
+                                     </span>
+                                     <span class="badge-coffee" aria-label="Technology: SEO Optimized">
+                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> SEO
+                                     </span>
+                                     <span class="badge-coffee" aria-label="Technology: Responsive Design">
+                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> Responsive
+                                     </span>
+                                 </div>
                                  <div class="mt-auto">
                                      <a href="https://powerfulhealingarts.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View Powerful Healing Arts project">View project<span class="visually-hidden"> about Powerful Healing Arts</span></a>
                                  </div>
@@ -307,6 +354,17 @@
                              <div class="card-body">
                                  <h5 class="card-title">DissertationPath</h5>
                                  <p class="card-text">DissertationPath is a comprehensive platform designed to help doctoral candidates navigate the dissertation process with expert guidance.</p>
+                                 <div class="d-flex flex-wrap gap-2 mb-3">
+                                     <span class="badge-coffee" aria-label="Technology: Platform Architecture">
+                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg> Platform
+                                     </span>
+                                     <span class="badge-coffee" aria-label="Technology: Educational Resources">
+                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg> EdTech
+                                     </span>
+                                     <span class="badge-coffee" aria-label="Technology: Responsive Design">
+                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> Responsive
+                                     </span>
+                                 </div>
                                  <div class="mt-auto">
                                      <a href="https://dissertationpath.com" target="_blank" class="btn btn-outline-coffee btn-sm" aria-label="View DissertationPath project">View project<span class="visually-hidden"> about DissertationPath</span></a>
                                  </div>
diff --git a/styles.css b/styles.css
index 89cccbc..dc2ba20 100644
--- a/styles.css
+++ b/styles.css
@@ -275,10 +275,56 @@ footer {
 
 .tech-card:hover {
     transform: translateY(-5px);
-    box-shadow: var(--shadow-soft);
+    box-shadow: 0 10px 30px -5px color-mix(in srgb, var(--color-primary), transparent 85%);
     border-color: var(--color-secondary);
 }
 
+/* Portfolio Badges */
+.badge-coffee {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.4em 0.8em;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-coffee-dark);
+    background-color: var(--bg-section-alt);
+    border: 1px solid var(--border-subtle);
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    cursor: default;
+}
+
+.badge-coffee svg {
+    width: 12px;
+    height: 12px;
+    stroke-width: 2.5;
+    opacity: 0.8;
+}
+
+.badge-coffee:hover {
+    background-color: var(--color-coffee-medium);
+    color: var(--color-cream);
+    border-color: var(--color-coffee-medium);
+    transform: translateY(-1px);
+}
+
+@media (prefers-color-scheme: dark) {
+    .badge-coffee {
+        color: var(--color-cream);
+        background-color: rgba(255, 255, 255, 0.05);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .badge-coffee:hover {
+        background-color: var(--color-secondary);
+        color: var(--color-coffee-dark);
+        border-color: var(--color-secondary);
+    }
+}
+
 .tech-icon-wrapper {
     width: 64px;
     height: 64px;