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

Merge pull request #16 from PotentiaRobotics/use-reactstrap

Browse Source 
Use reactstrap
This commit is contained in:
Ram Reddy 2021-06-27 20:45:55 -04:00 committed by GitHub
commit 644933c4e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 1513 additions and 13973 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package.json
View File

@ -14,15 +14,19 @@
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-icons": "^1.5.0",
"chokidar": "^3.5.2",
"emailjs-com": "^2.6.4",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"react": "^17.0.1",
"react-bootstrap": "^1.6.0",
"react-dom": "^17.0.1",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-bootstrap-tabs": "^2.0.0",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-tabs": "^3.2.2",
"reactstrap": "^8.9.0",
"serve": "^11.3.2",
"styled-components": "^5.3.0",
"tsutils": "^3.20.0",

736
src/bootstrap.css vendored Normal file
View File

@ -0,0 +1,736 @@
/*!
* Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
*/
/*!
* Bootstrap v3.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row-no-gutters {
margin-right: 0;
margin-left: 0;
}
.row-no-gutters [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0%;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0%;
}
}
@media (min-width: 1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666667%;
}
.col-lg-pull-10 {
right: 83.33333333%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666667%;
}
.col-lg-pull-7 {
right: 58.33333333%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666667%;
}
.col-lg-pull-4 {
right: 33.33333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666667%;
}
.col-lg-push-10 {
left: 83.33333333%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666667%;
}
.col-lg-push-7 {
left: 58.33333333%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666667%;
}
.col-lg-push-4 {
left: 33.33333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.66666667%;
}
.col-lg-push-1 {
left: 8.33333333%;
}
.col-lg-push-0 {
left: auto;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0%;
}
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
display: table;
content: " ";
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.hidden {
display: none !important;
}
.affix {
position: fixed;
}

7
src/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
src/bootstrap.scss vendored
View File

@ -1 +1 @@
//@import "~bootstrap/scss/bootstrap.scss";
// @import "~bootstrap/scss/bootstrap.scss";

890
src/components/About.js
View File

@ -1,173 +1,719 @@
import React, { Component } from 'react'
import adi from './assets/img/Adi.PNG'
import rushil from './assets/img/Rushil.PNG'
import jason from './assets/img/Jason.PNG'
import shahzad from './assets/img/Shahzad.PNG'
import aileen from './assets/img/Aileen.PNG'
import mayuka from './assets/img/Mayuka.PNG'
import ram from './assets/img/Ram.PNG'
import sai from './assets/img/Sai.PNG'
import kedar from './assets/img/Kedar.PNG'
import icon from './assets/img/aboutlogo.PNG'
import './assets/About.scss'
class About extends Component {
render () {
return (
<body>
<table>
<tr>
<th colspan='2'>About Us</th>
</tr>
<tr><th colspan='2'>Founder and Project Lead</th></tr>
<tr>
<td font-size='20px'>
Hi! I’m Aditya, one of the founders and Project Lead of Potentia Robotics and a sophomore at TJHSST. I was inspired to pursue such a grand project by YouTubers like Mark Rober and Michael Reeves, who build large, grand robots and other machinery just for the sheer fun of it. In particular, Michael Reeves’ philosophy of building cool things just for the sake of it/for the learning experience instead of having some ulterior—monetary or otherwise—motive behind building that thing really resonated with me. As the Project Lead of Potentia Robotics, I’m responsible for managing the team as a whole, setting and following through with deadlines, and I serve as the bridge between each of the three subteams. I also do subteam-specific work (programming, designing, accounting, etc.) in each subteam.
</td>
<td>
<img src={adi} alt='image of Aditya Vasantharao' />
</td>
</tr>
<tr><th colspan='2'>Founder and Software Lead</th></tr>
<tr>
<td font-size='20px'>
I’m Audhav Durai, one of the founders and the Software Lead for Potentia Robotics. Motivated by the research being done at various colleges and academic institutions, I (along with Aditya) founded and became a part of Potentia Robotics so we could tackle a high-level project on our own. Having the opportunity to conduct research that is being done in the real word as a highschooler is an amazing experience. My role on the team is to manage the programming subteam, which means keeping track of our progress, making sure we are always on task, and meeting both exterior and team-set deadlines. Additionally, I do various tasks in the programming subteam as well.
</td>
<td padding='0px'>
<img src={icon} alt='image of Audhav Durai' />
</td>
</tr>
<tr><th colspan='2'>Control Systems Lead</th></tr>
<tr>
<td font-size='20px'>
Hi! I’m Eugene and I am the Control Systems Lead for Potentia Robotics. When I first saw the team posting I immediately . It is so exciting to work alongside talented students and I am hopeful what we could do together as a team in the future.
</td>
<td padding='0px'>
<img src={icon} alt='image of Audhav Durai' />
</td>
</tr>
<tr><th colspan='2'>Design Lead</th></tr>
<tr>
<td font-size='20px'>
Hi, I’m Shahzad! I manage the Design aspects of Potentia Robotics, specifically working on CAD and design. We use Autodesk Fusion 360 to create realistic models of our robot, allowing us to visualize how each subsection of the humanoid works in tandem with the others. I applied to join the team because of the unique goal of the club. In the past, I’ve worked on countless robots, but none are as intriguing as a full size humanoid. I’m grateful for being brought into the club, and it’s been a pleasure working with the Design team and other Engineering members to create our robot.
</td>
<td padding='0px'>
<img src={shahzad} alt='image of Shahzad Sohail' />
</td>
</tr>
<tr><th colspan='2'>Electronics Lead</th></tr>
<tr>
<td font-size='20px'>
Hey! I’m Rushil, and I’m working on heading the main engineering team for the bot. We’re hard at work designing the chassis, running logistics for the fabrication of parts, and making the programmers happy. From CAD to cardboard prototype to 3D print to machining and final construction we’re working to design and engineer the final product!
</td>
<td padding='0px'>
<img src={rushil} alt='image of Rushil Umaretiya' />
</td>
</tr>
<tr><th colspan='2'>Outreach Lead</th></tr>
<tr>
<td font-size='20px'>
My name is Jason Yi and I am serving as the Outreach Lead for Potentia Robotics. Working with the outreach team has been one of the best experiences I’ve had so far, and it’s amazing knowing that the work I am doing is helping out some of the brightest high school students in the nation! I hope that as the outreach lead, the work that I do will enable the rest of the team to push the envelope of innovation.
</td>
<td padding='0px'>
<img src={jason} alt='image of Jason Yi' />
</td>
</tr>
<tr>
<td font-size='20px'>
Hey there! I'm Kedar Prasad and I help code everything in Potentia Robotics. I work on our Webots code and the Potentia Robotics website. I have been on a robotics team since 5th grade and have went to the state competitions for each. I joined Potentia Robotics to help drive my interest in Robotics and STEM. Additionally, I would never reject an opportunity to build a full-sized humanoid robot. So far, I have loved working with this team and learning from all my intellegent teammmates.
</td>
<td padding='0px'>
<img src={kedar} alt='image of Kedar Prasad' />
</td>
</tr>
<tr><th colspan='2'>Software Developer</th></tr>
<tr>
<td font-size='20px'>
Hello, I’m Ram Reddy and I am a software developer at Potentia Robotics. I work in the programming team of the control systems, engine software and web development. I joined the team because I have always loved to program and build model robots since I was in elementary school. It has been an amazing experience working with like minded individuals striving for the same goal and I am looking forward to what the future holds.
</td>
<td padding='0px'>
<img src={ram} alt='image of Ram Reddy' />
</td>
</tr>
<tr><th colspan='2'>Software Developer</th></tr>
<tr>
<td font-size='20px'>
Hi, I’m Ramya Reddy and I’m one of the software developers at Potentia Robotics. I have worked on the engine software and web development with the programming team. I joined Potentia Robotics because I have always been interested in robotics and worked on various projects, but never got the opportunity to help create a full sized humanoid robot! It has been amazing working with the other members of the team, and I’m excited for what is to come.
</td>
<td padding='0px'>
<img src={icon} alt='image of Jason Yi' />
</td>
</tr>
<tr><th colspan='2'> Engineer</th></tr>
<tr>
<td font-size='20px'>
Hi! I’m Varsha and I am a part of the engineering team. As a member of Potentia Robotics, I hope to learn more about the engineering and design process and eventually succeed in building a functional humanoid robot. I joined because I wanted to improve my skills in design and was interested in doing a large scale project.
</td>
<td padding='0px'>
<img src={icon} alt='image of Jason Yi' />
</td>
</tr>
<tr><th colspan='2'>Engineer</th></tr>
<tr>
<td font-size='20px'>
Hey! I’m Aileen Zhao, part of the engineering team for Potentia Robotics, where I help make the body of the robot Olympian. I joined the team because I like robots and engineering and design! I hope that in the process of making Olympian, I also get to expand my understanding and experience in this subject.
</td>
<td padding='0px'>
<img src={aileen} alt='image of Aileen Zhao' />
</td>
</tr>
<tr><th colspan='2'>Engineer</th></tr>
<tr>
<td font-size='20px'>
Hi! I’m Mayuka, and I’m an Engineer at Potentia Robotics. I work with the rest of the Engineering Team to design our robot Olympian. Working here has provided me with an amazing opportunity to learn many valuable skills in engineering (using CAD, good researching, etc.) and I am looking forward to learning more in the future! I joined the team to gain more knowledge in robotics and engineering, and to be part of a team with members who are enthusiastic to spread their love for STEM in our community. My experience here has been nothing but positive, and I am excited to be part of a team that shows that with hard work and determination, achieving any goal is possible.
</td>
<td padding='0px'>
<img src={mayuka} alt='image of Mayuka' />
</td>
</tr>
<tr>
<td font-size='20px'>
Hey! My name is Sai. I am a part of the Outreach and Finance team with my role centering around spearheading networking with sponsors, organizing financial accounts, as well as working with Jason and Ajit to formulate innovative methods of fundraising that not only help towards the development of our robot Olympian but also help spark a love of STEM in the community. I joined Potentia to help pave the path for other high schoolers and show them that the limitations placed upon us are not rigid but with a dose of determination and collaboration, malleable.
</td>
<td padding='0px'>
<img src={sai} alt='image of Sai Mattapali' />
</td>
</tr>
<tr>
<td font-size='20px'>
My name is Ajit Sivakumar and I am part of the Outreach and Finance team. I really enjoy working with the other members of the outreach team to create a solid foundation for our project. I wanted to join Potentia to gain experience working with money and people and I am also genuinely interested in the creation of a humanoid robot. I hope to learn more not only in my sub-section, but in all aspects of our project!
</td>
<td padding='0px'>
<img src={icon} alt='image of Jason Yi' />
</td>
</tr>
</table>
</body>
import React, { Component, useState } from 'react'
import adi from './assets/img/Adi.PNG'
import rushil from './assets/img/Rushil.PNG'
import jason from './assets/img/Jason.PNG'
import shahzad from './assets/img/Shahzad.PNG'
import aileen from './assets/img/Aileen.PNG'
import mayuka from './assets/img/Mayuka.PNG'
import ram from './assets/img/Ram.PNG'
import sai from './assets/img/Sai.PNG'
import kedar from './assets/img/Kedar.PNG'
import icon from './assets/img/aboutlogo.PNG'
import classnames from 'classnames'
import GroupPhoto from './assets/img/team_picture.png'
import './assets/About.scss'
import { Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, Container } from 'reactstrap'
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
import 'react-tabs/style/react-tabs.css'
// import {Tabs, Tab} from 'react-bootstrap-tabs';
const adiBio = 'Hi! I’m Aditya, one of the founders and Project Lead of Potentia Robotics and a sophomore at TJHSST. I was inspired to pursue such a grand project by YouTubers like Mark Rober and Michael Reeves, who build large, grand robots and other machinery just for the sheer fun of it. In particular, Michael Reeves’ philosophy of building cool things just for the sake of it/for the learning experience instead of having some ulterior—monetary or otherwise—motive behind building that thing really resonated with me. As the Project Lead of Potentia Robotics, I’m responsible for managing the team as a whole, setting and following through with deadlines, and I serve as the bridge between each of the three subteams. I also do subteam-specific work (programming, designing, accounting, etc.) in each subteam.'
const audhavBio = 'I’m Audhav Durai, one of the founders and the Software Lead for Potentia Robotics. Motivated by the research being done at various colleges and academic institutions, I (along with Aditya) founded and became a part of Potentia Robotics so we could tackle a high-level project on our own. Having the opportunity to conduct research that is being done in the real word as a highschooler is an amazing experience. My role on the team is to manage the programming subteam, which means keeping track of our progress, making sure we are always on task, and meeting both exterior and team-set deadlines. Additionally, I do various tasks in the programming subteam as well.'
const eugeneBio = 'Hi! I’m Eugene and I am the Control Systems Lead for Potentia Robotics. When I first saw the team posting I immediately . It is so exciting to work alongside talented students and I am hopeful what we could do together as a team in the future.'
const ShahzadBio = 'Hi, I’m Shahzad! I manage the Design aspects of Potentia Robotics, specifically working on CAD and design. We use Autodesk Fusion 360 to create realistic models of our robot, allowing us to visualize how each subsection of the humanoid works in tandem with the others. I applied to join the team because of the unique goal of the club. In the past, I’ve worked on countless robots, but none are as intriguing as a full size humanoid. I’m grateful for being brought into the club, and it’s been a pleasure working with the Design team and other Engineering members to create our robot.'
const rushilBio = 'Hey! I’m Rushil, and I’m working on heading the main engineering team for the bot. We’re hard at work designing the chassis, running logistics for the fabrication of parts, and making the programmers happy. From CAD to cardboard prototype to 3D print to machining and final construction we’re working to design and engineer the final product!'
const jasonBio = 'My name is Jason Yi and I am serving as the Outreach Lead for Potentia Robotics. Working with the outreach team has been one of the best experiences I’ve had so far, and it’s amazing knowing that the work I am doing is helping out some of the brightest high school students in the nation! I hope that as the outreach lead, the work that I do will enable the rest of the team to push the envelope of innovation.'
const kedarBio = "Hey there! I'm Kedar Prasad and I help code everything in Potentia Robotics. I work on our Webots code and the Potentia Robotics website. I have been on a robotics team since 5th grade and have went to the state competitions for each. I joined Potentia Robotics to help drive my interest in Robotics and STEM. Additionally, I would never reject an opportunity to build a full-sized humanoid robot. So far, I have loved working with this team and learning from all my intellegent teammmates."
const ogRamBio = 'Hello, I’m Ram Reddy and I am the dynamic balance lead at Potentia Robotics. I work in the programming team of the control systems, engine software and web development. I joined the team because I have always loved to program and build model robots since I was in elementary school. It has been an amazing experience working with like minded individuals striving for the same goal and I am looking forward to what the future holds.'
const ramyaBio = 'Hi, I’m Ramya Reddy and I’m one of the software developers at Potentia Robotics. I have worked on the engine software and web development with the programming team. I joined Potentia Robotics because I have always been interested in robotics and worked on various projects, but never got the opportunity to help create a full sized humanoid robot! It has been amazing working with the other members of the team, and I’m excited for what is to come.'
const varshaBio = 'Hi! I’m Varsha and I am a part of the engineering team. As a member of Potentia Robotics, I hope to learn more about the engineering and design process and eventually succeed in building a functional humanoid robot. I joined because I wanted to improve my skills in design and was interested in doing a large scale project.'
const aileenBio = 'Hey! I’m Aileen Zhao, part of the engineering team for Potentia Robotics, where I help make the body of the robot Olympian. I joined the team because I like robots and engineering and design! I hope that in the process of making Olympian, I also get to expand my understanding and experience in this subject.'
const mayukaBio = 'Hi! I’m Mayuka, and I’m an Engineer at Potentia Robotics. I work with the rest of the Engineering Team to design our robot Olympian. Working here has provided me with an amazing opportunity to learn many valuable skills in engineering (using CAD, good researching, etc.) and I am looking forward to learning more in the future! I joined the team to gain more knowledge in robotics and engineering, and to be part of a team with members who are enthusiastic to spread their love for STEM in our community. My experience here has been nothing but positive, and I am excited to be part of a team that shows that with hard work and determination, achieving any goal is possible.'
const saiBio = 'Hey! My name is Sai. I am a part of the Outreach and Finance team with my role centering around spearheading networking with sponsors, organizing financial accounts, as well as working with Jason and Ajit to formulate innovative methods of fundraising that not only help towards the development of our robot Olympian but also help spark a love of STEM in the community. I joined Potentia to help pave the path for other high schoolers and show them that the limitations placed upon us are not rigid but with a dose of determination and collaboration, malleable.'
const ajitBio = 'My name is Ajit Sivakumar and I am part of the Outreach and Finance team. I really enjoy working with the other members of the outreach team to create a solid foundation for our project. I wanted to join Potentia to gain experience working with money and people and I am also genuinely interested in the creation of a humanoid robot. I hope to learn more not only in my sub-section, but in all aspects of our project!'
class About extends Component {
render () {
return (
<body>
<h1 id='title'>About Us</h1>
<Container fluid id='container'>
{/* Put something else here later */}
</Container>
<Tabs>
<TabList>
<Tab>Programming Subteam</Tab>
<Tab>Engineering Subteam</Tab>
<Tab>Outreach Subteam</Tab>
</TabList>
<TabPanel>
<Container fluid>
<h1 id='subteamTitle'>Programming Subteam Members</h1>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Aditya Vasantharao</h1>
<h5>Project Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={adi} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col sm={{ size: 6, order: 0, offset: 0 }}>
<p>{adiBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
{/* <Container> */}
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Audhav Durai</h1>
<h5>Programming Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={icon} alt='Image of Team member' />
</Col>
</Row>
{/* </Container> */}
</Col>
<Col>
<p>{audhavBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Eugene</h1>
<h5>Control Systems Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={icon} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{eugeneBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Ram Reddy</h1>
<h5>Dynamic Balance Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={ram} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{ogRamBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Kedar Prasad</h1>
<h5>Software Developer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={kedar} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{kedarBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Ramya Reddy</h1>
<h5>Software Developer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={icon} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{ramyaBio}</p>
</Col>
</Row>
</Container>
</TabPanel>
<TabPanel>
<Container fluid>
<h1 id='subteamTitle'>Engineering Subteam Members</h1>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Shahzad Sohail</h1>
<h5>Engineering Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={shahzad} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{ShahzadBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Rushil Umaretiya</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={rushil} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{rushilBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Varsha</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={icon} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{varshaBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Aileen</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={aileen} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{aileenBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Mayuka Valluri</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={mayuka} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{mayukaBio}</p>
</Col>
</Row>
</Container>
</TabPanel>
<TabPanel>
<Container fluid>
<h1 id='subteamTitle'>Outreach Subteam Members</h1>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Jason Yi</h1>
<h5>Outreach Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={jason} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{jasonBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Sai Mattapalli</h1>
<h5>Outreach</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={sai} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{saiBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Ajit</h1>
<h5>Outreach</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src={icon} alt='Image of Team member' />
</Col>
</Row>
</Col>
<Col>
<p>{ajitBio}</p>
</Col>
</Row>
</Container>
</TabPanel>
</Tabs>
{/* <Tabs defaultActiveKey="team1" id="uncontrolled-tab-example">
<Tab eventKey="team1" title="Programming Subteam">
<Container fluid>
<h1 id = "subteamTitle">Programming Subteam Members</h1>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Aditya Vasantharao</h1>
<h5>Project Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {adi} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{adiBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Audhav Durai</h1>
<h5>Programming Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {icon} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{audhavBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Eugene</h1>
<h5>Control Systems Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {icon} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{eugeneBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Kedar Prasad</h1>
<h5>Software Developer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {kedar} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{kedarBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Ram Reddy</h1>
<h5>Software Developer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {ram} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{fakeRamBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Ramya Reddy</h1>
<h5>Software Developer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {icon} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{ramyaBio}</p>
</Col>
</Row>
</Tab>
<Tab eventKey="team2" title="Engineering Subteam">
<Container fluid>
<h1 id = "subteamTitle">Engineering Subteam Members</h1>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Shahzad Sohail</h1>
<h5>Engineering Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {shahzad} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{ShahzadBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Rushil Umaretiya</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {rushil} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{rushilBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Varsha</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {icon} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{varshaBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Aileen</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {aileen} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{aileenBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Mayuka Valluri</h1>
<h5>Engineer</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {mayuka} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{mayukaBio}</p>
</Col>
</Row>
</Tab>
<Tab eventKey="team3" title="Outreach Subteam" >
<Container fluid >
<h1 id = "subteamTitle">Outreach Subteam Members</h1>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Jason Yi</h1>
<h5>Outreach Lead</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {jason} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{jasonBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Sai Mattapalli</h1>
<h5>Outreach</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {sai} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{saiBio}</p>
</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<h1>Ajit</h1>
<h5>Outreach</h5>
</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>
<img src = {icon} alt = "Image of Team member"></img>
</Col>
</Row>
</Col>
<Col>
<p>{ajitBio}</p>
</Col>
</Row>
</Tab>
</Tabs> */}
</body>
)
}
}
export default About
}
}
export default About

1
src/components/Donate.js
View File

@ -11,7 +11,6 @@ const GlobalStyle = createGlobalStyle`
}
body {
background-color: #293241;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
margin: 0;
color: #555;

52
src/components/assets/About.scss
View File

@ -1,22 +1,38 @@
table{
background-color: aqua;
margin: auto;
width: 800px;
}
th{
font-size: 20px;
border: 3px solid black;
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
* {
font-family: Poppins, sans-serif;
}
td{
margin-left: auto;
margin-right: auto;
#title{
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}
#container{
font-size: 16px;
border: 3px solid black;
padding: 10px;
}
margin-bottom: 50px;
}
#teamimage{
width: 100%;
margin-top: 50px;
}
#ourDescription{
text-align: center;
font-size: 30px;
margin-top: 50px;
}
img{
width:100%;
}
#subteamTitle{
text-align: center;
margin-top: 50px;
margin-bottom: 100px;
}

9
src/components/assets/Contact.scss
View File

@ -1,3 +1,10 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
* {
font-family: Poppins, sans-serif;
}
$small: 500px;
$medium: 800px;
$large: 1200px;
@ -7,7 +14,7 @@ button {
}
.button-submit {
font-family: Poppins, sans-serif;
font-family: "Poppins", sans-serif;
min-height: 50px;
margin: 0 auto;
}

3
src/index.js
View File

@ -1,4 +1,5 @@
import './bootstrap.scss'
import './bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import React from 'react'
import ReactDOM from 'react-dom'

13776
yarn.lock
View File

File diff suppressed because it is too large Load Diff