personal website
nekomimi.pet
1import { WorkExperienceCard } from "../WorkExperienceCard"
2import { workExperience } from "../../data/portfolio"
3import { useSystemTheme } from "../../hooks/useSystemTheme"
4
5interface WorkProps {
6 sectionRef: (el: HTMLElement | null) => void
7}
8
9export function Work({ sectionRef }: WorkProps) {
10 const isLightMode = useSystemTheme()
11
12 return (
13 <section
14 id="work"
15 ref={sectionRef}
16 className="min-h-screen py-20 sm:py-32 opacity-0"
17 style={isLightMode ? {
18 backgroundColor: '#e2e2e2',
19 color: 'oklch(0.2 0.02 255)'
20 } : {}}
21 >
22 <div className="relative max-w-4xl mx-auto px-6 sm:px-8 lg:px-16">
23 <img
24 src="/nekomata.png"
25 alt=""
26 className="absolute left-0 top-1/3 -translate-y-1/2 -translate-x-56 w-96 h-auto opacity-100 hidden lg:block pointer-events-none"
27 />
28 <div className="space-y-12 sm:space-y-16">
29 <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
30 <h2 className="text-3xl sm:text-4xl font-light">Selected Work</h2>
31 <div
32 className="text-sm font-mono"
33 style={isLightMode ? {
34 color: 'oklch(0.48 0.015 255)'
35 } : {}}
36 >
37 2016 — 2025
38 </div>
39 </div>
40
41 <div className="space-y-8 sm:space-y-12">
42 {workExperience.map((job, index) => (
43 <WorkExperienceCard key={index} {...job} />
44 ))}
45 </div>
46 </div>
47 </div>
48 </section>
49 )
50}