fixed animation on technologies page

src/App.scss

@@ -40,7 +40,7 @@ $purple200: #ce93d8;
 .technologies-page {
   .tech-scrollbar {
     height: 5rem;
-    width: 60rem;
+    min-width: 60rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -54,9 +54,10 @@ $purple200: #ce93d8;
       justify-content: center;
       position: relative;
       left: 0;
+      top: 0.3rem;
       font-size: 1.2rem;
       font-weight: 700;
-      margin: 0.3rem;
+      margin: 0 0.3rem;
       padding: 1rem;
       background-color: $purple200;
       height: 5rem;

src/pages/Technologies.js

@@ -11,13 +11,12 @@ const { htmlTheme } = DocumentStyle;
 export default function Technologies() {
     return (
         <div className="technologies-page" style={htmlTheme}>
-            <Card sx={technologyCard}>
+            <Card sx={{padding: '2rem'}}>
                 <h1>What technologies do I use?</h1>
             </Card>
 
+            <h2>These are my most often-used technologies:</h2>
             <Card sx={technologyCard}>
-                <h2>These are my most often-used technologies:</h2>
-
                 <div className="tech-scrollbar">
                     <Chip label="React" className="tech-bar-item"/>
                     <Chip label="Redux" className="tech-bar-item"/>
@@ -37,8 +36,8 @@ export default function Technologies() {
                 </div>
             </Card>
 
+            <h2>Here are some I use relatively often:</h2>
             <Card sx={technologyCard}>
-                <h2>Here are some I use relatively often:</h2>
 
                 <div className="tech-scrollbar from-right">
                     <Chip className="tech-bar-item variant-2" label="Sass" />
@@ -57,8 +56,8 @@ export default function Technologies() {
 
             </Card>
 
+            <h2>And here are some things I'm working on learning:</h2>
             <Card sx={technologyCard}>
-                <h2>And here are some things I'm working on learning:</h2>
 
                 <div className="tech-scrollbar">
                     <Chip className="tech-bar-item variant-3" label="Prisma" />
@@ -75,8 +74,6 @@ export default function Technologies() {
                 </div>
                 
             </Card>
-
-            <a href="/">Home</a>
         </div>
     )
 }

src/styles/Style.js

@@ -144,10 +144,9 @@ export const AboutMePage = {
 export const TechnologiesPage = {
     technologyCard: {
         backgroundColor: indigo[50],
-        width: '30vw',
-        maxHeight: '10rem',
+        width: '40vw',
         margin: '2rem',
-        padding: '2rem',
+        borderRadius: '15px',
     }
 }