feat: implement dynamic experience section with database integration and localization support

messages/en.json

@@ -20,9 +20,9 @@
     "scroll": "Scroll"
   },
   "Experience": {
-    "badge": "Career Journey",
-    "title": "Experience & Evolution",
-    "subtitle": "A timeline of building enterprise-grade systems in the banking technology industry.",
+    "badge": "Track Record",
+    "title": "Professional Experience",
+    "subtitle": "My journey in designing and developing enterprise-grade systems",
     "jobs": {
       "enterprise": {
         "year": "2024 — Present",

messages/id.json

@@ -20,9 +20,9 @@
     "scroll": "Scroll"
   },
   "Experience": {
-    "badge": "Perjalanan Karir",
-    "title": "Pengalaman & Evolusi",
-    "subtitle": "Garis waktu (timeline) membangun sistem skala enterprise di industri teknologi perbankan.",
+    "badge": "Rekam Jejak",
+    "title": "Pengalaman Profesional",
+    "subtitle": "Perjalanan saya dalam merancang dan mengembangkan sistem berskala enterprise",
     "jobs": {
       "enterprise": {
         "year": "2024 — Sekarang",

src/features/experience/experience-section.tsx

@@ -37,7 +37,6 @@ export async function ExperienceSection() {
       <div className="max-w-5xl mx-auto px-6">
         <AnimatedSection>
           <SectionHeading
-            badge={t("badge")}
             title={t("title")}
             subtitle={t("subtitle")}
           />
@@ -61,13 +60,13 @@ export async function ExperienceSection() {
               {timelineData.map((item, index) => (
                 <AnimatedSection key={item.id} delay={index * 0.15}>
                   <div
-                    className={`relative flex flex-col md:flex-row items-start gap-6 md:gap-12 ${
+                    className={`relative flex flex-col md:flex-row items-start gap-8 md:gap-24 ${
                       index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
                     }`}
                   >
                     {/* Content */}
                     <div
-                      className={`flex-1 ml-16 md:ml-0 ${
+                      className={`flex-1 ml-20 md:ml-0 ${
                         index % 2 === 0 ? "md:text-right" : "md:text-left"
                       }`}
                     >