Skip to content

Commit

Permalink
added anchors
Browse files Browse the repository at this point in the history
  • Loading branch information
Gwen Friedman authored and Gwen Friedman committed Feb 20, 2020
1 parent 6364927 commit 08f74ba
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 70 deletions.
13 changes: 13 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"react": "^16.12.0",
"react-anchor-link-smooth-scroll": "^1.0.12",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-router-hash-link": "^1.2.2",
"react-scripts": "3.3.1"
},
"scripts": {
Expand Down
6 changes: 5 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,16 @@ import {BrowserRouter as Router, Route} from "react-router-dom";
function App() {
return (
<div>
<Nav/>
<Router>
<Nav/>
<div>
<Route exact path='/'
component={Home}/>
</div>
<div>
<Route exact path='/home'
component={Home}/>
</div>
<div>
<Route exact path='/hashbrowwn'
component={Hashbrowwn}/>
Expand Down
127 changes: 68 additions & 59 deletions src/Components/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ import {Link} from "react-router-dom";
function Home() {
return (
<div className="Home">

{/*Most Recent Project*/}
<Link to={`/hashbrowwn`} style={{ textDecoration: 'none'}}>
<Link to={`/hashbrowwn`} style={{textDecoration: 'none'}}>
<div className={'row mt-5 justify-content-center'}>
{/*replace image here*/}
<img className={'rounded my-auto'} src={balloon} alt="Hashbrowwn balloon"/>
Expand All @@ -28,12 +27,13 @@ function Home() {
<h3 className={'orange-header'}>HASHBROWWN Balloon</h3>

{/*Replace Description here*/}
<p className={'description'}> High-Altitude Solar-Heated Balloon Research Observatory With Wind Navigation </p>
<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>
<p className={'text-center mt-5'}><i className="down"></i></p>


{/*PROJECTS SECTION*/}
Expand All @@ -44,94 +44,103 @@ function Home() {
</svg>
</div>

{/*replace header name here*/}
<p className={'section-title'}> Mechanical Projects </p>
<section id={'mechanical'}>
{/*replace header name here*/}
<p className={'section-title'}> 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'}>
<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>
{/*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>
{/*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>

<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'}>
{/*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 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'}>
{/*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>
</div>

</section>


<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'}> Electrical Projects </p>
<section id={'electrical'}>
{/*replace header name here*/}
<p className={'section-title'}> 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>
{/*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>
{/*Replace Description here*/}
<p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
Observatory
With Wind Navigation </p>
</div>
</div>
</div>
</div>
</section>


<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'}> Materials Projects </p>
<section id={'materials'}>
{/*replace header name here*/}
<p className={'section-title'}> 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>
{/*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>
{/*Replace Description here*/}
<p className={'project-description'}> High-Altitude Solar-Heated Balloon Research
Observatory
With Wind Navigation </p>
</div>
</div>
</div>
</div>

</section>
</div>

);
}

Expand Down
21 changes: 11 additions & 10 deletions src/Components/Nav.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,37 @@
import React from 'react';
import './Nav.css';
import {Link} from "react-router-dom";
import { HashLink as Link } from 'react-router-hash-link';


function Nav() {
return (
<nav className="navbar navbar-expand-lg navbar-light sticky-top bg-white">
{/*<Link to={`/`}>*/}
<a className="navbar-brand">
<a href={"/"} className={"navbar-brand"}>
<p className={'nav-header'}> Noah Taylor </p>
</a>
{/*</Link>*/}
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto mr-5">
<li className="nav-item mr-4">
<a className="nav-link" href="/">
<Link smooth to="/#mechanical"
activeClassName="selected" className="nav-link">
<p className={'link'}>Mechanical</p>
</a>
</Link>
</li>
<li className="nav-item mr-4">
<a className="nav-link" href="/">
<Link to="/#electrical"
activeClassName="selected" className="nav-link">
<p className={'link'}>Electrical</p>
</a>
</Link>
</li>
<li className="nav-item mr-3">
<a className="nav-link" href="/">
<Link to="/#materials"
activeClassName="selected" className="nav-link">
<p className={'link'}>Materials</p>
</a>
</Link>
</li>
<svg className={'mr-3'} height="45" width="2">
<line x1="0" y1="0" x2="0" y2="45"/>
Expand Down

0 comments on commit 08f74ba

Please sign in to comment.