feat: UI enhancements

Author: graceyuen

app/globals.css

@@ -73,14 +73,24 @@
     animation: spin 20s linear infinite;
   }
 
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  .animate-wave {
+    animation: wave-hand 2s infinite;
+    transform-origin: 70% 70%;
+    display: inline-block;
   }
 }
 
+@keyframes wave-hand {
+  0% { transform: rotate(0deg); }
+  10% { transform: rotate(14deg); }
+  20% { transform: rotate(-8deg); }
+  30% { transform: rotate(14deg); }
+  40% { transform: rotate(-4deg); }
+  50% { transform: rotate(10deg); }
+  60% { transform: rotate(0deg); }
+  100% { transform: rotate(0deg); }
+}
+
 html {
   scroll-behavior: smooth;
 }

app/page.tsx

@@ -180,7 +180,14 @@ export default function Portfolio() {
                 whiteSpace: "pre-line",
               }}
             >
-              Hey👋, I'm{" "}
+              Hey
+              <span
+                className="inline-block origin-[70%_70%] animate-wave"
+                role="img"
+                aria-label="waving hand"
+              >
+                👋
+              </span>, I'm{" "}
               <span className="relative inline-block">
                 <span className="text-primary">Grace Yuen</span>
               </span>
@@ -192,6 +199,7 @@ export default function Portfolio() {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4 items-center justify-center mb-2"
             >
+              
               <Button
                 size="lg"
                 className="hero-btn min-w-[160px] dark:bg-primary/95 dark:hover:bg-primary/100"
@@ -206,7 +214,7 @@ export default function Portfolio() {
               <Button
                 variant="outline"
                 size="lg"
-                className="hero-btn min-w-[160px] flex items-center justify-center group border-2 border-primary dark:border-primary/80 dark:bg-gray-900/95"
+                className="hero-btn min-w-[160px] flex items-center justify-center group border-2 border-primary dark:border-primary/80 dark:bg-gray-900/95 dark:hover:bg-gray-800"
                 onClick={async (e) => {
                   if (isMobile) {
                     // Animate the arrow rotation before scrolling
@@ -247,6 +255,48 @@ export default function Portfolio() {
               </div>
             </motion.div> */}
           </motion.div>
+
+          {/* Animated Scroll Down Hint */}
+          <AnimatePresence>
+            {!showBackToTop && (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{ duration: 0.8, delay: 1 }}
+                className="absolute inset-x-0 mx-auto bottom-2 sm:bottom-8 md:bottom-12 flex flex-col items-center z-20 select-none w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg px-2"
+                style={{ left: '0', right: '0', pointerEvents: 'auto', cursor: 'pointer' }}
+                onClick={() => {
+                  const aboutSection = document.getElementById('about');
+                  if (aboutSection) {
+                    aboutSection.scrollIntoView({ behavior: 'smooth' });
+                  }
+                }}
+                tabIndex={0}
+                aria-label="Scroll down to About section"
+                role="button"
+              >
+                <span className="text-muted-foreground text-sm mb-2 animate-bounce bg-background/80 px-2 rounded">
+                  Scroll down
+                </span>
+                <svg
+                  className="w-6 h-6 text-muted-foreground animate-bounce"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </motion.div>
+            )}
+          </AnimatePresence>
+          {/* End Animated Scroll Down Hint */}
         </motion.section>
 
         {/* About Section */}
@@ -381,7 +431,6 @@ export default function Portfolio() {
           >
             Let's Get in Touch
           </motion.h2>
-
           <ContactCard />
         </section>
 

styles/globals.css

@@ -94,16 +94,13 @@ body {
 }
 
 .hero-btn, button.hero-btn {
-  /* Stronger font and size for hero buttons */
   font-size: 1.15rem !important;
   font-weight: 700 !important;
   letter-spacing: 0.01em !important;
   box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06) !important;
   border-width: 2px !important;
   border-radius: 0.75rem !important;
   transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s !important;
-}
-.hero-btn, button.hero-btn {
   background: linear-gradient(90deg, hsl(var(--primary) / 0.92), hsl(var(--primary) / 0.80)) !important;
   color: hsl(var(--primary-foreground)) !important;
   border-color: hsl(var(--primary)) !important;