components/intro-promo.tsx

@@ -60,7 +60,7 @@ export default function IntroPromo({
 
   return (
     <motion.section
-      className="relative container min-h-[100svh] grid grid-cols-12 gap-6 place-content-between md:items-end md:place-content-end pt-[25vh] pb-10"
+      className="relative container min-h-[100svh] grid grid-cols-12 gap-6 place-content-between md:items-end md:place-content-end pt-[25vh] pb-10 overflow-hidden"
       style={{ opacity: fade }}
     >
       <div className="grid col-span-12 md:col-span-8">

components/preview.tsx

@@ -11,6 +11,7 @@ import ContentfulImage from '../lib/contentful-image'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useWindowSize } from '@uidotdev/usehooks'
+import { ArrowRight } from 'lucide-react'
 
 export default function Preview({
   heading,
@@ -31,6 +32,7 @@ export default function Preview({
   const { scrollYProgress: pageScrollProgress } = useScroll()
 
   //Navigate to the next project once scrolled to the bottom (only on desktop screen sizes)
+  /*
   const router = useRouter()
   const screen = useWindowSize()
 
@@ -49,15 +51,19 @@ export default function Preview({
       screen.width >= 768 &&
       handleLinkNavigation(url)
   })
+  */
+
+  // Prefetch the next project (only on desktop screen sizes)
+  const router = useRouter()
+  const screen = useWindowSize()
 
-  // Prefetch the next project once scrolled to the middle of the screen (only on desktop screen sizes)
   function handlePrefetch(url: string) {
     router.prefetch(url)
   }
   const [isPrefetched, setIsPrefetched] = useState(false)
   useMotionValueEvent(scrollYProgress, 'change', (latest) => {
     if (
-      latest >= 0.5 &&
+      latest >= 0.1 &&
       screen?.width &&
       screen.width >= 768 &&
       !isPrefetched
@@ -68,8 +74,8 @@ export default function Preview({
   })
 
   // Subtle visual effect on scroll
-  const slide = useTransform(scrollYProgress, [0, 0.5], ['0%', '-100%'])
-  const slide2 = useTransform(scrollYProgress, [0, 0.5], ['200%', '-100%'])
+  const slide = useTransform(scrollYProgress, [0, 0.6], ['0%', '-100%'])
+  const slide2 = useTransform(scrollYProgress, [0, 0.6], ['200%', '-100%'])
 
   return (
     <>
@@ -80,21 +86,25 @@ export default function Preview({
               Next up
             </motion.span>
             <motion.span style={{ y: slide2 }} className="block absolute">
-              <span className="hidden md:block">Keep scrolling</span>
-              <span className="block md:hidden">Click below</span>
+              <span className="block">Click to view</span>
             </motion.span>
           </div>
-          <motion.div className="text-4xl md:text-6xl font-extrabold tracking-tight">
+          <motion.div className="text-4xl md:text-6xl font-extrabold tracking-tight group">
             <Link ref={ref} href={url}>
               {heading}
+              <ArrowRight
+                size={40}
+                strokeWidth={2.5}
+                className="text-muted-foreground md:group-hover:translate-x-1 transition-all duration-500 inline-block align-middle ml-2 md:ml-4 relative -top-[1px]"
+              />
             </Link>
           </motion.div>
         </div>
       </div>
       <Link
         ref={ref}
         href={url}
-        className="relative z-20 h-[50vh] md:h-[100svh] grid items-center overflow-hidden"
+        className="md:hover:opacity-80 transition-all duration-300 relative z-20 h-[50vh] md:h-[50svh] grid items-center overflow-hidden"
       >
         <div className="absolute inset-0 bg-black" />
         <motion.div className="absolute inset-0">

package.json

@@ -2,7 +2,7 @@
   "name": "rw",
   "description": "Ryan Wiemer's online portfolio",
   "license": "UNLICENSED",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "author": "Ryan Wiemer <ryan@ryanwiemer.com>",
   "keywords": [
     "rw"
@@ -18,44 +18,43 @@
     "lint": "next lint ."
   },
   "dependencies": {
-    "@contentful/rich-text-react-renderer": "^15.19.0",
-    "@contentful/rich-text-types": "^16.2.1",
+    "@contentful/rich-text-react-renderer": "^15.22.1",
+    "@contentful/rich-text-types": "^16.6.1",
     "@plaiceholder/next": "^3.0.0",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@tailwindcss/typography": "0.5.10",
-    "@types/node": "^20.10.3",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@tailwindcss/typography": "0.5.13",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vercel/analytics": "^1.1.1",
-    "@vercel/speed-insights": "^1.0.0",
-    "autoprefixer": "10.4.16",
+    "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.0.12",
+    "autoprefixer": "10.4.19",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "date-fns": "2.30.0",
-    "framer-motion": "^10.16.15",
-    "lucide-react": "^0.294.0",
-    "next": "14.0.4",
+    "clsx": "^2.1.1",
+    "date-fns": "3.6.0",
+    "framer-motion": "^11.2.13",
+    "lucide-react": "^0.401.0",
+    "next": "14.2.4",
     "next-sitemap": "^4.2.3",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.3.0",
     "plaiceholder": "^3.0.0",
-    "postcss": "8.4.32",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-wrap-balancer": "^1.1.0",
-    "sharp": "^0.32.6",
-    "tailwind-gradient-mask-image": "^1.1.0",
-    "tailwind-merge": "^2.1.0",
-    "tailwindcss": "^3.3.6",
+    "postcss": "8.4.39",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sharp": "0.32.6",
+    "tailwind-gradient-mask-image": "^1.2.0",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-inner-border": "^0.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.5.3"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "eslint": "^8.55.0",
-    "eslint-config-next": "^14.0.4",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "eslint": "^9.6.0",
+    "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
-    "prettier": "^3.1.0"
+    "prettier": "^3.3.2"
   }
 }