Merge pull request #41 from gisachris/development

Development

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@emailjs/browser": "^3.11.0",
+    "framer-motion": "^10.16.4",
     "nuka-carousel": "^6.0.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/components/home.jsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-scroll';
+import AnimatedText from './shared/animatedText';
 import emblemOne from '/icons/emblem-one.png';
 import emblemTwo from '/icons/emblem-two.png';
 import emblemThree from '/icons/emblem-three.png';
@@ -47,7 +48,9 @@ const HomePage = () => {
           <div className="textHolder">
             <span className="creative">Creative Designer</span>
             <span className="and">&</span>
-            <span className='stack'>FullStack Developer</span>
+            <div className="stack">
+              <AnimatedText />
+            </div>
           </div>
         </div>
         <div className="headerpart3">

src/components/shared/animatedText.jsx

@@ -0,0 +1,43 @@
+import { useState, useRef, useEffect } from 'react';
+import '../../styles/css/aniText.css';
+
+const AnimatedText = () => {
+  const titles = ['Web Developer', 'Api Developer', 'Backend Engineer', 'FrontEnd Developer', 'Rails Enthusiast', 'Rails Developer', 'Web Enthusiast',  'FullStack Developer'];
+  const textHolderRef = useRef();
+  const textRef = useRef();
+  const [index, setIndex] = useState(0);
+  const [text1, setText1] = useState(titles[0]);
+
+  useEffect(() => {
+    const locations = ['top', 'right', 'bottom', 'left'];
+    const currentLocation = locations[Math.floor(Math.random() * 4)];
+
+    if (index < titles.length) {
+      setText1(titles[index]);
+      textHolderRef.current.classList.add(`style-border-${currentLocation}`);
+      textRef.current.classList.add(`drop-text-from-${currentLocation}`);
+
+      setTimeout(() => {
+        textHolderRef.current.classList.remove(`style-border-${currentLocation}`);
+        textRef.current.classList.remove(`drop-text-from-${currentLocation}`);
+        setIndex((prevIndex) => prevIndex + 1);
+      }, 3500);
+    }
+
+    if(index === titles.length - 1){
+      setText1(titles[index]);
+      textHolderRef.current.classList.add('holderStay');
+      textRef.current.classList.add('textStay');
+    }
+  }, [index]);
+
+  return (
+    <div className={`animatedTextHolder`} ref={textHolderRef}>
+      <span className={`textFirst`} ref={textRef}>
+        {text1}
+      </span>
+    </div>
+  );
+};
+
+export default AnimatedText;