init

2025-11-28 15:54:34 +08:00
commit 68bfaf7d97
15 changed files with 831 additions and 0 deletions
@@ -0,0 +1,63 @@
+import React from 'react';
+import { ExperienceItem, Language } from '../types';
+import { Calendar } from 'lucide-react';
+
+interface Props {
+  experience: ExperienceItem[];
+  lang: Language;
+}
+
+const ExperienceList: React.FC<Props> = ({ experience, lang }) => {
+  return (
+    <div className="relative space-y-12">
+      {/* Central Line */}
+      <div className="absolute left-4 top-4 bottom-4 w-0.5 bg-slate-200 md:left-1/2 md:-ml-[1px]"></div>
+
+      {experience.map((job, index) => (
+        <div key={index} className={`relative flex flex-col md:flex-row gap-8 ${index % 2 === 0 ? 'md:flex-row-reverse' : ''} group`}>
+          
+          {/* Timeline Dot */}
+          <div className="absolute left-4 -translate-x-1/2 top-6 w-4 h-4 rounded-full border-4 border-white bg-indigo-500 shadow-md z-10 md:left-1/2 transition-transform group-hover:scale-125 group-hover:bg-indigo-600"></div>
+
+          {/* Date for Desktop (Opposite side) */}
+          <div className="hidden md:block w-1/2 pt-4 px-8 text-right group-hover:text-indigo-600 transition-colors">
+             <div className={`flex items-center gap-2 text-sm font-bold tracking-wider text-slate-400 uppercase ${index % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
+                {index % 2 !== 0 && <span>{job.period}</span>}
+                <Calendar size={14} />
+                {index % 2 === 0 && <span>{job.period}</span>}
+             </div>
+          </div>
+
+          {/* Content Card */}
+          <div className="ml-12 md:ml-0 md:w-1/2 md:px-8">
+            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 group-hover:shadow-lg group-hover:border-indigo-100 transition-all duration-300 relative">
+               {/* Mobile Date */}
+               <div className="md:hidden text-xs font-bold text-indigo-500 mb-2 uppercase tracking-wide flex items-center gap-1">
+                  <Calendar size={12} />
+                  {job.period}
+               </div>
+
+              <h3 className="text-lg font-bold text-slate-900 group-hover:text-indigo-700 transition-colors">
+                {job.company[lang]}
+              </h3>
+              <div className="text-sm font-semibold text-slate-500 mb-4">
+                {job.role[lang]}
+              </div>
+              
+              <ul className="space-y-3">
+                {job.description.map((desc, i) => (
+                  <li key={i} className="text-sm text-slate-600 leading-relaxed flex items-start gap-3">
+                    <span className="mt-1.5 w-1.5 h-1.5 bg-indigo-400 rounded-full shrink-0"></span>
+                    <span>{desc[lang]}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ExperienceList;