From 6a9de8bedc77a068fde0a82d574518bdb27e9222 Mon Sep 17 00:00:00 2001
From: Gwen Friedman <gwenfriedman@Gwens-MacBook-Air.local>
Date: Sat, 29 Feb 2020 15:32:52 -0500
Subject: [PATCH] made more responsive

---
 src/App.js                             |   3 +-
 src/Components/Home.css                |  66 ++--
 src/Components/Home.js                 | 507 ++++++++++---------------
 src/Components/Home2.js                | 174 ---------
 src/Components/InfoPages/Hashbrowwn.js | 104 ++++-
 src/Components/InfoPages/info.css      |  25 +-
 src/Components/Nav.js                  |   6 +-
 7 files changed, 340 insertions(+), 545 deletions(-)
 delete mode 100644 src/Components/Home2.js

diff --git a/src/App.js b/src/App.js
index a7b430e..b43dd0f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import './App.css';
 import Home from './Components/Home.js';
-import Home2 from './Components/Home2.js';
 import Navigation from './Components/Nav.js';
 import Hashbrowwn from './Components/InfoPages/Hashbrowwn';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -15,7 +14,7 @@ function App() {
                 <Navigation/>
                 <div>
                     <Route exact path='/'
-                           component={Home2}/>
+                           component={Home}/>
                 </div>
                 <div>
                     <Route exact path='/hashbrowwn'
diff --git a/src/Components/Home.css b/src/Components/Home.css
index f554bb8..5d4c945 100644
--- a/src/Components/Home.css
+++ b/src/Components/Home.css
@@ -5,6 +5,13 @@
     --custom-grey: #45434B;
 }
 
+@media (max-width: 990px) {
+    /* CSS that should be displayed if width is equal to or less than 800px goes here */
+    .section-title {
+        margin-left:10% !important;
+    }
+}
+
 .rect {
     width:500px;
     height:430px;
@@ -13,14 +20,6 @@
     z-index: -1;
 }
 
-/*.rect-mobile {*/
-/*    width:500px;*/
-/*    height:430px;*/
-/*    border:2px solid var(--custom-grey);*/
-/*    z-index: -1;*/
-/*    margin-top: -50px;*/
-/*}*/
-
 .description {
     font-size: 25px;
     color: var(--custom-grey);
@@ -38,28 +37,10 @@
     margin-left: 200px;
 }
 
-/*.text-field-mobile {*/
-/*    margin-top: 90px;*/
-/*    margin-left: 20px;*/
-/*}*/
-
 .project-text-field {
     margin-left: 200px;
 }
 
-/*.image {*/
-/*    width: 100%;*/
-/*    max-width: 500px;*/
-/*    max-height: 375px;*/
-/*    height: auto;*/
-/*}*/
-
-/*.image-mobile {*/
-/*    width: 70%;*/
-/*    max-height: 375px;*/
-/*    height: auto;*/
-/*}*/
-
 .rect-orange {
     background-color: var(--custom-orange);
     color: white;
@@ -87,15 +68,9 @@ i {
 .section-title {
     font-size: 40px;
     color: var(--custom-orange);
-    margin-left:130px;
+    margin-left:85px;
 }
 
-/*.section-title-mobile {*/
-/*    font-size: 40px;*/
-/*    color: var(--custom-orange);*/
-/*    margin-left:20px;*/
-/*}*/
-
 .project-pic {
     height: auto;
     width: auto
@@ -136,11 +111,16 @@ i {
     z-index: -1;
 }
 
+.card-desktop-project-list {
+    margin-left: -200px;
+    height: 350px;
+    z-index: -1;
+}
+
 .card-mobile {
     height: 400px;
     margin-top: -75px;
     z-index: -1;
-    background-color: yellow;
 }
 
 .card-body-desktop {
@@ -154,4 +134,22 @@ i {
     width: 300px;
     text-align: center;
     margin-top: 75px;
+}
+
+#image-project-header {
+    clip: rect(3px 3px 3px 3px);
+}
+
+.Home {
+    margin-top: 125px;
+}
+
+.card-title-mobile {
+    margin-top: 75px;
+}
+
+.card-project-list-mobile {
+    height: 300px;
+    margin-top: -75px;
+    z-index: -1;
 }
\ No newline at end of file
diff --git a/src/Components/Home.js b/src/Components/Home.js
index eed8f2b..3f83d2e 100644
--- a/src/Components/Home.js
+++ b/src/Components/Home.js
@@ -6,227 +6,107 @@ import balloon from '../images/balloon.jpg';
 import emissions from '../images/emissions.png';
 import ballista from '../images/ballista.jpg';
 
-import {Link} from "react-router-dom";
-
-// export class Home extends React.Component {
-//     render() {
-//             return (
-//                 <div className="Home">
-//                     {/*Most Recent Project*/}
-//                     <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
-//                         <div className={'row mt-5 justify-content-center col-12'}>
-//                             {/*replace image here*/}
-//                             <img className={'rounded my-auto image col-5'} src={balloon} alt="Hashbrowwn balloon"/>
-//                             <div className={'rect rounded col-7'}>
-//                                 <div className={'text-field col-8'}>
-//                                     <div className={'rect-orange rounded mt-5'}>
-//                                         <p className={'flag'}> Most Recent Project </p>
-//                                     </div>
-//
-//                                     {/*Replace Name here*/}
-//                                     <h3 className={'orange-header'}>HASHBROWWN Balloon</h3>
-//
-//                                     {/*Replace Description here*/}
-//                                     <p className={'description'}> High-Altitude Solar-Heated Balloon Research
-//                                         Observatory
-//                                         With
-//                                         Wind Navigation </p>
-//                                 </div>
-//                             </div>
-//                         </div>
-//                     </Link>
-//                     <p className={'text-center mt-5'}><i className="down"></i></p>
-//
-//
-//                     {/*PROJECTS SECTION*/}
-//
-//                     {/*MECHANICAL*/}
-//                     <section id={'mechanical'}>
-//                         <div className={'text-center'}>
-//                             <svg className={'mt-5 col-10'} height="2" width="1440">
-//                                 <line x1="0" y1="0" x2="1440" y2="2"/>
-//                             </svg>
-//                         </div>
-//
-//                         {/*replace header name here*/}
-//                         <p className={'section-title mt-3'}> Mechanical Projects </p>
-//
-//
-//                         {/*copy and paste this to add a new section, update image, text, and link*/}
-//                         <div className={'row mt-5 justify-content-center col-12'}>
-//                             <img className={'rounded my-auto project-pic col-4'} height={'280px'} src={emissions} alt="Emissions simulation"/>
-//                             <div className={'project-rect rounded col-8'}>
-//                                 <div className={'project-text-field'}>
-//                                     {/*Replace Name here*/}
-//                                     <h3 className={'orange-project-header'}>Emissions Simulation</h3>
-//
-//                                     {/*Replace Description here*/}
-//                                     <p className={'project-description'}>
-//                                         A simulation that takes physical input of users driving toy cars
-//                                         along a model roadway and changes the imagery displayed on the
-//                                         roadway’s backdrop in real time.
-//                                     </p>
-//                                 </div>
-//                             </div>
-//                         </div>
-//
-//                         <div className={'row mt-5 justify-content-center col-12'}>
-//                             <img className={'rounded my-auto project-pic col-4'} height={'280px'} src={ballista} alt="Ballista"/>
-//                             <div className={'project-rect rounded col-8'}>
-//                                 <div className={'project-text-field'}>
-//                                     {/*Replace Name here*/}
-//                                     <h3 className={'orange-project-header'}>Ballista</h3>
-//
-//                                     {/*Replace Description here*/}
-//                                     <p className={'project-description'}>
-//                                         A physics final project with the objective of transferring torsional
-//                                         energy into ballistic kinetic energy.
-//                                     </p>
-//                                 </div>
-//                             </div>
-//                         </div>
-//                     </section>
-//
-//
-//                     {/*ELECTRICAL*/}
-//                     <section id={'electrical'}>
-//                         <div className={'text-center'}>
-//                             <svg className={'mt-5'} height="2" width="1040">
-//                                 <line x1="0" y1="0" x2="1040" y2="2"/>
-//                             </svg>
-//                         </div>
-//                         {/*replace header name here*/}
-//                         <p className={'section-title mt-3'}> Electrical Projects </p>
-//
-//
-//                         {/*copy and paste this to add a new section, update image, text, and link*/}
-//                         <div className={'row mt-5 justify-content-center'}>
-//                             <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-//                             <div className={'project-rect rounded'}>
-//                                 <div className={'project-text-field'}>
-//                                     {/*Replace Name here*/}
-//                                     <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
-//
-//                                     {/*Replace Description here*/}
-//                                     <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
-//                                         Observatory
-//                                         With Wind Navigation </p>
-//                                 </div>
-//                             </div>
-//                         </div>
-//                     </section>
-//
-//
-//                     {/*MATERIALS*/}
-//                     <section id={'materials'}>
-//                         <div className={'text-center'}>
-//                             <svg className={'mt-5'} height="2" width="1040">
-//                                 <line x1="0" y1="0" x2="1040" y2="2"/>
-//                             </svg>
-//                         </div>
-//                         {/*replace header name here*/}
-//                         <p className={'section-title mt-3'}> Materials Projects </p>
-//
-//
-//                         {/*copy and paste this to add a new section, update image, text, and link*/}
-//                         <div className={'row mt-5 justify-content-center'}>
-//                             <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-//                             <div className={'project-rect rounded'}>
-//                                 <div className={'project-text-field'}>
-//                                     {/*Replace Name here*/}
-//                                     <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
-//
-//                                     {/*Replace Description here*/}
-//                                     <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
-//                                         Observatory
-//                                         With Wind Navigation </p>
-//                                 </div>
-//                             </div>
-//                         </div>
-//                     </section>
-//                 </div>
-//
-//             );
-//         }
-// }
+// import {Link} from "react-router-dom";
+import {HashLink as Link} from 'react-router-hash-link';
+import Nav from "react-bootstrap/Nav";
 
-export class Home extends React.Component {
-
-    constructor() {
-        super();
-        this.state = {
-            width: window.innerWidth,
-        };
-    }
-
-    componentWillMount() {
-        window.addEventListener('resize', this.handleWindowSizeChange);
-        console.log(window.innerWidth);
-    }
-
-
-
-// make sure to remove the listener
-// when the component is not mounted anymore
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.handleWindowSizeChange);
-    }
-
-    handleWindowSizeChange = () => {
-        this.setState({ width: window.innerWidth });
-    };
 
+export class Home extends React.Component {
     render() {
-        const {width} = this.state;
-        const isMobile = width <= 990;
+        return (
+            <div className="Home">
+
+                {/*Most Recent Project*/}
+                <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
+                    <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
+                        {/*replace image here*/}
+                        <img className="rounded image col-lg-5 col-10" id={'image-project-header'} src={balloon} alt="Hashbrowwn balloon"/>
+
+                        <div className={'col-6 d-none d-lg-block d-xl-block'}>
+
+                            <div className="card card-desktop border-dark bg-transparent">
+                                <div className="card-body card-body-desktop d-flex align-items-center">
+                                    <div>
+                                        <div className={'rect-orange rounded'}>
+                                            <p className={'flag'}> Most Recent Project </p>
+                                        </div>
+
+                                        {/*Replace Name here*/}
+                                        <h3 className="card-title orange-header">HASHBROWWN Balloon</h3>
+                                        <p className="card-text description">High-Altitude Solar-Heated Balloon Research
+                                            Observatory With Wind Navigation</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
 
-        if (isMobile) {
-            return (
-                <div className={'Home-mobile justify-content-center'}>
-                    <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
-                        <div className={'row mt-5 justify-content-center'}>
-                        <img className={'rounded my-auto col-9 image-mobile'} src={balloon} alt="Hashbrowwn balloon"/>
-                        <div className={'rect-mobile rounded col-10'}>
-                            <div className={'text-field-mobile'}>
-                                <div className={'rect-orange rounded mt-5'}>
+                    <div
+                        className="mx-auto card border-dark card-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                        <div className="card-body card-body-mobile d-flex align-items-center">
+                            <div>
+                                <div className={'rect-orange-mobile rounded'}>
                                     <p className={'flag'}> Most Recent Project </p>
                                 </div>
 
                                 {/*Replace Name here*/}
-                                <h3 className={'orange-header'}>HASHBROWWN Balloon</h3>
-
-                                {/*Replace Description here*/}
-                                <p className={'description'}> High-Altitude Solar-Heated Balloon Research
-                                    Observatory
-                                    With
-                                    Wind Navigation </p>
+                                <h3 className="card-title orange-header">HASHBROWWN Balloon</h3>
+                                <p className="card-text description">High-Altitude Solar-Heated Balloon Research
+                                    Observatory With Wind Navigation</p>
                             </div>
                         </div>
-                        </div>
-                    </Link>
+                    </div>
+                </Link>
 
-                    {/*MECHANICAL*/}
-                        <div className={'text-center'}>
-                            <svg className={'mt-5'} height="2" width="1040">
-                                <line x1="0" y1="0" x2="1040" y2="2"/>
-                            </svg>
-                        </div>
+                <Link smooth to="/#mechanical" activeClassName="selected">
+                    <p className={'text-center mt-5'}><i className="down"></i></p>
+                </Link>
+
+
+                {/*PROJECTS SECTION*/}
+
+                {/*MECHANICAL*/}
+                <section id={'mechanical'}>
+                    <div className={'text-center'}>
+                        <svg className={'mt-5 col-11'} height="2" width="1440">
+                            <line x1="0" y1="0" x2="1440" y2="2"/>
+                        </svg>
+                    </div>
 
-                        {/*replace header name here*/}
-                        <p className={'section-title-mobile mt-3'}> Mechanical Projects </p>
+                    {/*replace header name here*/}
+                    <p className={'section-title mt-3'}> Mechanical Projects </p>
 
 
                     <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
-                        <div className={'row mt-5 justify-content-center'}>
-                            <img className={'rounded my-auto col-9 image-mobile'} src={emissions} alt="Hashbrowwn balloon"/>
-                            <div className={'rect-mobile rounded col-10'}>
-                                <div className={'text-field-mobile'}>
+                        <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
+                            {/*replace image here*/}
+                            <img className="rounded image col-lg-4 col-10" id={'image-project-header'} src={emissions} alt="Emissions Simulation"/>
+
+                            <div className={'col-6 d-none d-lg-block d-xl-block'}>
+
+                                <div className="card card-desktop-project-list border-dark bg-transparent">
+                                    <div className="card-body card-body-desktop d-flex align-items-center">
+                                        <div>
+                                            {/*Replace Name here*/}
+                                            <h3 className="card-title orange-header">Emissions Simulation</h3>
+                                            <p className="card-text description">
+                                                A simulation that takes physical input of users driving toy cars
+                                                along a model roadway and changes the imagery displayed on the
+                                                roadway’s backdrop in real time.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
 
+                        <div
+                            className="mx-auto card border-dark card-project-list-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                            <div className="card-body card-body-mobile d-flex align-items-center">
+                                <div>
                                     {/*Replace Name here*/}
-                                    <h3 className={'orange-header'}>Emissions Simulation</h3>
-
-                                    {/*Replace Description here*/}
-                                    <p className={'description'}>
+                                    <h3 className="card-title card-title-mobile orange-header">Emissions Simulation</h3>
+                                    <p className="card-text description">
                                         A simulation that takes physical input of users driving toy cars
                                         along a model roadway and changes the imagery displayed on the
                                         roadway’s backdrop in real time.
@@ -235,150 +115,155 @@ export class Home extends React.Component {
                             </div>
                         </div>
                     </Link>
-                </div>
-            )
-
 
 
-        } else {
-            return (
-                <div className="Home">
-                    {/*Most Recent Project*/}
                     <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
-                        <div className={'row mt-5 justify-content-center'}>
+                        <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
                             {/*replace image here*/}
-                            <img className={'rounded my-auto image'} width='100%' height="375" src={balloon} alt="Hashbrowwn balloon"/>
-                            <div className={'rect rounded col-6'}>
-                                <div className={'text-field'}>
-                                    <div className={'rect-orange rounded mt-5'}>
-                                        <p className={'flag'}> Most Recent Project </p>
+                            <img className="rounded image col-lg-4 col-10" id={'image-project-header'} src={ballista} alt="Ballista"/>
+
+                            <div className={'col-6 d-none d-lg-block d-xl-block'}>
+
+                                <div className="card card-desktop-project-list border-dark bg-transparent">
+                                    <div className="card-body card-body-desktop d-flex align-items-center">
+                                        <div>
+                                            {/*Replace Name here*/}
+                                            <h3 className="card-title orange-header">Ballista</h3>
+                                            <p className="card-text description">
+                                                A physics final project with the objective of transferring torsional
+                                                energy into ballistic kinetic energy.
+                                            </p>
+                                        </div>
                                     </div>
+                                </div>
+                            </div>
+                        </div>
 
+                        <div
+                            className="mx-auto card border-dark card-project-list-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                            <div className="card-body card-body-mobile d-flex align-items-center">
+                                <div>
                                     {/*Replace Name here*/}
-                                    <h3 className={'orange-header'}>HASHBROWWN Balloon</h3>
-
-                                    {/*Replace Description here*/}
-                                    <p className={'description'}> High-Altitude Solar-Heated Balloon Research
-                                        Observatory
-                                        With
-                                        Wind Navigation </p>
+                                    <h3 className="card-title card-title-mobile orange-header">Ballista</h3>
+                                    <p className="card-text description">
+                                        A physics final project with the objective of transferring torsional
+                                        energy into ballistic kinetic energy.
+                                    </p>
                                 </div>
                             </div>
                         </div>
                     </Link>
-                    <p className={'text-center mt-5'}><i className="down"></i></p>
-
-
-                    {/*PROJECTS SECTION*/}
-
-                    {/*MECHANICAL*/}
-                    <section id={'mechanical'}>
-                        <div className={'text-center'}>
-                            <svg className={'mt-5'} height="2" width="1040">
-                                <line x1="0" y1="0" x2="1040" y2="2"/>
-                            </svg>
-                        </div>
+                </section>
 
-                        {/*replace header name here*/}
-                        <p className={'section-title mt-3'}> Mechanical Projects </p>
 
+                {/*ELECTRICAL*/}
+                <section id={'electrical'}>
+                    <div className={'text-center'}>
+                        <svg className={'mt-5 col-11'} height="2" width="1440">
+                            <line x1="0" y1="0" x2="1440" y2="2"/>
+                        </svg>
+                    </div>
+                    {/*replace header name here*/}
+                    <p className={'section-title mt-3'}> Electrical Projects </p>
 
-                        {/*copy and paste this to add a new section, update image, text, and link*/}
-                        <div className={'row mt-5 justify-content-center'}>
-                            <img className={'rounded my-auto project-pic'} src={emissions} alt="Emissions simulation"/>
-                            <div className={'project-rect rounded'}>
-                                <div className={'project-text-field'}>
-                                    {/*Replace Name here*/}
-                                    <h3 className={'orange-project-header'}>Emissions Simulation</h3>
 
-                                    {/*Replace Description here*/}
-                                    <p className={'project-description'}>
-                                        A simulation that takes physical input of users driving toy cars
-                                        along a model roadway and changes the imagery displayed on the
-                                        roadway’s backdrop in real time.
-                                    </p>
+                    {/*copy and paste this to add a new section, update image, text, and link*/}
+                    <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
+                        <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
+                            {/*replace image here*/}
+                            <img className="rounded image col-lg-4 col-10" id={'image-project-header'} src={emissions} alt="Emissions Simulation"/>
+
+                            <div className={'col-6 d-none d-lg-block d-xl-block'}>
+
+                                <div className="card card-desktop-project-list border-dark bg-transparent">
+                                    <div className="card-body card-body-desktop d-flex align-items-center">
+                                        <div>
+                                            {/*Replace Name here*/}
+                                            <h3 className="card-title orange-header">Emissions Simulation</h3>
+                                            <p className="card-text description">
+                                                A simulation that takes physical input of users driving toy cars
+                                                along a model roadway and changes the imagery displayed on the
+                                                roadway’s backdrop in real time.
+                                            </p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
 
-                        <div className={'row mt-5 justify-content-center'}>
-                            <img className={'rounded my-auto project-pic'} src={ballista} alt="Ballista"/>
-                            <div className={'project-rect rounded'}>
-                                <div className={'project-text-field'}>
+                        <div
+                            className="mx-auto card border-dark card-project-list-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                            <div className="card-body card-body-mobile d-flex align-items-center">
+                                <div>
                                     {/*Replace Name here*/}
-                                    <h3 className={'orange-project-header'}>Ballista</h3>
-
-                                    {/*Replace Description here*/}
-                                    <p className={'project-description'}>
-                                        A physics final project with the objective of transferring torsional
-                                        energy into ballistic kinetic energy.
+                                    <h3 className="card-title card-title-mobile orange-header">Emissions Simulation</h3>
+                                    <p className="card-text description">
+                                        A simulation that takes physical input of users driving toy cars
+                                        along a model roadway and changes the imagery displayed on the
+                                        roadway’s backdrop in real time.
                                     </p>
                                 </div>
                             </div>
                         </div>
-                    </section>
+                    </Link>
+                </section>
 
 
-                    {/*ELECTRICAL*/}
-                    <section id={'electrical'}>
-                        <div className={'text-center'}>
-                            <svg className={'mt-5'} height="2" width="1040">
-                                <line x1="0" y1="0" x2="1040" y2="2"/>
-                            </svg>
-                        </div>
-                        {/*replace header name here*/}
-                        <p className={'section-title mt-3'}> Electrical Projects </p>
+                {/*MATERIALS*/}
+                <section id={'materials'}>
+                    <div className={'text-center'}>
+                        <svg className={'mt-5 col-11'} height="2" width="1040">
+                            <line x1="0" y1="0" x2="1040" y2="2"/>
+                        </svg>
+                    </div>
+                    {/*replace header name here*/}
+                    <p className={'section-title mt-3'}> Materials Projects </p>
 
 
-                        {/*copy and paste this to add a new section, update image, text, and link*/}
-                        <div className={'row mt-5 justify-content-center'}>
-                            <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-                            <div className={'project-rect rounded'}>
-                                <div className={'project-text-field'}>
-                                    {/*Replace Name here*/}
-                                    <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
-
-                                    {/*Replace Description here*/}
-                                    <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
-                                        Observatory
-                                        With Wind Navigation </p>
+                    {/*copy and paste this to add a new section, update image, text, and link*/}
+                    <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
+                        <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
+                            {/*replace image here*/}
+                            <img className="rounded image col-lg-4 col-10" id={'image-project-header'} src={emissions} alt="Emissions Simulation"/>
+
+                            <div className={'col-6 d-none d-lg-block d-xl-block'}>
+
+                                <div className="card card-desktop-project-list border-dark bg-transparent">
+                                    <div className="card-body card-body-desktop d-flex align-items-center">
+                                        <div>
+                                            {/*Replace Name here*/}
+                                            <h3 className="card-title orange-header">Emissions Simulation</h3>
+                                            <p className="card-text description">
+                                                A simulation that takes physical input of users driving toy cars
+                                                along a model roadway and changes the imagery displayed on the
+                                                roadway’s backdrop in real time.
+                                            </p>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </section>
-
-
-                    {/*MATERIALS*/}
-                    <section id={'materials'}>
-                        <div className={'text-center'}>
-                            <svg className={'mt-5'} height="2" width="1040">
-                                <line x1="0" y1="0" x2="1040" y2="2"/>
-                            </svg>
-                        </div>
-                        {/*replace header name here*/}
-                        <p className={'section-title mt-3'}> Materials Projects </p>
-
 
-                        {/*copy and paste this to add a new section, update image, text, and link*/}
-                        <div className={'row mt-5 justify-content-center'}>
-                            <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-                            <div className={'project-rect rounded'}>
-                                <div className={'project-text-field'}>
+                        <div
+                            className="mx-auto card border-dark card-project-list-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                            <div className="card-body card-body-mobile d-flex align-items-center">
+                                <div>
                                     {/*Replace Name here*/}
-                                    <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
-
-                                    {/*Replace Description here*/}
-                                    <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
-                                        Observatory
-                                        With Wind Navigation </p>
+                                    <h3 className="card-title card-title-mobile orange-header">Emissions Simulation</h3>
+                                    <p className="card-text description">
+                                        A simulation that takes physical input of users driving toy cars
+                                        along a model roadway and changes the imagery displayed on the
+                                        roadway’s backdrop in real time.
+                                    </p>
                                 </div>
                             </div>
                         </div>
-                    </section>
-                </div>
+                    </Link>
+                </section>
+            </div>
 
-            );
-        }
+        );
     }
 }
+
 export default Home;
\ No newline at end of file
diff --git a/src/Components/Home2.js b/src/Components/Home2.js
deleted file mode 100644
index 157cf52..0000000
--- a/src/Components/Home2.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import React from 'react';
-import './Home.css';
-
-// import new image here
-import balloon from '../images/balloon.jpg';
-import emissions from '../images/emissions.png';
-import ballista from '../images/ballista.jpg';
-
-import {Link} from "react-router-dom";
-
-export class Home2 extends React.Component {
-    render() {
-        return (
-            <div className="Home">
-
-                {/*Most Recent Project*/}
-                <Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
-                    <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
-                        {/*replace image here*/}
-                        <img className="rounded image col-lg-5 col-10" src={balloon} alt="Hashbrowwn balloon"/>
-
-                        <div className={'col-6 d-none d-lg-block d-xl-block'}>
-
-                            <div className="card card-desktop border-dark bg-transparent">
-                                <div className="card-body card-body-desktop d-flex align-items-center">
-                                    <div>
-                                        <div className={'rect-orange rounded'}>
-                                            <p className={'flag'}> Most Recent Project </p>
-                                        </div>
-
-                                        {/*Replace Name here*/}
-                                        <h3 className="card-title orange-header">HASHBROWWN Balloon</h3>
-                                        <p className="card-text description">High-Altitude Solar-Heated Balloon Research
-                                            Observatory With Wind Navigation</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        className="mx-auto card border-dark card-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
-                        <div className="card-body card-body-mobile d-flex align-items-center">
-                            <div>
-                                <div className={'rect-orange-mobile rounded'}>
-                                    <p className={'flag'}> Most Recent Project </p>
-                                </div>
-
-                                {/*Replace Name here*/}
-                                <h3 className="card-title orange-header">HASHBROWWN Balloon</h3>
-                                <p className="card-text description">High-Altitude Solar-Heated Balloon Research
-                                    Observatory With Wind Navigation</p>
-                            </div>
-                        </div>
-                    </div>
-                </Link>
-                <p className={'text-center mt-5'}><i className="down"></i></p>
-
-
-                {/*PROJECTS SECTION*/}
-
-                {/*MECHANICAL*/}
-                <section id={'mechanical'}>
-                    <div className={'text-center'}>
-                        <svg className={'mt-5 col-10'} height="2" width="1440">
-                            <line x1="0" y1="0" x2="1440" y2="2"/>
-                        </svg>
-                    </div>
-
-                    {/*replace header name here*/}
-                    <p className={'section-title mt-3'}> Mechanical Projects </p>
-
-
-                    {/*copy and paste this to add a new section, update image, text, and link*/}
-                    <div className={'row mt-5 justify-content-center col-12'}>
-                        <img className={'rounded my-auto project-pic col-4'} height={'280px'} src={emissions}
-                             alt="Emissions simulation"/>
-                        <div className={'project-rect rounded col-8'}>
-                            <div className={'project-text-field'}>
-                                {/*Replace Name here*/}
-                                <h3 className={'orange-project-header'}>Emissions Simulation</h3>
-
-                                {/*Replace Description here*/}
-                                <p className={'project-description'}>
-                                    A simulation that takes physical input of users driving toy cars
-                                    along a model roadway and changes the imagery displayed on the
-                                    roadway’s backdrop in real time.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className={'row mt-5 justify-content-center col-12'}>
-                        <img className={'rounded my-auto project-pic col-4'} height={'280px'} src={ballista}
-                             alt="Ballista"/>
-                        <div className={'project-rect rounded col-8'}>
-                            <div className={'project-text-field'}>
-                                {/*Replace Name here*/}
-                                <h3 className={'orange-project-header'}>Ballista</h3>
-
-                                {/*Replace Description here*/}
-                                <p className={'project-description'}>
-                                    A physics final project with the objective of transferring torsional
-                                    energy into ballistic kinetic energy.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-
-                {/*ELECTRICAL*/}
-                <section id={'electrical'}>
-                    <div className={'text-center'}>
-                        <svg className={'mt-5'} height="2" width="1040">
-                            <line x1="0" y1="0" x2="1040" y2="2"/>
-                        </svg>
-                    </div>
-                    {/*replace header name here*/}
-                    <p className={'section-title mt-3'}> Electrical Projects </p>
-
-
-                    {/*copy and paste this to add a new section, update image, text, and link*/}
-                    <div className={'row mt-5 justify-content-center'}>
-                        <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-                        <div className={'project-rect rounded'}>
-                            <div className={'project-text-field'}>
-                                {/*Replace Name here*/}
-                                <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
-
-                                {/*Replace Description here*/}
-                                <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
-                                    Observatory
-                                    With Wind Navigation </p>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-
-                {/*MATERIALS*/}
-                <section id={'materials'}>
-                    <div className={'text-center'}>
-                        <svg className={'mt-5'} height="2" width="1040">
-                            <line x1="0" y1="0" x2="1040" y2="2"/>
-                        </svg>
-                    </div>
-                    {/*replace header name here*/}
-                    <p className={'section-title mt-3'}> Materials Projects </p>
-
-
-                    {/*copy and paste this to add a new section, update image, text, and link*/}
-                    <div className={'row mt-5 justify-content-center'}>
-                        <img className={'rounded my-auto project-pic'} src={balloon} alt="Hashbrowwn balloon"/>
-                        <div className={'project-rect rounded'}>
-                            <div className={'project-text-field'}>
-                                {/*Replace Name here*/}
-                                <h3 className={'orange-project-header'}>HASHBROWWN BALLOON</h3>
-
-                                {/*Replace Description here*/}
-                                <p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
-                                    Observatory
-                                    With Wind Navigation </p>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            </div>
-
-        );
-    }
-}
-
-export default Home2;
\ No newline at end of file
diff --git a/src/Components/InfoPages/Hashbrowwn.js b/src/Components/InfoPages/Hashbrowwn.js
index f9687a9..2219204 100644
--- a/src/Components/InfoPages/Hashbrowwn.js
+++ b/src/Components/InfoPages/Hashbrowwn.js
@@ -8,16 +8,37 @@ import balloon3 from '../../images/balloon3.jpg';
 
 function Hashbrowwn() {
     return (
-        <div className="Hashbrowwn">
+        <div className="Hashbrowwn project">
             <p className={'orange-header-project'}> HASHBROWWN Balloon</p>
 
-            <div className={'row mt-5 justify-content-center'}>
+            <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
                 {/*replace image here*/}
-                <img className={'rounded my-auto image col-4'} src={balloon} alt="Hashbrowwn balloon"/>
-                <div className={'rect rounded col-7'}>
-                    <div className={'text-field'}>
-                        {/*Replace Description here*/}
-                        <p className={'description'}>
+                <img className="rounded image col-lg-5 col-10" id={'image-project-header'} src={balloon} alt="Hashbrowwn balloon"/>
+
+                <div className={'col-6 d-none d-lg-block d-xl-block'}>
+
+                    <div className="card card-desktop border-dark bg-transparent">
+                        <div className="card-body card-body-desktop d-flex align-items-center">
+                            <div>
+                                {/*Replace Name here*/}
+                                <p className="card-text description">
+                                    This project spanned two summers and included every part of the design process,
+                                    from materials testing and selection to fabrication and field testing. The materials
+                                    we used to build the balloon included 6um mylar, 12um aluminized mylar, 1mm black polyester
+                                    felt, 0.5 mil polyethylene, VHB adhesive transfer, Kapton tape, and 850 tape.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div
+                className="mx-auto card border-dark card-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                <div className="card-body card-body-mobile d-flex align-items-center">
+                    <div>
+                        {/*Replace Name here*/}
+                        <p className="card-text card-text-mobile description">
                             This project spanned two summers and included every part of the design process,
                             from materials testing and selection to fabrication and field testing. The materials
                             we used to build the balloon included 6um mylar, 12um aluminized mylar, 1mm black polyester
@@ -28,27 +49,72 @@ function Hashbrowwn() {
             </div>
 
 
-            <div className={'row mt-5 justify-content-center'}>
-                <div className={'rect-right rounded col-6'}>
-                    <div className={'text-field-left'}>
-                        {/*Replace Description here*/}
-                        <p className={'description'}>
+            <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
+                {/*replace image here*/}
+                <div className={'col-4 d-none d-lg-block d-xl-block'}>
+
+                    <div className="card card-left card-desktop border-dark bg-transparent">
+                        <div className="card-body card-body-desktop card-body-left d-flex align-items-center">
+                            <div>
+                                {/*Replace Name here*/}
+                                <p className="card-text description">
+                                    The balloons structure consisted of one large carbon fiber ring around the lower
+                                    circumference of the cylindrical mylar envelope.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            <img className="rounded image col-lg-5 col-10" id={'image-project-header'} src={balloon2} alt="Hashbrowwn balloon"/>
+            </div>
+
+            <div
+                className="mx-auto card border-dark card-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                <div className="card-body card-body-mobile d-flex align-items-center">
+                    <div>
+                        {/*Replace Name here*/}
+                        <p className="card-text card-text-mobile description">
                             The balloons structure consisted of one large carbon fiber ring around the lower
                             circumference of the cylindrical mylar envelope.
                         </p>
                     </div>
                 </div>
-                <img className={'rounded my-auto'} src={balloon2} alt="Hashbrowwn balloon"/>
+
+
             </div>
 
 
-            <div className={'row mt-5 justify-content-center'}>
+            <div className={'row mx-auto mt-5 d-flex align-items-center justify-content-center main-project'}>
                 {/*replace image here*/}
-                <img className={'rounded my-auto balloon3'} src={balloon3} alt="Hashbrowwn balloon"/>
-                <div className={'rect rounded balloon-3'}>
-                    <div className={'text-field'}>
-                        {/*Replace Description here*/}
-                        <p className={'description'}>
+                <img className="rounded image col-lg-3 col-10 balloon3" id={'image-project-header'} src={balloon3} alt="Hashbrowwn balloon"/>
+
+                <div className={'col-6 d-none d-lg-block d-xl-block'}>
+
+                    <div className="card card-desktop border-dark bg-transparent">
+                        <div className="card-body card-body-desktop d-flex align-items-center">
+                            <div>
+                                {/*Replace Name here*/}
+                                <p className="card-text description">
+                                    The 5kg payload suspended beneath the balloon from the bottom ring included custom circuit
+                                    boards capable of remotely controlling the balloon, communicating with our ground station,
+                                    mapping the balloons position, and recording video. It was also necessary that our payload
+                                    had an emergency release mechanism. We tested our balloons small-scale and large-scale,
+                                    both in arenas and on test fields. By doing this, we could see how the prototypes scaled
+                                    based on our materials and methods. The largest balloon we built had an 8 meter diameter
+                                    with a height of 12 meters.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div
+                className="mx-auto card border-dark card-mobile d-block d-lg-none d-xl-none bg-transparent col-11">
+                <div className="card-body card-body-mobile d-flex align-items-center">
+                    <div>
+                        {/*Replace Name here*/}
+                        <p className="card-text card-text-mobile description">
                             The 5kg payload suspended beneath the balloon from the bottom ring included custom circuit
                             boards capable of remotely controlling the balloon, communicating with our ground station,
                             mapping the balloons position, and recording video. It was also necessary that our payload
diff --git a/src/Components/InfoPages/info.css b/src/Components/InfoPages/info.css
index b6e7fbe..b4b1df5 100644
--- a/src/Components/InfoPages/info.css
+++ b/src/Components/InfoPages/info.css
@@ -47,12 +47,33 @@ img {
 }
 
 .balloon3 {
-    height: 304px;
-    width: 375px;
     transform: rotate(90deg);
 
 }
 
 .balloon-3 {
     width: 900px;
+}
+
+.project {
+    margin-top: 100px;
+}
+
+.card-text-mobile {
+    margin-top: 75px;
+}
+
+.card-mobile {
+    height: 300px;
+}
+
+.card-left {
+    margin-right: -200px;
+    height: 450px;
+    z-index: -1;
+}
+
+.card-body-left {
+    margin-left: 50px;
+    margin-right: 200px;
 }
\ No newline at end of file
diff --git a/src/Components/Nav.js b/src/Components/Nav.js
index 0ada4b3..92e270d 100644
--- a/src/Components/Nav.js
+++ b/src/Components/Nav.js
@@ -8,12 +8,12 @@ import Nav from "react-bootstrap/Nav";
 function Navigation() {
 
     return (
-        <Navbar collapseOnSelect expand="lg" bg="white" variant="light" className="navbar container-fluid">
-            <Navbar.Brand as={Link} className="navbar-brand" to="/">
+        <Navbar collapseOnSelect fixed="top" expand="lg" bg="white" variant="light" className="navbar container-fluid">
+            <Navbar.Brand as={Link} className="navbar-brand ml-5" to="/">
                 <p className={'nav-header'}> Noah Taylor </p>
             </Navbar.Brand>
             <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
-            <Navbar.Collapse id="responsive-navbar-nav" className={'ml-4'}>
+            <Navbar.Collapse id="responsive-navbar-nav" className={'ml-4 justify-content-end'}>
                 <Nav className="mr-5">
                     <Link smooth to="/#mechanical"
                           activeClassName="selected" className="nav-link mr-4">