content: import React, { Component } from 'react';
  import './App.css';
  import Nav from './components/scaffold/nav';
  import Content from './components/scaffold/content';
  import { Route } from 'react-router-dom';
  import Projects from './components/pages/projects.js';
  import About from './components/pages/about';
  import Blog from './components/pages/blog';
  import Contact from './components/pages/contact';
  import Footer from './components/scaffold/footer';
  import Galaxy from '../src/components/pages/projectpages/stars/galaxy.js';
  import StarDates from '../src/components/pages/projectpages/dates/stardates.js';
  import FearAnger from '../src/components/pages/projectpages/state/fearanger';
  import Counting from '../src/components/pages/projectpages/counter/counting';
  import SortableSimple from '../src/components/pages/projectpages/dnd2/index';
  import SWCrawler from '../src/components/pages/projectpages/crawler/index';
  import Switch from '../src/components/pages/projectpages/onoff/index';
  import Quotes from '../src/components/pages/projectpages/quotes/index';
  import Desks from '../src/components/pages/projectpages/desks/index';
  import Wookieeyears
    from '../src/components/pages/projectpages/wookieeyears/index';
  import ArrayExercise
    from '../src/components/pages/projectpages/arrayexercise/index';
  import ArrayExercise2
    from '../src/components/pages/projectpages/arrayexercise2/index';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        navClass: 'navClear',
        lastScrollPos: 0
      };
      this.handleScroll = this.handleScroll.bind(this);
    }
    componentDidMount() {
      window.addEventListener('scroll', this.handleScroll);
    }
    componentWillUnmount() {
      window.removeEventListener('scroll', this.handleScroll);
    }
    handleScroll(event) {
      if (this.state.lastScrollPos > event.currentTarget.scrollY) {
        this.setState({
          navClass: 'navClear',
          lastScrollPos: event.currentTarget.scrollY
        });
      } else if (this.state.lastScrollPos < event.currentTarget.scrollY) {
        this.setState({
          navClass: 'navBlack',
          lastScrollPos: event.currentTarget.scrollY
        });
      }
    }
  
    render() {
      return (
        <div className="App">
          <Nav style={{ zIndex: 10000 }} navClass={this.state.navClass} />
          <Route path="/welcome" component={Content} />
          <Route path="/home" component={Content} />
          <Route path="/projects" component={Projects} />
          <Route path="/about" component={About} />
          <Route path="/blog" component={Blog} />
          <Route path="/contact" component={Contact} />
          <Route path="/projectpages/stars/galaxy" component={Galaxy} />
          <Route path="/projectpages/dates/stardates" component={StarDates} />
          <Route path="/projectpages/state/fearanger" component={FearAnger} />
          <Route path="/projectpages/counter/counting" component={Counting} />
          <Route path="/projectpages/dnd2/index" component={SortableSimple} />
          <Route path="/projectpages/crawler/index" component={SWCrawler} />
          <Route path="/projectpages/onoff/index" component={Switch} />
          <Route path="/projectpages/quotes/index" component={Quotes} />
          <Route path="/projectpages/desks/index" component={Desks} />
          <Route
            path="/projectpages/wookieeyears/index"
            component={Wookieeyears}
          />
          <Route
            path="/projectpages/arrayexercise/index"
            component={ArrayExercise}
          />
          <Route
            path="/projectpages/arrayexercise2/index"
            component={ArrayExercise2}
          />
          <Footer style={{ zIndex: 10000 }} />
        </div>
      );
    }
  }
  
  export default App;
  