Update apge

src/pages/About.jsx

@@ -1,23 +1,57 @@
 import { useRecoilValue } from "recoil";
 import Tags from "../components/Tags";
 import { skillsAtom } from "../store";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
 
 function About() {
   const skills = useRecoilValue(skillsAtom);
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut",
+      },
+    },
+  };
 
   return (
     <section className="relative" aria-labelledby="about-heading">
-      <div id="about" className=" absolute    "></div>
+      <div id="about" className="absolute"></div>
-      <div className=" min-h-screen flex items-center">
+      <div className="min-h-screen flex items-center">
-        <div>
+        <motion.div
-          <h2
+          ref={ref}
+          variants={containerVariants}
+          initial="hidden"
+          animate={inView ? "visible" : "hidden"}
+        >
+          <motion.h2
+            variants={itemVariants}
             id="about-heading"
             className="mb-6 text-subTPhone md:text-subT font-headline"
           >
-            About me<span className=" text-highlight">.</span>
+            About me<span className="text-highlight">.</span>
-          </h2>
+          </motion.h2>
-          <div className="flex flex-col md:flex-row gap-6">
+          <motion.div variants={itemVariants} className="flex flex-col md:flex-row gap-6">
-            <article className="basis-6/12 text-base font-body">
+            <motion.article variants={itemVariants} className="basis-6/12 text-base font-body">
               <p>
                 "I'm a Stockholm-based developer passionate about building
                 innovative, secure digital experiences with a focus on both
@@ -41,15 +75,15 @@ function About() {
                 contribute effectively to the growth of an organization. If you
                 think you've got an opening that I might like, let's connect 🔗 */}
               </p>
-            </article>
+            </motion.article>
-            <figure className="border">
+            <motion.figure variants={itemVariants} className="border">
               <img
                 className="rounded-3xl"
                 src="/img/ProfileMe.jpg"
                 alt="Mariia Shabelnik's profile photo"
               />
-            </figure>
+            </motion.figure>
-            <aside className="basis-1/3" aria-labelledby="skills-heading">
+            <motion.aside variants={itemVariants} className="basis-1/3" aria-labelledby="skills-heading">
               <h2 id="skills-heading" className="sr-only">
                 Skills and Technologies
               </h2>
@@ -71,9 +105,9 @@ function About() {
                 </h3>
                 <Tags listOfTags={skills.tools} />
               </section>
-            </aside>
+            </motion.aside>
-          </div>
+          </motion.div>
-        </div>
+        </motion.div>
       </div>
     </section>
   );

src/pages/Start.jsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 function Start() {
   const greeting = "Hello, my name is Maria.";
   const greetingArray = greeting.split("");
-  const role = "I'm a Frontend Engineer";
+  const role = "I'm a Frontend Engineer.";
   const roleArray = role.split("");
   
   const controls = useAnimation();
@@ -47,7 +47,6 @@ function Start() {
                 {letter}
               </motion.span>
             ))}
-            <span className="text-highlight">.</span>
           </h1>
           <h2 className="text-subTPhone md:text-subT font-ht">
             {roleArray.map((letter, index) => (
@@ -66,7 +65,6 @@ function Start() {
                 {letter}
               </motion.span>
             ))}
-            <span className="text-highlight">.</span>
           </h2>
           <motion.div
             initial={{ opacity: 0 }}
@@ -90,20 +88,6 @@ function Start() {
                 className="inline h-"
               />{" "}
               , is always in my creative space. Let's chat!
-              {/* Hi, I'm Mariia! I'm a developer who loves building functional,
-              user-friendly web experiences with a creative twist. I've been
-              working as a junior frontend engineer in startups, gaining hands-on
-              experience. I use JavaScript, React, Node.js, and SQL, and I'm
-              always exploring 3D design to add a little extra flair. Let's
-              connect and maybe you'll meet my mini poodle,{" "}
-              <span className="font-black">Oreo</span>{" "}
-              <img
-                src="/img/oreo-logo.png"
-                alt="oreo_logo"
-                className=" inline h-"
-              />{" "}
-              , who's always hanging out with me while I work! */}
-              {/* "Hi, I'm Mariia! I'm a frontend developer with experience in startup projects, working with JavaScript, React, Node.js, and SQL. I love combining my technical skills with my passion for art and design, especially through 3D projects. Let's connect and see what we can create together—also, say hi to my mini poodle, Oreo, who's always by my side in my creative space!" */}
             </p>
             <div>
               <a
@@ -120,7 +104,7 @@ function Start() {
               </a>
             </div>
           </motion.div>
-        </div>{" "}
+        </div>
       </div>
     </div>
   );