update homepage

package.json

@@ -13,6 +13,7 @@
   "license": "ISC",
   "dependencies": {
     "@styled-system/css": "^5.1.5",
+    "framer-motion": "^2.9.5",
     "glob": "^7.1.6",
     "gray-matter": "^4.0.2",
     "mdi-react": "^7.4.0",

pages/index.tsx

@@ -1,54 +1,28 @@
+import glob from "glob"
 import { useEffect, useState } from "react"
 import { GetStaticProps } from "next"
-import glob from "glob"
+import Link from "next/link"
+import { motion, useTransform, useSpring } from "framer-motion"
 import { getMdxFile } from "@utils"
 import Container from "@components/container"
 import Box from "@components/box"
 import useWindowSize from "@hooks/useWindowResize"
 
-function Device({ src, ...props }: any) {
-  useEffect(() => {}, [])
-  return (
-    <Box
-      {...props}
-      as="figure"
-      sx={{
-        position: "relative",
-        borderRadius: "1rem",
-        bg: "accent",
-        paddingTop: "180%",
-        height: 0,
-        width: "100%",
-        overflow: "hidden",
-        transform: "rotateX(5deg) scale(0.85)",
-        transformStyle: "preserve-3d",
-      }}
-    >
-      <Box
-        as="iframe"
-        frameBorder="0"
-        src={src}
-        sx={{
-          position: "absolute",
-          left: "0",
-          top: "0",
-          width: "100%",
-          height: "100%",
-        }}
-      />
-    </Box>
-  )
-}
-
 export const getStaticProps: GetStaticProps = async function () {
-  const postFiles = glob.sync("./content/posts/*.mdx")
+  const postFiles = glob.sync("./content/projects/*.mdx")
   const playgroundFiles = glob.sync("./content/playground/*.mdx")
-  const posts = getMdxFile(postFiles)
+  const projects = getMdxFile(postFiles)
   const playground = getMdxFile(playgroundFiles)
-  return { props: { posts, playground } }
+  return {
+    props: {
+      projects: projects.map(({ data, slug }) => ({ ...data, slug })),
+      playground,
+    },
+  }
 }
 
-export default function Homepage({ posts, playground }) {
+export default function Homepage({ projects, playground }) {
+  console.log(projects)
   const [activeProject, setActive] = useState(0)
   const { width } = useWindowSize()
   const isMobile = width > 750
@@ -134,9 +108,97 @@ export default function Homepage({ posts, playground }) {
           </Box>
         </Box>
       </Container>
-      <Container as="section" sx={{ mt: "4rem" }}>
-        <Box as="h3">Projects</Box>
+      <Container as="section" sx={{ mt: "4rem", display: "grid", gap: "2rem" }}>
+        <Box as="h3" sx={{ fontSize: "subtitle" }}>
+          Selected Work
+        </Box>
+        {projects.map((project, idx) => (
+          <ProjectLink project={project} key={project.slug} />
+        ))}
       </Container>
     </Box>
   )
 }
+
+function Device({ src, ...props }: any) {
+  const mouseX = useSpring(0)
+  const mouseY = useSpring(0)
+  const x = useTransform(mouseX, [0, 600], [-10, 10])
+  const y = useTransform(mouseY, [0, 400], [5, -5])
+  function handleMouseMove({ clientX, clientY }) {
+    mouseX.set(clientX)
+    mouseY.set(clientY)
+  }
+  useEffect(() => {
+    document.body.addEventListener("mousemove", handleMouseMove)
+    return () => document.body.removeEventListener("mousemove", handleMouseMove)
+  }, [])
+  return (
+    <Box
+      {...props}
+      as={motion.figure}
+      initial={{ scale: 0.8 }}
+      style={{
+        rotateX: y,
+        rotateY: x,
+      }}
+      sx={{
+        position: "relative",
+        borderRadius: "1rem",
+        bg: "accent",
+        paddingTop: "180%",
+        height: 0,
+        width: "100%",
+        overflow: "hidden",
+        transformStyle: "preserve-3d",
+        boxShadow: "0 24px 24px -24px rgba(0,0,0,0.24)",
+      }}
+    >
+      <Box
+        as="iframe"
+        frameBorder="0"
+        src={src}
+        sx={{
+          position: "absolute",
+          left: "0",
+          top: "0",
+          width: "100%",
+          height: "100%",
+        }}
+      />
+    </Box>
+  )
+}
+
+type ProjectLinkProps = {
+  project: any
+}
+
+function ProjectLink({ project }: ProjectLinkProps) {
+  return (
+    <Link href={project.slug}>
+      <Box
+        as="article"
+        sx={{
+          p: "2rem",
+          mx: "-2rem",
+          transition: "200ms",
+          cursor: "pointer",
+          borderRadius: "0.5rem",
+          "&:hover": {
+            bg: "accent",
+            color: "secondaryFont",
+            transform: "translateY(-0.5rem) scale(1.025)",
+          },
+        }}
+      >
+        <Box as="h3" sx={{ fontSize: "title" }}>
+          {project.title}
+        </Box>
+        <Box as="p" sx={{ mt: "1rem" }}>
+          {project.summary}
+        </Box>
+      </Box>
+    </Link>
+  )
+}

pages/posts/[slug].tsx → pages/projects/[slug].tsx

@@ -6,8 +6,8 @@ import renderToString from "next-mdx-remote/render-to-string"
 import Container from "@components/container"
 
 export const getStaticPaths: GetStaticPaths = async function () {
-  const paths = glob.sync("./content/posts/*.mdx").map((file) => ({
-    params: { slug: formatPath(file).replace(/\/posts\//, "") },
+  const paths = glob.sync("./content/projects/*.mdx").map((file) => ({
+    params: { slug: formatPath(file).replace(/\/projects\//, "") },
   }))
   return {
     fallback: false,
@@ -21,13 +21,13 @@ export const getStaticProps: GetStaticProps = async function ({
   params: { slug },
 }) {
   const [{ content: postContent, data: frontMatter }] = getMdxFile([
-    `./content/posts/${slug}.mdx`,
+    `./content/projects/${slug}.mdx`,
   ])
   const mdx = await renderToString(postContent)
   return { props: { mdx, frontMatter } }
 }
 
-export default function PostPage({ mdx, frontMatter }) {
+export default function ProjectPage({ mdx, frontMatter }) {
   console.log(frontMatter)
   const content = hydrate(mdx)
   return <Container>{content}</Container>

src/components/base.js

@@ -1,5 +1,4 @@
 import { createGlobalStyle, css } from "styled-components"
-import { color } from "styled-system"
 
 const fontSizes = {
   small: "1rem",
@@ -50,9 +49,36 @@ colors.modes = {
 }
 
 const lineHeights = {
-  short: 1.25,
-  normal: 1.5,
-  long: 2,
+  heading: 1.25,
+  body: 1.5,
+  small: 2,
+}
+
+const text = {
+  body: {
+    lineHeight: "body",
+    fontSize: "body",
+  },
+  small: {
+    lineHeight: "small",
+    fontSize: "small",
+  },
+  subtitle: {
+    lineHeight: "heading",
+    fontSize: "subtitle",
+  },
+  title: {
+    lineHeight: "heading",
+    fontSize: "title",
+  },
+  headline: {
+    lineHeight: "heading",
+    fontSize: "headline",
+  },
+  hero: {
+    lineHeight: "heading",
+    fontSize: "hero",
+  },
 }
 
 const breakPoints = ["40rem", "60rem", "80rem", "100rem", "120rem"]
@@ -72,6 +98,7 @@ export const theme = {
     black: 800,
   },
   lineHeights,
+  text,
   space: [0, 8, 16, 24, 32, 40, 48, 56, 64, 72],
 }
 
@@ -164,7 +191,7 @@ export default createGlobalStyle(
     }
     body {
       font-size: ${fontSizes.body};
-      line-height: ${lineHeights.normal};
+      line-height: ${lineHeights.body};
       font-family: ${fonts.body};
       background: ${colors.background};
       color: ${colors.font};
@@ -175,7 +202,7 @@ export default createGlobalStyle(
     h3,
     h4,
     h5 {
-      line-height: ${lineHeights.short};
+      line-height: ${lineHeights.heading};
     }
     h1 {
       font-size: ${fontSizes.hero};

src/components/box.tsx

@@ -11,7 +11,16 @@ import {
 } from "styled-system"
 import css from "@styled-system/css"
 
-const sx = ({ sx = {} }: any) => css(sx)
+const sx = ({ sx = {} }: any) => {
+  const { text, ...styleProps } = sx
+  if (text) {
+    return css({
+      variant: [...text].map((txt) => `text.${txt}`),
+      ...styleProps,
+    })
+  }
+  return css(styleProps)
+}
 
 type BoxProps = {
   sx?: any

yarn.lock

@@ -965,7 +965,7 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -2890,6 +2890,26 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^2.9.5:
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.5.tgz#bbb185325d531c57f494cf3f6cf7719fc2c225c7"
+  integrity sha512-epSX4Co1YbDv0mjfHouuY0q361TpHE7WQzCp/xMTilxy4kXd+Z23uJzPVorfzbm1a/9q1Yu8T5bndaw65NI4Tg==
+  dependencies:
+    framesync "^4.1.0"
+    hey-listen "^1.0.8"
+    popmotion "9.0.0-rc.20"
+    style-value-types "^3.1.9"
+    tslib "^1.10.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a"
+  integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==
+  dependencies:
+    hey-listen "^1.0.5"
+
 from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
@@ -3174,6 +3194,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.5, hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4329,6 +4354,16 @@ [email protected]:
   dependencies:
     ts-pnp "^1.1.6"
 
+[email protected]:
+  version "9.0.0-rc.20"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d"
+  integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg==
+  dependencies:
+    framesync "^4.1.0"
+    hey-listen "^1.0.8"
+    style-value-types "^3.1.9"
+    tslib "^1.10.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -5308,6 +5343,14 @@ [email protected], style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-value-types@^3.1.9:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc"
+  integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^1.10.0"
+
 styled-components@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
@@ -5541,7 +5584,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==