From a4ac3affba3d6577789c9e2db8cd41862996ca7f Mon Sep 17 00:00:00 2001 From: Patrick Krawczykowski Date: Sun, 13 Dec 2020 17:44:51 -0600 Subject: [PATCH] update homepage --- content/{posts => projects}/slack-bot.mdx | 0 content/{posts => projects}/statematters.mdx | 0 content/{posts => projects}/tapdeck.mdx | 0 package.json | 1 + pages/index.tsx | 144 +++++++++++++------ pages/{posts => projects}/[slug].tsx | 8 +- public/cursor.svg | 3 + src/components/base.js | 39 ++++- src/components/box.tsx | 11 +- yarn.lock | 47 +++++- 10 files changed, 199 insertions(+), 54 deletions(-) rename content/{posts => projects}/slack-bot.mdx (100%) rename content/{posts => projects}/statematters.mdx (100%) rename content/{posts => projects}/tapdeck.mdx (100%) rename pages/{posts => projects}/[slug].tsx (78%) create mode 100644 public/cursor.svg diff --git a/content/posts/slack-bot.mdx b/content/projects/slack-bot.mdx similarity index 100% rename from content/posts/slack-bot.mdx rename to content/projects/slack-bot.mdx diff --git a/content/posts/statematters.mdx b/content/projects/statematters.mdx similarity index 100% rename from content/posts/statematters.mdx rename to content/projects/statematters.mdx diff --git a/content/posts/tapdeck.mdx b/content/projects/tapdeck.mdx similarity index 100% rename from content/posts/tapdeck.mdx rename to content/projects/tapdeck.mdx diff --git a/package.json b/package.json index ab623ce..9ebdd6b 100644 --- a/package.json +++ b/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", diff --git a/pages/index.tsx b/pages/index.tsx index 5547726..25a980d 100644 --- a/pages/index.tsx +++ b/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 ( - - - - ) -} - 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 }) { - - Projects + + + Selected Work + + {projects.map((project, idx) => ( + + ))} ) } + +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 ( + + + + ) +} + +type ProjectLinkProps = { + project: any +} + +function ProjectLink({ project }: ProjectLinkProps) { + return ( + + + + {project.title} + + + {project.summary} + + + + ) +} diff --git a/pages/posts/[slug].tsx b/pages/projects/[slug].tsx similarity index 78% rename from pages/posts/[slug].tsx rename to pages/projects/[slug].tsx index df43aea..dd854b0 100644 --- a/pages/posts/[slug].tsx +++ b/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 {content} diff --git a/public/cursor.svg b/public/cursor.svg new file mode 100644 index 0000000..c64ae0c --- /dev/null +++ b/public/cursor.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/base.js b/src/components/base.js index 7d34fd0..a5f9dcf 100644 --- a/src/components/base.js +++ b/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}; diff --git a/src/components/box.tsx b/src/components/box.tsx index f296117..addd12a 100644 --- a/src/components/box.tsx +++ b/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 diff --git a/yarn.lock b/yarn.lock index 9ae6a81..88bdc4b 100644 --- a/yarn.lock +++ b/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 @@ he@1.2.0: 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 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +popmotion@9.0.0-rc.20: + 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 @@ style-to-object@0.3.0, 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==