made some major changes

public/custom.css

@@ -1,3 +1,55 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap');
 ol.breadcrumb {
     margin-bottom: 0rem;
-}
+}
+.greeterJumbotron {
+    background-image: url('./stedsatnight.jpg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    color:#fff;
+    height: 95vh;
+    background-color: #212529;
+    margin-bottom: 0px;
+    border-radius: 0px;
+}
+.frontPage {
+    background-color: #212529;
+    color:#fff;
+    margin-bottom: 0px;
+    padding-top: 15px;
+    border-radius: 0px;
+}
+h1.frontPage {
+    font-family: 'Ubuntu Mono', monospace;
+}
+p.frontPage {
+    padding-left: 50px;
+    font-family: 'Ubuntu Mono', monospace;
+}
+h3.frontPage {
+    padding-left: 50px;
+    font-family: 'Ubuntu Mono', monospace;
+}
+h5.frontPage {
+    padding-left: 50px;
+    font-family: 'Ubuntu Mono', monospace;
+}
+a.frontPage {
+    padding-left: 50px;
+    font-size: 24px;
+    font-family: 'Ubuntu Mono', monospace;
+    
+}
+a.frontPage:hover {
+    
+    color:#fff;
+    text-decoration: underline;
+    
+}
+ul.frontPage {
+    padding-left: 75px;
+    font-family: 'Ubuntu Mono', monospace;
+}
+.navBar {
+    opacity:0.9;
+}

src/App.js

@@ -5,14 +5,20 @@ import React from 'react'
 
 import AppFunctions from './AppFunctions'
 import Header from './common/Header.js';
+import AboutMe from './homeScreen/AboutMe.js'
 import GreeterJumboTron from './homeScreen/GreeterJumboTron.js'
 import PopularProjectView from './homeScreen/PopularProjectView.js'
 import ProjectCardView from './projects/ProjectCardView.js'
 import ProjectView from './projects/ProjectView'
+import Experience from './homeScreen/Experience';
+import RelevantCoursework from './homeScreen/RelevantCoursework';
+import Skills from './homeScreen/Skills';
+import {configureAnchors} from 'react-scrollable-anchor'
 
 
 class App extends AppFunctions {
   render() {
+    configureAnchors({offset: -60, scrollDuration: 400})
     return (
       <div className="App">
         <Header />
@@ -21,7 +27,11 @@ class App extends AppFunctions {
             <Route exact path="/">
               
               <GreeterJumboTron />
-              <PopularProjectView />
+              <AboutMe />
+              <Experience />
+              <RelevantCoursework />
+              <Skills />
+              {/*<PopularProjectView />*/}
               
             </Route>
             <Route path="/projects">

src/common/Header.js

@@ -1,15 +1,22 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component} from 'react'
 import { Navbar } from 'react-bootstrap'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 import {faGithub, faGit, faLinkedin} from '@fortawesome/free-brands-svg-icons'
-import Media from 'react-media'
 
 
 export class Header extends Component {
     render() {
         return (
-            <Navbar bg="dark" variant="dark" sticky="top">
+            <Navbar bg="dark" variant="dark" sticky="top" className="navBar">
                 <Navbar.Brand href="/">Ruben Ruiz</Navbar.Brand>
+                <Navbar.Collapse className="mr-auto">
+                    <Navbar.Text>
+                        <a style={{"paddingRight":"5px"}} href="#aboutMe">{<span className="iconText">~/AboutMe</span>}</a>
+                        <a style={{"paddingRight":"5px"}} href="#experience">{<span className="iconText">~/Experience</span>}</a>
+                        <a style={{"paddingRight":"5px"}} href="#relevantCoursework">{<span className="iconText">~/Courses</span>}</a>
+                        <a style={{"paddingRight":"5px"}} href="https://linkedin.com/in/runlevel0">{<FontAwesomeIcon icon={faLinkedin}/>}{<span className="iconText">/runlevel0</span>}</a>
+                    </Navbar.Text>
+                </Navbar.Collapse>
                 <Navbar.Collapse className="justify-content-end">
                     <Navbar.Text>
                         <a style={{"paddingRight":"5px"}} href="https://github.com/runlevelzero">{<FontAwesomeIcon icon={faGithub}/>}{<span className="iconText">/runlevelzero</span>}</a>

src/homeScreen/AboutMe.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { Jumbotron } from 'react-bootstrap';
+import ScrollableAnchor from 'react-scrollable-anchor';
+
+class AboutMe extends Component {
+    render() {
+        return (
+            <ScrollableAnchor id={'aboutMe'}>
+                <Jumbotron className={'frontPage'}>
+                    <h1 className='frontPage'>~$ ./AboutMe</h1>
+                    <br/>
+                    <p className='frontPage'>{'Hello, World! It\'s me, Ruben!\nI like to write great code. I have done most of my work thus far on websites, but I enjoy developing in Java as well as JavaScript. Recently, I have taken up Swift and iOS development as part of a class and am enjoying learning about this new modern program! Aside from programming, I am into digital fabrication with a special focus on 3D printing. I also like to play videogames like Mario Kart and Tetris. I have also taken up crocheting and you can see some of my work in everything (aside from video games of course) on my projects page. '}</p>
+                </Jumbotron>
+            </ScrollableAnchor>
+        );
+    }
+}
+
+export default AboutMe;

src/homeScreen/Course.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+class Course extends Component {
+    render() {
+        return (
+            <React.Fragment>
+                <h3 className={'frontPage'}>
+                    {this.props.course.name}
+                </h3>
+                <p className={'frontPage'}>
+                    {this.props.course.desc}
+                </p>
+            </React.Fragment>
+        );
+    }
+}
+
+export default Course;

src/homeScreen/Courses.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import Course from './Course';
+
+class Courses extends Component {
+    courses = [
+        {
+            name: "Database Theory",
+            desc: "This course focused on database design and working with relational databases, it taught me how to write DDL and SQL as well as how to design databases both relational and non-relational"
+        },
+        {
+            name: "Web Programming",
+            desc: "This course taught me the ins and outs of basic web programming from HTML to CSS and JS. This class also began teaching me about AJAX and how to talk to backendss"
+        }
+    ]
+    render() {
+        return (
+            <React.Fragment>
+                {this.courses.map((course) => {
+                    return(<Course course={course} />)
+                })}
+            </React.Fragment>
+        );
+    }
+}
+
+export default Courses;

src/homeScreen/Experience.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import {Jumbotron} from 'react-bootstrap'
+import ScrollableAnchor from 'react-scrollable-anchor';
+
+
+import Jobs from './Jobs';
+
+class Experience extends Component {
+    render() {
+        return (
+            <ScrollableAnchor id="experience">
+                <Jumbotron className={'frontPage'}>
+                    <h1 className='frontPage'>~$ ./Experience</h1>
+                    <br/>
+                     <Jobs jobs={this.jobs} />
+                </Jumbotron>
+            </ScrollableAnchor>
+        );
+    }
+}
+
+export default Experience;

src/homeScreen/GreeterJumboTron.js

@@ -4,6 +4,7 @@ import {Link} from 'react-router-dom'
 
 
 
+
 export class GreeterJumboTron extends Component {
     getProperGreeting = () => {
         let d = new Date()
@@ -12,7 +13,7 @@ export class GreeterJumboTron extends Component {
 
     render() {
         return (
-            <Jumbotron>
+            <Jumbotron className="greeterJumbotron">
                 <h1>
                     {this.getProperGreeting()}, my name is Ruben Ruiz.
                 </h1>

src/homeScreen/Job.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+class Job extends Component {
+    render() {
+        return (
+            <React.Fragment>
+                <h3 className={'frontPage'}>
+                    {`${this.props.info.name} `}
+                </h3>
+                <p className={'frontPage'}>
+                    {`${this.props.info.position} (${this.props.info.duration})`}
+                </p>
+                <ul className={'frontPage'}>
+                    {this.props.info.desc.map((item) => {
+                        return(<li>
+                            <b>{item.title}:</b> {item.desc}
+                        </li>)
+                    })}
+                </ul>
+            </React.Fragment>
+        );
+    }
+}
+
+export default Job;

src/homeScreen/Jobs.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+
+import Job from './Job'
+
+class Jobs extends Component {
+    jobs = [
+        {
+            name: "St. Edward's University Office of Information Technology",
+            position: "Digital Information Associate",
+            duration: "Sept 2018 - Oct 2019",
+            desc: [
+                {
+                    title: "Customer Service",
+                    desc: "Handled user requests and incidents involving issues with classroom and university technology."
+                },
+                {
+                    title: "System Administration",
+                    desc: "Worked with others to renovate and replace software on campus computer infrastructure."
+                },
+                {
+                    title: "Steds CTF",
+                    desc: "Helped write challenges and organize a Capture the Flag Event on Campus"
+                },
+                {
+                    title: "Steds Computer Science Club Trivia Night",
+                    desc: "Helped write questions and organize a Trivia Night on Campus"
+                },
+                {
+                    title: "Advisory Board",
+                    desc: "Tested and offered feedback on various interactive systems around campus"
+                }
+            ]
+        },
+        {
+            name: "Inventive",
+            position: "Summer Intern",
+            duration: "May 2019 - July 2019",
+            desc: [
+                {
+                    title: "Summer Project",
+                    desc: "Worked in a team on a project following the scrum software development model to create a Kanban board web app with a similar feature set to Trello in React with an Express backend and a MongoDB database"
+                }
+            ]
+        },
+        {
+            name: "Austin Water",
+            position: "Summer Intern",
+            duration: "July 2017 - Aug 2017",
+            desc: [
+                {
+                    title: "Organization",
+                    desc: "Re-structured invoice filing documents for the Davis and Ullrich water treatment plants"
+                }
+            ]
+        }
+    ]
+    render() {
+        return (
+            <React.Fragment>
+                {this.jobs.map((job) => {
+                    return (<Job info={job} />)
+                })}
+            </React.Fragment>
+        );
+    }
+}
+
+export default Jobs;

src/homeScreen/RelevantCoursework.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { Jumbotron } from 'react-bootstrap';
+import ScrollableAnchor from 'react-scrollable-anchor';
+import Courses from './Courses';
+
+class RelevantCoursework extends Component {
+    
+    render() {
+        return (
+            <ScrollableAnchor id='relevantCoursework'>
+                <Jumbotron className={'frontPage'}>
+                    <h1 className='frontPage'>~$ ./Courses</h1>
+                    <br/>
+                    <Courses />
+                </Jumbotron>
+            </ScrollableAnchor>
+        );
+    }
+}
+
+
+export default RelevantCoursework;

src/homeScreen/Skills.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { Jumbotron } from 'react-bootstrap';
+
+class Skills extends Component {
+    render() {
+        return (
+            <Jumbotron className={'frontPage'}>
+                <h1 className='frontPage'>~$ ./Skills</h1>
+                <br/>
+                <p className='frontPage'>{'This is some placeholder text'}</p>
+            </Jumbotron>
+        );
+    }
+}
+
+export default Skills;