Continuos

amosmachora · Aug 31, 2022 · 16c8725 · 16c8725 · vercel · Aug 31, 2022
1 parent 2c57fd8
commit 16c8725
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 30 deletions.
diff --git a/src/Components/About/AboutMe.jsx b/src/Components/About/AboutMe.jsx
@@ -6,6 +6,8 @@ import Me from "../../Assets/TheMan.jpg";
 import MeSmall from "../../Assets/MeSmall.jpg";
 import Plus from "../../Assets/plus.svg";
 import { Context } from "../../App";
+import { pageVariantsIn } from "../../Framer";
+import { motion } from "framer-motion";
 
 const AboutMe = () => {
   const [myImage, setMyImage] = useState(Me);
@@ -27,7 +29,12 @@ const AboutMe = () => {
   }, []);
 
   return (
-    <div className="about-me">
+    <motion.div
+      className="about-me"
+      variants={pageVariantsIn}
+      initial="initial"
+      animate="animate"
+    >
       <IconRound />
       <div className="about-me-top flex space-between">
         <h1>
@@ -324,7 +331,7 @@ const AboutMe = () => {
           </p>
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/src/Components/Contact/Contact.jsx b/src/Components/Contact/Contact.jsx
@@ -7,6 +7,8 @@ import { ReadMore } from "../Start/StartPage";
 import ArrowWhite from "../../Assets/ArrowWhite.svg";
 import Spinner from "../Spinner/Spinner";
 import { Context } from "../../App";
+import { pageVariantsIn } from "../../Framer";
+import { motion } from "framer-motion";
 
 const Contact = () => {
   const [state, handleSubmit, ResetFunction] = useForm("portfolio-form");
@@ -17,13 +19,13 @@ const Contact = () => {
     document.title = `Contact`;
   }, []);
 
-  // const testState = {
-  //   submitting: true,
-  //   succeeded: true,
-  // };
-
   return (
-    <div className="contact">
+    <motion.div
+      className="contact"
+      variants={pageVariantsIn}
+      initial="initial"
+      animate="animate"
+    >
       <div className="contact-top">
         <h1 className="contact-heading">
           Quick <br /> Contact
@@ -147,7 +149,7 @@ const Contact = () => {
           </>
         )}
       </div>
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ReadMore } from "../Start/StartPage";
 import "./Footer.css";
 import ArrowWhite from "../../Assets/ArrowWhite.svg";
+import { motion } from "framer-motion";
 
 const Footer = () => {
   return (
@@ -436,7 +437,17 @@ c49 -25 54 -68 15 -114 -43 -52 -104 -39 -104 22 0 31 37 107 52 107 5 0 22
             Number of <br /> satisfied <br /> customers
           </p>
         </div>
-        <div className="flex footer-content-right">
+        <motion.div
+          className="flex footer-content-right"
+          initial={{ y: 1000 }}
+          whileInView={{
+            y: 0,
+            transition: {
+              type: "spring",
+              duration: 1,
+            },
+          }}
+        >
           <div>
             <h2>
               Available <br /> for projects
@@ -456,7 +467,7 @@ c49 -25 54 -68 15 -114 -43 -52 -104 -39 -104 22 0 31 37 107 52 107 5 0 22
             alt="Desktop set up"
             className="desktop-setup"
           />
-        </div>
+        </motion.div>
       </div>
       <div className="footer-bottom flex space-between">
         <p className="bluish"> © 2022 Amos. All rights reversed</p>

diff --git a/src/Components/Portfolio/PortFolio.jsx b/src/Components/Portfolio/PortFolio.jsx
@@ -6,6 +6,8 @@ import Project from "../Project/Project";
 import { ReadMore } from "../Start/StartPage";
 import ArrowWhite from "../../Assets/ArrowWhite.svg";
 import { Context } from "../../App";
+import { pageVariantsIn } from "../../Framer";
+import { motion } from "framer-motion";
 
 const PortFolio = () => {
   const { setSmallScreen } = useContext(Context);
@@ -15,7 +17,12 @@ const PortFolio = () => {
     document.title = "Projects";
   }, []);
   return (
-    <div className="portfolio">
+    <motion.div
+      className="portfolio"
+      variants={pageVariantsIn}
+      initial="initial"
+      animate="animate"
+    >
       <div className="dice">
         <img src={dice} alt="Dice" />
       </div>
@@ -31,7 +38,7 @@ const PortFolio = () => {
           <Project project={project} />
         ))}
       </div>
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/src/Components/Start/StartPage.jsx b/src/Components/Start/StartPage.jsx
@@ -11,6 +11,7 @@ import ManLookingAtComputer from "../../Assets/ManLookingAtComputer.jpg";
 import { Link } from "react-router-dom";
 import { motion, AnimatePresence, useAnimation } from "framer-motion";
 import { useInView } from "react-intersection-observer";
+import { pageVariantsIn } from "../../Framer";
 
 const StartPage = () => {
   const slide1 = {
@@ -58,10 +59,10 @@ const StartPage = () => {
     },
   };
 
+  const imageAnimation = useAnimation();
   const { ref, inView } = useInView();
   const whiteBannerAnimation = useAnimation();
   useEffect(() => {
-    console.log(inView);
     if (inView) {
       whiteBannerAnimation.start({
         x: 0,
@@ -78,8 +79,10 @@ const StartPage = () => {
     }
   }, [inView]);
 
+  const [isInView, setIsInView] = useState(false);
+
   return (
-    <div>
+    <motion.div variants={pageVariantsIn} initial="initial" animate="animate">
       <AnimatePresence>
         <motion.div className="slides" initial="initial" animate="animate">
           <div
@@ -157,46 +160,85 @@ const StartPage = () => {
       <div className="my-portfolio-services">
         <div>
           <IconRound />
-          <p className="my-portfolio">
+          <motion.p
+            className="my-portfolio"
+            initial={{ y: 100 }}
+            whileInView={{ y: 0 }}
+          >
             My Portfolio <br /> services
-          </p>
-          <img
+          </motion.p>
+          <motion.img
             src="https://images.pexels.com/photos/6340796/pexels-photo-6340796.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
             alt="People Looking at computer"
             className="people-looking-at-computer"
+            initial={{ x: "100vw" }}
+            animate={{ x: 0 }}
+            whileInView={{ x: 0 }}
           />
         </div>
-        <div className="flex space-between">
-          <div className="flex-v">
+        <motion.div className="flex space-between">
+          <motion.div
+            className="flex-v"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 1 }}
+          >
             <p className="service-number">01</p>
             <h2 className="service-title">Experience</h2>
             <p className="bluish">
               Experience is the best teacher they say. I have been in the web
               development industry for over 4 years and i have worked with a lot
               of clients. You want the best ? you`ve got the best.
             </p>
-          </div>
-          <div className="flex-v">
+          </motion.div>
+          <motion.div
+            className="flex-v"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 1 }}
+          >
             <p className="service-number">02</p>
             <h2 className="service-title">Quality Assurance</h2>
             <p className="bluish">
               Search Engine Optimization, Multiple device support, legacy
               browser support , Fast Loading Speeds, Data caching, you name it.
               I've got it all
             </p>
-          </div>
-          <div className="flex-v">
+          </motion.div>
+          <motion.div
+            className="flex-v"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 1 }}
+          >
             <p className="service-number">03</p>
             <h2 className="service-title">Freelance Work</h2>
             <p className="bluish">
               I also work online, all you need is send me an email and i will
               respond as soon as possible.
             </p>
-          </div>
-        </div>
+          </motion.div>
+        </motion.div>
       </div>
-      <div className="i-create-gold flex">
-        <img src={PharmaOne} alt="Pharmacy application" />
+      <motion.div
+        className="i-create-gold flex"
+        whileInView={() => setIsInView(true)}
+      >
+        <motion.img
+          src={PharmaOne}
+          alt="Pharmacy application"
+          initial={{ opacity: 0 }}
+          whileInView={{
+            opacity: 1,
+            transition: {
+              duration: 1,
+              type: "spring",
+            },
+          }}
+          whileHover={{
+            borderRadius: "5%",
+          }}
+        />
         <div>
           <h2>I create Api consuming web apps</h2>
           <h3>
@@ -220,8 +262,8 @@ const StartPage = () => {
             Arrow={Arrow}
           />
         </div>
-      </div>
-    </div>
+      </motion.div>
+    </motion.div>
   );
 };
 

diff --git a/src/Framer.js b/src/Framer.js
@@ -49,3 +49,13 @@ export const pathVariants = {
     },
   },
 };
+
+export const pageVariantsIn = {
+  initial: {
+    x: "100vw",
+  },
+  animate: {
+    x: 0,
+  },
+  when: "beforeChildren",
+};