style cleanup and consolidation

src/pages/AboutMe.jsx

@@ -1,34 +1,30 @@
-import { DocumentStyle, AboutMePage } from '../styles/Style';
-import { Link, useNavigate } from 'react-router-dom';
+import { DocumentStyle } from '../styles/Style';
 import '../sass/pages/AboutMe.scss';
 
 import Card from '@mui/material/Card';
 
 const { htmlTheme } = DocumentStyle;
-const { projectCards, cardDimensions } = AboutMePage;
 
 export default function AboutMe() {
-    const navigate = useNavigate();
-
     return (
         <div style={htmlTheme} className="about-me-page">
             <h1 className="what-i-do-header">What I Do</h1>
 
             <div className="about-gallery">
-                <Card sx={[projectCards, cardDimensions]} className="fade one">
+                <Card className="fade one">
                     <h2 className="card-title">Create full stack web applications</h2>
                     <p>I have experience building web applications with and without back-end integrations.</p>
                     <p>I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be 
                         natural in their structure and easy to maintain.</p>
                 </Card>
 
-                <Card sx={[projectCards, cardDimensions]} className="fade two">
+                <Card className="fade two">
                     <h2 className="card-title">Web Design Consulting</h2>
                     <p>I consult on small teams at <a target="_blank" rel="noreferrer" href="https://www.metazu.studio/">Metazu Studio</a>, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.</p>
                     <p>I have worked on projects focused on full stack web engineering, real time communications, and designing beautiful user experiences.</p>
                 </Card>
 
-                <Card sx={[projectCards, cardDimensions]} className="fade three">
+                <Card className="fade three">
                     <h2 className="card-title">Creative minded problem solver</h2>
                     <p>
                         My background as a musician, composer, producer, and artistic
@@ -37,7 +33,7 @@ export default function AboutMe() {
                     </p>
                 </Card>
 
-                <Card sx={[projectCards, cardDimensions]} className="fade four">
+                <Card className="fade four">
                     <h2 className="card-title">Database Operations and Management</h2>
                     <p>My projects have featured both relational and non-relational databases, in particular 
                         PostgreSQL and MongoDB. I also have experience with various methods of connecting these

src/pages/Projects.jsx

@@ -1,10 +1,10 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { DocumentStyle } from '../styles/Style';
 import { projectsArray } from '../components/ProjectsArray';
 import { Divider } from '@mui/material';
 import '../sass/pages/Projects.scss';
 
-const { htmlTheme, dividerStyle } = DocumentStyle;
+const { htmlTheme } = DocumentStyle;
 
 const defaultFilter = {
     language: '',
@@ -102,7 +102,7 @@ export default function Projects() {
                 </div>
             </section>
 
-            <Divider orientation="horizontal" sx={dividerStyle} />
+            <Divider orientation="horizontal" className="divider" />
 
             <div className="project-cards">
                 {results}

src/pages/Welcome.jsx

@@ -1,26 +1,17 @@
-import { Avatar, Button, Card, Divider } from '@mui/material';
+import { Avatar, Card, Divider } from '@mui/material';
 import profile from '../media/profile.jpeg';
 import '../sass/pages/Welcome.scss';
 
-// SX style object imports
-
-import { DocumentStyle, WelcomePage } from '../styles/Style';
-
-const { pageTheme, welcomeFooter, mainHeaderCard } = WelcomePage;
-const { dividerStyle } = DocumentStyle;
-
-// Web page logic
-
 export default function Welcome() {
     return (
-        <div className="welcome-page" style={pageTheme}>
-            <Card id="header-card" sx={mainHeaderCard} elevation={5}>
+        <div className="welcome-page">
+            <Card id="header-card" elevation={5}>
                 <Avatar alt="Mikayla Dobson" src={profile} sx={{width: 110, height: 110}} />
                 <h3>Hi, my name is Mikayla! I'm a junior-level full stack web developer.</h3>
                 <h4 className="do-stuff">Thanks for visiting! Feel free to peruse below:</h4>
             </Card>
 
-            <Divider orientation="horizontal" sx={dividerStyle} />
+            <Divider orientation="horizontal" className="divider" />
 
             <Card id="welcome-info">
                 <p>
@@ -28,9 +19,9 @@ export default function Welcome() {
                 </p>
             </Card>
 
-            <Divider orientation="horizontal" sx={dividerStyle} />
+            <Divider orientation="horizontal" className="divider" />
 
-            <footer sx={welcomeFooter}>
+            <footer>
                 <p>&copy; Mikayla Dobson 2022</p>
             </footer>
         </div>

src/sass/components/_Divider.scss

@@ -0,0 +1,5 @@
+%divider {
+    width: 80%;
+    color: #000;
+    border-width: 2px;
+}

src/sass/helper/_animations.scss

@@ -1,3 +1,17 @@
+@keyframes sideToSide {
+    from {
+      transform: rotate(-1deg);
+    }
+
+    50% {
+      transform: rotate(1deg);
+    }
+
+    to {
+      transform: rotate(-1deg);
+    }
+}
+
 @keyframes hide-until-start {
     from {
     opacity: 0;

src/sass/helper/_variables.scss

@@ -1,3 +1,6 @@
-$pink50: #fce4ec;
-$purple100: #e1bee7;
-$purple200: #ce93d8;
+$pink50: #ffffff;
+$purple100: #ffffff;
+$purple200: #ffffff;
+
+$indigoOne: #283593;
+$indigoWhite: #e8eaf6;

src/sass/pages/AboutMe.scss

@@ -21,8 +21,16 @@
   }
 
   .fade {
+    display: flex;
+    flex-direction: column;
+    background-color: $indigoOne;
+    color: $indigoWhite;
+    text-align: center;
+
     width: 300px;
     height: 300px;
+    border-radius: 12px;
+
     padding: 1rem;
     margin: 0.5rem;
   }

src/sass/pages/Projects.scss

@@ -1,51 +1,57 @@
+@import "../components/Divider";
+
 .projects-page {
-    .filter-panel {
+  .divider {
+    @extend %divider;
+  }
+  
+  .filter-panel {
+    display: flex;
+    position: static;
+    flex-direction: column;
+    background-color: white;
+    align-items: center;
+    padding: 1rem;
+    width: 40vw;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    transition: align-items 1s ease,
+                position 1s ease
+    ;
+
+    .filter-controls {
       display: flex;
-      position: static;
-      flex-direction: column;
-      background-color: white;
-      align-items: center;
-      padding: 1rem;
-      width: 40vw;
-      border-radius: 12px;
-      margin-bottom: 2rem;
-      transition: align-items 1s ease,
-                  position 1s ease
-      ;
-  
-      .filter-controls {
-        display: flex;
-        justify-content: center;
-        width: 80%;
-        > * {
-          margin: 1rem;
-        }
-      }
-    }
-  
-    .project-cards {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-top: 2rem;
-  
+      justify-content: center;
+      width: 80%;
       > * {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background-color: lightblue;
-        width: 80%;
-        height: auto;
-        margin-bottom: 2rem;
-        .links {
-          display: flex;
-          width: 75%;
-          align-items: baseline;
-          justify-content: space-around;
-        }
-        a:last-child {
-          margin-bottom: 1rem;
-        }
+        margin: 1rem;
       }
     }
+  }
+
+  .project-cards {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 2rem;
+
+    > * {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: lightblue;
+      width: 80%;
+      height: auto;
+      margin-bottom: 2rem;
+      .links {
+        display: flex;
+        width: 75%;
+        align-items: baseline;
+        justify-content: space-around;
+      }
+      a:last-child {
+        margin-bottom: 1rem;
+      }
+    }
+  }
 }

src/sass/pages/Welcome.scss

@@ -1,28 +1,59 @@
+@import "../helper/animations";
+@import "../components/Divider";
+
 .welcome-page {
-    @keyframes sideToSide {
-      from {
-        transform: rotate(-1deg);
-      }
-  
-      50% {
-        transform: rotate(1deg);
-      }
-  
-      to {
-        transform: rotate(-1deg);
-      }
-    }
-  
-    #header-card {
-      height: 18rem;
-      animation: sideToSide 10s infinite;
-    }
-    #welcome-info {
-      margin: 2rem 0;
-      width: 75%;
-      font-size: 1rem;
-      font-weight: 500;
-      padding: 0.6rem;
-      animation: sideToSide 15s infinite;
-    }
-}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  overflow-x: hidden;
+
+  #header-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 35vw;
+    height: 18rem;
+
+    padding: 1rem;
+    margin: 2rem;
+
+    font-size: 1.2rem;
+    border-radius: 12px;
+    background-color: lightgray;
+
+    animation: sideToSide 10s infinite;
+  }
+
+  #welcome-info {
+    margin: 2rem 0;
+    width: 75%;
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 0.6rem;
+    animation: sideToSide 15s infinite;
+  }
+
+  .divider {
+    @extend %divider;
+  }
+
+  footer {
+    width: 80%;
+    display: block;
+    text-align: right;
+  }
+}
+
+/*
+display: 'flex',
+      margin: '2rem',
+      width: '35vw',
+      padding: '1rem',
+      flexDirection: 'column',
+      backgroundColor: pink[50],
+      alignItems: 'center',
+      fontSize: '1.2rem',
+      borderRadius: '12px'
+*/

src/styles/Style.js

@@ -2,16 +2,11 @@ import { indigo, pink, deepPurple, purple } from '@mui/material/colors';
 
 export const DocumentStyle = {
     htmlTheme: {
-        backgroundColor: purple[100],
+        backgroundColor: 'white',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         minHeight: '100vh',
-    },
-    dividerStyle: {
-        width: '80%',
-        color: '#000000',
-        borderWidth: '2px'
     }
 }
 
@@ -27,81 +22,4 @@ export const SidebarStyle = {
     listItem: {
         backgroundColor: pink[200]
     }
-}
-
-export const WelcomePage = {
-    pageTheme: {
-        display: 'flex',
-        backgroundColor: purple[100],
-        height: '100vh',
-        flexDirection: 'column',
-        alignItems: 'center',
-        overflowX: 'hidden'
-    },
-    mainHeaderCard: {
-      display: 'flex',
-      margin: '2rem',
-      width: '35vw',
-      padding: '1rem',
-      flexDirection: 'column',
-      backgroundColor: pink[50],
-      alignItems: 'center',
-      fontSize: '1.2rem',
-      borderRadius: '12px'
-    },
-    galleryTheme: {
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: indigo[800],
-        border: '1px solid purple',
-        width: '70vw',
-        height: '18rem',
-        padding: '3rem',
-        margin: '2rem',
-    },
-    galleryRow: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center'
-    },
-    galleryPages: {
-        display: 'flex',
-        justifyContent: 'center',
-    },
-    galleryPage: {
-        inactive: {
-            backgroundColor: deepPurple[50],
-        },
-        active: {
-            backgroundColor: indigo[800]
-        }
-    },
-    welcomeFooter: {
-        display: 'block',
-        textAlign: 'right'
-    }
-}
-
-export const AboutMePage = {
-    headerCard: {
-        backgroundColor: purple[700],
-        color: indigo[50],
-        fontSize: '1.5rem',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '12rem',
-        width: '12rem',
-        marginTop: '2rem',
-        marginBottom: '3rem',
-    },
-    projectCards: {
-        backgroundColor: indigo[800],
-        color: indigo[50],
-    },
-    cardDimensions: {
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: '12px',
-        textAlign: 'center',
-    }
 }