rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-17 19:00:18 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add all missing pages

Browse Source
This commit is contained in:
Aditya Vasantharao 2021-03-08 17:26:58 -05:00
parent f88cba4521
commit 6017c9e3df
13 changed files with 624 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -4,6 +4,7 @@ import About from "./components/About";
import ContactForm from "./components/Contact"; import ContactForm from "./components/Contact";
import Home from "./components/Home"; import Home from "./components/Home";
import PostDetail from "./components/PostDetail"; import PostDetail from "./components/PostDetail";
import Olympian from "./components/Olympian";
import Blog from "./components/Blog"; import Blog from "./components/Blog";
import Donate from "./components/Donate"; import Donate from "./components/Donate";
import Navbar from "./components/Navbar"; import Navbar from "./components/Navbar";
@ -21,8 +22,9 @@ function App() {
<Route component={Blog} path="/blog" /> <Route component={Blog} path="/blog" />
<Route component={Donate} path="/donate" /> <Route component={Donate} path="/donate" />
<Route component={Sponsors} path="/sponsors" /> <Route component={Sponsors} path="/sponsors" />
<Route component={Events} path="/events" /> <Route component={Events} path="/events" />
<Route component={Home} path="/" /> <Route component={Olympian} path="/meet-olympian" />
<Route component={Home} path="/" />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>

23
src/components/Blog.js
View File

@ -1,5 +1,26 @@
import React from "react"; import React from "react";
import "./assets/Blog.scss";
import hero from "./assets/img/olympian_hero.png";
export default function Blog(props) { export default function Blog(props) {
return <div>Blog</div>; return (
<body>
<section className="hero">
<div className="landing-header">
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
</div>
<div className="landing-subheader">
<p>
<span className="highlight-gray">&nbsp;This page is under construction.&nbsp;<br></br>&nbsp;Please check back later!&nbsp;</span>
</p>
</div>
<img
className="landing-robot"
src={hero}
alt=""
/>
</section>
</body>
);
} }

13
src/components/Contact.js
View File

@ -3,7 +3,7 @@ import emailjs from "emailjs-com";
import {createGlobalStyle} from 'styled-components'; import {createGlobalStyle} from 'styled-components';
import {Spring} from 'react-spring/renderprops' import {Spring} from 'react-spring/renderprops'
import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet, Modal} from "./assets/StyledContactForm.js"; import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet, Modal} from "./assets/StyledContactForm.js";
import './assets/contact.scss'; import './assets/Contact.scss';
// If you need anything for this ask Ram Reddy. // If you need anything for this ask Ram Reddy.
@ -13,7 +13,7 @@ const GlobalStyle = createGlobalStyle`
} }
body { body {
background-color: #293241; background-color: #293241;
font-family: Arial, Helvetica, sans-serif; font-family: Poppins, sans-serif;
height: 100%; height: 100%;
margin: 0; margin: 0;
color: #555; color: #555;
@ -118,7 +118,7 @@ class ContactForm extends Component {
<GlobalStyle /> <GlobalStyle />
<StyledFormWrapper id="backUp"> <StyledFormWrapper id="backUp">
<StyledForm onSubmit={this.handleSubmit}> <StyledForm onSubmit={this.handleSubmit}>
<h2>Contact Form</h2> <h2 className="header">Contact Us</h2>
<label htmlFor="name">Name</label> <label htmlFor="name">Name</label>
<StyledInput <StyledInput
type="text" type="text"
@ -145,7 +145,9 @@ class ContactForm extends Component {
<p>{this.state.error}</p> <p>{this.state.error}</p>
</StyledError> </StyledError>
<StyledButton type="submit">Send Message</StyledButton> <div className="button-container">
<StyledButton type="submit" className="button-submit">Send Message</StyledButton>
</div>
</StyledForm> </StyledForm>
</StyledFormWrapper> </StyledFormWrapper>
<Modal show={this.state.show} handleClose={this.hideModal}> <Modal show={this.state.show} handleClose={this.hideModal}>
@ -175,6 +177,9 @@ class ContactForm extends Component {
)} )}
</Spring> </Spring>
</div> </div>
<div className="bottom">
</div>
</> </>
); );
} }

22
src/components/Events.js
View File

@ -1,6 +1,26 @@
import React from "react"; import React from "react";
import "./assets/Events.scss"; import "./assets/Events.scss";
import hero from "./assets/img/olympian_hero.png";
export default function Events(props) { export default function Events(props) {
return <div>Events</div>; return (
<body>
<section className="hero">
<div className="landing-header">
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
</div>
<div className="landing-subheader">
<p>
<span className="highlight-gray">&nbsp;This page is under construction.&nbsp;<br></br>&nbsp;Please check back later!&nbsp;</span>
</p>
</div>
<img
className="landing-robot"
src={hero}
alt=""
/>
</section>
</body>
);
} }

29
src/components/Home.js
View File

@ -7,21 +7,22 @@ export default function Home(props) {
return ( return (
<body> <body>
<section className="hero"> <section className="hero">
<div className="landing-header"> <div className="landing-header">
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1> <h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1> <h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
</div> </div>
<div className="landing-subheader"> <div className="landing-subheader">
<p> <p>
<span className="highlight-gray">&nbsp;The first high school team to design and&nbsp;<br></br>&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span> <span className="highlight-gray">&nbsp;The first high school team to design and&nbsp;<br></br>&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span>
</p> </p>
</div> </div>
<img <img
className="landing-robot" className="landing-robot"
src={hero} src={hero}
alt="" alt=""
/> />
</section> </section>
{/* <p className="test">hello</p> place this in the section, relative is only to the parent div */}
{/* <section className="intro-section"> {/* <section className="intro-section">
<div className="intro-wrapper"> <div className="intro-wrapper">
<div className="intro-content"> <div className="intro-content">

8
src/components/Navbar.js
View File

@ -48,13 +48,7 @@ export default function Navbar(props) {
</li> </li>
<li> <li>
{" "} {" "}
<NavLink to="/timeline" activeClassName="active-link"> <NavLink to="/meet-olympian" activeClassName="active-link">
Timeline
</NavLink>
</li>
<li>
{" "}
<NavLink to="/olympian" activeClassName="active-link">
Meet Olympian Meet Olympian
</NavLink> </NavLink>
</li> </li>

26
src/components/Olympian.js Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import "./assets/Olympian.scss";
import hero from "./assets/img/olympian_hero.png";
export default function Events(props) {
return (
<body>
<section className="hero">
<div className="landing-header">
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>
</div>
<div className="landing-subheader">
<p>
<span className="highlight-gray">&nbsp;This page is under construction.&nbsp;<br></br>&nbsp;Please check back later!&nbsp;</span>
</p>
</div>
<img
className="landing-robot"
src={hero}
alt=""
/>
</section>
</body>
);
}

156
src/components/assets/Blog.scss Normal file
View File

@ -0,0 +1,156 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
$mobile-small: 575px;
$mobile: 768px;
$tablet: 1024px;
$desktop-small: 1250px;
@mixin mobile-small {
@media (max-width: $mobile-small) {
@content;
}
}
@mixin mobile {
@media (min-width: $mobile-small) and (max-width: $mobile) {
@content;
}
}
@mixin tablet {
@media (min-width: $mobile) and (max-width: $tablet) {
@content;
}
}
@mixin desktop-small {
@media (min-width: $tablet) and (max-width: $desktop-small) {
@content;
}
}
@mixin desktop {
@media (min-width: $desktop-small) {
@content;
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
pointer-events: none;
// height: 86vh;
}
.landing-header {
position: absolute;
font-family: "Poppins", sans-serif;
font-size: 4vw;
margin-left: 0.4em;
padding-top: 0.3em;
#potentia {
padding-left: 0.4em;
z-index: 999 !important;
position: relative;
}
#robotics {
position: relative;
top: -0.3em;
padding-left: 1.35em;
z-index: 999 !important;
}
}
.landing-robot {
position: absolute;
opacity: 1;
// left: 40vw;
overflow: hidden;
// animation: navLinkFade 0.5s ease forwards 0.5s;
// max-height: 87vh;
width: 100%;
}
@keyframes robotFlyIn {
from {
transform: translateX(150vw);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.highlight-gray {
background-color: rgb(235, 235, 235);
}
.landing-subheader {
font-family: "Poppins", sans-serif;
font-size: 2vw;
position: absolute;
margin-top: 55vh;
// margin-right: 10%;
// right: 0;
margin-left: 4em;
z-index: 999 !important;
width: 45%;
@include desktop-small {
margin-top: 40vh;
}
@include tablet {
margin-top: 33vh;
}
@include mobile {
margin-top: 25vh;
}
@include mobile-small {
margin-top: 17vh;
}
a {
color: inherit;
text-decoration: none;
pointer-events: all;
&:hover {
text-decoration: underline;
}
}
}
.intro-wrapper {
// position: relative;
justify-content: center;
}
.intro-section {
position: absolute;
top: 50vw;
min-height: 50vh;
min-width: 100%;
background: rgb(235, 235, 235);
}
.intro-content {
background: rgb(235, 235, 235);
float: left;
}
.mission-statement {
background: rgb(235, 235, 235);
float: right;
}

156
src/components/assets/Events.scss
View File

@ -0,0 +1,156 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
$mobile-small: 575px;
$mobile: 768px;
$tablet: 1024px;
$desktop-small: 1250px;
@mixin mobile-small {
@media (max-width: $mobile-small) {
@content;
}
}
@mixin mobile {
@media (min-width: $mobile-small) and (max-width: $mobile) {
@content;
}
}
@mixin tablet {
@media (min-width: $mobile) and (max-width: $tablet) {
@content;
}
}
@mixin desktop-small {
@media (min-width: $tablet) and (max-width: $desktop-small) {
@content;
}
}
@mixin desktop {
@media (min-width: $desktop-small) {
@content;
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
pointer-events: none;
// height: 86vh;
}
.landing-header {
position: absolute;
font-family: "Poppins", sans-serif;
font-size: 4vw;
margin-left: 0.4em;
padding-top: 0.3em;
#potentia {
padding-left: 0.4em;
z-index: 999 !important;
position: relative;
}
#robotics {
position: relative;
top: -0.3em;
padding-left: 1.35em;
z-index: 999 !important;
}
}
.landing-robot {
position: absolute;
opacity: 1;
// left: 40vw;
overflow: hidden;
// animation: navLinkFade 0.5s ease forwards 0.5s;
// max-height: 87vh;
width: 100%;
}
@keyframes robotFlyIn {
from {
transform: translateX(150vw);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.highlight-gray {
background-color: rgb(235, 235, 235);
}
.landing-subheader {
font-family: "Poppins", sans-serif;
font-size: 2vw;
position: absolute;
margin-top: 55vh;
// margin-right: 10%;
// right: 0;
margin-left: 4em;
z-index: 999 !important;
width: 45%;
@include desktop-small {
margin-top: 40vh;
}
@include tablet {
margin-top: 33vh;
}
@include mobile {
margin-top: 25vh;
}
@include mobile-small {
margin-top: 17vh;
}
a {
color: inherit;
text-decoration: none;
pointer-events: all;
&:hover {
text-decoration: underline;
}
}
}
.intro-wrapper {
// position: relative;
justify-content: center;
}
.intro-section {
position: absolute;
top: 50vw;
min-height: 50vh;
min-width: 100%;
background: rgb(235, 235, 235);
}
.intro-content {
background: rgb(235, 235, 235);
float: left;
}
.mission-statement {
background: rgb(235, 235, 235);
float: right;
}

7
src/components/assets/Home.scss
View File

@ -35,6 +35,10 @@ $desktop-small: 1250px;
} }
} }
// .test {
// position: relative;
// }
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -43,6 +47,7 @@ $desktop-small: 1250px;
.hero { .hero {
pointer-events: none; pointer-events: none;
// position:relative
// height: 86vh; // height: 86vh;
} }
@ -104,6 +109,8 @@ $desktop-small: 1250px;
z-index: 999 !important; z-index: 999 !important;
width: 45%; width: 45%;
@include desktop-small { @include desktop-small {
margin-top: 40vh; margin-top: 40vh;
} }

24
src/components/assets/Navbar.scss
View File

@ -113,20 +113,28 @@ nav {
} }
} }
// body {
// overflow-x: hidden;
// }
@media (max-width: $desktop-small) { @media (max-width: $desktop-small) {
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
.nav-links { .nav-links {
position: absolute; position: absolute;
right: 0; right: 0;
height: 92vh; height: 65%;
padding-bottom: 2%;
opacity: 90%;
top: 8vh; top: 8vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: $black; background-color: $black;
width: 50%; width: 30%;
transform: translateX(100%); transform: translateX(100%);
transition: transform 0.5s ease-in; transition: transform 0.5s ease-in;
@ -135,6 +143,18 @@ nav {
} }
} }
@media (max-width: $mobile) {
.nav-links {
width: 50%;
}
}
@media (max-width: $mobile-small) {
.nav-links {
width: 60%;
}
}
.burger { .burger {
display: block; display: block;
} }

156
src/components/assets/Olympian.scss Normal file
View File

@ -0,0 +1,156 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
$mobile-small: 575px;
$mobile: 768px;
$tablet: 1024px;
$desktop-small: 1250px;
@mixin mobile-small {
@media (max-width: $mobile-small) {
@content;
}
}
@mixin mobile {
@media (min-width: $mobile-small) and (max-width: $mobile) {
@content;
}
}
@mixin tablet {
@media (min-width: $mobile) and (max-width: $tablet) {
@content;
}
}
@mixin desktop-small {
@media (min-width: $tablet) and (max-width: $desktop-small) {
@content;
}
}
@mixin desktop {
@media (min-width: $desktop-small) {
@content;
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
pointer-events: none;
// height: 86vh;
}
.landing-header {
position: absolute;
font-family: "Poppins", sans-serif;
font-size: 4vw;
margin-left: 0.4em;
padding-top: 0.3em;
#potentia {
padding-left: 0.4em;
z-index: 999 !important;
position: relative;
}
#robotics {
position: relative;
top: -0.3em;
padding-left: 1.35em;
z-index: 999 !important;
}
}
.landing-robot {
position: absolute;
opacity: 1;
// left: 40vw;
overflow: hidden;
// animation: navLinkFade 0.5s ease forwards 0.5s;
// max-height: 87vh;
width: 100%;
}
@keyframes robotFlyIn {
from {
transform: translateX(150vw);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.highlight-gray {
background-color: rgb(235, 235, 235);
}
.landing-subheader {
font-family: "Poppins", sans-serif;
font-size: 2vw;
position: absolute;
margin-top: 55vh;
// margin-right: 10%;
// right: 0;
margin-left: 4em;
z-index: 999 !important;
width: 45%;
@include desktop-small {
margin-top: 40vh;
}
@include tablet {
margin-top: 33vh;
}
@include mobile {
margin-top: 25vh;
}
@include mobile-small {
margin-top: 17vh;
}
a {
color: inherit;
text-decoration: none;
pointer-events: all;
&:hover {
text-decoration: underline;
}
}
}
.intro-wrapper {
// position: relative;
justify-content: center;
}
.intro-section {
position: absolute;
top: 50vw;
min-height: 50vh;
min-width: 100%;
background: rgb(235, 235, 235);
}
.intro-content {
background: rgb(235, 235, 235);
float: left;
}
.mission-statement {
background: rgb(235, 235, 235);
float: right;
}

31
src/components/assets/contact.scss
View File

@ -1,9 +1,26 @@
$small: 500px; $small: 500px;
$medium: 800px; $medium: 800px;
$large: 1200px;
button { button {
cursor:pointer; cursor:pointer;
} }
.button-submit {
font-family: Poppins, sans-serif;
min-height: 50px;
margin: 0 auto;
}
.button-container {
justify-content: center;
}
.header {
font-size: 2.5em;
padding-bottom: 1vw;
}
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
@ -42,12 +59,17 @@ body {
border-radius:10px; border-radius:10px;
width: 20%; width: 20%;
left: 40%; left: 40%;
margin-bottom: 5vw;
text-align: center; text-align: center;
padding: 0 2%; padding: 0 2%;
position:relative; position:relative;
top:2em; top:2em;
@media only screen and (max-width: $large) {
width: 35%;
left: 35%;
}
@media only screen and (max-width: $medium) { @media only screen and (max-width: $medium) {
width: 30%; width: 45%;
left: 35%; left: 35%;
} }
@media only screen and (max-width: $small) { @media only screen and (max-width: $small) {
@ -95,4 +117,9 @@ body {
.fa-envelope { .fa-envelope {
color: #e0fbfc; color: #e0fbfc;
} }
.bottom {
height: 0.5vw;
}