Reorganize files and imports

src/components/App/App.js

@@ -0,0 +1,30 @@
+import {Routes, Route} from 'react-router-dom';
+import Nav from '../Nav/Nav';
+import Home from '../Home/Home';
+import About from '../About/About';
+import Contact from '../Contact/Contact';
+import Portfolio from '../Portfolio/Portfolio';
+import Footer from '../Footer/Footer';
+
+const App = () => {
+  return (
+    <>
+      <Nav />
+      <main>
+        <Routes>
+          <Route 
+            path='/' 
+            element={<Home />}
+          />
+          <Route 
+            path='/about'
+          />
+
+        </Routes>
+      </main>
+      <Footer />
+    </>
+  )
+}
+
+export default App;

src/components/App/_App.scss

@@ -0,0 +1,66 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+* {
+  // border: 1px solid red;
+}
+
+html,
+body,
+.root,
+.page {
+  margin: 0;
+  min-height: 100vh;
+}
+
+html {
+  background: linear-gradient(180deg, #D4A29C 0%, #EDCC8B 50%, #B6D8D3 100%);
+  font-size: 62.5%;
+}
+
+h1, h2 {
+  font-family: v.$header-font;
+}
+
+h2 {
+  font-size: 6rem;
+  margin: 1rem 0;
+  align-self: center;
+}
+
+h1,
+h2,
+h3,
+button,
+p {
+  color: v.$text-color;
+  text-shadow: v.$shadow;
+}
+
+h3 {
+  font-family: v.$header-font;
+  font-size: 3rem;
+}
+
+button,
+p {
+  font-size: 3rem;
+}
+
+p {
+  font-family: v.$body-font;
+  margin: 0;
+}
+
+.page {
+  height: 100%;
+  width: 100%;
+}
+
+.page__box {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  @include m.true-center;
+  background-color: v.$content-box;
+}

src/components/Footer/_Footer.scss

@@ -0,0 +1,3 @@
+.footer {
+  height: 10rem;
+}

src/components/Landing.js → src/components/Home/Home.js

@@ -1,19 +1,17 @@
-import headshot from '../assets/headshot.jpg'
-
-const Landing = () => {
+const Home = () => {
   return (
     <div id='landing' className='page landing'>
       <section className='page__box'>
         <div className='landing__text'>
-          <p>Hi, my name is</p>
+          <h3 className='landing__header'>Hello and welcome to SoaeSpace! 🌻</h3>
+          <p>My name is</p>
           <h2>Rachel Soae Prather</h2>
           <p>I’m a Software Developer specializing in front end technologies including React, JavaScript, and Sass</p>
           <button className='landing__button'>View My Work</button>
         </div>
-        <img className='landing__img' src={headshot} />
       </section>
     </div>
   )
 }
 
-export default Landing;
+export default Home;

src/styles/_landing.scss → src/components/Home/_Home.scss

@@ -2,7 +2,6 @@
 @use 'mixins' as m;
 
 .landing {
-  width: 100%;
   display: flex;
   @include m.true-center;
 }
@@ -17,6 +16,7 @@
 }
 
 .landing__button {
+  @include m.button;
   border-radius: 2px;
   border: 1px solid #FFF;
   margin-top: 1em;

src/components/Nav/Nav.js

@@ -0,0 +1,19 @@
+import {Link} from 'react-router-dom';
+
+const Nav = () => {
+  return (
+    <nav>
+
+      <Link to='#' className='nav__text nav__header'>
+        <h1>🌻 SoaeSpace</h1>
+      </Link>
+      <div className='nav__buttons'>
+        <Link to='/#projects' className='nav__text nav__button'>Portfolio</Link>
+        <Link to='/#about' className='nav__text nav__button'>About</Link>
+        <Link to='/#contact' className='nav__text nav__button'>Contact</Link>
+      </div>
+    </nav>
+  )
+}
+
+export default Nav;

src/styles/_nav.scss → src/components/Nav/_Nav.scss

@@ -11,16 +11,26 @@ nav {
   backdrop-filter: blur(5px)
 }
 
+h1 {
+  font-size: 2.6rem;
+}
+
 .nav__text {
   font-size: 2.2rem;
 }
 
+.nav__header,
+.nav__button,
+.nav__button:visited {
+  text-decoration: none;
+}
+
+
 .nav__header,
 .nav__buttons {
   padding: 0 3rem;
 }
 
 .nav__button {
-  border: none;
-  padding: 2rem;
+  @include m.button;
 }

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './styles/output.css';
-import App from './components/App';
+import App from './components/App/App';
 import reportWebVitals from './reportWebVitals';
-import { BrowserRouter } from 'react-router-dom'; 
+import {BrowserRouter} from 'react-router-dom'; 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/styles/_mixins.scss

@@ -1,4 +1,12 @@
+@use 'variables' as v;
+
 @mixin true-center {
   justify-content: center;
   align-items: center;
+}
+
+@mixin button {
+  font-family: v.$button-font;
+  background: 0%;
+  padding: 0.5em 1em;
 }

src/styles/input.scss

@@ -1,78 +1,8 @@
-@use 'variables' as v;
-@use 'mixins' as m;
-@use 'landing';
-@use 'nav';
-
-* {
-  // border: 1px solid red;
-}
-
-html,
-body,
-.root,
-.page {
-  margin: 0;
-  min-height: 100vh;
-}
-
-html {
-  background: linear-gradient(180deg, #D4A29C 0%, #EDCC8B 50%, #B6D8D3 100%);
-  font-size: 62.5%;
-}
-
-h1, h2 {
-  font-family: v.$header-font;
-}
-
-h2 {
-  font-size: 8rem;
-  margin: 1rem 0;
-  align-self: center;
-}
-
-h1,
-h2,
-h3,
-button,
-p {
-  color: v.$text-color;
-  text-shadow: v.$shadow;
-}
-
-button {
-  font-family: v.$button-font;
-}
-
-p {
-  font-family: v.$body-font;
-  margin: 0;
-}
-
-button,
-p {
-  font-size: 3rem;
-}
-
-button {
-  background: 0%;
-  padding: 0.5em 1em;
-}
-
-.page {
-  height: 100%;
-  width: 100%;
-}
-
-.page__box {
-  width: 100%;
-  height: 60vh;
-  display: flex;
-  @include m.true-center;
-  background-color: v.$content-box;
-}
-
-h3 {
-  font-family: v.$header-font;
-  font-size: 4rem;
-}
-
+@use './variables' as *;
+@use './mixins' as *;
+@use '../components/About/About';
+@use '../components/App/App';
+@use '../components/Contact/Contact';
+@use '../components/Home/Home';
+@use '../components/Nav/Nav';
+@use '../components/Portfolio/Portfolio';