added new route

src/App.js

@@ -3,6 +3,7 @@ import Welcome from './pages/Welcome';
 import Projects from './pages/Projects';
 import Technologies from './pages/Technologies';
 import Links from './pages/Links';
+import CreativeWorks from './pages/CreativeWorks';
 import InProgress from './pages/InProgress';
 import './App.scss';
 
@@ -10,7 +11,7 @@ function App() {
   return (
     <div className="App">
       
-      <header>
+      <header className="app-navbar">
         <h2 className="my-name">Mikayla Dobson</h2>
         <h2>Web Design Contractor</h2>
       </header>
@@ -23,6 +24,7 @@ function App() {
               <Route path='/in-progress' element={<InProgress />} />
               <Route path='/technologies' element={<Technologies />} />
               <Route path='/links' element={<Links />} />
+              <Route path='/creative-works' element={<CreativeWorks />} />
             </Routes>
         </BrowserRouter>
       </main>

src/App.scss

@@ -44,4 +44,9 @@ header {
 
 @keyframes gallery-animation-right {
   
-}
+}
+
+// .welcome-page {
+//   // background-image: url('./media/max-harlynking-_QcLpud-gD0-unsplash.jpg');
+//   background: url('./media/max-harlynking-_QcLpud-gD0-unsplash.jpg');
+// }

src/pages/CreativeWorks.js

@@ -0,0 +1,8 @@
+export default function CreativeWorks() {
+    return (
+        <>
+        <h1>Creative works</h1>
+        <a href='/'>Home</a>
+        </>
+    )
+}

src/pages/Projects.js

@@ -9,7 +9,7 @@ const { headerCard, projectCards, cardDimensions } = ProjectsPage;
 
 export default function Projects() {
     return (
-        <Grid sx={htmlTheme}>
+        <div style={htmlTheme}>
             <Card sx={[headerCard, cardDimensions]}>What I Do:</Card>
 
             <Card sx={[projectCards, cardDimensions]}>
@@ -18,6 +18,13 @@ export default function Projects() {
                 <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>
+                <p>My rich creative background as a musician, composer, producer, and artistic collaborator 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>
                 <p>My projects have featured both relational and non-relational databases, in particular PostgreSQL and MongoDB.</p>
@@ -25,6 +32,6 @@ export default function Projects() {
             </Card>
         
             <a href="/">Go home</a>
-        </Grid>
+        </div>
     )
 }

src/pages/Welcome.js

@@ -13,8 +13,13 @@ import profile from '../media/profile.jpeg';
 
 import { DocumentStyle, WelcomePage } from '../styles/Style';
 
-const { pageTheme, galleryTheme, galleryRow, galleryPages, galleryPage, welcomeFooter } = WelcomePage;
-const { buttonStyle, galleryArrowStyle, galleryCards } = DocumentStyle;
+const {
+    pageTheme, galleryTheme, galleryRow,
+    galleryPages, galleryPage, welcomeFooter,
+    mainHeaderCard
+} = WelcomePage;
+
+const { buttonStyle, galleryArrowStyle, galleryCards, dividerStyle } = DocumentStyle;
 
 // Web page logic
 
@@ -22,6 +27,7 @@ export default function Welcome() {
     const [gallery, setGallery] = useState([0,1]);
     const [rendered, setRendered] = useState();
 
+    // identifiers
     const cardOne = useRef();
     const cardTwo = useRef();
     const cardThree = useRef();
@@ -45,22 +51,25 @@ export default function Welcome() {
         <Button ref={buttonFive} variant="contained" href="/creative-works" sx={buttonStyle}>Where can I listen to some of your music?</Button>
     ];
 
-    // handle gallery debug
+    // change active page indicator beneath gallery
     useEffect(() => {
         setRendered([
             galleryButtons[gallery[0]], galleryButtons[gallery[1]]
         ]);
 
         for (let each of allCardRefs) {
+            // inactive style
             each.current.style.backgroundColor = '#ede7f6';
         }
 
         for (let each of gallery) {
-            allCardRefs[each].current.style.backgroundColor = "#283593";
+            // active style
+            allCardRefs[each].current.style.backgroundColor = "#673ab7";
         }
 
     }, [gallery]);
 
+    // gallery page change logic
     const handleDecrement = () => {
         let newState = [];
         for (let each of gallery) {
@@ -82,19 +91,19 @@ export default function Welcome() {
         setGallery(newState);
     }
 
+    // render
     return (
-        <div style={pageTheme}>
-            <div className="landing">
+        <div className="welcome-page" style={pageTheme}>
+            <Card sx={mainHeaderCard} 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>
                 <p>I excel in building well-structured and maintainable web applications, managing algorithmic complexity,
                     and adapting my workflow to fit the needs of any environment I should find myself in.
                 </p>
-            </div>
+                <h4 className="do-stuff">Thanks for visiting! Feel free to peruse below:</h4>
+            </Card>
 
-            <h3 className="do-stuff">Thanks for visiting! Feel free to peruse below:</h3>
-
-            <Divider orientation="horizontal" sx={{width: '90%', color: '#000000', borderWidth: '2px'}} />
+            <Divider orientation="horizontal" sx={dividerStyle} />
             
             <div style={galleryTheme} className="gallery">
                 <div style={galleryRow}>
@@ -111,7 +120,7 @@ export default function Welcome() {
                 </div>
             </div>
 
-            <Divider orientation="horizontal" sx={{width: '90%', color: '#000000', borderWidth: '2px'}} />
+            <Divider orientation="horizontal" sx={dividerStyle} />
 
             <footer sx={welcomeFooter}>
                 <p>&copy; Mikayla Dobson 2022</p>

src/styles/Style.js

@@ -3,6 +3,7 @@ import { indigo, blue, pink, green, deepPurple, purple } from '@mui/material/col
 export const DocumentStyle = {
     htmlTheme: {
         backgroundColor: purple[100],
+        height: '100vh',
     },
     linkStyle: {
         color: deepPurple[300],
@@ -25,9 +26,9 @@ export const DocumentStyle = {
         display: 'flex',
         justifyContent: 'center',
         color: deepPurple[50],
-        backgroundColor: deepPurple[500],
+        backgroundColor: deepPurple[400],
         '&:hover': {
-            backgroundColor: indigo[800],
+            backgroundColor: deepPurple[500],
         }
     },
     galleryCards: {
@@ -36,7 +37,7 @@ export const DocumentStyle = {
         margin: '0.8rem'
     },
     dividerStyle: {
-        width: '90%',
+        width: '80%',
         color: '#000000',
         borderWidth: '2px'
     }
@@ -51,12 +52,25 @@ export const WelcomePage = {
         alignItems: 'center',
         overflowX: 'hidden'
     },
+    mainHeaderCard: {
+      display: 'flex',
+      margin: '2rem',
+      width: '35vw',
+      padding: '1rem',
+      flexDirection: 'column',
+      backgroundColor: pink[50],
+      alignItems: 'center',
+      fontSize: '1.2rem',
+    },
     galleryTheme: {
         display: 'flex',
         flexDirection: 'column',
-        width: '95vw',
+        backgroundColor: indigo[800],
+        border: '1px solid purple',
+        width: '70vw',
         height: '18rem',
         padding: '3rem',
+        margin: '2rem',
     },
     galleryRow: {
         display: 'flex',