style: fix the spacing postioning

thekiranmahajan · Dec 15, 2024 · 59c8ca3 · 59c8ca3
1 parent f52d989
commit 59c8ca3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 16 deletions.
diff --git a/src/components/ExperienceTabs.jsx b/src/components/ExperienceTabs.jsx
@@ -6,33 +6,28 @@ import Timeline from "./Timeline";
 const ExperienceTabs = () => {
   const [activeTab, setActiveTab] = useState(EXPERIENCE_TABS[1]?.tabName);
   return (
-    <div className="mt-10 flex h-full w-full flex-col items-center p-2">
-      <div className="mb-5 flex h-20 w-1/2 items-center justify-center gap-5 md:gap-10">
+    <div className="container mt-10 flex-col items-center p-2">
+      <div className="mb-5 flex items-center justify-center gap-20">
         {EXPERIENCE_TABS.map(({ tabName, tabIcon: Icon }) => (
           <button
             key={tabName}
             onClick={() => setActiveTab(tabName)}
-            className={`relative flex w-full items-center justify-center gap-2 p-2 pb-2 font-medium leading-5 md:text-lg md:leading-7 ${
+            className={`relative flex items-center justify-center gap-3 p-2 pb-2 font-medium leading-5 md:text-lg md:leading-7 ${
               activeTab === tabName
                 ? "text-custom-violet dark:text-custom-yellow"
                 : "text-gray-500 dark:text-gray-100"
             }`}
           >
-            <Icon
-              className={`text-2xl md:text-3xl ${activeTab === tabName ? "text-light-blue" : ""}`}
-            />
+            <Icon className="text-2xl" />
             {tabName}
             {activeTab === tabName && (
-              <motion.div
-                layoutId="underline"
-                className="absolute bottom-0 left-0 right-0 h-0.5 rounded bg-light-blue"
-              />
+              <motion.div layoutId="underline" className="absolute" />
             )}
           </button>
         ))}
       </div>
 
-      <div className="h-full sm:w-10/12 md:mt-2">
+      <div className="h-full w-full md:mt-2">
         <AnimatePresence mode="wait">
           <motion.div
             key={activeTab}

diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
@@ -4,7 +4,7 @@ import { EXPERIENCE } from "../utils/constants";
 const Timeline = ({ type }) => {
   return (
     <div className="relative mx-auto flex flex-col space-y-8 px-6">
-      <div className="line absolute inset-0 left-8 h-full w-2 rounded-xl bg-custom-violet shadow-md md:left-0 md:right-0 md:mx-auto" />
+      <div className="line absolute inset-0 left-8 h-full w-2 rounded-xl bg-gradient-to-t from-light-blue to-custom-violet shadow-md md:left-0 md:right-0 md:mx-auto" />
       {type == "work"
         ? EXPERIENCE.work.map(
             (

diff --git a/src/components/TimelineCard.jsx b/src/components/TimelineCard.jsx
@@ -10,7 +10,7 @@ const TimelineCard = ({
 }) => {
   return (
     <div className="relative">
-      <div className="xs:absolute flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border-2 border-custom-violet bg-white duration-300 hover:scale-105 md:left-0 md:right-0 md:mx-auto dark:border-custom-yellow">
+      <div className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border-2 border-custom-violet bg-white duration-300 hover:scale-105 xs:absolute md:left-0 md:right-0 md:mx-auto dark:border-custom-yellow">
         <a href={link || "#"}>
           <img
             src={logo}
@@ -21,14 +21,14 @@ const TimelineCard = ({
       </div>
 
       <div
-        className={`${index % 2 === 1 ? "xs:pl-9 md:ml-auto md:pl-6" : "xs:pl-9 md:mr-auto md:pr-6"} xs:pt-0 relative pt-3 md:w-1/2`}
+        className={`${index % 2 === 1 ? "xs:pl-9 md:ml-auto md:pl-6" : "xs:pl-9 md:mr-auto md:pr-6"} relative pt-3 xs:pt-0 md:w-1/2`}
       >
         <div
-          className={`xs:left-7 absolute inset-0 left-1 top-1 h-4 w-4 rotate-45 transform rounded-sm bg-slate-500 shadow-lg ${index % 2 === 1 ? "md:left-4" : "md:left-auto md:right-3 md:pl-7"}`}
+          className={`${index % 2 === 1 ? "md:left-4" : "md:left-auto md:right-3 md:pl-7"} absolute inset-0 left-1 top-1 h-4 w-4 rotate-45 transform rounded-sm bg-slate-500 shadow-lg xs:left-7`}
         ></div>
 
         <div
-          className={`xs:left-0 xs:-top-1 relative -left-1 rounded-lg bg-slate-100 p-6 shadow-lg`}
+          className={`${index % 2 === 1 ? "" : "md:left-0.5"} relative -left-1 rounded-lg bg-slate-100 p-6 shadow-lg xs:-top-1 xs:left-0`}
         >
           <h4 className="text-sm font-semibold text-dark-blue">
             {score && <span>{score}</span>} {degree}