支持手机端

buyfakett · Dec 3, 2024 · f4eae0f · f4eae0f
1 parent c3579e6
commit f4eae0f
Showing 1 changed file with 42 additions and 26 deletions.
diff --git a/src/components/AboutMe/WorkExperience.jsx b/src/components/AboutMe/WorkExperience.jsx
@@ -10,71 +10,87 @@ const WorkExperience = ({imgUrl, skipUrl}) => {
             className="dark:bg-gray-900 dark:text-gray-300"
         >
             <motion.div
-                className="w-96 h-48 flex items-center justify-center mx-auto mt-10"
-                initial={{opacity: 0, y: 50}} // 从下方开始 (y 设为正值)
-                animate={{opacity: 1, y: 0}} // 最终回到原始位置
-                transition={{duration: 1}} // 动画持续 1 秒
+                className="w-full max-w-screen-lg mx-auto flex flex-col items-center mt-10 px-4"
+                initial={{opacity: 0, y: 50}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 1}}
             >
-                <h1 className="text-4xl font-bold mb-4 text-center">
+                <h1 className="text-2xl md:text-4xl font-bold mb-4 text-center">
                     Work Experience
                 </h1>
             </motion.div>
+
             <motion.div
-                className="mt-5"
-                initial={{opacity: 0, y: 50}} // 从下方开始 (y 设为正值)
-                animate={{opacity: 1, y: 0}} // 最终回到原始位置
-                transition={{duration: 1}} // 动画持续 1 秒
+                className="mt-5 flex flex-col gap-10"
+                initial={{opacity: 0, y: 50}}
+                animate={{opacity: 1, y: 0}}
+                transition={{duration: 1}}
             >
-
-                {/*第一个卡片*/}
-                <div className="flex items-center gap-4 w-[900px] h-[200px]">
+                {/* 第一个卡片 */}
+                <div
+                    className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6 w-full max-w-screen-lg mx-auto">
                     <div className="flex-shrink-0">
                         <Image
                             src={imgUrl.muen}
                             alt="沐恩网络"
-                            className="w-12 h-12 rounded mr-5"
+                            className="w-16 h-16 md:w-12 md:h-12 md:mt-20 rounded"
                         />
                     </div>
                     <NeonGradientCard
-                        className="w-[900px] h-[220px] items-center justify-center cursor-pointer"
+                        className="w-full md:w-[900px] neon-card cursor-pointer"
+                        borderSize={4} // 调整边框为桌面端宽度
+                        borderRadius={16} // 更加圆润
+                        neonColors={{
+                            firstColor: "#ff00aa",
+                            secondColor: "#00FFF1",
+                        }}
                         onClick={() => window.open(skipUrl.muen, '_blank')}
                     >
-                        <h1 className="text-3xl">沐恩网络</h1>
-                        <h2 className="mt-0.5">运维工程师</h2>
-                        <h3>2022.6 - 至今</h3>
-                        <ul>
+                        <h1 className="text-xl md:text-3xl">沐恩网络</h1>
+                        <h2 className="mt-0.5 text-sm md:text-lg">运维工程师</h2>
+                        <h3 className="text-sm md:text-base">2022.6 - 至今</h3>
+                        <ul className="text-xs md:text-sm list-disc pl-4 mt-2 space-y-1">
                             <li>内部系统前后端优化</li>
                             <li>自动化系统、监控系统、备份系统优化</li>
                             <li>服务器、监控、数据库等迁移集群</li>
                             <li>线上问题分析, 提出优化方案</li>
                         </ul>
                     </NeonGradientCard>
+
                 </div>
 
-                {/*第二个卡片*/}
-                <div className="flex items-center gap-4 w-[900px] h-[200px] mt-10">
+                {/* 第二个卡片 */}
+                <div
+                    className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6 w-full max-w-screen-lg mx-auto">
                     <div className="flex-shrink-0">
                         <Image
                             src={imgUrl.zhenshan}
                             alt="臻善科技"
-                            className="w-12 h-12 rounded mr-5"
+                            className="w-16 h-16 md:w-12 md:h-12 md:mt-20 rounded"
                         />
                     </div>
                     <NeonGradientCard
-                        className="w-[900px] h-[200px] items-center justify-center cursor-pointer"
+                        className="w-full md:w-[900px] neon-card cursor-pointer"
+                        borderSize={4} // 调整边框为桌面端宽度
+                        borderRadius={16} // 更加圆润
+                        neonColors={{
+                            firstColor: "#ff00aa",
+                            secondColor: "#00FFF1",
+                        }}
                         onClick={() => window.open(skipUrl.zhenshan, '_blank')}
                     >
-                        <h1 className="text-3xl">臻善科技</h1>
-                        <h2 className="mt-0.5">数据师(实习)</h2>
-                        <h3>2021.7 - 2022.4</h3>
-                        <ul>
+                        <h1 className="text-xl md:text-3xl">臻善科技</h1>
+                        <h2 className="mt-0.5 text-sm md:text-lg">数据师(实习)</h2>
+                        <h3 className="text-sm md:text-base">2021.7 - 2022.4</h3>
+                        <ul className="text-xs md:text-sm list-disc pl-4 mt-2 space-y-1">
                             <li>各区县数据清洗</li>
                             <li>图形数据入库</li>
                             <li>各区县数据迁移合库</li>
                         </ul>
                     </NeonGradientCard>
                 </div>
             </motion.div>
+
         </div>
     );
 };