incoporating material ui

package.json

@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.5.3",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
+    "sass": "^1.49.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -4,7 +4,7 @@ import Projects from './pages/Projects';
 import Technologies from './pages/Technologies';
 import Links from './pages/Links';
 import InProgress from './pages/InProgress';
-import './App.css';
+import './App.scss';
 
 function App() {
   return (

src/App.scss

@@ -0,0 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+.App {
+  text-align: center;
+}
+
+
+.welcome-page {
+  
+}
+.welcome-header {
+  font-family: 'Open Sans', sans-serif;
+  h1 {
+    font-size: 2.4rem;
+    font-weight: 900;
+  }
+  h2 {
+    font-weight: 400;
+    position: relative;
+    bottom: 0.8rem;
+  }
+}
+
+.landing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 75vw;
+  h3 {
+    position: relative;
+    top: 0.8rem;
+  }
+}

src/pages/Welcome.js

@@ -1,38 +1,50 @@
+import Paper from '@mui/material/Paper';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import profile from '../media/profile.jpeg';
+
+import { DocumentStyle, WelcomePage } from '../styles/Style';
+
+const { pageTheme, galleryTheme, cardTheme } = WelcomePage;
+
+const { colorThemes, linkStyle } = DocumentStyle;
+const { themeA } = colorThemes;
+
+
 export default function Welcome() {
     return (
-        <div className="Welcome page">
-            <header className="landing-section">
-            </header>
-
-            <main>
+        <div style={pageTheme}>
+            <header className="welcome-header">
                 <h1>Mikayla Dobson</h1>
                 <h2>Web Design Contractor</h2>
+            </header>
 
+            <div className="landing">
+                <Avatar alt="Mikayla Dobson" src={profile} sx={{width: 100, height: 100}} />
                 <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>
 
-                <h3>So, thanks for stopping by! Feel free to peruse below:</h3>
-                
-                <div className="gallery">
+            <h3 className="do-stuff">Thanks for visiting! Feel free to peruse below:</h3>
+            
+            <div style={galleryTheme} className="gallery">
+                <Paper elevation={5} sx={[themeA, cardTheme]}>
+                    <Button href="/projects" sx={linkStyle}>What kinds of things do I do?</Button>
+                </Paper>
 
-                    <div className="card">
-                        <a href="/projects">What kinds of things do I do?</a>
-                    </div>
+                <Paper elevation={5} sx={[themeA, cardTheme]}>
+                    <Button href="/technologies" sx={linkStyle}>What do I use to do it?</Button>
+                </Paper>
 
-                    <div className="card">
-                        <a href="/technologies">What do I use to do it?</a>
-                    </div>
+                <Paper elevation={5} sx={[themeA, cardTheme]}>
+                    <Button href="/in-progress" sx={linkStyle}>What projects am I working on now?</Button>
+                </Paper>
 
-                    <div className="card">
-                        <a href="/in-progress">What projects am I working on now?</a>
-                    </div>
+                <Paper elevation={5} sx={[themeA, cardTheme]}>
+                    <Button href="/links" sx={linkStyle}>Where can you find more about me and my work?</Button>
+                </Paper>
 
-                    <div className="card">
-                        <a href="/links">Where can you find more about me and my work?</a>
-                    </div>
-
-                </div>
-            </main>
+            </div>
         </div>
     )
 }

src/styles/Style.js

@@ -0,0 +1,44 @@
+import { red, pink, deepPurple, purple } from '@mui/material/colors';
+
+export const DocumentStyle = {
+    colorThemes: {
+        themeA: {
+            backgroundColor: pink[50],
+            color: deepPurple[300]
+        },
+        themeB: {
+
+        }
+    },
+    htmlTheme: {
+        backgroundColor: purple[200]
+    },
+    linkStyle: {
+        color: deepPurple[300],
+        textDecoration: 'none'
+    }
+}
+
+export const WelcomePage = {
+    pageTheme: {
+        display: 'flex',
+        backgroundColor: purple[100],
+        height: '100vh',
+        flexDirection: 'column',
+        alignItems: 'center',
+        overflowX: 'hidden'
+    },
+    galleryTheme: {
+        display: 'flex',
+        width: '90vw',
+        justifyContent: 'center',
+    },
+    cardTheme: {
+        width: '250px',
+        height: '250px',
+        margin: '2rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+}