more things!

components/slack/arrows.js

@@ -16,7 +16,6 @@ function Arrow({ direction, disabled, onClick }) {
         placeItems: 'center',
         display: 'flex',
         mr: 2,
-        ml: direction === 'left' && [3, 3, 3, 'calc(50vw - 36rem)'],
         opacity: disabled ? '0.5' : '1',
         pointerEvents: disabled ? 'none' : 'auto',
         transition: 'opacity 0.3s ease'
@@ -69,7 +68,9 @@ export default function Arrows() {
       sx={{
         display: 'flex',
         marginBottom: 32,
-        position: 'relative'
+        position: 'relative',
+        // this is v janky please ignore, thank you.
+        ml: ['1rem', '1rem', '1rem', 'calc(50vw - 36.5rem)']
       }}
     >
       <div style={{ display: 'flex' }}>

components/slack/project.js

@@ -1,11 +1,6 @@
 import { Box, Grid, Image, Text } from 'theme-ui'
-import { VisibilityContext } from 'react-horizontal-scrolling-menu'
-import { useContext } from 'react'
 
 export default function Project({ title, description, color, img, itemId }) {
-  const visible = useContext(VisibilityContext)
-  const isVisible = visible.isItemVisible(itemId)
-
   return (
     <Grid
       sx={{
@@ -19,8 +14,9 @@ export default function Project({ title, description, color, img, itemId }) {
         width: ['100vw', '40rem', '50rem', '70rem'],
         height: ['25rem', '40rem'],
         transformOrigin: 'center',
-        mx: 16,
-        ml: [3, 3, 3, `${itemId === 0 && 'calc(50vw - 36rem)'}`]
+        mr: 16,
+        // this is v janky please ignore, thank you.
+        ml: ['1rem', '1rem', '1rem', `${itemId === 0 && 'calc(50vw - 36.5rem)'}`]
       }}
       itemId={itemId}
     >

pages/slack.js

@@ -80,7 +80,8 @@ const SlackPage = () => {
       <Box
         sx={{
           backgroundColor: '#F9FAFC',
-          paddingT: '1rem'
+          paddingT: '1rem',
+          overflow: 'hidden',
         }}
       >
         <Box onMouseEnter={disableScroll} onMouseLeave={enableScroll}>
@@ -89,7 +90,7 @@ const SlackPage = () => {
             transitionDuration={900}
             style={{ scrollbar: 'hidden' }}
           >
-            {projects.map(project => (
+            {projects.map((project, i) => (
               <Project
                 title={project.title}
                 description={project.description}
@@ -102,6 +103,7 @@ const SlackPage = () => {
           </ScrollMenu>
         </Box>
       </Box>
+
       <Container sx={{ py: [4, 5] }}>
         <Box sx={{ gap: '2rem', display: ['grid', 'grid', 'flex'] }}>
           <Quote