From 3982373cef8bdea03d2502beedc4687472ed59ea Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Wed, 6 Apr 2022 18:32:19 -0500
Subject: [PATCH] fixed animation on technologies page

---
 src/App.scss              |  5 +++--
 src/pages/Technologies.js | 11 ++++-------
 src/styles/Style.js       |  5 ++---
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index a34c69e..a6a9d38 100644
--- a/src/App.scss
+++ b/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;
diff --git a/src/pages/Technologies.js b/src/pages/Technologies.js
index 12e4e1b..76c4c20 100644
--- a/src/pages/Technologies.js
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/styles/Style.js b/src/styles/Style.js
index 845052f..9250ee5 100644
--- a/src/styles/Style.js
+++ b/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',
     }
 }