personal website
nekomimi.pet
1interface Project {
2 title: string
3 description: string
4 tech: string[]
5 links?: {
6 live?: string
7 github?: string
8 }
9}
10
11interface WorkExperienceCardProps {
12 year: string
13 role: string
14 company: string
15 description: string
16 tech: string[]
17 projects?: Project[]
18}
19
20export function WorkExperienceCard({ year, role, company, description, tech, projects }: WorkExperienceCardProps) {
21 return (
22 <div className="group py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500">
23 <div className="grid lg:grid-cols-12 gap-4 sm:gap-8">
24 <div className="lg:col-span-2">
25 <div className="text-xl sm:text-2xl font-light text-[oklch(0.48_0.015_255)] dark:text-muted-foreground dark:group-hover:text-foreground transition-colors duration-500">
26 {year}
27 </div>
28 </div>
29
30 <div className="lg:col-span-10 space-y-3">
31 <div className="flex items-start justify-between gap-4">
32 <div>
33 <h3 className="text-lg sm:text-xl font-medium text-[oklch(0.2_0.02_255)] dark:text-foreground">{role}</h3>
34 <div className="text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
35 {company}
36 </div>
37 </div>
38 <div className="flex flex-wrap gap-2 justify-end items-start">
39 {tech.map((techItem) => (
40 <span
41 key={techItem}
42 className="px-2 py-1 text-xs rounded text-[oklch(0.48_0.015_255)] dark:text-muted-foreground transition-colors duration-500"
43 >
44 {techItem}
45 </span>
46 ))}
47 </div>
48 </div>
49 <p className="leading-relaxed text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
50 {description}
51 </p>
52 </div>
53 </div>
54
55 {projects && projects.length > 0 && (
56 <div className="mt-6 lg:ml-[calc((2/12)*100%+2rem)] space-y-4">
57 <div className="text-xs font-mono tracking-wider text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
58 PROJECTS
59 </div>
60 <div className="space-y-4">
61 {projects.map((project, index) => (
62 <div
63 key={index}
64 className="glass glass-hover p-4 rounded-lg transition-colors duration-300"
65 >
66 <div className="space-y-3">
67 <div className="flex items-start justify-between gap-4">
68 <h4 className="font-medium text-md text-[oklch(0.2_0.02_255)] dark:text-foreground">{project.title}</h4>
69 {project.links && (
70 <div className="flex gap-2">
71 {project.links.github && (
72 <a
73 href={project.links.github}
74 target="_blank"
75 rel="noopener noreferrer"
76 className="transition-colors text-[oklch(0.48_0.015_255)] dark:text-muted-foreground dark:hover:text-foreground"
77 aria-label="View on GitHub"
78 >
79 <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
80 <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
81 </svg>
82 </a>
83 )}
84 {project.links.live && (
85 <a
86 href={project.links.live}
87 target="_blank"
88 rel="noopener noreferrer"
89 className="transition-colors text-[oklch(0.48_0.015_255)] dark:text-muted-foreground dark:hover:text-foreground"
90 aria-label="View live site"
91 >
92 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
93 <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
94 </svg>
95 </a>
96 )}
97 </div>
98 )}
99 </div>
100 <p className="text-md leading-relaxed text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
101 {project.description}
102 </p>
103 <div className="flex flex-wrap gap-2">
104 {project.tech.map((techItem) => (
105 <span
106 key={techItem}
107 className="glass glass-hover px-2 py-1 text-xs rounded text-[oklch(0.48_0.015_255)] dark:text-muted-foreground"
108 >
109 {techItem}
110 </span>
111 ))}
112 </div>
113 </div>
114 </div>
115 ))}
116 </div>
117 </div>
118 )}
119 </div>
120 )
121}