From da5159aa4845ee69d1b9b86a04218fd5b2ee5150 Mon Sep 17 00:00:00 2001 From: Zeke Abshire Date: Sun, 30 Apr 2023 20:02:45 -0500 Subject: [PATCH 1/5] Started writing responsive typography classes --- src/styles/globals.css | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/styles/globals.css b/src/styles/globals.css index b5c61c9..8f4c494 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,38 @@ @tailwind base; @tailwind components; @tailwind utilities; + +/* Responsive typography */ + +@layer utilities { + .text-r-6xl { + @apply text-6xl; + } + .text-r-5xl { + @apply text-5xl; + } + .text-r-4xl { + @apply text-4xl; + } + .text-r-3xl { + @apply text-3xl; + } + .text-r-2xl { + @apply text-2xl; + } + .text-r-xl { + @apply text-xl; + } + .text-r-lg { + @apply text-lg; + } + .text-r-base .text-r-md { + @apply text-base; + } + .text-r-sm { + @apply text-sm; + } + .text-r-xs { + @apply text-xs; + } +} From 8f738b0ad249cd8dd673ad58ba58742f8882bb55 Mon Sep 17 00:00:00 2001 From: Zeke Abshire Date: Thu, 11 May 2023 12:28:16 -0500 Subject: [PATCH 2/5] Partially implemented the projects section --- next.config.mjs | 10 ++++++++ src/components/Polaroid.tsx | 27 +++++++++++++++++++++ src/components/ProjectDescription.tsx | 26 ++++++++++++++++++++ src/constants/projects.ts | 29 +++++++++++++++++++++++ src/pages/index.tsx | 34 +++++++++++++++++++++++++-- 5 files changed, 124 insertions(+), 2 deletions(-) create mode 100644 src/components/Polaroid.tsx create mode 100644 src/components/ProjectDescription.tsx create mode 100644 src/constants/projects.ts diff --git a/next.config.mjs b/next.config.mjs index d921057..4753f8f 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -7,6 +7,16 @@ await import("./src/env.mjs"); /** @type {import("next").NextConfig} */ const config = { reactStrictMode: true, + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "picsum.photos", + port: "", + pathname: "/**", + }, + ], + }, /** * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config diff --git a/src/components/Polaroid.tsx b/src/components/Polaroid.tsx new file mode 100644 index 0000000..6b2aa07 --- /dev/null +++ b/src/components/Polaroid.tsx @@ -0,0 +1,27 @@ +import Image from "next/image"; + +export interface Props { + title: string; + imageSrc: string; + rotation: string; +} + +export const Polaroid: React.FC = ({ title, imageSrc, rotation }) => { + return ( +
+
+
+ {`Showcase +
+ {title} +
+
+ ); +}; diff --git a/src/components/ProjectDescription.tsx b/src/components/ProjectDescription.tsx new file mode 100644 index 0000000..c04dda8 --- /dev/null +++ b/src/components/ProjectDescription.tsx @@ -0,0 +1,26 @@ +import * as Separator from "@radix-ui/react-separator"; + +export interface Props { + title: string; + color: string; + children?: React.ReactNode; +} + +export const ProjectDescription: React.FC = ({ + title, + color, + children, +}) => { + return ( +
+

{title}

+ +

+ {children} +

+
+ ); +}; diff --git a/src/constants/projects.ts b/src/constants/projects.ts new file mode 100644 index 0000000..a3b6419 --- /dev/null +++ b/src/constants/projects.ts @@ -0,0 +1,29 @@ +import type { Props as PolaroidProps } from "~/components/Polaroid"; +import type { Props as ProjectDescriptionProps } from "~/components/ProjectDescription"; + +export const projects: Array = [ + { + title: "Parallel", + color: "bg-orange", + imageSrc: "https://unsplash.com/photos/OqtafYT5kTw", + rotation: "-rotate-12", + children: + "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ", + }, + { + title: "DropNote", + color: "bg-yellow", + imageSrc: "", + rotation: "rotate-6", + children: + "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ", + }, + { + title: "Flurry", + color: "bg-green", + imageSrc: "", + rotation: "-rotate-3", + children: + "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ", + }, +]; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b9a6781..f3731fe 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,8 @@ import { type NextPage } from "next"; import Head from "next/head"; +import { Polaroid } from "~/components/Polaroid"; +import { ProjectDescription } from "~/components/ProjectDescription"; +import { projects } from "~/constants/projects"; const Home: NextPage = () => { return ( @@ -12,7 +15,7 @@ const Home: NextPage = () => { <> {/* */} - {/* */} + {/* */} {/* */} @@ -35,7 +38,34 @@ const Hero = () => { ); }; + // const Services = () => {} -// const Projects = () => {} + +const Projects = () => { + return ( +
+ {projects.map((p) => ( +
+
+ +
+
+ + {p.children} + +
+
+ ))} +
+ ); +}; + // const About = () => {} // const Contact = () => {} From 317081841c0199cbd49e2451b4e0fda40c0d8167 Mon Sep 17 00:00:00 2001 From: Zeke Abshire Date: Fri, 12 May 2023 00:31:11 -0500 Subject: [PATCH 3/5] Finished a first pass of the project section --- src/components/Container.tsx | 5 +++ src/components/Polaroid.tsx | 25 +++++++++++++-- src/components/ProjectDescription.tsx | 4 +-- src/components/RootLayout.tsx | 1 + src/constants/projects.ts | 8 ++--- src/hooks/useIntersectionObserver.ts | 45 ++++++++++++++++++++++++++ src/pages/index.tsx | 46 +++++++++++++++------------ 7 files changed, 106 insertions(+), 28 deletions(-) create mode 100644 src/components/Container.tsx create mode 100644 src/hooks/useIntersectionObserver.ts diff --git a/src/components/Container.tsx b/src/components/Container.tsx new file mode 100644 index 0000000..4ba9005 --- /dev/null +++ b/src/components/Container.tsx @@ -0,0 +1,5 @@ +import type { PropsWithChildren } from "react"; + +export const Container: React.FC = ({ children }) => { + return
{children}
; +}; diff --git a/src/components/Polaroid.tsx b/src/components/Polaroid.tsx index 6b2aa07..68c83a0 100644 --- a/src/components/Polaroid.tsx +++ b/src/components/Polaroid.tsx @@ -1,4 +1,6 @@ import Image from "next/image"; +import { useEffect, useRef, useState } from "react"; +import useIntersectionObserver from "~/hooks/useIntersectionObserver"; export interface Props { title: string; @@ -7,6 +9,18 @@ export interface Props { } export const Polaroid: React.FC = ({ title, imageSrc, rotation }) => { + const [showImage, setShowImage] = useState(false); + const ref = useRef(null); + const entry = useIntersectionObserver(ref, {}); + + const isOnScreen = !!entry?.isIntersecting; + + useEffect(() => { + if (isOnScreen) { + setShowImage(true); + } + }, [isOnScreen]); + return (
= ({ title, imageSrc, rotation }) => {
{`Showcase +
- {title} + + {title} +
); diff --git a/src/components/ProjectDescription.tsx b/src/components/ProjectDescription.tsx index c04dda8..353c7e3 100644 --- a/src/components/ProjectDescription.tsx +++ b/src/components/ProjectDescription.tsx @@ -12,8 +12,8 @@ export const ProjectDescription: React.FC = ({ children, }) => { return ( -
-

{title}

+
+

{title}

= [ { title: "Parallel", color: "bg-orange", - imageSrc: "https://unsplash.com/photos/OqtafYT5kTw", + imageSrc: "https://picsum.photos/seed/Parallel/200", rotation: "-rotate-12", children: "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ", @@ -13,15 +13,15 @@ export const projects: Array = [ { title: "DropNote", color: "bg-yellow", - imageSrc: "", + imageSrc: "https://picsum.photos/seed/DropNote/200", rotation: "rotate-6", children: "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ", }, { - title: "Flurry", + title: "Flurry Waitlist", color: "bg-green", - imageSrc: "", + imageSrc: "https://picsum.photos/seed/Flurry/200", rotation: "-rotate-3", children: "We started Parallel to help connect educators with content creators to make it easier to create high-quality educational content for platforms like YouTube. We built the platform with high performance, scalability, and accessibility in mind. That's why we chose powerful tools like Next.js, TailwindCSS, RadixUI, Prisma, PlanetScale, and Vercel's hosting platform. ", diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts new file mode 100644 index 0000000..581ef15 --- /dev/null +++ b/src/hooks/useIntersectionObserver.ts @@ -0,0 +1,45 @@ +import { type RefObject, useEffect, useState } from "react"; + +interface Args extends IntersectionObserverInit { + freezeOnceVisible?: boolean; +} + +function useIntersectionObserver( + elementRef: RefObject, + { + threshold = 0, + root = null, + rootMargin = "0%", + freezeOnceVisible = false, + }: Args +): IntersectionObserverEntry | undefined { + const [entry, setEntry] = useState(); + + const frozen = entry?.isIntersecting && freezeOnceVisible; + + const updateEntry = ([entry]: IntersectionObserverEntry[]): void => { + setEntry(entry); + }; + + const stringifiedThreshold = JSON.stringify(threshold); + + useEffect(() => { + const node = elementRef?.current; // DOM Ref + const hasIOSupport = !!window.IntersectionObserver; + + if (!hasIOSupport || frozen || !node) return; + + const observerParams = { threshold, root, rootMargin }; + const observer = new IntersectionObserver(updateEntry, observerParams); + + observer.observe(node); + + return () => observer.disconnect(); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [elementRef?.current, stringifiedThreshold, root, rootMargin, frozen]); + + return entry; +} + +export default useIntersectionObserver; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f3731fe..5273109 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import { type NextPage } from "next"; import Head from "next/head"; +import { Container } from "~/components/Container"; import { Polaroid } from "~/components/Polaroid"; import { ProjectDescription } from "~/components/ProjectDescription"; import { projects } from "~/constants/projects"; @@ -43,27 +44,32 @@ const Hero = () => { const Projects = () => { return ( -
- {projects.map((p) => ( -
-
- + +

+ Here are some of our past projects +

+
+ {projects.map((p) => ( +
+
+ +
+
+ + {p.children} + +
-
- - {p.children} - -
-
- ))} -
+ ))} +
+ ); }; From f809abcf6d9cfe827f29b5f208662c8110389394 Mon Sep 17 00:00:00 2001 From: Zeke Abshire Date: Sat, 20 May 2023 16:54:46 -0500 Subject: [PATCH 4/5] SR-009: Created responsive typography plugin --- src/pages/index.tsx | 12 ++++++++-- src/styles/globals.css | 35 ---------------------------- tailwind.config.ts | 53 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 62 insertions(+), 38 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b9a6781..d9b8547 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,6 +11,14 @@ const Home: NextPage = () => { <> +
+

48px: h1

+

40px: h2

+

32px: h3

+

24px: h4, header, polaroid, button

+

20px: h5, body

+

16px: h6

+
{/* */} {/* */} {/* */} @@ -25,8 +33,8 @@ export default Home; const Hero = () => { return ( <> -

Sunrise

-

+

Sunrise

+

Creating software that looks and works great is our specialty at Sunrise. Our team of experts combines artistry and technical know-how to craft solutions that will make your business{" "} diff --git a/src/styles/globals.css b/src/styles/globals.css index 8f4c494..b5c61c9 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,38 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -/* Responsive typography */ - -@layer utilities { - .text-r-6xl { - @apply text-6xl; - } - .text-r-5xl { - @apply text-5xl; - } - .text-r-4xl { - @apply text-4xl; - } - .text-r-3xl { - @apply text-3xl; - } - .text-r-2xl { - @apply text-2xl; - } - .text-r-xl { - @apply text-xl; - } - .text-r-lg { - @apply text-lg; - } - .text-r-base .text-r-md { - @apply text-base; - } - .text-r-sm { - @apply text-sm; - } - .text-r-xs { - @apply text-xs; - } -} diff --git a/tailwind.config.ts b/tailwind.config.ts index 2c5a016..9304036 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,11 @@ import { type Config } from "tailwindcss"; import { fontFamily } from "tailwindcss/defaultTheme"; +import plugin from "tailwindcss/plugin"; + +interface RecursiveKeyValuePair { + [key: string]: V | RecursiveKeyValuePair; +} +type CSSRuleObject = RecursiveKeyValuePair; export default { content: ["./src/**/*.{js,ts,jsx,tsx}"], @@ -9,6 +15,15 @@ export default { center: true, padding: "1.5rem", }, + fontSize: { + xs: ["0.75rem", { lineHeight: "1rem" }], // 12px 0.75rem + sm: ["1rem", { lineHeight: "1.25rem" }], // 16px 1rem + base: ["1.25rem", { lineHeight: "1.5rem" }], // 20px 1.25rem + lg: ["1.5rem", { lineHeight: "1.75rem" }], // 24px 1.5rem + xl: ["2rem", { lineHeight: "1.75rem" }], // 32px 2rem + "2xl": ["2.5rem", { lineHeight: "2rem" }], // 40px 2.5rem + "3xl": ["3rem", { lineHeight: "2.25rem" }], // 48px 3rem + }, fontFamily: { sans: ["var(--font-jakarta)"], roadster: ["var(--font-roadster)", ...fontFamily.sans], @@ -25,5 +40,41 @@ export default { }, }, }, - plugins: [], + plugins: [ + // Responsive Typography + plugin(function ({ addUtilities, theme }) { + const fontSizes = Object.keys(theme("fontSize")); + + const buildCSS = (fontSize: string): CSSRuleObject => { + const fsIndex = fontSizes.indexOf(fontSize); + + if (fsIndex > 1) { + const desktop = fontSize; + const tablet = fontSizes[fsIndex - 1] ?? fontSize; + const mobile = fontSizes[fsIndex - 2] ?? fontSize; + + return { + "font-size": theme(`fontSize.${mobile}`), + "@screen md": { + "font-size": theme(`fontSize.${tablet}`), + }, + "@screen 2xl": { + "font-size": theme(`fontSize.${desktop}`), + }, + }; + } + + return { "font-size": theme(`fontSize.${fontSize}`) }; + }; + + addUtilities({ + ".text-r-3xl": buildCSS("3xl"), + ".text-r-2xl": buildCSS("2xl"), + ".text-r-xl": buildCSS("xl"), + ".text-r-lg": buildCSS("lg"), + ".text-r-base": buildCSS("base"), + ".text-r-sm": buildCSS("sm"), + }); + }), + ], } satisfies Config; From d18a6ca60b63c433ba3e8204015a0c526979594c Mon Sep 17 00:00:00 2001 From: Zeke Abshire Date: Sat, 20 May 2023 17:21:39 -0500 Subject: [PATCH 5/5] Updated with responsive typography --- src/components/Polaroid.tsx | 2 +- src/components/ProjectDescription.tsx | 6 ++---- src/pages/index.tsx | 14 +++----------- tailwind.config.ts | 2 +- 4 files changed, 7 insertions(+), 17 deletions(-) diff --git a/src/components/Polaroid.tsx b/src/components/Polaroid.tsx index 68c83a0..3de6906 100644 --- a/src/components/Polaroid.tsx +++ b/src/components/Polaroid.tsx @@ -39,7 +39,7 @@ export const Polaroid: React.FC = ({ title, imageSrc, rotation }) => { }`} />

- + {title}
diff --git a/src/components/ProjectDescription.tsx b/src/components/ProjectDescription.tsx index 353c7e3..35caed7 100644 --- a/src/components/ProjectDescription.tsx +++ b/src/components/ProjectDescription.tsx @@ -13,14 +13,12 @@ export const ProjectDescription: React.FC = ({ }) => { return (
-

{title}

+

{title}

-

- {children} -

+

{children}

); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3523a05..6821c77 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -15,14 +15,6 @@ const Home: NextPage = () => { <> -
-

48px: h1

-

40px: h2

-

32px: h3

-

24px: h4, header, polaroid, button

-

20px: h5, body

-

16px: h6

-
{/* */} {/* */} @@ -53,14 +45,14 @@ const Hero = () => { const Projects = () => { return ( -

+

Here are some of our past projects

-
+
{projects.map((p) => (