optimizing the carousel

Author: tobyab

components/slack/arrows.js

@@ -51,8 +51,7 @@ export default function Arrows() {
         display: 'flex',
         marginTop: 32,
         marginBottom: 32,
-        position: 'relative',
-        left: 'calc(26vw + 63rem)'
+        position: 'relative'
       }}
     >
       <div style={{ display: 'flex' }}>

components/slack/project.js

@@ -18,12 +18,11 @@ export default function Project({ title, description, color, img, itemId }) {
           `linear-gradient(to bottom, ${color[0]}, ${color[1]})`,
         color: 'white',
         overflow: 'clip',
-        width: '70rem',
+        width: ['100vw', '50rem', '70rem'],
         height: '100%',
         transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',
-        mx: 16,
-        ml: `${itemId === 0 ? '26vw' : '0'}`
+        mx: 16
       }}
       itemId={itemId}
     >

pages/slack.js

@@ -87,18 +87,20 @@ const SlackPage = () => {
         onMouseEnter={disableScroll}
         onMouseLeave={enableScroll}
       >
-        <ScrollMenu Footer={Arrows} onWheel={onWheel}>
-          {projects.map(project => (
-            <Project
-              title={project.title}
-              description={project.description}
-              img={project.img}
-              color={project.color}
-              itemId={project.itemId}
-              key={project.itemId}
-            />
-          ))}
-        </ScrollMenu>
+        <Box sx={{ ml: ['2vw', '25vw'] }}>
+          <ScrollMenu Footer={Arrows} onWheel={onWheel}>
+            {projects.map(project => (
+              <Project
+                title={project.title}
+                description={project.description}
+                img={project.img}
+                color={project.color}
+                itemId={project.itemId}
+                key={project.itemId}
+              />
+            ))}
+          </ScrollMenu>
+        </Box>
       </Box>
       <Container sx={{ py: [4, 5] }}>
         <Box sx={{ gap: '2rem', display: ['grid', 'flex'] }}>