Skip to content

Commit

Permalink
Updates deps and modify next project preview (#39)
Browse files Browse the repository at this point in the history 
* Updates deps
* Modify next project preview
  • Loading branch information
@ryanwiemer
ryanwiemer authored Jul 8, 2024
1 parent d3e8b86 commit d1997dd
Show file tree
Hide file tree
Showing 3 changed files with 560 additions and 859 deletions.
26 changes: 18 additions & 8 deletions components/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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()
Expand All @@ -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
Expand All @@ -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 (
<>
Expand All @@ -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">
Expand Down
56 changes: 28 additions & 28 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "rw",
"description": "Ryan Wiemer's online portfolio",
"license": "UNLICENSED",
"version": "3.0.3",
"version": "3.0.4",
"author": "Ryan Wiemer <ryan@ryanwiemer.com>",
"keywords": [
"rw"
Expand All @@ -18,43 +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.11.5",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@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.2",
"@vercel/speed-insights": "^1.0.5",
"autoprefixer": "10.4.17",
"@vercel/analytics": "^1.3.1",
"@vercel/speed-insights": "^1.0.12",
"autoprefixer": "10.4.19",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"date-fns": "3.3.0",
"framer-motion": "^10.18.0",
"lucide-react": "^0.314.0",
"next": "14.1.0",
"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.33",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"postcss": "8.4.39",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"sharp": "0.32.6",
"tailwind-gradient-mask-image": "^1.1.0",
"tailwind-merge": "^2.2.0",
"tailwindcss": "^3.4.1",
"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.19.0",
"eslint": "^8.56.0",
"eslint-config-next": "^14.1.0",
"@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.2.4"
"prettier": "^3.3.2"
}
}
Loading

0 comments on commit d1997dd

Please sign in to comment.