Skip to content

Commit 3f41515

Browse files
David SumnerDavid Sumner
David Sumner
authored and
David Sumner
committed
Added case study
1 parent 013e062 commit 3f41515

File tree

2 files changed

+293
-3
lines changed

2 files changed

+293
-3
lines changed

‎src/pages/index.js‎

Lines changed: 87 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const IndexPage = () => {
1010
const handleScroll = () => {
1111
setScrollY(window.scrollY)
1212

13-
const sections = ['hero', 'impact', 'expertise', 'mission', 'connect']
13+
const sections = ['hero', 'impact', 'expertise', 'cases', 'mission', 'connect']
1414
const current = sections.find(section => {
1515
const element = document.getElementById(section)
1616
if (element) {
@@ -52,6 +52,25 @@ const IndexPage = () => {
5252
}
5353
]
5454

55+
const caseStudies = [
56+
{
57+
id: "01",
58+
label: "AI-POWERED WORKFORCE INTELLIGENCE",
59+
client: "Major Municipal Housing Authority",
60+
title: "Turning Hundreds of Job Descriptions Into a Living Skills Database",
61+
challenge: "A large municipal housing agency had accumulated hundreds of job descriptions authored by dozens of independent offices over more than a decade. Each was written in isolation — different terminology, different skill frameworks, no shared taxonomy. With a major enterprise technology migration on the horizon, leadership had no reliable way to assess workforce readiness. The data existed. The insight did not.",
62+
approach: "Designed and deployed an Amazon Bedrock pipeline that ingested the full corpus of job descriptions and applied large language models to extract, normalize, and cluster skills at scale. Disparate job titles, inconsistent competency language, and redundant role definitions were resolved into a unified, queryable skills database — capturing both technical and functional competencies across the organization.",
63+
outcome: "The resulting skills database gave agency leadership a clear, defensible picture of workforce readiness: which employees were prepared for the technology migration and which required targeted upskilling. What had been an information management problem became a strategic planning asset.",
64+
metrics: [
65+
{ value: "Hundreds", label: "Job Descriptions Processed" },
66+
{ value: "Single", label: "Unified Skills Taxonomy" },
67+
{ value: "Binary", label: "Migration Readiness Signal" }
68+
],
69+
tech: "Amazon Bedrock · LLM Extraction · Skills Ontology · Workforce Analytics",
70+
theme: "Organizations are information-rich. The gap is insight."
71+
}
72+
]
73+
5574
const currentWork = [
5675
{
5776
title: "Observability Transformation",
@@ -93,13 +112,13 @@ const IndexPage = () => {
93112
<span className="logo-subtitle">SUMNER</span>
94113
</div>
95114
<div className="nav-links">
96-
{['impact', 'expertise', 'mission', 'connect'].map((section) => (
115+
{['impact', 'expertise', 'cases', 'mission', 'connect'].map((section) => (
97116
<a
98117
key={section}
99118
href={`#${section}`}
100119
className={activeSection === section ? 'active' : ''}
101120
>
102-
{section.charAt(0).toUpperCase() + section.slice(1)}
121+
{section === 'cases' ? 'Case Studies' : section.charAt(0).toUpperCase() + section.slice(1)}
103122
</a>
104123
))}
105124
</div>
@@ -207,6 +226,71 @@ const IndexPage = () => {
207226
</div>
208227
</section>
209228

229+
{/* Case Studies Section */}
230+
<section id="cases" className="cases-section">
231+
<div className="container">
232+
<div className="section-header">
233+
<span className="section-label">FIELD WORK</span>
234+
<h2>Case Studies</h2>
235+
</div>
236+
237+
{caseStudies.map((study) => (
238+
<div key={study.id} className="case-study">
239+
<div className="case-study-header">
240+
<div className="case-number">{study.id}</div>
241+
<div className="case-meta">
242+
<span className="case-label">{study.label}</span>
243+
<span className="case-client">{study.client}</span>
244+
</div>
245+
</div>
246+
247+
<h3 className="case-title">{study.title}</h3>
248+
249+
<div className="case-body">
250+
<div className="case-narrative">
251+
<div className="case-block">
252+
<div className="case-block-label">THE CHALLENGE</div>
253+
<p>{study.challenge}</p>
254+
</div>
255+
<div className="case-block">
256+
<div className="case-block-label">THE APPROACH</div>
257+
<p>{study.approach}</p>
258+
</div>
259+
<div className="case-block">
260+
<div className="case-block-label">THE OUTCOME</div>
261+
<p>{study.outcome}</p>
262+
</div>
263+
</div>
264+
265+
<div className="case-sidebar">
266+
<div className="case-metrics">
267+
{study.metrics.map((m, i) => (
268+
<div key={i} className="case-metric">
269+
<div className="case-metric-value">{m.value}</div>
270+
<div className="case-metric-label">{m.label}</div>
271+
</div>
272+
))}
273+
</div>
274+
275+
<div className="case-tech">
276+
<div className="case-block-label">TOOLS & METHODS</div>
277+
<div className="case-tech-tags">
278+
{study.tech.split(' · ').map((tag, i) => (
279+
<span key={i} className="tech-tag">{tag}</span>
280+
))}
281+
</div>
282+
</div>
283+
284+
<div className="case-theme">
285+
<div className="case-theme-quote">"{study.theme}"</div>
286+
</div>
287+
</div>
288+
</div>
289+
</div>
290+
))}
291+
</div>
292+
</section>
293+
210294
{/* Mission Section */}
211295
<section id="mission" className="mission-section">
212296
<div className="container">

‎src/styles/global.css‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -689,6 +689,212 @@ body {
689689
transform: rotate(180deg);
690690
}
691691

692+
/* Case Studies Section */
693+
.cases-section {
694+
padding: var(--space-2xl) 0;
695+
background: linear-gradient(to bottom, rgba(255,94,91,0.02), transparent);
696+
}
697+
698+
.case-study {
699+
background: rgba(255, 255, 255, 0.02);
700+
border: 1px solid var(--color-border);
701+
border-radius: 12px;
702+
padding: var(--space-xl);
703+
position: relative;
704+
overflow: hidden;
705+
transition: var(--transition);
706+
}
707+
708+
.case-study::before {
709+
content: '';
710+
position: absolute;
711+
top: 0;
712+
left: 0;
713+
right: 0;
714+
height: 3px;
715+
background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
716+
}
717+
718+
.case-study:hover {
719+
border-color: rgba(255, 255, 255, 0.15);
720+
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
721+
}
722+
723+
.case-study-header {
724+
display: flex;
725+
align-items: flex-start;
726+
gap: var(--space-md);
727+
margin-bottom: var(--space-lg);
728+
}
729+
730+
.case-number {
731+
font-family: var(--font-mono);
732+
font-size: 3.5rem;
733+
font-weight: 600;
734+
line-height: 1;
735+
color: var(--color-accent);
736+
opacity: 0.25;
737+
flex-shrink: 0;
738+
margin-top: -0.3rem;
739+
}
740+
741+
.case-meta {
742+
display: flex;
743+
flex-direction: column;
744+
gap: 0.4rem;
745+
}
746+
747+
.case-label {
748+
font-size: 0.7rem;
749+
font-weight: 700;
750+
letter-spacing: 0.25em;
751+
color: var(--color-accent);
752+
}
753+
754+
.case-client {
755+
font-size: 0.9rem;
756+
color: var(--color-steel-light);
757+
font-weight: 500;
758+
letter-spacing: 0.03em;
759+
}
760+
761+
.case-title {
762+
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
763+
font-weight: 800;
764+
line-height: 1.2;
765+
letter-spacing: -0.02em;
766+
margin-bottom: var(--space-xl);
767+
max-width: 820px;
768+
}
769+
770+
.case-body {
771+
display: grid;
772+
grid-template-columns: 1fr 320px;
773+
gap: var(--space-xl);
774+
align-items: start;
775+
}
776+
777+
.case-narrative {
778+
display: flex;
779+
flex-direction: column;
780+
gap: var(--space-lg);
781+
}
782+
783+
.case-block {
784+
display: flex;
785+
flex-direction: column;
786+
gap: 0.75rem;
787+
}
788+
789+
.case-block-label {
790+
font-size: 0.68rem;
791+
font-weight: 700;
792+
letter-spacing: 0.25em;
793+
color: var(--color-secondary);
794+
}
795+
796+
.case-block p {
797+
color: var(--color-steel-light);
798+
line-height: 1.8;
799+
font-size: 1rem;
800+
}
801+
802+
.case-sidebar {
803+
display: flex;
804+
flex-direction: column;
805+
gap: var(--space-lg);
806+
}
807+
808+
.case-metrics {
809+
display: flex;
810+
flex-direction: column;
811+
gap: 0;
812+
border: 1px solid var(--color-border);
813+
border-radius: 8px;
814+
overflow: hidden;
815+
}
816+
817+
.case-metric {
818+
padding: var(--space-md);
819+
border-bottom: 1px solid var(--color-border);
820+
background: var(--color-darker);
821+
transition: var(--transition);
822+
}
823+
824+
.case-metric:last-child {
825+
border-bottom: none;
826+
}
827+
828+
.case-metric:hover {
829+
background: rgba(35, 192, 181, 0.04);
830+
}
831+
832+
.case-metric-value {
833+
font-size: 1.4rem;
834+
font-weight: 800;
835+
background: linear-gradient(135deg, var(--color-light) 0%, var(--color-secondary) 100%);
836+
-webkit-background-clip: text;
837+
-webkit-text-fill-color: transparent;
838+
background-clip: text;
839+
line-height: 1;
840+
margin-bottom: 0.4rem;
841+
}
842+
843+
.case-metric-label {
844+
font-size: 0.78rem;
845+
color: var(--color-steel-light);
846+
font-weight: 500;
847+
letter-spacing: 0.03em;
848+
}
849+
850+
.case-tech {
851+
display: flex;
852+
flex-direction: column;
853+
gap: 0.75rem;
854+
}
855+
856+
.case-tech-tags {
857+
display: flex;
858+
flex-wrap: wrap;
859+
gap: 0.5rem;
860+
}
861+
862+
.tech-tag {
863+
font-family: var(--font-mono);
864+
font-size: 0.75rem;
865+
font-weight: 500;
866+
color: var(--color-secondary);
867+
background: rgba(35, 192, 181, 0.08);
868+
border: 1px solid rgba(35, 192, 181, 0.2);
869+
border-radius: 4px;
870+
padding: 0.3rem 0.7rem;
871+
white-space: nowrap;
872+
}
873+
874+
.case-theme {
875+
padding: var(--space-md);
876+
border-left: 2px solid var(--color-accent);
877+
background: rgba(255, 94, 91, 0.04);
878+
border-radius: 0 6px 6px 0;
879+
}
880+
881+
.case-theme-quote {
882+
font-style: italic;
883+
color: var(--color-steel-light);
884+
font-size: 0.9rem;
885+
line-height: 1.6;
886+
}
887+
888+
@media (max-width: 900px) {
889+
.case-body {
890+
grid-template-columns: 1fr;
891+
}
892+
893+
.case-study {
894+
padding: var(--space-lg);
895+
}
896+
}
897+
692898
/* Connect Section */
693899
.connect-section {
694900
padding: var(--space-2xl) 0;

0 commit comments

Comments
 (0)