added a conveyor belt to the app

src/App.jsx

@@ -3,6 +3,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";
+import PhraseConveyor from "./components/PhraseConveyor";
 
 const App = () => {
   return (
@@ -16,6 +17,7 @@ const App = () => {
         <Experience />
         <Tech />
         <Works />
+        <PhraseConveyor />
         <Feedbacks />
         <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'>

src/components/PhraseConveyor.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const phrases = [
+  "Check",
+  "out",
+  "my",
+  "GitHub",
+  "profile",
+  "for",
+  "more",
+  "exciting",
+  "projects!",
+];
+
+const githubProfileUrl = "https://github.com/UDogg"; // Your GitHub profile URL
+
+const PhraseConveyor = () => {
+  return (
+    <div className="overflow-hidden relative w-full h-10">
+      <a
+        href={githubProfileUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="animate-conveyor whitespace-nowrap block"
+      >
+        {phrases.map((phrase, index) => (
+          // Use `React.Fragment` to avoid adding unnecessary wrappers that might break the layout
+          // `key` is necessary but React.Fragment doesn't add actual DOM elements
+          <React.Fragment key={index}>
+            <span className="mx-4 inline-block">{phrase}</span>
+          </React.Fragment>
+        ))}
+      </a>
+    </div>
+  );
+};
+
+export default PhraseConveyor;

tailwind.config.cjs

@@ -21,6 +21,15 @@ module.exports = {
       backgroundImage: {
         "hero-pattern": "url('/src/assets/herobg.png')",
       },
+      keyframes: {
+        conveyor: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(-100%)' },
+        },
+      },
+      animation: {
+        conveyor: 'conveyor 20s linear infinite',
+      },
     },
   },
   plugins: [],