Update cards to be centered

Author: erikvansebille

src/components/project-card.js

@@ -15,6 +15,7 @@ export const ProjectCard = ({
       as={Link}
       href={repo || homepage}
       p={4}
+      h='full'
       rounded='lg'
       transitionProperty='all'
       transitionDuration='slower'
@@ -27,11 +28,12 @@ export const ProjectCard = ({
         textDecoration: 'none',
       }}
     >
-      <CardBody p={0}>
+      <CardBody p={0} h='full'>
         <Stack
           spacing={2}
           direction={'column'}
           justify={'space-between'}
+          h='full'
           gap={0}
         >
           <Box>

src/components/projects.js

@@ -1,4 +1,4 @@
-import { Box, Container, SimpleGrid, Text } from '@chakra-ui/react'
+import { Box, Container, Grid, GridItem, Text } from '@chakra-ui/react'
 import React from 'react'
 
 import { Heading } from '@/components/mdx'
@@ -7,6 +7,23 @@ import { Projects as ProjectsData } from '@/data/projects'
 
 export const Projects = () => {
   const projects = React.useMemo(() => ProjectsData, [])
+  const projectsPerRowLg = 3
+  const remainderLg = projects.length % projectsPerRowLg
+  const lastRowStartIndexLg = projects.length - remainderLg
+
+  const getLgColStart = (index) => {
+    if (remainderLg === 1 && index === lastRowStartIndexLg) {
+      return 3
+    }
+
+    if (remainderLg === 2) {
+      if (index === lastRowStartIndexLg) return 2
+      if (index === lastRowStartIndexLg + 1) return 4
+    }
+
+    return undefined
+  }
+
   return (
     <Box id={'projects'} as='section'>
       <Container maxW='container.lg' centerContent>
@@ -20,24 +37,35 @@ export const Projects = () => {
             developed with Parcels.
           </Text>
 
-          <SimpleGrid
+          <Grid
             my={8}
-            columns={{ base: 1, md: 2, lg: 3 }}
-            spacing={8}
-            justifyContent={'space-between'}
+            templateColumns={{
+              base: 'repeat(1, minmax(0, 1fr))',
+              md: 'repeat(2, minmax(0, 1fr))',
+              lg: 'repeat(6, minmax(0, 1fr))',
+            }}
+            gap={8}
+            w='full'
+            alignItems='stretch'
           >
             {projects.map((project, index) => (
-              <ProjectCard
+              <GridItem
                 key={index}
-                name={project.name}
-                logo_light={project.logo_light}
-                logo_dark={project.logo_dark}
-                description={project.description}
-                repo={project.repo}
-                homepage={project.homepage}
-              ></ProjectCard>
+                colSpan={{ base: 1, md: 1, lg: 2 }}
+                colStart={{ lg: getLgColStart(index) }}
+                h='full'
+              >
+                <ProjectCard
+                  name={project.name}
+                  logo_light={project.logo_light}
+                  logo_dark={project.logo_dark}
+                  description={project.description}
+                  repo={project.repo}
+                  homepage={project.homepage}
+                ></ProjectCard>
+              </GridItem>
             ))}
-          </SimpleGrid>
+          </Grid>
         </Box>
       </Container>
     </Box>