123 lines
4.4 KiB
TypeScript
123 lines
4.4 KiB
TypeScript
import { useState } from 'react'
|
||
import { Briefcase, Calendar, Building2, GraduationCap } from 'lucide-react'
|
||
|
||
type ExperienceItem = {
|
||
date: string
|
||
role: string
|
||
org: string
|
||
details: string[]
|
||
icon?: 'work' | 'education'
|
||
}
|
||
|
||
const experienceData: ExperienceItem[] = [
|
||
{
|
||
date: '2016 – Present',
|
||
role: 'Licensed Professional Counselor (LCPC)',
|
||
org: 'Private Practice & Clinical Settings',
|
||
icon: 'work',
|
||
details: [
|
||
'10+ years clinical experience in integrated treatment for co-occurring mental health and substance use disorders',
|
||
'Specializes in trauma-informed care, narrative therapy, and nature-based interventions',
|
||
'Certified Nature-Informed Therapist utilizing nature as co-therapist in clinical practice',
|
||
'Developed innovative presentations on nature-informed therapy for substance use recovery',
|
||
],
|
||
},
|
||
{
|
||
date: '2024 – Present',
|
||
role: 'PhD Candidate',
|
||
org: 'Waynesburg University',
|
||
icon: 'education',
|
||
details: [
|
||
'Counselor Education and Supervision program',
|
||
'Focus on advancing nature-informed therapeutic approaches',
|
||
'Research in trauma-responsive, multicultural counseling frameworks',
|
||
],
|
||
},
|
||
]
|
||
|
||
function Icon({ kind }: { kind?: 'work' | 'education' }) {
|
||
if (kind === 'education') {
|
||
return <GraduationCap className="h-5 w-5" />
|
||
}
|
||
return <Briefcase className="h-5 w-5" />
|
||
}
|
||
|
||
export default function Experience() {
|
||
const [items] = useState<ExperienceItem[]>(experienceData)
|
||
|
||
return (
|
||
<section id="experience" className="mx-auto max-w-6xl px-4 py-12 md:py-16">
|
||
<div className="mb-8">
|
||
<h2 className="font-serif text-2xl font-semibold text-slate-900 md:text-3xl">
|
||
Counseling Experience
|
||
</h2>
|
||
<p className="mt-2 max-w-3xl text-slate-700">
|
||
Professional timeline showcasing over a decade of clinical experience in mental health
|
||
and substance use disorder treatment.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-8 w-full space-y-6">
|
||
{items.map((item, idx) => (
|
||
<article
|
||
key={`${item.date}-${idx}`}
|
||
className="group relative rounded-3xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-all hover:shadow-md hover:border-emerald-200/60"
|
||
>
|
||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100/60 text-emerald-700">
|
||
<Icon kind={item.icon} />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-serif text-lg font-semibold text-slate-900">
|
||
{item.role}
|
||
</h3>
|
||
{item.org && (
|
||
<div className="mt-1 flex items-center gap-1.5 text-sm text-slate-600">
|
||
<Building2 className="h-3.5 w-3.5" />
|
||
<span>{item.org}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{item.details?.length ? (
|
||
<ul className="mt-4 space-y-2">
|
||
{item.details.map((d, i) => (
|
||
<li
|
||
key={i}
|
||
className="flex items-start gap-2 text-sm text-slate-700"
|
||
>
|
||
<span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500/60" />
|
||
<span className="leading-relaxed">{d}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1.5 text-sm font-medium text-emerald-800/90 md:flex-col md:items-end md:text-right">
|
||
<Calendar className="h-4 w-4 md:hidden" />
|
||
<time className="whitespace-nowrap">{item.date}</time>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-6 flex items-center justify-between text-xs text-slate-500">
|
||
<p>Professional summary</p>
|
||
<a
|
||
href="/docs/resume.pdf"
|
||
className="text-emerald-700 hover:text-emerald-800 hover:underline"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
Download full resume →
|
||
</a>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|