added directionality to technologies animation

src/App.scss

@@ -38,14 +38,6 @@ header {
   }
 }
 
-.gallery-animation-right {
-  animation-name: gallery-slide-right;
-}
-
-@keyframes gallery-animation-right {
-  
-}
-
 .tech-scrollbar {
   height: 5rem;
   width: 60rem;
@@ -55,13 +47,15 @@ header {
   position: relative;
   left: 0;
   overflow-x: hidden;
-  animation: 20s linear tech-scroll infinite;
+  animation: 30s linear tech-scroll infinite;
   .tech-bar-item {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     left: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
     margin: 0.3rem;
     padding: 1rem;
     background-color: $purple200;
@@ -72,7 +66,20 @@ header {
 
 .backup-bar {
   bottom: 5rem;
-  animation: 20s linear 10s tech-scroll infinite, 10s hide-until-start;
+  animation: 30s linear 15s tech-scroll infinite, 15s hide-until-start;
+}
+
+.from-right {
+  animation: 30s linear from-right infinite;
+}
+.backup-from-right {
+  bottom: 5rem;
+  animation: 30s linear 15s from-right infinite, 15s hide-until-start;
+}
+
+.variant-2 {
+  background-color: #62286d !important;
+  color: white !important;
 }
 
 @keyframes hide-until-start {
@@ -94,4 +101,13 @@ header {
   100% {
     left: 60rem;
   }
+}
+
+@keyframes from-right {
+  from {
+    left: 60rem;
+  }
+  100% {
+    left: -60rem;
+  }
 }

src/pages/Technologies.js

@@ -41,20 +41,39 @@ export default function Technologies() {
             <Card sx={technologyCard}>
                 <h2>Here are some I use relatively often:</h2>
 
-                <Chip label="Sass" />
-                <Chip label="Material UI" />
-                <Chip label="Python" />
-                <Chip label="Figma" />
-                <Chip label="TypeScript" />
+                <div className="tech-scrollbar from-right">
+                    <Chip className="tech-bar-item variant-2" label="Sass" />
+                    <Chip className="tech-bar-item variant-2" label="Material UI" />
+                    <Chip className="tech-bar-item variant-2" label="Python" />
+                    <Chip className="tech-bar-item variant-2" label="Figma" />
+                    <Chip className="tech-bar-item variant-2" label="TypeScript" />
+                </div>
+
+                <div className="tech-scrollbar backup-from-right">
+                    <Chip className="tech-bar-item variant-2" label="Sass" />
+                    <Chip className="tech-bar-item variant-2" label="Material UI" />
+                    <Chip className="tech-bar-item variant-2" label="Python" />
+                    <Chip className="tech-bar-item variant-2" label="TypeScript" />
+                </div>
 
             </Card>
 
             <Card sx={technologyCard}>
                 <h2>And here are some things I'm working on learning:</h2>
 
-                <Chip label="Prisma" />
-                <Chip label="C# / ASP.NET" />
-                <Chip label="Next.js" />
+                <div className="tech-scrollbar">
+                    <Chip className="tech-bar-item variant-3" label="Prisma" />
+                    <Chip className="tech-bar-item variant-3" label="Figma" />
+                    <Chip className="tech-bar-item variant-3" label="C# / ASP.NET" />
+                    <Chip className="tech-bar-item variant-3" label="Next.js" />
+                </div>
+
+                <div className="tech-scrollbar backup-bar">
+                    <Chip className="tech-bar-item variant-3" label="Prisma" />
+                    <Chip className="tech-bar-item variant-3" label="Figma" />
+                    <Chip className="tech-bar-item variant-3" label="C# / ASP.NET" />
+                    <Chip className="tech-bar-item variant-3" label="Next.js" />
+                </div>
                 
             </Card>
 

src/styles/Style.js

@@ -116,6 +116,7 @@ export const TechnologiesPage = {
     technologyCard: {
         backgroundColor: indigo[50],
         width: '30vw',
+        maxHeight: '10rem',
         margin: '2rem',
         padding: '2rem',
     }