Updated landing page

Author: gitJamoo

next-js-app/src/app/globals.css

@@ -24,3 +24,20 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+@keyframes gradient-animation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient-animation 3s ease infinite;
+}

next-js-app/src/app/page.tsx

@@ -15,19 +15,24 @@ export default function Home() {
       <main className="flex flex-col gap-y-6 row-start-2 items-center sm:items-start">
         <div className="flex flex-col gap-y-4 text-center sm:text-left">
           <h1 className="text-4xl font-bold">
-            Hello, I am James.
+            Hello, I am{" "}
+            <span className="inline-block bg-clip-text text-transparent bg-gradient-to-r from-[#D73F09] to-[#FDB813] transition-transform duration-300 ease-in-out hover:scale-110 hover:rotate-[-5deg] animate-gradient">
+              James
+            </span>
+            .
           </h1>
           <p className="text-lg max-w-xl">
             I am a Computer Science student focusing on Machine Learning with a
             background in Full Stack, ML/AI, and DevOps. I decided to make a
             portfolio page and create a unique portfolio experience.
           </p>
           <p className="text-xs max-w-xl text-gray-500">
-            The Wormhole is a unique browsing experience, where AI generates each
-            page being viewed. It has been fed information about me, and makes
-            each vist a one of a kind portfolio viewing experience. Take
-            everything with a grain of salt since it is AI generated. I encourage
-            you to play around wiht it, as this is an experiment. Enjoy, James.
+            The Wormhole is a unique browsing experience, where AI generates
+            each page being viewed. It has been fed information about me, and
+            makes each vist a one of a kind portfolio viewing experience. Take
+            everything with a grain of salt since it is AI generated. I
+            encourage you to play around wiht it, as this is an experiment.
+            Enjoy, James.
           </p>
         </div>
         <div className="flex flex-col gap-y-4 items-center sm:items-start">