From 2defd4d074c2f86f1e8e92b50a0b0fcf9d7fe0dc Mon Sep 17 00:00:00 2001
From: Story Crater Bot <19826264+Riotpiaole@users.noreply.github.com>
Date: Wed, 2 Sep 2026 10:39:11 -0700
Subject: [PATCH] feat: Experience clicks smooth-scroll to Explore Experience
 section

---
 components/ExperienceTimeline.tsx |  2 +-
 components/Header.tsx             | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/ExperienceTimeline.tsx b/components/ExperienceTimeline.tsx
index 2853799..ec245ed 100644
--- a/components/ExperienceTimeline.tsx
+++ b/components/ExperienceTimeline.tsx
@@ -49,7 +49,7 @@ export function ExperienceTimeline() {
   const timeline = t.experience.items
 
   return (
-    <section className="max-w-4xl mx-auto px-6 py-20">
+    <section id="experience" className="max-w-4xl mx-auto px-6 py-20">
       <motion.div
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}
diff --git a/components/Header.tsx b/components/Header.tsx
index cd1c243..47ec903 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -181,10 +181,13 @@ export default function Header() {
             )}
           </div>
           <div className="border-l border-gray-300 dark:border-gray-700 pl-8 flex gap-6 items-center">
-            <div className="text-xs">
+            <button
+              onClick={() => document.getElementById('experience')?.scrollIntoView({ behavior: 'smooth' })}
+              className="text-xs text-left cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
+            >
               <div className="text-gray-600 dark:text-gray-400">{t.header.experience}</div>
               <div className="font-semibold text-gray-900 dark:text-white">{t.header.experienceValue}</div>
-            </div>
+            </button>
             <div className="relative" ref={educationRef}>
               <button 
                 onClick={() => setEducationOpen(!educationOpen)}
@@ -354,10 +357,13 @@ export default function Header() {
             </div>
           )}
           <div className="border-t border-gray-200 dark:border-gray-800 pt-4 space-y-4">
-            <div className="text-xs">
+            <button
+              onClick={() => { setOpen(false); document.getElementById('experience')?.scrollIntoView({ behavior: 'smooth' }); }}
+              className="text-xs text-left cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
+            >
               <div className="text-gray-600 dark:text-gray-400">{t.header.experience}</div>
               <div className="font-semibold text-gray-900 dark:text-white">{t.header.experienceValue}</div>
-            </div>
+            </button>
             <div>
               <button 
                 onClick={() => setEducationOpen(!educationOpen)}