added TypingEffect component

src/App.jsx

@@ -2,6 +2,7 @@ import { BrowserRouter } from "react-router-dom";
 
 import { About, Contact, Experience, Feedbacks, Hero, Navbar, Tech, Works, StarsCanvas, Footer } from "./components";
 import './App.css';
+import TypingEffect from "./components/TypingEffect";
 
 const App = () => {
   return (
@@ -16,8 +17,9 @@ const App = () => {
         <Tech />
         <Works />
         <Feedbacks />
-        <div className="wave"><p className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-3xl">Motion Graphics</p></div>
+        <div className="wave"><p className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-3xl"><TypingEffect /></p></div>
         <div className='relative z-0'>
+
           <Contact />
           <StarsCanvas />
           <Footer />

src/components/About.jsx

@@ -54,7 +54,7 @@ const About = () => {
         real-world problems.
       </motion.p>
       <div className="font-bold text-2xl flex justify-center">
-      <a href="https://utkarshchoudhary.s3.us-east-2.amazonaws.com/CV_Utkarsh_C.pdf?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEMb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCmFwLXNvdXRoLTEiRjBEAiBWqj9yEhyT97WS7bl0zzo9odgrHzmHY4BT0mxaApCF0wIgNwbSiXc0xXkzx92mxm05GFFenQfbyyt8WQyvAGtq7hoq5AIIXxAAGgwwMTIyMTI0OTE2OTYiDLuRUMsZBwatogc%2BzSrBAh3cc75FqEhii%2BHdub0msBOFhSoMlzgZhlD9qPys9DSkyuN854fN5WxY4lRpkn8XwyVjo0FWmQALUZr3L9cEH7Cl%2Bh7C7fn%2FC%2F8AlcaUFqeuXG4RVuZY8fHL7ddu8VkungX3%2B7ldGBCNGzD%2Fc8WE7tiHE5NJ97r8vTblH%2F5ko8kHgQQOKwAhiV174mebnqgm98v4yC0X1dfOxxEHCx84einPbb%2FCD8aJFF0CjYrJI%2FVKeb5Gy1FIKQe5XgovL79gMO1o1XGpvd2X59HM4lmIirApaW%2BzF4Ddh%2BJ666eDZNeR9eCDyLKl58Aq8vZFdGw2KyyUNgcARR2e0XH%2BLNnSsw9xZupWEeuALKc%2BOjk2NDOQh6Ar2s5t7VCK%2FgqsRUVxOfPo%2FtSuPgo4t5Qo%2B0jg9rUzyd9md7YIoESFe0KqOE6eXDD54ommBjq0Auh5rZEDav%2BjPwuRR%2F7ojh92cSAO7%2BcU0QNiNOb6xpHfhOoyyMRn3%2BaRw%2ByCnK%2Bz0f9p67KtfvXTCcjcvmm4%2FQ8CAR7Fs7o%2F24xT%2BODat5uXJ0TF5A9sXO%2FdsV3aK3KujnI7WX3u0%2F823drhcujimzMWlgeiP9plwQ%2Bz31Gn54SdMURwS8L9egyflT3sj2ARzVxxBHTgXBa2M6die5H2dyuCC6rZfa8xhRpxTjRJ0ayyqX6SGZQRRXc063YSAsPScaT1wC7xcUFL7xUW5ojtUVOVxa%2BnHLEwIUj9Oe9jcYczRNmkwSpXFUEC4Vx3xdtIY1ip7Tn8Nq%2FwoMi6eLeZwmuMyfvyD3ciIQekAME3l1TeGbU5%2FxTLTa4GwUFMj%2BDdoWmHO8gGLpBXOvlI5nyXgQeJ4PTF&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20230727T163603Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIAQFV7L2WYCCSW7TUK%2F20230727%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Signature=22affd666eca49a0828ac4ad011f94f651e6bdad5f2d1b1e02a6e3ba110c10c9" target="_blank">Click here to check out my Résumé!</a>
+      <a href="https://drive.google.com/file/d/1Drjepb4wOkJzn7hzAIHlWcKqf0gVeA0x/view?usp=sharing" target="_blank">Click here to check out my Résumé!</a>
       </div>
 
       <div className='mt-20 flex flex-wrap gap-10 flex justify-center'>

src/components/Footer.jsx

@@ -38,7 +38,7 @@ const Footer = () => {
               <a href="https://www.github.com/udogg" target="_blank" className="text-white text-center">github.com/UDogg</a>
             </div>
             <div className="flex flex-col items-center">
-              <h2>Last Updated: August 23, 2023</h2>
+              <h2>Last Updated: March 9, 2024</h2>
             </div>
             <div className="absolute bottom-0 left-0">
               <a href="https://www.youtube.com/@javascriptmastery" target="_blank"> Credit: Adrian -JavaScript Mastery</a>

src/components/TypingEffect.jsx

@@ -0,0 +1,53 @@
+// TypingEffect.jsx
+
+import React, { useEffect, useState } from 'react';
+
+const TypingEffect = () => {
+  const phrases = [
+    { text: 'student in Penn State University.', color: '#FFD700' }, // Gold
+    { text: 'full stack developer.', color: '#00BFFF' }, // DeepSkyBlue
+    { text: 'Web3.0 enthusiast.', color: '#32CD32' }, // LimeGreen
+    { text: 'systems designer.', color: '#FF4500' }, // OrangeRed
+    { text: 'cloud architecture enthusiast', color: '#008080' } // Teal
+  ];
+
+  const [index, setIndex] = useState(0);
+  const [subIndex, setSubIndex] = useState(0);
+  const [reverse, setReverse] = useState(false);
+  const [text, setText] = useState('');
+  const [color, setColor] = useState(phrases[0].color); // Initialize with the first color
+  const [speed, setSpeed] = useState(150);
+
+  useEffect(() => {
+    if (index === phrases.length) setIndex(0);
+    const fullText = 'I am a ' + phrases[index].text;
+    const lastIndex = fullText.length - 1;
+
+    if (subIndex === lastIndex + 1 && !reverse) {
+      setTimeout(() => setReverse(true), 500); // Delay before starting to delete
+      return;
+    }
+
+    if (subIndex === 'I am a '.length && reverse) {
+      setTimeout(() => {
+        setReverse(false);
+        const nextIndex = (index + 1) % phrases.length;
+        setIndex(nextIndex);
+        setColor(phrases[nextIndex].color); // Update color for next phrase
+        setText('I am a '); // Reset text to only include the prefix
+      }, 500); // Delay before typing the next phrase
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setText((prev) => (reverse ? prev.slice(0, -1) : prev + fullText[subIndex]));
+      setSubIndex((prev) => prev + (reverse ? -1 : 1));
+    }, speed);
+
+    return () => clearTimeout(timeout);
+  }, [subIndex, index, reverse, phrases.length]);
+
+  return <p className="text-3xl" style={{ color: color }}>{text}</p>;
+};
+
+export default TypingEffect;