rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-15 18:00:19 -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 Home from "./components/Home";
import PostDetail from "./components/PostDetail";
import Olympian from "./components/Olympian";
import Blog from "./components/Blog";
import Donate from "./components/Donate";
import Navbar from "./components/Navbar";
@ -21,8 +22,9 @@ function App() {
<Route component={Blog} path="/blog" />
<Route component={Donate} path="/donate" />
<Route component={Sponsors} path="/sponsors" />
<Route component={Events} path="/events" />
<Route component={Home} path="/" />
<Route component={Events} path="/events" />
<Route component={Olympian} path="/meet-olympian" />
<Route component={Home} path="/" />
</Switch>
</BrowserRouter>

23
src/components/Blog.js
View File

@ -1,5 +1,26 @@
import React from "react";
import "./assets/Blog.scss";
import hero from "./assets/img/olympian_hero.png";
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 {Spring} from 'react-spring/renderprops'
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.
@ -13,7 +13,7 @@ const GlobalStyle = createGlobalStyle`
}
body {
background-color: #293241;
font-family: Arial, Helvetica, sans-serif;
font-family: Poppins, sans-serif;
height: 100%;
margin: 0;
color: #555;
@ -118,7 +118,7 @@ class ContactForm extends Component {
<GlobalStyle />
<StyledFormWrapper id="backUp">
<StyledForm onSubmit={this.handleSubmit}>
<h2>Contact Form</h2>
<h2 className="header">Contact Us</h2>
<label htmlFor="name">Name</label>
<StyledInput
type="text"
@ -145,7 +145,9 @@ class ContactForm extends Component {
<p>{this.state.error}</p>
</StyledError>
<StyledButton type="submit">Send Message</StyledButton>
<div className="button-container">
<StyledButton type="submit" className="button-submit">Send Message</StyledButton>
</div>
</StyledForm>
</StyledFormWrapper>
<Modal show={this.state.show} handleClose={this.hideModal}>
@ -175,6 +177,9 @@ class ContactForm extends Component {
)}
</Spring>
</div>
<div className="bottom">
</div>
</>
);
}

22
src/components/Events.js
View File

@ -1,6 +1,26 @@
import React from "react";
import "./assets/Events.scss";
import hero from "./assets/img/olympian_hero.png";
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 (
<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;The first high school team to design and&nbsp;<br></br>&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span>
</p>
</div>
<img
className="landing-robot"
src={hero}
alt=""
/>
<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;The first high school team to design and&nbsp;<br></br>&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span>
</p>
</div>
<img
className="landing-robot"
src={hero}
alt=""
/>
</section>
{/* <p className="test">hello</p> place this in the section, relative is only to the parent div */}
{/* <section className="intro-section">
<div className="intro-wrapper">
<div className="intro-content">

8
src/components/Navbar.js
View File

@ -48,13 +48,7 @@ export default function Navbar(props) {
</li>
<li>
{" "}
<NavLink to="/timeline" activeClassName="active-link">
Timeline
</NavLink>
</li>
<li>
{" "}
<NavLink to="/olympian" activeClassName="active-link">
<NavLink to="/meet-olympian" activeClassName="active-link">
Meet Olympian
</NavLink>
</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;
margin: 0;
@ -43,6 +47,7 @@ $desktop-small: 1250px;
.hero {
pointer-events: none;
// position:relative
// height: 86vh;
}
@ -104,6 +109,8 @@ $desktop-small: 1250px;
z-index: 999 !important;
width: 45%;
@include desktop-small {
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) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
height: 65%;
padding-bottom: 2%;
opacity: 90%;
top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: $black;
width: 50%;
width: 30%;
transform: translateX(100%);
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 {
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;
$medium: 800px;
$large: 1200px;
button {
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 {
position: fixed;
top: 0;
@ -42,12 +59,17 @@ body {
border-radius:10px;
width: 20%;
left: 40%;
margin-bottom: 5vw;
text-align: center;
padding: 0 2%;
position:relative;
top:2em;
@media only screen and (max-width: $large) {
width: 35%;
left: 35%;
}
@media only screen and (max-width: $medium) {
width: 30%;
width: 45%;
left: 35%;
}
@media only screen and (max-width: $small) {
@ -95,4 +117,9 @@ body {
.fa-envelope {
color: #e0fbfc;
}
}
.bottom {
height: 0.5vw;
}