diff --git a/package.json b/package.json index afe40df..6c3c13e 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "start": "next start" }, "dependencies": { + "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5", "@tanstack/react-query": "^4.16.0", "@trpc/client": "^10.0.0", "@trpc/next": "^10.0.0", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index bf6cfaf..3ffdf8d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,13 +1,15 @@ import {GetStaticPropsContext, type NextPage} from "next"; import Head from "next/head"; -import React from "react"; +import React, {useEffect} from "react"; import ItemCard from "../components/ItemCard"; import {getPlaiceholder} from "plaiceholder"; +import {useBreakpointValue} from "../utils/helpers"; interface Project { title: string; banner: string; - description: string; + longDescription: string; + shortDescription: string; } type ProjectWithBlur = Project & { bannerBlur: string }; @@ -22,14 +24,15 @@ export async function getStaticProps(context: GetStaticPropsContext) { { title: "Phototag", banner: "/phototag.png", - description: `Phototag is a **powerful** and **efficient** tool that helps you **quickly** and **easily** describe your photos with - tags. Using Google's advanced Vision API, Phototag can automatically generate tags for your photos, - making it faster and easier to organize and search for your images.` + longDescription: `Using Google's Vision API and supporting metadata formats on Windows, Phototag makes it easy to quickly add rich, descriptive tags to your photos, saving you time and effort.`, + shortDescription: "Effortlessly add rich & descriptive tags to your photos with Phototag." }, { title: "Paths", banner: "/paths.png", - description: "" + shortDescription: "Discover the power of graph traversal algorithms with my interactive application.", + longDescription: `Discover the power of graph traversal algorithms with my interactive Unity application! + Easily generate and edit graphs, create mazes, and experiment with different algorithm configurations to find the most efficient path.` } ].map(async project => { const {base64} = await getPlaiceholder(project.banner, {size: 16}); @@ -47,6 +50,13 @@ export async function getStaticProps(context: GetStaticPropsContext) { } const Home: NextPage = ({projects}: HomeStaticProps) => { + const useLong = useBreakpointValue("sm", true, false); + + // use-tailwind-breakpoint + useEffect(() => { + typeof window !== "undefined" ? window.dispatchEvent(new Event("resize")) : null; + }, []); + return ( <> @@ -60,7 +70,8 @@ const Home: NextPage = ({projects}: HomeStaticProps) => {
{ projects.map((project, index) => - + ) }
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index cb0b41e..b8d3d70 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -1,3 +1,7 @@ +import create from "@kodingdotninja/use-tailwind-breakpoint"; +import resolveConfig from "tailwindcss/resolveConfig"; +import tailwindConfig from "./../../tailwind.config.cjs"; + export function classNames(...classes: (string | null | undefined)[]) { return classes.filter(Boolean).join(" "); } @@ -14,4 +18,8 @@ const hoverableQuery: MediaQueryList | null = isClient() ? window.matchMedia('(h export function isHoverable() { return hoverableQuery?.matches; -} \ No newline at end of file +} + + +const config = resolveConfig(tailwindConfig); +export const {useBreakpoint, useBreakpointValue, useBreakpointEffect} = create(config.theme!.screens); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 386706f..30b4a7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -51,6 +51,11 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@kodingdotninja/use-tailwind-breakpoint@^0.0.5": + version "0.0.5" + resolved "https://registry.yarnpkg.com/@kodingdotninja/use-tailwind-breakpoint/-/use-tailwind-breakpoint-0.0.5.tgz#f3319448c33572e2e810700e6f2c4e219cf3b54a" + integrity sha512-7h52zL+l+14u9diyjVcGoS5NRIwrc6euIGlHDwtJXlrR3h31RNyTrOfimy7PJTvS4fFdNgbzyrNcGfhj3sDRfQ== + "@next/env@13.0.2": version "13.0.2" resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.2.tgz#5fbd7b4146175ae406edfb4a38b62de8c880c09d"