Merge pull request #269 from Parcels-code/update_projects

Update projects cards

Author: erikvansebille

public/projects/LOCATE_logo.png

@@ -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>

public/projects/pyplume_logo.png

@@ -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>

src/components/project-card.js

@@ -2,7 +2,7 @@ export const Projects = [
   {
     name: 'PlasticParcels',
     description:
-      'PlasticParcels is a Python package to simulate the transport and dispersion of plastics in the ocean.',
+      'PlasticParcels simulates the transport and dispersion of plastics in the ocean.',
     repo: 'https://github.com/OceanParcels/plasticparcels',
     homepage: 'https://plastic.parcels-code.org/en/latest/',
     logo_light: '/projects/plasticparcelslogo.png',
@@ -28,9 +28,25 @@ export const Projects = [
   {
     name: 'VirtualFleet',
     description:
-      'Virtual Fleet is a Python tool that simulates Argo floats trajectories and measurement.',
+      'Virtual Fleet simulates Argo floats trajectories and measurement.',
     homepage: 'https://github.com/euroargodev/VirtualFleet',
     logo_light: '/projects/virtualfleet_logo.png',
     logo_dark: '/projects/virtualfleet_logo_dia.png',
   },
+  {
+    name: 'LOCATE',
+    description:
+      'LOCATE simulates plastic particle dispersion in nearshore water.',
+    homepage: 'https://github.com/UPC-LOCATE/LOCATE',
+    logo_light: '/projects/LOCATE_logo.png',
+    logo_dark: '/projects/LOCATE_logo.png',
+  },
+  {
+    name: 'PyPlume',
+    description:
+      'PyPlume unifies simulating, analyzing and visualizing particle trajectories.',
+    homepage: 'https://github.com/jerukan/PyPlume',
+    logo_light: '/projects/pyplume_logo.png',
+    logo_dark: '/projects/pyplume_logo.png',
+  },
 ]