minor changes and enhancement

codewithdev · codewithdev · commit 4e9e05856e17 · 2024-11-12T01:01:28.000+05:30
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^4.x.x",
+    "react-type-animation": "^3.2.0",
     "sanity": "^3.23.4",
     "sanity-plugin-markdown": "^3.0.1",
     "sharp": "^0.33.5",
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -8,6 +8,7 @@ import { motion, AnimatePresence, PanInfo } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { BsArrowLeftCircle, BsArrowRightCircle } from 'react-icons/bs';
 import { BsStackOverflow } from "react-icons/bs";
+import { TypeAnimation } from 'react-type-animation';
 
 import Container from 'components/Container';
 import avatar from 'public/headshot-dev.jpg';
@@ -150,7 +151,21 @@ export default function About() {
             <BsStackOverflow className='w-4 h-4 text-[#0077b5]'/>
             </Link>
           </div>
-          <p>Technical Writer and Open Source Developer</p>
+          <div className="h-12">
+            <TypeAnimation
+              sequence={[
+                'Technical Writer and Open Source Developer',
+                1000,
+                'Community Builder and Tech Speaker',
+                1000,
+                'Product Builder Enthusiast and a Teacher',
+              ]}
+              wrapper="p"
+              speed={50}
+              repeat={Infinity}
+              className="text-lg text-gray-800 dark:text-gray-200"
+            />
+          </div>
           <h3 className="mb-1">Work Experience</h3>
           <div className="relative h-[500px] md:h-[400px] w-full">
             <div className="absolute inset-0 flex items-center justify-between z-10 px-2">
diff --git a/yarn.lock b/yarn.lock
@@ -9352,6 +9352,11 @@ react-style-proptype@^3.2.2:
   dependencies:
     prop-types "^15.5.4"
 
+react-type-animation@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-type-animation/-/react-type-animation-3.2.0.tgz#6863d5d60e3beb237f2bd690cceb585402c47e6a"
+  integrity sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==
+
 react-use-measure@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz"
