Added an Intro Page

Once finished the intro page will display at first visit of the website.

src/actions/index.js

@@ -49,4 +49,28 @@ export const getRepoLanguages = (username, repoName) => async (dispatch, getStat
     type: 'GET_LANGUAGES',
     payload: payload,
   });
+}
+
+export const setIntro = (start=true) => async (dispatch, getState) => {
+  
+  dispatch({
+    type: 'SET_INTRO',
+    payload: start,
+  });
+}
+
+export const hideNavigation = () => async (dispatch, getState) => {
+  
+  dispatch({
+    type: 'SET_NAVIGATION',
+    payload: false,
+  });
+}
+
+export const showNavigation = () => async (dispatch, getState) => {
+  
+  dispatch({
+    type: 'SET_NAVIGATION',
+    payload: true,
+  });
 }

src/components/App.js

@@ -5,6 +5,7 @@ import Navigation from './Navigation';
 import Home from './Home';
 import Github from './Github';
 import About from './About';
+import Intro from './Intro';
 
 const App = (props) => {
   return (
@@ -15,6 +16,7 @@ const App = (props) => {
           <Route path="/" exact component={Home} />
           <Route path="/github" render={(props) => <Github {...props} />} />
           <Route path="/about" component={About} />
+          <Route path="/intro" component={Intro} />
         </Switch>
       </div>
     </BrowserRouter>

src/components/Intro.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import './css/Intro.css';
+import {hideNavigation, showNavigation} from '../actions';
+import Topic from './subcomponents/Topic';
+
+class Intro extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+        start: false,
+        prev: 'previous',
+        curr: 'current',
+        next: 'next',
+        prevLoc: -1,
+        currLoc: 0,
+        nextLoc: 1,
+
+    };
+  }
+
+  handleKey = (e) => {
+    switch(e.key) {
+        case "ArrowUp":
+            this.handleInput('up');
+            break;
+        case "ArrowDown":
+            this.handleInput('down')
+            break;
+    }
+  }
+
+  handleInput = (input) => {
+    console.log(this.state.prevLoc);
+    console.log(this.state.currLoc)
+    console.log(this.state.nextLoc)
+    if (input === "up" && this.state.currLoc > 0) {
+        this.setState({
+            prev: 'current',
+            curr: 'next',
+        });
+        setTimeout(()=>{
+            this.setState({
+                prev: 'previous notrans',
+                curr: 'current notrans',
+                prevLoc: this.state.prevLoc-1,
+                currLoc: this.state.currLoc-1,
+                nextLoc: this.state.nextLoc-1,
+            });
+            setTimeout(()=>{
+            this.setState({
+                prev: 'previous',
+                curr: 'current',
+            });
+            }, 20);
+        }, 500);
+    } else if (input === "down" && this.state.nextLoc < this.topics.length) {
+        this.setState({
+            curr: 'previous',
+            next: 'current'
+        });
+        setTimeout(()=>{
+            this.setState({
+                curr: 'current notrans',
+                next: 'next notrans',
+                prevLoc: this.state.prevLoc+1,
+                currLoc: this.state.currLoc+1,
+                nextLoc: this.state.nextLoc+1,
+            });
+            setTimeout(()=>{
+            this.setState({
+                curr: 'current',
+                next: 'next',
+            });
+            }, 20);
+        }, 500);
+        
+    } else if (input === "down" && this.state.nextLoc >= this.topics.length) {
+        // Set something to happen when you reach the end
+
+    }
+    
+  };
+
+  topics = [
+      <Topic title="Studied at Marist College" background="img/marist.webp">
+          <a href="https://www.marist.edu/">Marist.edu</a>
+      </Topic>,
+      <Topic link="/github" title="You can view my github repositories" background="img/background.webp">
+      </Topic>,
+      <Topic link="/" title="Open the Website">
+          <a href="/" className="btn">Explore Cam's Projects</a>
+      </Topic>
+    ];
+  
+  render() {
+
+    return (
+        <div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start':'intro'}>
+            <div id="previous" className={this.state.prev}>
+                {this.topics[this.state.prevLoc]}
+            </div>
+            <div id="current" className={this.state.curr}>
+                {this.topics[this.state.currLoc]}
+            </div>
+            <div id="next" className={this.state.next}>
+                {this.topics[this.state.nextLoc]}
+            </div>
+        </div>
+    );
+  }
+
+  componentDidMount() {
+    setTimeout(()=>{
+        this.setState({
+            start: true,
+        });
+    }, 100);
+
+    document.title = "Introduction";
+
+    this.props.hideNavigation();
+
+  }
+}
+
+const mapStateToProps = (state) => {
+    return {};
+}
+
+
+export default connect(mapStateToProps, {hideNavigation, showNavigation})(Intro);

src/components/Navigation.js

@@ -3,36 +3,43 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import {toggleContactModal} from '../actions'
 import './css/Navigation.css';
-import { HouseDoor, FileEarmarkPerson, Github, Envelope } from 'react-bootstrap-icons';
+import { HouseDoor, FileEarmarkPerson, Github, Envelope, Flag} from 'react-bootstrap-icons';
 import ContactModal from './subcomponents/ContactModal';
 
 const Navigation = (props) => {
+  if (props.enable){
+    return (
+      <div className="Navigation">
+        <Link to="/">
+          Home
+          <HouseDoor />
+        </Link>
+        <Link to="/github">
+          Github Repos
+          <Github />
+        </Link>
+        <Link to="/about">
+          About
+          <FileEarmarkPerson />
+        </Link>
+        <Link to="/intro">
+          View the Intro
+          <Flag />
+        </Link>
+        <button className="end" onClick={()=>props.toggleContactModal()}>
+          Contact Me
+          <Envelope />
+        </button>
+        <ContactModal show={props.modal}/>
+      </div>
+    );
+  }
 
-  return (
-    <div className="Navigation">
-      <Link to="/">
-        Home
-        <HouseDoor />
-      </Link>
-      <Link to="/github">
-        Github Repos
-        <Github />
-      </Link>
-      <Link to="/about">
-        About
-        <FileEarmarkPerson />
-      </Link>
-      <button className="end" onClick={()=>props.toggleContactModal()}>
-        Contact Me
-        <Envelope />
-      </button>
-      <ContactModal show={props.modal}/>
-    </div>
-  );
+  return <div></div>;
 }
 
 const mapStateToProps = (state) => {
-  return {modal: state.contactModal.contactModal}
+  return {modal: state.contactModal.contactModal, enable: state.navigation.enable};
 }
 
 export default connect(mapStateToProps, {toggleContactModal})(Navigation);

src/components/css/Intro.css

@@ -0,0 +1,56 @@
+.intro {
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+    width:100vw;
+    height:100vh;
+    display:flex;
+}
+
+.intro.start {
+    color:white;
+    opacity: 1;
+    transition: opacity 1s ease-in-out;
+}
+
+.intro .previous {
+    opacity: 0;
+    height:0;
+    width:100vw;
+    display: flex;
+    position:fixed;
+    transition: opacity 500ms ease-out, height 500ms ease-out, top 500ms ease-out;
+    top:0;
+    left:0;
+    justify-content: center;
+    align-items: center;
+}
+
+.intro .current {
+    opacity: 1;
+    height:100vh;
+    width:100vw;
+    display: flex;
+    position:fixed;
+    transition: opacity 500ms ease-in, height 500ms ease-in, top 500ms ease-in;
+    top:0;
+    left:0;
+    justify-content: center;
+    align-items: center;
+}
+
+.intro .next {
+    opacity: 0;
+    height:0;
+    width:100vw;
+    display: flex;
+    position:fixed;
+    transition: opacity 500ms ease-out, height 500ms ease-out, top 500ms ease-out;
+    top:100vh;
+    left:0;
+    justify-content: center;
+    align-items: center;
+}
+
+.notrans {
+    transition: none !important;
+}

src/components/css/Topic.css

@@ -0,0 +1,19 @@
+.topic {
+    height: 100vh;
+    width: 100vw;
+    background-size:cover;
+    display:flex;
+    align-items:center;
+
+}
+
+.topic .content {
+    width: 100vw;
+    background: rgba(57, 57, 57, 0.75);
+    padding:0;
+    margin:0;
+    padding: 10px;
+    height:fit-content;
+}
+
+.topic {}

src/components/subcomponents/Topic.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import '../css/Topic.css';
+
+const Card = (props) => {
+    /**
+     * Topic - A window to contain topics for the intro component. Topic requires a title and some 
+     * jsx passed between the two Card tags as props.
+     * 
+     * title - title that will be displayed at the top of the card
+     * children - jsx that will be displayed in the content of the card
+     * background - a url to the background image
+     * 
+     */
+    return (
+        <div
+            className="topic"
+            style={{backgroundImage: props.background ? `url(${props.background})`:''}}
+            >
+            <a href={props.link} className="content">
+                <div className="title">{props.title}</div>
+                <div className="children">
+                    {props.children}
+                </div>
+            </a>
+        </div>
+    );
+};
+
+export default Card;

src/reducers/index.js

@@ -2,8 +2,12 @@ import { combineReducers } from "redux";
 
 import githubReducer from './githubReducer';
 import contactModalReducer from "./contactModalReducer";
+import introReducer from "./introReducer";
+import navigationReducer from "./navigationReducer";
 
 export default combineReducers({
     github: githubReducer,
     contactModal: contactModalReducer,
+    intro: introReducer,
+    navigation: navigationReducer,
 });

src/reducers/introReducer.js

@@ -0,0 +1,11 @@
+let introReducer = (state={start: false}, action) => {
+    switch(action.type) {
+      case 'SET_INTRO':
+        return { ...state, start: action.payload };
+      default:
+        return state;
+    }
+  };
+  
+
+export default introReducer;

src/reducers/navigationReducer.js

@@ -0,0 +1,11 @@
+let navigationReducer = (state={enable: true}, action) => {
+    switch(action.type) {
+      case 'SET_NAVIGATION':
+        return { ...state, enable: action.payload };
+      default:
+        return state;
+    }
+  };
+  
+
+export default navigationReducer;