From d791e4ffcce82f88d9eacd5fb31543eb9244ec2e Mon Sep 17 00:00:00 2001
From: Mariia Shabelnik <mariiashabelnik@gmail.com>
Date: Mon, 5 May 2025 21:21:55 +0200
Subject: [PATCH] Update apge

---
 src/pages/About.jsx | 64 ++++++++++++++++++++++++++++++++++-----------
 src/pages/Start.jsx | 20 ++------------
 2 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 709c0a3..ebdcabe 100644
--- a/src/pages/About.jsx
+++ b/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 className=" min-h-screen flex items-center">
-        <div>
-          <h2
+      <div id="about" className="absolute"></div>
+      <div className="min-h-screen flex items-center">
+        <motion.div
+          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>
-          </h2>
-          <div className="flex flex-col md:flex-row gap-6">
-            <article className="basis-6/12 text-base font-body">
+            About me<span className="text-highlight">.</span>
+          </motion.h2>
+          <motion.div variants={itemVariants} className="flex flex-col md:flex-row gap-6">
+            <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>
-            <figure className="border">
+            </motion.article>
+            <motion.figure variants={itemVariants} className="border">
               <img
                 className="rounded-3xl"
                 src="/img/ProfileMe.jpg"
                 alt="Mariia Shabelnik's profile photo"
               />
-            </figure>
-            <aside className="basis-1/3" aria-labelledby="skills-heading">
+            </motion.figure>
+            <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>
-          </div>
-        </div>
+            </motion.aside>
+          </motion.div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/src/pages/Start.jsx b/src/pages/Start.jsx
index 295d35c..f6a6a79 100644
--- a/src/pages/Start.jsx
+++ b/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>
   );