more work on visual design

src/App.js

@@ -9,6 +9,13 @@ import './App.scss';
 function App() {
   return (
     <div className="App">
+      
+      <header>
+        <h2 className="my-name">Mikayla Dobson</h2>
+        <h2>Web Design Contractor</h2>
+      </header>
+      
+      <main>
         <BrowserRouter>
             <Routes>
               <Route path='/' element={<Welcome />} />
@@ -18,6 +25,8 @@ function App() {
               <Route path='/links' element={<Links />} />
             </Routes>
         </BrowserRouter>
+      </main>
+
     </div>
   );
 }

src/App.scss

@@ -1,28 +1,33 @@
 @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');
 
+$pink50: #fce4ec;
+$purple200: #ce93d8;
+
 .App {
   text-align: center;
 }
 
-
+header {
-.welcome-page {
+  background-color: $purple200;
-  
+  display: flex;
-}
+  align-items: flex-end;
-.welcome-header {
+  border-bottom: 1px solid black;
   font-family: 'Open Sans', sans-serif;
-  h1 {
+  .my-name {
-    font-size: 2.4rem;
     font-weight: 900;
+    border-right: 1px solid black;
+    padding-right: 1rem;
   }
   h2 {
     font-weight: 400;
     position: relative;
-    bottom: 0.8rem;
+    padding-left: 1rem;
   }
 }
 
 .landing {
+  padding-top: 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;

src/pages/Welcome.js

@@ -1,3 +1,5 @@
+import '../App.scss';
+
 import Paper from '@mui/material/Paper';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
@@ -14,13 +16,8 @@ const { themeA } = colorThemes;
 export default function Welcome() {
     return (
         <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}} />
+                <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>