soconnor
d5dba3cc09
- Graduate from Bucknell May 2026, starting MS CompE at Boston University - Add honors thesis to publications with abstract and PDF - Update Dean's List to 7 semesters (Spring 2026) - Fix GPA display: Engineering GPA 3.92 / Overall 3.67 - Fix breadcrumb hidden under navbar (pt-16 on content wrapper) - Fix Research Interests card extra top padding - Update research interests blurb to grad-school voice - Save dev server config to .claude/launch.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
428 lines
17 KiB
TypeScript
428 lines
17 KiB
TypeScript
import {
|
|
ArrowUpRight,
|
|
Award,
|
|
BookOpen,
|
|
Building,
|
|
Code,
|
|
ExternalLink,
|
|
FlaskConical,
|
|
GraduationCap,
|
|
Mail,
|
|
MapPin,
|
|
School,
|
|
Users
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import { awards, educationList, experiences, researchInterests } from "~/lib/data";
|
|
|
|
export default function HomePage() {
|
|
const researchExperience = experiences.filter(
|
|
(exp) => exp.type === "research",
|
|
);
|
|
const teachingExperience = experiences.filter(
|
|
(exp) => exp.type === "teaching",
|
|
);
|
|
const professionalExperience = experiences.filter(
|
|
(exp) => exp.type === "professional",
|
|
);
|
|
const leadershipExperience = experiences.filter(
|
|
(exp) => exp.type === "leadership",
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-12">
|
|
{/* Hero Section */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<div className="space-y-4">
|
|
<h1 className="animate-fade-in-up-delay-1 text-3xl font-bold">
|
|
Sean O'Connor
|
|
</h1>
|
|
<p className="animate-fade-in-up-delay-2 text-xl text-muted-foreground">
|
|
Computer Science and Engineering graduate pursuing a Master's
|
|
at Boston University. Research interests in human-robot interaction
|
|
and developing technologies that make robots better collaborators
|
|
with humans.
|
|
</p>
|
|
<div className="animate-fade-in-up-delay-3 flex flex-wrap gap-4 text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
<Mail className="h-4 w-4" />
|
|
<a href="mailto:sean@soconnor.dev" className="hover:text-primary">
|
|
sean@soconnor.dev
|
|
</a>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<GraduationCap className="h-4 w-4" />
|
|
Boston University
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<MapPin className="h-4 w-4" />
|
|
Boston, MA
|
|
</div>
|
|
</div>
|
|
<div className="animate-fade-in-up-delay-4 flex gap-3">
|
|
<Button variant="outline" asChild className="button-hover">
|
|
<Link href="/cv">
|
|
<ExternalLink className="mr-2 h-4 w-4" />
|
|
View CV
|
|
</Link>
|
|
</Button>
|
|
<Button variant="outline" asChild className="button-hover">
|
|
<Link href="/publications">
|
|
<BookOpen className="mr-2 h-4 w-4" />
|
|
Publications
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Research Interests */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">Research Interests</h2>
|
|
<div className="animate-fade-in-up-delay-1">
|
|
<Card className="card-hover">
|
|
<CardContent>
|
|
<p className="leading-relaxed text-muted-foreground">
|
|
{researchInterests}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Education */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">Education</h2>
|
|
<div className="space-y-4">
|
|
{educationList.map((edu, index) => (
|
|
<div key={index} className={`animate-fade-in-up-delay-${index + 1}`}>
|
|
<Card className="card-hover">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="mb-1">{edu.institution}</CardTitle>
|
|
<CardDescription>{edu.location}</CardDescription>
|
|
</div>
|
|
<School className="h-5 w-5 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 pt-0">
|
|
<div>
|
|
<p className="font-medium">{edu.degree}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{edu.graduated ? "" : "Expected "}{edu.expectedGraduation}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{edu.engineeringGpa ? (
|
|
<>
|
|
<Badge variant="secondary">Eng. GPA: {edu.engineeringGpa}</Badge>
|
|
<Badge variant="outline">Overall GPA: {edu.gpa}</Badge>
|
|
</>
|
|
) : (
|
|
<Badge variant="secondary">GPA: {edu.gpa}</Badge>
|
|
)}
|
|
{edu.deansListSemesters.length > 0 && (
|
|
<Badge variant="outline">
|
|
Dean's List: {edu.deansListSemesters.length} semesters
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Research Experience */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">Research Experience</h2>
|
|
<div className="space-y-6">
|
|
{researchExperience.map((exp, index) => (
|
|
<div
|
|
key={index}
|
|
className={`animate-fade-in-up-delay-${index + 1}`}
|
|
>
|
|
<Card className="card-hover">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="mb-1">{exp.title}</CardTitle>
|
|
<CardDescription>{exp.organization}</CardDescription>
|
|
<CardDescription className="text-xs">
|
|
{exp.location} • {exp.period}
|
|
</CardDescription>
|
|
</div>
|
|
<FlaskConical className="h-5 w-5 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
{exp.description.map((item, itemIndex) => (
|
|
<li key={itemIndex} className="flex items-start gap-2">
|
|
<span className="mt-2 h-1 w-1 flex-shrink-0 rounded-full bg-muted-foreground" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Professional Experience Highlights */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">
|
|
Professional Experience Highlights
|
|
</h2>
|
|
<div className="space-y-6">
|
|
{professionalExperience.slice(0, 2).map((exp, index) => (
|
|
<div
|
|
key={index}
|
|
className={`animate-fade-in-up-delay-${index + 1}`}
|
|
>
|
|
<Card className="card-hover">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="mb-1">{exp.title}</CardTitle>
|
|
<CardDescription>{exp.organization}</CardDescription>
|
|
<CardDescription className="text-xs">
|
|
{exp.location} • {exp.period}
|
|
</CardDescription>
|
|
</div>
|
|
<Building className="h-5 w-5 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
{exp.description.slice(0, 3).map((item, itemIndex) => (
|
|
<li key={itemIndex} className="flex items-start gap-2">
|
|
<span className="mt-2 h-1 w-1 flex-shrink-0 rounded-full bg-muted-foreground" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Teaching Experience */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">Teaching Experience</h2>
|
|
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
|
{teachingExperience.slice(0, 4).map((exp, index) => (
|
|
<div
|
|
key={index}
|
|
className={`animate-fade-in-up-delay-${index + 1}`}
|
|
>
|
|
<Card className="card-hover card-full-height">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<GraduationCap className="h-5 w-5 flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<CardTitle className="mb-1 break-words text-base leading-tight">
|
|
{exp.title}
|
|
</CardTitle>
|
|
<CardDescription className="break-words text-xs">
|
|
{exp.organization}
|
|
</CardDescription>
|
|
<CardDescription className="text-xs">
|
|
{exp.period}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="card-content-stretch pt-0">
|
|
<p className="text-sm leading-relaxed text-muted-foreground">
|
|
{exp.description[0]}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Leadership & Activities */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">Leadership & Activities</h2>
|
|
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
|
|
{leadershipExperience.map((exp, index) => (
|
|
<div
|
|
key={index}
|
|
className={`animate-fade-in-up-delay-${index + 1}`}
|
|
>
|
|
<Card className="card-hover card-full-height">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Users className="h-5 w-5 flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<CardTitle className="mb-1 break-words text-base leading-tight">
|
|
{exp.title}
|
|
</CardTitle>
|
|
<CardDescription className="break-words text-xs">
|
|
{exp.organization}
|
|
</CardDescription>
|
|
<CardDescription className="text-xs">
|
|
{exp.period}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="card-content-stretch pt-0">
|
|
<ul className="space-y-1 text-sm text-muted-foreground">
|
|
{exp.description.slice(0, 2).map((item, itemIndex) => (
|
|
<li key={itemIndex} className="flex items-start gap-2">
|
|
<span className="mt-2 h-1 w-1 flex-shrink-0 rounded-full bg-muted-foreground" />
|
|
<span className="break-words">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Recent Awards & Recognition */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">Recent Awards & Recognition</h2>
|
|
<div className="grid-equal-height grid gap-4 md:grid-cols-2">
|
|
{awards.map((award, index) => (
|
|
<div
|
|
key={index}
|
|
className={`animate-fade-in-up-delay-${index + 1}`}
|
|
>
|
|
<Card className="card-hover card-full-height">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Award className="h-5 w-5 flex-shrink-0" />
|
|
<div className="min-w-0">
|
|
<CardTitle className="mb-1 break-words text-base leading-tight">
|
|
{award.title}
|
|
</CardTitle>
|
|
{award.organization && (
|
|
<CardDescription className="break-words">
|
|
{award.organization} • {award.year}
|
|
</CardDescription>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
{award.description && (
|
|
<CardContent className="card-content-stretch pt-0">
|
|
<p className="break-words text-sm leading-relaxed text-muted-foreground">
|
|
{award.description}
|
|
</p>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Quick Links */}
|
|
<section className="animate-fade-in-up space-y-6">
|
|
<h2 className="text-2xl font-bold">Explore More</h2>
|
|
<div className="grid-equal-height grid gap-6 md:grid-cols-3">
|
|
<div className="animate-fade-in-up-delay-1">
|
|
<Card className="card-hover card-full-height">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Code className="h-5 w-5 flex-shrink-0" />
|
|
<CardTitle className="mb-1 break-words">Projects</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="card-content-stretch pt-0">
|
|
<div className="flex h-full flex-col">
|
|
<p className="break-words leading-relaxed text-muted-foreground">
|
|
Explore my featured projects including HRIStudio, machine
|
|
learning research, and web applications.
|
|
</p>
|
|
<Button variant="outline" asChild className="mt-auto w-full">
|
|
<Link href="/projects">
|
|
View Projects
|
|
<ArrowUpRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="animate-fade-in-up-delay-2">
|
|
<Card className="card-hover card-full-height">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<BookOpen className="h-5 w-5 flex-shrink-0" />
|
|
<CardTitle className="mb-1 break-words">
|
|
Publications
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="card-content-stretch pt-0">
|
|
<div className="flex h-full flex-col">
|
|
<p className="break-words leading-relaxed text-muted-foreground">
|
|
Read my peer-reviewed publications in human-robot
|
|
interaction research.
|
|
</p>
|
|
<Button variant="outline" asChild className="mt-auto w-full">
|
|
<Link href="/publications">
|
|
View Publications
|
|
<ArrowUpRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="animate-fade-in-up-delay-3">
|
|
<Card className="card-hover card-full-height">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<ExternalLink className="h-5 w-5 flex-shrink-0" />
|
|
<CardTitle className="mb-1 break-words">
|
|
Complete CV
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="card-content-stretch pt-0">
|
|
<div className="flex h-full flex-col">
|
|
<p className="break-words leading-relaxed text-muted-foreground">
|
|
View my complete academic and professional curriculum vitae.
|
|
</p>
|
|
<Button variant="outline" asChild className="mt-auto w-full">
|
|
<Link href="/cv">
|
|
View CV
|
|
<ArrowUpRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|