HackMerced · maryharebear · Jun 9, 2020 · May 22, 2020 · May 25, 2020 · May 29, 2020
diff --git a/package.json b/package.json
@@ -29,6 +29,10 @@
         "extends": "react-app"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.28",
+        "@fortawesome/free-brands-svg-icons": "^5.13.0",
+        "@fortawesome/free-solid-svg-icons": "^5.13.0",
+        "@fortawesome/react-fontawesome": "^0.1.9",
         "node-sass": "^4.14.1",
         "react": "^16.13.0",
         "react-dom": "^16.13.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Router, Route, Switch } from 'react-router-dom';
+import { Router, Route, Switch, Redirect } from 'react-router-dom';
 import history from './app.history';
 
 import Home from './pages/Home/home';
@@ -11,6 +11,7 @@ const App: React.FC = () => {
         <Router history={history}>
             <Switch>
                 <Route exact path="/" component={Home} />
+                <Redirect from="/HackMerced" to="/" />
             </Switch>
         </Router>
     );

diff --git a/src/assets/images/Intiser3.png b/src/assets/images/Intiser3.png
diff --git a/src/assets/images/adrian.jpg b/src/assets/images/adrian.jpg
diff --git a/src/assets/images/adrian1.jpg b/src/assets/images/adrian1.jpg
diff --git a/src/assets/images/adrian2.jpg b/src/assets/images/adrian2.jpg
diff --git a/src/assets/images/athena2.jpg b/src/assets/images/athena2.jpg
diff --git a/src/assets/images/busher.jpg b/src/assets/images/busher.jpg
diff --git a/src/assets/images/busher2.jpg b/src/assets/images/busher2.jpg
diff --git a/src/assets/images/hackmerced-v.jpg b/src/assets/images/hackmerced-v.jpg
diff --git a/src/assets/images/kacey.jpg b/src/assets/images/kacey.jpg
diff --git a/src/assets/images/kc.jpg b/src/assets/images/kc.jpg
diff --git a/src/assets/images/lorenzo.jpg b/src/assets/images/lorenzo.jpg
diff --git a/src/assets/images/lorenzo1.jpg b/src/assets/images/lorenzo1.jpg
diff --git a/src/assets/images/manjot.jpg b/src/assets/images/manjot.jpg
diff --git a/src/assets/images/manjot1.jpg b/src/assets/images/manjot1.jpg
diff --git a/src/assets/images/manjot2.jpg b/src/assets/images/manjot2.jpg
diff --git a/src/assets/images/mary.jpg b/src/assets/images/mary.jpg
diff --git a/src/assets/images/mary1.jpg b/src/assets/images/mary1.jpg
diff --git a/src/assets/images/mary2.jpg b/src/assets/images/mary2.jpg
diff --git a/src/assets/images/shiv.jpg b/src/assets/images/shiv.jpg
diff --git a/src/assets/images/shiv1.jpg b/src/assets/images/shiv1.jpg
diff --git a/src/assets/images/team.jpg b/src/assets/images/team.jpg
diff --git a/src/assets/images/teampic.HEIC b/src/assets/images/teampic.HEIC
diff --git a/src/assets/images/truman.jpg b/src/assets/images/truman.jpg
diff --git a/src/assets/images/truman1.jpg b/src/assets/images/truman1.jpg
diff --git a/src/assets/images/tuzette.jpg b/src/assets/images/tuzette.jpg
diff --git a/src/assets/images/tuzette2.jpg b/src/assets/images/tuzette2.jpg
diff --git a/src/components/About Us/about.scss b/src/components/About Us/about.scss
@@ -0,0 +1,139 @@
+
+
+.ABOUT {
+  text-decoration: bold;
+	line-height: 33px;
+	color: #000;
+
+.About {
+  width: 350px;
+  text-decoration: bold;
+	padding: 10px 30px 30px 50px;
+	margin: 30px 0px 0px 0px;
+	h1 {
+    position: relative;
+    font-weight: bolder;
+	}
+	p {
+    text-align: left;
+    // font-size:20px;
+	}
+}
+
+.TEAMPICTURE {
+    float: right;
+}
+
+/* Small devices (phones, portrait tablets, and large phones, 600px and up) */
+@media only screen and (min-width: 100px) {
+  .About{
+    width: 90%;
+  }
+  .TEAMPICTURE{
+    width: 80%;
+    margin: 0px 40px -50px 600px;
+    padding: 0px 0px 80px 0px;
+
+  }
+  h1{
+    font-size: 20px;
+    margin: 0px 0px 10px 0px;
+  }
+  p{
+    width: 110%;
+    font-size: 14px;
+    margin: 0px 0px 0px 10px;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+
+  .About{
+    width: 80%;
+  }
+  .TEAMPICTURE{
+    width: 48%;
+    padding: 20px 30px 0px 50px;
+    margin: -350px 0px 0px 0px;
+
+  }
+  h1{
+    font-size: 25px;
+  }
+  p{
+    width: 70%;
+    font-size: 12px;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+  .About{
+    width: 60%;
+  }
+  .TEAMPICTURE{
+    width: 48%;
+    padding: 20px 30px 0px 50px;
+    margin: -470px 0px 0px 0px;
+
+  }
+  h1{
+    margin: 0px 0px 20px 0px;
+  }
+  p{
+    width: 70%;
+    font-size: 23px;
+    margin: 0px 0px 0px 20px;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+  font-size: 60px;
+  .About{
+    width: 50%;
+    margin: 50px 0px 0px 0px;
+  }
+  .TEAMPICTURE{
+    width: 50%;
+    padding: 20px 30px 0px 50px;
+    margin: -650px 50px 0px 0px;
+
+  }
+  h1{
+    font-size:40px;
+    margin:20px 0px 40px 30px;
+  }
+  p{
+    width: 90%;
+    font-size: 25px;
+    line-height: 53px;
+    margin: 0px 0px 0px 50px;
+  }
+}
+
+}
+
+// font-size: 60px;
+//   .About{
+//     width: 50%;
+//     margin: 100px 0px 100px 0px;
+//   }
+//   .TEAMPICTURE{
+//     width: 30%;
+//     padding: 20px 30px 0px 50px;
+//     margin: -850px 600px 0px 0px;
+
+//   }
+//   h1{
+//     font-size:40px;
+//     margin: 30px 0px 60px 90px;
+//   }
+//   p{
+//     width: 90%;
+//     font-size: 45px;
+//     line-height: 63px;
+//     margin: 0px 0px 0px 30px;
+//   }
+// }
diff --git a/src/components/About Us/about.tsx b/src/components/About Us/about.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import TEAM from '../../assets/images/hackmerced-v.jpg';
+import './about.scss';
+
+const About: React.FC = () => {
+    return (
+        <section className="ABOUT">
+            <div className="About">
+                <h1>About Us</h1>
+                <p>
+                    HackMerced is a 36 hour annual programming competition that occurs at the University of California,
+                    Merced and is open to students from all over the world. During the event, participants will
+                    collaborate in teams and attend workshops to learn about new technologies.
+                </p>
+                <p>
+                    <br></br>We aim to create a collaborative, interdisciplinary event that brings together students
+                    from all universities and prospective sponsors to see the innovation and creativity culminating
+                    within the San Joaquin Valley.
+                </p>
+            </div>
+            <div className="TEAMPICTURE">
+                <img src={TEAM} width="100%" alt="HackMerced Team" />
+            </div>
+        </section>
+    );
+};
+
+export default About;
diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
@@ -0,0 +1,39 @@
+.footer {
+    color: white;
+    background-color: #ffb26e;
+    min-height: 10vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 45px;
+    padding-bottom: 5px;
+    text-align: center;
+
+
+    .fa {
+      color: white;
+      font-size: 35px !important;
+      margin: 10px;
+
+    }
+    .fa:hover{
+      -webkit-filter: brightness(20%);
+      -webkit-transition: all .5s ease;
+      -moz-transition: all .5s ease;
+      -o-transition: all .5s ease;
+      -ms-transition: all .5s ease;
+      transition: all .5s ease;
+    }
+
+    .credits {
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      font-size: 16px;
+
+      .copyright {
+        overflow: hidden;
+      }
+    }
+  }
diff --git a/src/components/Footer/footer.tsx b/src/components/Footer/footer.tsx
@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope, faCode } from '@fortawesome/free-solid-svg-icons';
+import { faFacebook, faInstagram, faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';
+
+import './footer.scss';
+
+const Footer: FC = () => {
+    return (
+        <footer className="footer">
+            <section className="Footer-container">
+                <nav className="Footer-social">
+                    <a
+                        href="mailto:general@hackmerced.com?subject=HackMerced Questions&amp;body=Dear HackMerced,"
+                        style={{ color: '#0000' }}
+                    >
+                        <FontAwesomeIcon icon={faEnvelope} className="fa" />
+                    </a>
+                    <a
+                        href="https://www.facebook.com/hackmerced/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: '#0000' }}
+                    >
+                        <FontAwesomeIcon icon={faFacebook} className="fa" />
+                    </a>
+                    <a
+                        href="https://www.instagram.com/hackmerced/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: '#0000' }}
+                    >
+                        <FontAwesomeIcon icon={faInstagram} className="fa" />
+                    </a>
+                    <a
+                        href="https://join.slack.com/t/hackmerced-v/shared_invite/enQtODUyNzkxMDY2NjkyLTZiODAyZjNiYTFjZTlkYTQ0NDVhOGQ5OTI3OTEzNjAxMDBiZTdjY2QyMTI0ZGE4MTlhMmNhMGYyNzQzOGNhZTI"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: '#0000' }}
+                    >
+                        <FontAwesomeIcon icon={faSlack} className="fa" />
+                    </a>
+                    <a
+                        href="https://github.com/HackMerced"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: '#0000' }}
+                    >
+                        <FontAwesomeIcon icon={faGithub} className="fa" />
+                    </a>
+                    <a
+                        href="https://devpost.com/hackathons?utf8=%E2%9C%93&search=HackMerced&challenge_type=all&sort_by=Recently+Added"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: '#0000' }}
+                    >
+                        <FontAwesomeIcon icon={faCode} className="fa" />
+                    </a>
+                </nav>
+            </section>
+            <section className="credits">
+                <span className="copyright">
+                    © 2020 HackMerced. All Rights Reserved.
+                    <br /> Made with 💓 by HackMerced.
+                </span>
+            </section>
+        </footer>
+    );
+};
+export default Footer;
diff --git a/src/components/NavBar/navbar.scss b/src/components/NavBar/navbar.scss
@@ -1,6 +1,7 @@
 .NAVBAR {
-    background-color: rgb(15, 15, 17);
+    background-color: #ffb181;
     padding: 0.5% 0% 0.5% 0%;
+    align-items: flex-start;
 
     .NAVTEXT {
         font-size: 16px;
@@ -13,6 +14,12 @@
     .MLH-banner {
         width: 170px;
         height: 40px;
+
+    }
+
+    .MLH{
+        position: -webkit-sticky;
+        position: sticky;
     }
     .active:active {
         background-color: white;

diff --git a/src/components/NavBar/navbar.tsx b/src/components/NavBar/navbar.tsx
@@ -22,14 +22,14 @@ const Navbar: React.FC = () => {
                             HOME
                         </Link>
                     </li>
-                    <li className="mr-3">
+                    {/* <li className="mr-3">
                         <a
                             className="inline-block rounded font-bold hover:text-black hover:bg-white  py-2 px-3"
                             href="http://localhost:3000/"
                         >
                             EVENTS
                         </a>
-                    </li>
+                    </li> */}
                     <li className="mr-3">
                         <a
                             className="inline-block rounded font-bold hover:text-black hover:bg-white py-2 px-3 text-gray-100 "
@@ -57,7 +57,7 @@ const Navbar: React.FC = () => {
                 </ul>
             </div>
             <div className="MLH-banner">
-                <img src={MLHBANNER} style={styles} alt="MLH BANNER" />
+                <img className="MLH" src={MLHBANNER} style={styles} alt="MLH BANNER" />
             </div>
         </nav>
     );