functional scroll bar in welcome page gallery

src/App.scss

@@ -36,4 +36,12 @@ header {
     position: relative;
     top: 0.8rem;
   }
+}
+
+.gallery-animation-right {
+  animation-name: gallery-slide-right;
+}
+
+@keyframes gallery-animation-right {
+  
 }

src/pages/Welcome.js

@@ -1,21 +1,33 @@
 import '../App.scss';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
+
+// MUI components
 
-import Paper from '@mui/material/Paper';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
 import profile from '../media/profile.jpeg';
 
+// SX style object imports
+
 import { DocumentStyle, WelcomePage } from '../styles/Style';
 
-const { pageTheme, galleryTheme, cardTheme } = WelcomePage;
-
-const { colorThemes, linkStyle, buttonStyle } = DocumentStyle;
-const { themeA } = colorThemes;
+const { pageTheme, galleryTheme, galleryRow, galleryPages, galleryPage } = WelcomePage;
+const { buttonStyle, galleryArrowStyle, galleryCards } = DocumentStyle;
 
+// Web page logic
 
 export default function Welcome() {
     const [gallery, setGallery] = useState([0,1]);
+    const [rendered, setRendered] = useState();
+
+    const cardOne = useRef();
+    const cardTwo = useRef();
+    const cardThree = useRef();
+    const cardFour = useRef();
+    const cardFive = useRef();
+
+    const allRefs = [cardOne, cardTwo, cardThree, cardFour, cardFive];
 
     const galleryButtons = [
         <Button variant="contained" href="/projects" sx={buttonStyle}>What kinds of things do I do?</Button>,
@@ -27,10 +39,33 @@ export default function Welcome() {
 
     // handle gallery debug
     useEffect(() => {
-        console.log(gallery);
-    }, [gallery]);
+        setRendered([
+            galleryButtons[gallery[0]], galleryButtons[gallery[1]]
+        ]);
 
-    const handleGallery = () => {
+        for (let each of allRefs) {
+            each.current.style.backgroundColor = "blue";
+        }
+
+        for (let each of gallery) {
+            allRefs[each].current.style.backgroundColor = "purple";
+        }
+
+    }, [allRefs, gallery]);
+
+    const handleDecrement = () => {
+        let newState = [];
+        for (let each of gallery) {
+            let newNum = each - 1;
+            if (newNum === -1) {
+                newNum = galleryButtons.length - 1;
+            }
+            newState.push(newNum);
+        }
+        setGallery(newState);
+    }
+
+    const handleIncrement = () => {
         let newState = [];
         for (let each of gallery) {
             let newNum = (each + 1) % galleryButtons.length;
@@ -52,11 +87,19 @@ export default function Welcome() {
             <h3 className="do-stuff">Thanks for visiting! Feel free to peruse below:</h3>
             
             <div style={galleryTheme} className="gallery">
-                {galleryButtons[gallery[0]]}
-                {galleryButtons[gallery[1]]}
+                <div style={galleryRow}>
+                    <Button sx={galleryArrowStyle} onClick={handleDecrement}>{'<'}</Button>
+                    {rendered}
+                    <Button sx={galleryArrowStyle} onClick={handleIncrement}>{'>'}</Button>
+                </div>
+                <div style={galleryPages}>
+                    <Card ref={cardOne} sx={galleryCards} />
+                    <Card ref={cardTwo} sx={galleryCards} />
+                    <Card ref={cardThree} sx={galleryCards} />
+                    <Card ref={cardFour} sx={galleryCards} />
+                    <Card ref={cardFive} sx={galleryCards} />
+                </div>
             </div>
-
-            <Button variant="contained" onClick={handleGallery}>Gallery?</Button>
         </div>
-    )
+    );
 }

src/styles/Style.js

@@ -1,50 +1,6 @@
-import { red, green, pink, deepPurple, purple } from '@mui/material/colors';
-
-// export const useStyles = ({
-//     colorThemeA: {
-//         backgroundColor: pink[50],
-//         color: deepPurple[300]
-//     },
-//     html: {
-//         backgroundColor: purple[200],
-//     },
-//     muiButtonA: {
-//         backgroundColor: deepPurple[200],
-//         color: deepPurple[500],
-//         '&:hover': {
-//             backgroundColor: purple[400],
-//         }
-//     },
-//     welcomePage: {
-//         display: 'flex',
-//         backgroundColor: purple[100],
-//         height: '100vh',
-//         flexDirection: 'column',
-//         alignItems: 'center',
-//         overflowX: 'hidden'
-//     },
-//     gallery: {
-//         display: 'flex',
-//         width: '90vw',
-//         justifyContent: 'center',
-//     },
-//     card: {
-//         width: '250px',
-//         height: '250px',
-//         margin: '2rem',
-//         display: 'flex',
-//         alignItems: 'center',
-//         justifyContent: 'center',  
-//     }
-// });
+import { indigo, pink, deepPurple, purple } from '@mui/material/colors';
 
 export const DocumentStyle = {
-    colorThemes: {
-        themeA: {
-            backgroundColor: pink[50],
-            color: deepPurple[300]
-        },
-    },
     htmlTheme: {
         backgroundColor: purple[200]
     },
@@ -57,7 +13,27 @@ export const DocumentStyle = {
         color: deepPurple[500],
         '&:hover': {
             backgroundColor: purple[400],
+            color: deepPurple[50],
+        },
+        width: '25vw',
+        height: '10rem',
+        margin: '2rem',
+    },
+    galleryArrowStyle: {
+        width: '8vw',
+        height: '10rem',
+        display: 'flex',
+        justifyContent: 'center',
+        color: deepPurple[50],
+        backgroundColor: deepPurple[500],
+        '&:hover': {
+            backgroundColor: indigo[800],
         }
+    },
+    galleryCards: {
+        width: '3rem',
+        height: '1rem',
+        margin: '0.8rem'
     }
 }
 
@@ -72,15 +48,25 @@ export const WelcomePage = {
     },
     galleryTheme: {
         display: 'flex',
-        width: '90vw',
+        flexDirection: 'column',
+        width: '95vw',
+        height: '18rem',
+    },
+    galleryRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+    },
+    galleryPages: {
+        display: 'flex',
         justifyContent: 'center',
     },
-    cardTheme: {
-        width: '250px',
-        height: '250px',
-        margin: '2rem',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    galleryPage: {
+        inactive: {
+            backgroundColor: deepPurple[50],
+        },
+        active: {
+            backgroundColor: indigo[800]
+        }
     }
 }