Some small changes and cleanup

itsmichaelwest · Nov 20, 2023 · 96b8cb5 · 96b8cb5 · vercel · Nov 20, 2023
1 parent 7711c8d
commit 96b8cb5
Show file tree

Hide file tree

Showing 13 changed files with 1,258 additions and 754 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,3 @@ This site is built with Next.js. You'll need [Node.js](https://nodejs.org/downlo
 2. Run `npm install` to install dependencies.
 3. To preview the site, run `npm run dev` and then go to `localhost:3000`.
 4. To build a production deploy, run `npm run build` then `npm run start` and go to `localhost:3000`.
-
-### Fonts looking different?
-
-The live website uses font files from Adobe Fonts. Because they are only licensed to me, through my Creative Cloud account, I cannot include them in this repository. Instead, the fonts are injected automatically at build time on Netlify.
diff --git a/components/IndexHero.tsx b/components/IndexHero.tsx
@@ -6,7 +6,7 @@ const IndexHero = () => (
         <h1 className="text-7xl sm:text-8xl font-emoji max-w-max">
             👋
         </h1>
-        <h1 className="text-5xl sm:text-6xl font-display font-semibold my-8 sm:my-12 text-gray-900 dark:text-gray-100">
+        <h1 className="text-5xl sm:text-6xl font-display font-semibold tracking-tight my-8 sm:my-12 text-gray-900 dark:text-gray-100">
             Designer. Developer.
         </h1>
         <SocialIcons/>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -8,6 +8,7 @@ const Layout = ({ children }) => (
             <link rel="icon" href="/favicon.ico" />
             <link rel="me" href="https://mastodon.social/@michaelwest" />
             <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <meta name="view-transition" content="same-origin" />
         </Head>
         <Header />
         <main className="max-w-screen-2xl w-auto px-8 md:px-16 mx-auto overflow-hidden">

diff --git a/components/WorkBlock.tsx b/components/WorkBlock.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
+import { AnimatePresence, motion } from 'framer-motion'
 
 interface WorkBlockProps {
     title: string
@@ -10,23 +11,40 @@ interface WorkBlockProps {
     imageAlt?: string
 }
 
-const WorkBlock: React.FC<WorkBlockProps> = ({ title, url, description, image, imageAlt }) => (
-    <section className="relative" style={{ aspectRatio: "1" }}>
-        <Link href={url} className="absolute inset-0 group w-full h-full">
-            <span className="sr-only">
-                {title}
-            </span>
-            <Image src={image} alt={imageAlt} width={1500} height={1500} className="w-full h-full object-cover" />
-            <div className="absolute inset-0 p-8 md:p-16 z-10 bg-gray-100 dark:bg-gray-900 opacity-0 group-hover:opacity-100 transition-opacity">
-                <h2 className="font-display font-semibold text-gray-900 dark:text-gray-100 text-4xl xl:text-6xl">
-                    {title}
-                </h2>
-                <p className="font-text text-gray-600 dark:text-gray-500 xl:text-xl max-w-prose mt-4">
-                    {description}
-                </p>
-            </div>
-        </Link>
-    </section>
-)
+const WorkBlock: React.FC<WorkBlockProps> = ({ title, url, description, image, imageAlt }) => {
+    const [hover, setHover] = useState(false)
+
+    return (
+        <div
+            className="relative"
+            style={{ aspectRatio: "1" }}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}>
+                <Link href={url} className="absolute inset-0 w-full h-full">
+                    <span className="sr-only">
+                        {title}
+                    </span>
+                    <Image src={image} alt={imageAlt} width={1500} height={1500} className="w-full h-full object-cover" />
+                    <AnimatePresence>
+                        { hover && 
+                            <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                transition={{ duration: 0.1 }}
+                                className="absolute inset-0 p-8 md:p-16 z-10 bg-gray-100/80 dark:bg-gray-900/80 backdrop-blur">
+                                    <h2 className="font-display font-semibold tracking-tight text-gray-900 dark:text-gray-100 text-4xl xl:text-6xl">
+                                        {title}
+                                    </h2>
+                                    <p className="font-text text-gray-600 dark:text-gray-500 xl:text-xl max-w-prose mt-4">
+                                        {description}
+                                    </p>
+                            </motion.div>
+                        }
+                    </AnimatePresence>
+                </Link>
+        </div>
+    )
+}
 
 export default WorkBlock