about me styled

src/App.scss

@@ -6,9 +6,7 @@ $purple200: #ce93d8;
 
 .App {
   text-align: center;
-}
+  header {
-
-header {
     background-color: $purple200;
     display: flex;
     align-items: center;
@@ -36,21 +34,23 @@ header {
       position: relative;
       padding-left: 1rem;
     }
-}
-
-.landing {
-  padding-top: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 75vw;
-  h3 {
-    position: relative;
-    top: 0.8rem;
   }
 }
 
-.tech-scrollbar {
+// .landing {
+//   padding-top: 1.5rem;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   width: 75vw;
+//   h3 {
+//     position: relative;
+//     top: 0.8rem;
+//   }
+// }
+
+.technologies-page {
+  .tech-scrollbar {
     height: 5rem;
     width: 60rem;
     display: flex;
@@ -74,27 +74,8 @@ header {
       height: 5rem;
       width: 20rem;
     }
-}
 
-.backup-bar {
+    @keyframes hide-until-start {
-  bottom: 5rem;
-  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 {
       from {
         opacity: 0;
       }
@@ -104,22 +85,58 @@ header {
       100% {
         opacity: 1;
       }
-}
+    }
     
-@keyframes tech-scroll {
+    @keyframes tech-scroll {
       from {
         left: -60rem;
       }
       100% {
         left: 60rem;
       }
-}
+    }
     
-@keyframes from-right {
+    @keyframes from-right {
       from {
         left: 60rem;
       }
       100% {
         left: -60rem;
       }
+    }
+  }
+  
+  .backup-bar {
+    bottom: 5rem;
+    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;
+  }
+}
+
+.about-me-page {
+  a {
+    color: white;
+    border-radius: 12px;
+    transition: color 0.3s linear;
+    text-decoration: none;
+    &:hover {
+      color: $purple200;
+      transition: color 0.3s linear;
+    }
+  }
+  .card-title {
+    text-transform: uppercase;
+  }
 }

src/pages/AboutMe.js

@@ -1,37 +1,39 @@
 import '../App.scss';
-import { DocumentStyle, ProjectsPage } from '../styles/Style';
+import { DocumentStyle, AboutMePage } from '../styles/Style';
 
 import Card from '@mui/material/Card';
-import Grid from '@mui/material/Grid';
 
 const { htmlTheme } = DocumentStyle;
-const { headerCard, projectCards, cardDimensions } = ProjectsPage;
+const { headerCard, projectCards, cardDimensions, aboutGallery } = AboutMePage;
 
 export default function AboutMe() {
     return (
-        <div style={htmlTheme}>
+        <div style={htmlTheme} className="about-me-page">
-            <Card sx={[headerCard, cardDimensions]}>What I Do:</Card>
+            <Card sx={[headerCard, cardDimensions]} className="card-title">What I Do:</Card>
 
+            <div style={aboutGallery}>
                 <Card sx={[projectCards, cardDimensions]}>
-                <h2>Create full stack web applications</h2>
+                    <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>
+                    <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]}>
-                <h2>Creative minded problem solver</h2>
+                    <h2 className="card-title">Creative minded problem solver</h2>
-                <p>My rich creative background as a musician, composer, producer, and artistic collaborator provide me with a unique frame of reference for
+                    <p>My <a href="/creative-projects">rich creative background as a musician, composer, producer,
+                        and artistic collaborator</a> provide me with a unique frame of reference for
                         solving technical problems and adapting to dynamic environments.</p>
-                <a href="/">See some of my creative works for examples of my aptitudes, as well as some thoughts on how they apply to work as a developer!</a>
                 </Card>
 
                 <Card sx={[projectCards, cardDimensions]}>
-                <h2>Database Operations and Management</h2>
+                    <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.</p>
+                    <p>My projects have featured both relational and non-relational databases, in particular 
-                <p>I also have experience with various technologies for connecting these to front-end applications, including Prisma and Supabase.</p>
+                        PostgreSQL and MongoDB.</p>
+                    <p>I also have experience with various technologies for connecting these to front-end applications, 
+                        including Prisma and Supabase.</p>
                 </Card>
-        
+            </div>
-            <a href="/">Go home</a>
         </div>
     )
 }

src/pages/Technologies.js

@@ -11,7 +11,7 @@ const { htmlTheme } = DocumentStyle;
 
 export default function Technologies() {
     return (
-        <div style={htmlTheme}>
+        <div className="technologies-page" style={htmlTheme}>
             <Card sx={technologyCard}>
                 <h1>What technologies do I use?</h1>
             </Card>

src/styles/Style.js

@@ -98,17 +98,37 @@ export const WelcomePage = {
     }
 }
 
-export const ProjectsPage = {
+export const AboutMePage = {
     headerCard: {
-        backgroundColor: green['A700']
+        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[100],
+        color: indigo[50],
-    },
-    cardDimensions: {
         width: '300px',
         height: '300px',
+        padding: '2rem',
+    },
+    cardDimensions: {
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: '12px',
+        textAlign: 'center',
+    },
+    aboutGallery: {
+        display: 'flex',
+        height: '70vh',
+        width: '80vw',
+        justifyContent: 'space-around',
+        margin: '2rem',
     }
 }