refactor(website): make projects page responsive

semaphore-protocol · Nov 3, 2023 · 52326b0 · 52326b0
1 parent 90a08c6
commit 52326b0
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 18 deletions.
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <html lang="en" suppressHydrationWarning={true}>
             <body suppressHydrationWarning={true}>
                 <Providers>
-                    <Container maxW="1440px" px="20">
+                    <Container maxW="1440px" px="10">
                         <Navbar />
                         {children}
                         <Footer />

diff --git a/apps/website/src/app/projects/page.tsx b/apps/website/src/app/projects/page.tsx
@@ -5,12 +5,12 @@ import ProjectsList from "@/components/ProjectsList"
 export default function Projects() {
     return (
         <VStack>
-            <VStack h="393" w="100%" justify="end" align="left" spacing="40">
+            <VStack h={{ base: "442", sm: "420", md: "393" }} w="100%" justify="end" align="left" spacing="40">
                 <Box
                     zIndex="-1"
                     left="0"
                     w="100%"
-                    h="393"
+                    h={{ base: "442", sm: "420", md: "393" }}
                     pos="absolute"
                     bgImg="url('./section-3.png')"
                     bgSize="100%"
@@ -19,8 +19,9 @@ export default function Projects() {
                 />
 
                 <VStack align="left" spacing="4" pb="16">
-                    <Heading fontSize="72px">Built with Semaphore</Heading>
-                    <Text fontSize="20px">
+                    <Heading fontSize={{ base: "40px", sm: "46px", md: "72px" }}>Built with Semaphore</Heading>
+
+                    <Text fontSize={{ base: "16px", sm: "18px", md: "20px" }}>
                         Discover a curated showcase of innovative projects <br /> and applications developed using the
                         Semaphore Protocol.
                     </Text>

diff --git a/apps/website/src/components/ProjectCard.tsx b/apps/website/src/components/ProjectCard.tsx
@@ -15,7 +15,7 @@ export default function ProjectCard({ tags, title, description }: ProjectCardPro
             border={"1px"}
             borderColor={"alabaster.950"}
             padding={"55px 34px 55px 34px"}
-            width={{ base: "full", sm: "404px" }}
+            width="full"
             height={"284.86px"}
             _hover={{ borderColor: "ceruleanBlue" }}
         >

diff --git a/apps/website/src/components/ProjectsCarousel.tsx b/apps/website/src/components/ProjectsCarousel.tsx
@@ -29,7 +29,7 @@ export default function ProjectsCarousel() {
         <>
             <HStack spacing="8">
                 {projects.map((project) => (
-                    <Link key={project.name} href={project.links.github} target="_blank">
+                    <Link flex="1" key={project.name} href={project.links.github} target="_blank">
                         <ProjectCard title={project.name} description={project.tagline} tags={project.tags} />
                     </Link>
                 ))}

diff --git a/apps/website/src/components/ProjectsList.tsx b/apps/website/src/components/ProjectsList.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { Button, Grid, GridItem, HStack, IconButton, Link, Text, VStack } from "@chakra-ui/react"
+import { Button, Grid, GridItem, HStack, IconButton, Link, Stack, Text, VStack } from "@chakra-ui/react"
 import { useCallback, useEffect, useState } from "react"
 import ProjectCard from "../components/ProjectCard"
 import allProjects from "../data/projects.json"
@@ -20,13 +20,13 @@ export default function ProjectsList(props: any) {
         let filteredProjects = allProjects
 
         if (selectedTag) {
-            filteredProjects = allProjects.filter((project) => project.tags.includes(selectedTag))
+            filteredProjects = filteredProjects.filter((project) => project.tags.includes(selectedTag))
         }
 
         if (onlyPSE === true) {
-            filteredProjects = allProjects.filter((project) => project.pse)
+            filteredProjects = filteredProjects.filter((project) => project.pse)
         } else if (onlyPSE === false) {
-            filteredProjects = allProjects.filter((project) => !project.pse)
+            filteredProjects = filteredProjects.filter((project) => !project.pse)
         }
 
         setProjects(chunkArray(filteredProjects))
@@ -41,7 +41,7 @@ export default function ProjectsList(props: any) {
             <VStack align="left" spacing="6">
                 <Text fontSize="20">Projects created by</Text>
 
-                <HStack spacing="4">
+                <HStack spacing="4" flexWrap="wrap">
                     <Button
                         size="lg"
                         variant={onlyPSE === true ? "solid" : "outline"}
@@ -62,10 +62,10 @@ export default function ProjectsList(props: any) {
                 </HStack>
             </VStack>
 
-            <HStack spacing="5">
+            <Stack direction={{ base: "column", md: "row" }} spacing="5" align="start">
                 <Text fontSize="20">Category</Text>
 
-                <HStack spacing="3">
+                <HStack spacing="3" flexWrap="wrap">
                     {getProjectTags(allProjects).map((tag) => (
                         <Button
                             key={tag}
@@ -78,9 +78,9 @@ export default function ProjectsList(props: any) {
                         </Button>
                     ))}
                 </HStack>
-            </HStack>
+            </Stack>
 
-            <Grid templateColumns="repeat(3, 1fr)" gap={6}>
+            <Grid templateColumns={{ base: "1fr", lg: "repeat(2, 1fr)", "2xl": "repeat(3, 1fr)" }} gap={6}>
                 {projects[index].map((project, i) => (
                     <GridItem key={project.name + i}>
                         <Link href={project.links.github} target="_blank">

diff --git a/apps/website/src/styles/index.ts b/apps/website/src/styles/index.ts
@@ -10,7 +10,15 @@ const config = {
     },
     colors,
     styles,
-    components
+    components,
+    breakpoints: {
+        base: "0px",
+        sm: "320px",
+        md: "768px",
+        lg: "960px",
+        xl: "1200px",
+        "2xl": "1440px"
+    }
 }
 
 export default extendTheme(config)
diff --git a/apps/website/src/utils/chunkArray.ts b/apps/website/src/utils/chunkArray.ts
@@ -14,5 +14,5 @@ export function chunkArray(array: any[], size = 15): any[] {
         result.push(chunk)
     }
 
-    return result
+    return result.length === 0 ? [[]] : result
 }