feat(profile): add motion div

mariamarinescu · Jan 8, 2025 · 7df40dd · 7df40dd
1 parent 05c2e59
commit 7df40dd
Showing 1 changed file with 40 additions and 29 deletions.
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -1,9 +1,19 @@
+import { motion } from 'framer-motion';
 import profileImg from '../assets/profile.jpeg';
 
 const Profile = () => {
   return (
-    <div className="relative isolate overflow-hidden bg-white px-6 py-8 lg:overflow-visible lg:px-0">
-      {/* <div className="absolute inset-0 -z-10 overflow-hidden">
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{
+        ease: 'easeInOut',
+        duration: 0.7,
+        delay: 0.15,
+      }}
+    >
+      <div className="relative isolate overflow-hidden bg-white px-6 py-8 lg:overflow-visible lg:px-0">
+        {/* <div className="absolute inset-0 -z-10 overflow-hidden">
         <svg
           className="absolute left-[max(50%,25rem)] top-0 h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-200 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)]"
           aria-hidden="true"
@@ -34,37 +44,38 @@ const Profile = () => {
           />
         </svg>
       </div> */}
-      <div className="mx-auto grid grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
-        <div className="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
-          <div className="lg:pr-4">
-            <div className="lg:max-w-lg">
-              <p className="text-base/4 font-semibold text-indigo-600">
-                My profile
-              </p>
-              <h1 className="mt-2 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-                A bit about me...
-              </h1>
-              <p className="mt-6 text-xl/8 text-gray-700">
-                As a berlin-based brand designer, with a multicultural
-                background and I blend organization and analytical thinking to
-                craft impactful, culturally resonant brand strategies with a
-                focus on “diversity”. My work highlights identity, heritage and
-                unity delivering meaningful brand experiences.
-              </p>
+        <div className="mx-auto grid grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
+          <div className="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
+            <div className="lg:pr-4">
+              <div className="lg:max-w-lg">
+                <p className="text-base/4 font-semibold text-indigo-600">
+                  My profile
+                </p>
+                <h1 className="mt-2 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+                  A bit about me...
+                </h1>
+                <p className="mt-6 text-xl/8 text-gray-700">
+                  As a berlin-based brand designer, with a multicultural
+                  background and I blend organization and analytical thinking to
+                  craft impactful, culturally resonant brand strategies with a
+                  focus on “diversity”. My work highlights identity, heritage
+                  and unity delivering meaningful brand experiences.
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="-mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden">
-          <img
-            className="rounded-xl bg-gray-900 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
-            src={profileImg}
-            alt=""
-          />
-        </div>
+          <div className="-mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden">
+            <img
+              className="rounded-xl bg-gray-900 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+              src={profileImg}
+              alt=""
+            />
+          </div>
 
-        <div className="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"></div>
+          <div className="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"></div>
+        </div>
       </div>
-    </div>
+    </motion.div>
   );
 };