@@ -5,11 +5,11 @@ const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
55
66{
77 hasExperience && (
8- <section id = " experience" class = " p-16 md :p-24" >
8+ <section id = " experience" class = " p-8 sm:p-12 md:p-16 lg :p-24" >
99 <div >
1010 <div class = " grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start" >
1111 <div class = " lg:col-span-4" >
12- <h2 class = " text-5xl lg :text-7xl font-bold text-gray-900" >
12+ <h2 class = " text-3xl sm:text-4xl md:text- 5xl xl :text-7xl font-bold text-gray-900" >
1313 Experience
1414 </h2 >
1515 <div
@@ -27,27 +27,27 @@ const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
2727 class = " absolute left-1/2 -top-2 w-4 h-4 bg-white border-2 rounded-full -translate-x-1/2 z-20 transition-all duration-300"
2828 style = { ` border-color: ${siteConfig .accentColor }; background-color: ${siteConfig .accentColor } ` }
2929 />
30-
30+
3131 { /* Connecting line below card */ }
3232 { index < siteConfig .experience .length - 1 && (
3333 <div class = " absolute left-1/2 bottom-0 w-0.5 h-12 bg-gray-300 -translate-x-1/2 translate-y-full z-10" />
3434 )}
35-
35+
3636 { /* Experience card */ }
37- <div class = " bg-white rounded-lg shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-300" >
37+ <div class = " bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-5 md:p- 6 hover:shadow-md transition-shadow duration-300" >
3838 <div class = " flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4" >
3939 <div >
40- <h3 class = " text-xl font-semibold text-gray-900" >
40+ <h3 class = " text-lg sm:text- xl font-semibold text-gray-900" >
4141 { exp .title }
4242 </h3 >
4343 <p
44- class = " text-lg"
44+ class = " text-base sm:text- lg"
4545 style = { ` color: ${siteConfig .accentColor } ` }
4646 >
4747 { exp .company }
4848 </p >
4949 </div >
50- <span class = " text-sm text-gray-500 mt-2 sm:mt-0" >
50+ <span class = " text-xs sm:text- sm text-gray-500 mt-2 sm:mt-0" >
5151 { exp .dateRange }
5252 </span >
5353 </div >
@@ -56,7 +56,9 @@ const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
5656 { exp .bullets .map ((bullet ) => (
5757 <li class = " flex items-start" >
5858 <span class = " inline-block w-1.5 h-1.5 rounded-full bg-gray-400 mt-2 mr-3 flex-shrink-0" />
59- <span class = " text-gray-600" >{ bullet } </span >
59+ <span class = " text-sm sm:text-base text-gray-600" >
60+ { bullet }
61+ </span >
6062 </li >
6163 ))}
6264 </ul >
0 commit comments