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

feat(ui): add technology badges to portfolio cards and enhance visual interactions

Browse Source
This commit is contained in:
Dustin Newkirk
2026-02-11 23:04:07 -05:00
parent fb205569e3
commit 6e918bdfd3
2 changed files with 105 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
index.html
View File

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

48
styles.css
View File

@@ -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;