UI improvements

Author: standleypg

bun.lock

@@ -13,27 +13,26 @@
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "framer-motion": "^12.38.0",
-    "lucide-react": "^0.577.0",
+    "lucide-react": "^1.8.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "three": "^0.183.2",
+    "three": "^0.184.0",
     "to-words": "^5.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/three": "^0.183.1",
+    "@tailwindcss/vite": "^4.1.0",
     "@vitejs/plugin-react": "^6.0.1",
-    "autoprefixer": "^10.4.27",
     "eslint": "^10.1.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.5.3",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.3.0",
-    "vite": "^8.0.1"
+    "vite": "^8.0.9"
   }
 }

package.json

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
-import { Linkedin, FileText, ChevronDown } from "lucide-react";
+import { FileText, ChevronDown } from "lucide-react";
 import { personalInfo } from "../data/personalInfo";
 import GitHubIcon from "./icons/GitHub";
+import LinkedInIcon from "./icons/LinkedInIcon";
 
 const Hero = () => {
   const [typedText, setTypedText] = useState("");
@@ -27,7 +28,7 @@ const Hero = () => {
         if (typedText.length === 0) {
           setIsDeleting(false);
           setCurrentTextIndex(
-            (currentTextIndex + 1) % personalInfo.roles.length
+            (currentTextIndex + 1) % personalInfo.roles.length,
           );
         }
       }
@@ -38,7 +39,7 @@ const Hero = () => {
 
   const handleNavClick = (
     e: React.MouseEvent<HTMLAnchorElement>,
-    href: string
+    href: string,
   ) => {
     e.preventDefault();
     const element = document.querySelector(href);
@@ -55,34 +56,34 @@ const Hero = () => {
     >
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex flex-col items-center text-center">
-          <div className="w-48 h-48 md:w-56 md:h-56 rounded-full overflow-hidden border-4 border-white dark:border-gray-800 shadow-xl mb-8">
+          <div className="w-36 h-36 sm:w-48 sm:h-48 md:w-56 md:h-56 rounded-full overflow-hidden border-4 border-white dark:border-gray-800 shadow-xl mb-6 sm:mb-8">
             <img
               src={personalInfo.avatar}
               alt={personalInfo.name}
               className="w-full h-full object-cover"
             />
           </div>
 
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-4">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-gray-900 dark:text-white mb-3 sm:mb-4">
             Hello, I'm{" "}
             <span className="bg-gradient-to-r from-blue-600 to-teal-500 bg-clip-text text-transparent">
               {personalInfo.name}
             </span>
           </h1>
 
-          <div className="h-8 md:h-10 mb-6">
-            <h2 className="text-xl md:text-2xl lg:text-3xl font-medium text-gray-700 dark:text-gray-300">
+          <div className="h-8 md:h-10 mb-4 sm:mb-6">
+            <h2 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-medium text-gray-700 dark:text-gray-300">
               {typedText}
               <span className="animate-blink">|</span>
             </h2>
           </div>
 
-          <p className="max-w-2xl text-lg text-gray-600 dark:text-gray-400 mb-10">
+          <p className="max-w-2xl text-base sm:text-lg text-gray-600 dark:text-gray-400 mb-8 sm:mb-10">
             I enjoy seeking out creative solutions to complex problems and
             building things that empower others to do the same.
           </p>
 
-          <div className="flex flex-wrap justify-center gap-4 mb-12">
+          <div className="flex flex-wrap justify-center gap-3 sm:gap-4 mb-8 sm:mb-12">
             <a
               href="#contact"
               onClick={(e) => handleNavClick(e, "#contact")}
@@ -99,7 +100,7 @@ const Hero = () => {
             </a>
           </div>
 
-          <div className="flex space-x-6 mb-12">
+          <div className="flex space-x-6 mb-8 sm:mb-12">
             {personalInfo.socials.map((social) => (
               <a
                 key={social.platform}
@@ -110,7 +111,7 @@ const Hero = () => {
                 aria-label={`${social.platform} Profile`}
               >
                 {social.platform === "GitHub" && <GitHubIcon size={24} />}
-                {social.platform === "LinkedIn" && <Linkedin size={24} />}
+                {social.platform === "LinkedIn" && <LinkedInIcon size={24} />}
                 {social.platform === "Resume" && <FileText size={24} />}
               </a>
             ))}

postcss.config.js

@@ -1,23 +1,31 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Menu, X, Moon, Sun } from "lucide-react";
 import { useTheme } from "../context/ThemeContext";
 import { personalInfo } from "../data/personalInfo";
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const lastScrollY = useRef(0);
   const { isDarkMode, toggleTheme } = useTheme();
 
   useEffect(() => {
     const handleScroll = () => {
-      if (window.scrollY > 50) {
-        setScrolled(true);
-      } else {
-        setScrolled(false);
+      const y = window.scrollY;
+      setScrolled(y > 50);
+      const delta = y - lastScrollY.current;
+      // Ignore tiny jitter from momentum / rubber-banding on mobile.
+      if (Math.abs(delta) < 6) return;
+      if (y > 80 && delta > 0) {
+        setHidden(true);
+      } else if (delta < 0) {
+        setHidden(false);
       }
+      lastScrollY.current = y;
     };
 
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
@@ -48,6 +56,8 @@ const Navbar = () => {
   return (
     <nav
       className={`fixed w-full z-50 transition-all duration-300 ${
+        hidden && !isOpen ? "-translate-y-full" : "translate-y-0"
+      } ${
         scrolled
           ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-md py-2"
           : "bg-transparent py-4"

src/components/Hero.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Linkedin } from "lucide-react";
 import GitHubIcon from "./GitHub";
 import TwitterIcon from "./TwitterIcon";
+import LinkedInIcon from "./LinkedInIcon";
 
 interface SocialIconProps {
   platform: string;
@@ -13,7 +13,7 @@ const SocialIcon: React.FC<SocialIconProps> = ({ platform, size = 20 }) => {
     case "GitHub":
       return <GitHubIcon size={size} />;
     case "LinkedIn":
-      return <Linkedin size={size} />;
+      return <LinkedInIcon size={size} />;
     case "Twitter":
       return <TwitterIcon size={size} />;
     default:

src/components/Navbar.tsx

@@ -1,24 +1,39 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+
+  --animate-blink: blink 1s step-end infinite;
+  --animate-sparkle: sparkle 1s forwards;
+
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+  }
+
+  @keyframes sparkle {
+    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
+    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+  }
+}
 
 html, body {
   margin: 0;
   padding: 0;
   width: 100%;
-  height: 100%;
   overflow-x: hidden;
   scroll-behavior: smooth;
 }
 
 body {
   min-height: 100vh;
   position: relative;
-  overflow-y: auto;
 }
 
 #root {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-}
+}

src/components/icons/SocialIcon.tsx

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   optimizeDeps: {
     exclude: ['lucide-react'],
   },