initial (sorta) commit
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
import React, { Component } from "react";
|
||||
import { AnimationOnScroll } from "react-animation-on-scroll";
|
||||
import "../assets/stylesheets/about.scss";
|
||||
|
||||
export default class About extends Component {
|
||||
componentDidMount() {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
click() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="about">
|
||||
<div className="about__content">
|
||||
<div className="about__content__main">
|
||||
<AnimationOnScroll
|
||||
animateIn="animate__fadeInDown"
|
||||
animateOnce="true"
|
||||
duration={1}
|
||||
delay={0}
|
||||
>
|
||||
<div className="about__content__main__container">
|
||||
<h1>About Us 📌</h1>
|
||||
<span>
|
||||
The Illinois Tech Robotics Club at IIT is a student-run
|
||||
organization dedicated to promoting the development and
|
||||
application of robotics technology. We aim to provide a
|
||||
platform for students to learn, design, build, and compete
|
||||
with robots. Our members come from a variety of disciplines
|
||||
and backgrounds, including computer science, electrical
|
||||
engineering, mechanical engineering, and beyond. We host
|
||||
regular meetings, workshops, and events to encourage hands-on
|
||||
experience and collaboration among members. Our club also
|
||||
participates in various national and international robotics
|
||||
competitions, providing opportunities for members to showcase
|
||||
their skills and put their knowledge to the test. Whether you
|
||||
are a seasoned robotics enthusiast or just starting out, the
|
||||
Illinois Tech Robotics Club is a welcoming community for
|
||||
anyone interested in the field. Join us in exploring the
|
||||
exciting world of robotics and pushing the boundaries of what
|
||||
is possible.
|
||||
</span>
|
||||
</div>
|
||||
</AnimationOnScroll>
|
||||
</div>
|
||||
|
||||
<div className="about__content__blocks">
|
||||
<AnimationOnScroll
|
||||
animateIn="animate__fadeInUp"
|
||||
animateOnce="true"
|
||||
duration={1}
|
||||
delay={500}
|
||||
>
|
||||
<div className="about__content__blocks_block">
|
||||
<h1>Awards 🏆</h1>
|
||||
<span>
|
||||
Illinois Tech Robotics has received numerous awards for our
|
||||
contributions to the field of robotics. Our team has been
|
||||
recognized at local competitions for our commitment to
|
||||
innovation and excellence. We take pride in our recognition
|
||||
and continue to push the boundaries of robotics technology.
|
||||
</span>
|
||||
<p>(Click for more info)</p>
|
||||
</div>
|
||||
</AnimationOnScroll>
|
||||
<AnimationOnScroll
|
||||
animateIn="animate__fadeInUp"
|
||||
animateOnce="true"
|
||||
duration={1.2}
|
||||
delay={500}
|
||||
>
|
||||
<div className="about__content__blocks_block">
|
||||
<h1>Officers 👩💼</h1>
|
||||
<span>
|
||||
Illinois Tech Robotics is led by a team of student officers
|
||||
committed to advancing robotics. Our diverse officers bring
|
||||
unique skills and perspectives, leading events and projects.
|
||||
We are proud to have a talented and passionate group guiding
|
||||
us forward.
|
||||
</span>
|
||||
<p>(Click for more info)</p>
|
||||
</div>
|
||||
</AnimationOnScroll>
|
||||
<AnimationOnScroll
|
||||
animateIn="animate__fadeInUp"
|
||||
animateOnce="true"
|
||||
duration={1.4}
|
||||
delay={500}
|
||||
>
|
||||
<div
|
||||
className="about__content__blocks_block"
|
||||
onClick={this.click}
|
||||
>
|
||||
<h1>Constitution 📜</h1>
|
||||
<span>
|
||||
Illinois Tech Robotics operates under a Constitution outlining
|
||||
our purpose, rules, and processes. It outlines
|
||||
responsibilities, decision-making, and governance to maintain
|
||||
fairness, transparency, and accountability within our team.
|
||||
</span>
|
||||
<p>(Click for more info)</p>
|
||||
</div>
|
||||
</AnimationOnScroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import React, { Component } from "react";
|
||||
import "../assets/stylesheets/awards.scss";
|
||||
|
||||
export default class Awards extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="awards">
|
||||
<div className="awards__content">
|
||||
<h1 className="awards__content__title">Awards & Recognition 🏆</h1>
|
||||
<ol className="awards__content__list">
|
||||
<i>
|
||||
<div className="awards__content__list_item">
|
||||
<h2>2019</h2>
|
||||
</div>
|
||||
</i>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import React, { Component } from "react";
|
||||
import "../assets/stylesheets/bubble.scss";
|
||||
import { AnimationOnScroll } from "react-animation-on-scroll";
|
||||
|
||||
export default class Bubble extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
marginLeft: `${this.props.left}`,
|
||||
paddingTop: `${this.props.top}`,
|
||||
}}
|
||||
>
|
||||
<div className="bubble">
|
||||
<AnimationOnScroll
|
||||
className="bubble_main"
|
||||
animateIn="animate__fadeInUp"
|
||||
animateOnce="true"
|
||||
duration={1}
|
||||
delay={0}
|
||||
>
|
||||
<h1>{this.props.h1}</h1>
|
||||
</AnimationOnScroll>
|
||||
<AnimationOnScroll
|
||||
className="bubble_main"
|
||||
animateIn="animate__fadeInUp"
|
||||
animateOnce="true"
|
||||
duration={1.2}
|
||||
delay={0}
|
||||
>
|
||||
<h2>{this.props.h2}</h2>
|
||||
</AnimationOnScroll>
|
||||
<AnimationOnScroll
|
||||
className="bubble_main"
|
||||
animateIn="animate__fadeIn"
|
||||
animateOnce="true"
|
||||
duration={3}
|
||||
delay={500}
|
||||
>
|
||||
<div>{this.props.children}</div>
|
||||
</AnimationOnScroll>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import React, { Component } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "../assets/stylesheets/dropdown.scss";
|
||||
|
||||
export default class DropdownContainer extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.container = React.createRef();
|
||||
}
|
||||
|
||||
toggleHamburger() {
|
||||
this.container.current.className = "slideOut c";
|
||||
setTimeout(() => {this.props.hamburgerToggle();}
|
||||
, 500);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<nav ref={this.container} className="c slideIn">
|
||||
<div className="header">
|
||||
<label className="header__text">ITR</label>
|
||||
<button className="header__x" onClick={() => this.toggleHamburger()}>X</button>
|
||||
</div>
|
||||
<div className="dd">
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/">
|
||||
<label className="dd__link_label">Home</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/about">
|
||||
<label className="dd__link_label">About</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/projects">
|
||||
<label className="dd__link_label">Projects</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink className="dd__link" to="/gallery">
|
||||
<label className="dd__link_label">Gallery</label>
|
||||
<label className="dd__link_arrow">{">"}</label>
|
||||
</NavLink>
|
||||
</li>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React, { Component } from "react";
|
||||
import NavBar from "../components/NavBar";
|
||||
import "../assets/stylesheets/error.scss";
|
||||
|
||||
export default class Error extends Component {
|
||||
status = this.props.err.item.status;
|
||||
statusText = this.props.err.item.statusText;
|
||||
message = this.props.err.item.message;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="error">
|
||||
<img
|
||||
className="error__photo"
|
||||
src={require("../assets/pics/error.jpg")}
|
||||
alt="background"
|
||||
></img>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import React, { Component } from "react";
|
||||
import "../assets/stylesheets/footer.scss";
|
||||
import { ReactComponent as DiscordSVG } from "../assets/svg/discord.svg";
|
||||
import { ReactComponent as TwitterSVG } from "../assets/svg/twitter.svg";
|
||||
import { ReactComponent as FacebookSVG } from "../assets/svg/facebook.svg";
|
||||
import { ReactComponent as InstagramSVG } from "../assets/svg/instagram.svg";
|
||||
import { ReactComponent as GithubSVG } from "../assets/svg/github.svg";
|
||||
|
||||
export default class Footer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="footer">
|
||||
<div className="footer__links">
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://discord.gg/GA6mvMEzSu"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<DiscordSVG className="footer__links_svg"></DiscordSVG>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://twitter.com/ILTech_Robotics"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<TwitterSVG className="footer__links_svg"></TwitterSVG>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.facebook.com/IllinoisTechRobotics/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<FacebookSVG className="footer__links_svg"></FacebookSVG>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.instagram.com/illinoistechrobotics/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<InstagramSVG className="footer__links_svg"></InstagramSVG>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/illinoistechrobotics"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<GithubSVG className="footer__links_svg"></GithubSVG>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="footer__toes">
|
||||
<ul className="footer__toes__links_left">
|
||||
<li>
|
||||
<a href="http://localhost:3000/about">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://localhost:3000/contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a className="footer__toes_logo" href="http://localhost:3000/">
|
||||
ITR
|
||||
</a>
|
||||
<ul className="footer__toes__links_right">
|
||||
<li>
|
||||
<a href="http://localhost:3000/projects">Projects</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://localhost:3000/gallery">Gallery</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import React, { Component } from "react";
|
||||
import backgroundVideo from "../assets/video.mp4";
|
||||
import "../assets/stylesheets/home.scss";
|
||||
|
||||
export default class Gallery extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="home">
|
||||
<video autoPlay loop muted className="home__video">
|
||||
<source src={backgroundVideo} type="video/mp4" />
|
||||
</video>
|
||||
<div className="home__content">
|
||||
<label className="home__content__title">
|
||||
ILLINOIS TECH
|
||||
<br />
|
||||
ROBOTICS
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import React, { Component } from "react";
|
||||
import backgroundVideo from "../assets/videos/video.mp4";
|
||||
import "../assets/stylesheets/home.scss";
|
||||
import { AnimationOnScroll } from "react-animation-on-scroll";
|
||||
import Bubble from "./Bubble";
|
||||
import * as Scroll from "react-scroll";
|
||||
import "animate.css";
|
||||
|
||||
export default class Home extends Component {
|
||||
scrollToContent() {
|
||||
var scroll = require("react-scroll");
|
||||
scroll = Scroll.animateScroll;
|
||||
scroll.scrollTo(920);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="home">
|
||||
<div className="home__content">
|
||||
<div className="home__content__panel">
|
||||
<label className="home__content__panel__title">
|
||||
<p>ILLINOIS TECH</p>
|
||||
<p>ROBOTICS</p>
|
||||
</label>
|
||||
<button
|
||||
className="home__content__panel__button"
|
||||
onClick={this.scrollToContent}
|
||||
>
|
||||
⬇️
|
||||
</button>
|
||||
<video autoPlay loop muted className="home__content__panel__video">
|
||||
<source src={backgroundVideo} type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div className="home__content__info">
|
||||
<div className="home__content__info__image">
|
||||
<AnimationOnScroll
|
||||
className="home__content__info_join"
|
||||
animateIn="animate__fadeInRight"
|
||||
animateOnce="true"
|
||||
duration={1}
|
||||
delay={1200}
|
||||
>
|
||||
<img
|
||||
src={require("../assets/pics/fenrir.png")}
|
||||
alt="Fenrir"
|
||||
></img>
|
||||
</AnimationOnScroll>
|
||||
</div>
|
||||
<Bubble top="10vh" left="10vw" h1="Join us at our" h2="GBMs 🤝">
|
||||
<span>
|
||||
Welcome to the Illinois Tech Robotics Club! We are a student-run
|
||||
organization that promotes the field of robotics through
|
||||
hands-on projects, competitions and events. Open to students of
|
||||
all majors and skill levels, we meet every week at 6:30pm CST to
|
||||
work on exciting robotics projects.
|
||||
</span>
|
||||
</Bubble>
|
||||
<Bubble
|
||||
top="5vh"
|
||||
left="10vw"
|
||||
h1="Directions to the"
|
||||
h2="ITR Lab 🗺️"
|
||||
>
|
||||
<span>
|
||||
1. Enter through the{" "}
|
||||
<a href="https://goo.gl/maps/NJW5LzDDBYoHiD5X6">IIT Tower</a>{" "}
|
||||
located at 10 W 35 St, Chicago, IL.
|
||||
<br />
|
||||
2. Sign in with the front desk, and then take the elevator to
|
||||
the basement.
|
||||
<br />
|
||||
3. Once in the basement, take a right from the elevator and
|
||||
enter the last door on the left.
|
||||
<br />
|
||||
4. Finally, sign in to the Elevate Underground Lab with the CLA
|
||||
on guard!
|
||||
</span>
|
||||
</Bubble>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import React, { Component } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "../assets/stylesheets/navbar.scss";
|
||||
|
||||
export default class NavBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { navBackground: { backgroundColor: "transparent" }, hamburger: false };
|
||||
document.addEventListener("scroll", (event) => {
|
||||
if (window.scrollY < 10)
|
||||
this.setState({ navBackground: { backgroundColor: "transparent" } });
|
||||
else this.setState({ navBackground: { backgroundColor: "#232323" } });
|
||||
});
|
||||
}
|
||||
|
||||
toggleHamburger() {
|
||||
this.props.hamburgerToggle();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<nav className="navbar" style={this.state.navBackground}>
|
||||
<a id="logo" href="http://localhost:3000">
|
||||
<h2 className="navbar__logotext">ITR</h2>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink to="/">Home</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/about">About</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/projects">Projects</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to="/gallery">Gallery</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
{/* <NavLink className="nav__login" to="/login">
|
||||
Login
|
||||
</NavLink> */}
|
||||
<div className="nav__placeholder"></div>
|
||||
<div className="navbar__hamburger" onClick={() => this.toggleHamburger()}>
|
||||
<div className="navbar__hamburger_line"></div>
|
||||
<div className="navbar__hamburger_line"></div>
|
||||
<div className="navbar__hamburger_line"></div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import React, { Component } from "react";
|
||||
import backgroundVideo from "../assets/video.mp4";
|
||||
import "../assets/stylesheets/home.scss";
|
||||
|
||||
export default class Projects extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="home">
|
||||
<video autoPlay loop muted className="home__video">
|
||||
<source src={backgroundVideo} type="video/mp4" />
|
||||
</video>
|
||||
<div className="home__content">
|
||||
<label className="home__content__title">
|
||||
ILLINOIS TECH
|
||||
<br />
|
||||
ROBOTICS
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user