Final Commit

public/index.html

@@ -10,6 +10,8 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,24 +1,45 @@
-import logo from './logo.svg';
-import './App.css';
+import { Route, Switch, useLocation } from "react-router";
+import Sidebar from "./Sidebar";
+import Home from "./Pages/Home";
+import Team from "./Pages/Team";
+import Calender from "./Pages/Calender";
+import Documents from "./Pages/Documents";
+import Projects from "./Pages/Projects";
+import styled from "styled-components";
+import { AnimatePresence } from "framer-motion";
+
+const Pages = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    font-size: calc(2rem + 2vw);
+    background: linear-gradient(to right, #803bec 30%, #1b1b1b 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+`;
 
 function App() {
+  const location = useLocation();
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Sidebar />
+      <Pages>
+        <AnimatePresence exitBeforeEnter>
+          <Switch location={location} key={location.pathname}>
+            <Route exact path="/" component={Home} />
+            <Route path="/team" component={Team} />
+            <Route path="/calender" component={Calender} />
+            <Route path="/documents" component={Documents} />
+            <Route path="/projects" component={Projects} />
+          </Switch>
+        </AnimatePresence>
+      </Pages>
+    </>
   );
 }
 

src/Pages/Calender.js

@@ -0,0 +1,9 @@
+import MotionHoc from "./MotionHoc";
+
+const CalenderComponent = () => {
+  return <h1>Calender</h1>;
+};
+
+const Calender = MotionHoc(CalenderComponent);
+
+export default Calender;

src/Pages/Documents.js

@@ -0,0 +1,9 @@
+import MotionHoc from "./MotionHoc";
+
+const DocumentsComponent = () => {
+  return <h1>Documents</h1>;
+};
+
+const Documents = MotionHoc(DocumentsComponent);
+
+export default Documents;

src/Pages/Home.js

@@ -0,0 +1,9 @@
+import MotionHoc from "./MotionHoc";
+
+const HomeComponent = () => {
+  return <h1>Home</h1>;
+};
+
+const Home = MotionHoc(HomeComponent);
+
+export default Home;

src/Pages/MotionHoc.js

@@ -0,0 +1,25 @@
+//higher order component to add same functionality to each page
+
+import { motion } from "framer-motion";
+
+const MotionHoc = (Component) => {
+  return function HOC() {
+    return (
+      <motion.div
+        initial={{ y: 500 }}
+        animate={{
+          y: 0,
+          transition: { duration: 0.5, type: "spring" },
+        }}
+        exit={{
+          y: -500,
+          transition: { duration: 0.5, type: "spring", ease: "easeInOut" },
+        }}
+      >
+        <Component />
+      </motion.div>
+    );
+  };
+};
+
+export default MotionHoc;

src/Pages/Projects.js

@@ -0,0 +1,9 @@
+import MotionHoc from "./MotionHoc";
+
+const ProjectsComponent = () => {
+  return <h1>Projects</h1>;
+};
+
+const Projects = MotionHoc(ProjectsComponent);
+
+export default Projects;

src/Pages/Team.js

@@ -0,0 +1,9 @@
+import MotionHoc from "./MotionHoc";
+
+const TeamComponent = () => {
+  return <h1>Team</h1>;
+};
+
+const Team = MotionHoc(TeamComponent);
+
+export default Team;