+
+
+ Email us directly, or contact us using the form anonymously!
+
+
+
Email
robotics@utmsu.ca
Address
-
Hacklab, Deerfield Hall
+
+ Hacklab, Deerfield Hall
+
-
);
-}
+};
export default Contact;
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index 5f018c1..0681727 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -1,44 +1,48 @@
-import React from 'react';
-import { EVENTS } from './details/eventDetails';
+import React from "react";
+import { EVENTS } from "./details/eventDetails";
-import "../styles/Events.css"
-import { BrowserRouter as Router, Route, Routes, Link, useNavigate } from 'react-router-dom';
-
-
-
-import redirect from '../assets/svg/arrow-up-right-from-square-solid.svg';
+import "../styles/Events.css";
+import {
+ BrowserRouter as Router,
+ Route,
+ Routes,
+ Link,
+ useNavigate,
+} from "react-router-dom";
+import redirect from "../assets/svg/arrow-up-right-from-square-solid.svg";
const Events = () => {
-
- return (
-
-
-
- {EVENTS.map(event => (
-
- ))}
-
-
- );
-}
+ return (
+
+
+
+ {EVENTS.map((event) => (
+
+ ))}
+
+
+ );
+};
export default Events;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 1310b9d..10d36ee 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,24 +1,35 @@
-import React from 'react';
+import React from "react";
-import '../styles/Footer.css';
+import "../styles/Footer.css";
-import insta from '../assets/svg/instagram-white-icon.svg';
-import linkedin from '../assets/svg/linkedin-app-white-icon.svg';
-import github from '../assets/svg/github-mark-white.svg';
-import discord from '../assets/svg/discord-white-seeklogo-4.svg';
+import insta from "../assets/svg/instagram-white-icon.svg";
+import linkedin from "../assets/svg/linkedin-app-white-icon.svg";
+import github from "../assets/svg/github-mark-white.svg";
+import discord from "../assets/svg/discord-white-seeklogo-4.svg";
const Footer = () => {
- return (
-
- UTM Robotics 2024
-
-
- );
-}
+ return (
+
+ UTM Robotics 2024
+
+
+ );
+};
export default Footer;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index c08f566..2641646 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,126 +1,145 @@
-
-import { useState, useEffect, React } from 'react';
-import { BrowserRouter as Router, Route, Routes, Link, useNavigate } from 'react-router-dom';
-
-import '../styles/Header.css';
-
-import roboticsLogo from "../assets/robotics-logo.png"
-import insta from '../assets/svg/instagram-white-icon.svg';
-import linkedin from '../assets/svg/linkedin-app-white-icon.svg';
-import github from '../assets/svg/github-mark-white.svg';
-import discord from '../assets/svg/discord-white-seeklogo-4.svg';
+import { useState, useEffect, React } from "react";
+import {
+ BrowserRouter as Router,
+ Route,
+ Routes,
+ Link,
+ useNavigate,
+} from "react-router-dom";
+
+import "../styles/Header.css";
+
+import roboticsLogo from "../assets/robotics-logo.png";
+import insta from "../assets/svg/instagram-white-icon.svg";
+import linkedin from "../assets/svg/linkedin-app-white-icon.svg";
+import github from "../assets/svg/github-mark-white.svg";
+import discord from "../assets/svg/discord-white-seeklogo-4.svg";
const Header = () => {
- const navigate = useNavigate();
-
- const [showNav, setShowNav] = useState(true);
-
- const [scrollData, setScrollData] = useState({
- y: 0,
- lastY: 0
- })
-
- useEffect(() => {
- const handleScroll = () => {
- setScrollData(prevState => {
- return {
- y: window.scrollY,
- lastY: prevState.y
- }
- })
- }
-
- window.addEventListener('scroll', handleScroll)
-
- return () => window.removeEventListener('scroll', handleScroll)
-
- }, [])
-
- useEffect(() => {
-
- if(scrollData.lastY >= scrollData.y){
- setShowNav(true);
- }
- else {
- setShowNav(false);
- }
- }, [scrollData])
-
- const handleHomeLinkClick = () => {
- navigate('/');
-
- setTimeout(() => {
- window.scrollTo({ top: 0, behavior: 'smooth' });
- }, 100);
- };
-
- const handleEventsLinkClick = () => {
- navigate('/');
-
- setTimeout(() => {
- const element = document.getElementById('eventContainer');
- if (element) {
- const offset = element.offsetTop - 100;
- window.scrollTo({
- top: offset,
- behavior: 'smooth',
- });
- }
- }, 100);
- };
-
- const handleAboutLinkClick = () => {
- navigate('/');
-
- setTimeout(() => {
- const element = document.getElementById('aboutContainer');
- if (element) {
- const offset = element.offsetTop - 50;
- window.scrollTo({
- top: offset,
- behavior: 'smooth',
- });
- setShowNav(false)
- }
- }, 100);
- };
-
- const handleContactLinkClick = () => {
- navigate('/');
-
- setTimeout(() => {
- const element = document.getElementById('contactForm');
- if (element) {
- const offset = element.offsetTop;
- window.scrollTo({
- top: offset,
- behavior: 'smooth',
- });
- setShowNav(false)
- }
- }, 100);
- };
-
- return (
-
-
-
-
UTM Robotics
-
- Events
- About
- Contact
-
-
-
-
- );
-}
+ const navigate = useNavigate();
+
+ const [showNav, setShowNav] = useState(true);
+
+ const [scrollData, setScrollData] = useState({
+ y: 0,
+ lastY: 0,
+ });
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setScrollData((prevState) => {
+ return {
+ y: window.scrollY,
+ lastY: prevState.y,
+ };
+ });
+ };
+
+ window.addEventListener("scroll", handleScroll);
+
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ useEffect(() => {
+ if (scrollData.lastY >= scrollData.y) {
+ setShowNav(true);
+ } else {
+ setShowNav(false);
+ }
+ }, [scrollData]);
+
+ const handleHomeLinkClick = () => {
+ navigate("/");
+
+ setTimeout(() => {
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ }, 100);
+ };
+
+ const handleEventsLinkClick = () => {
+ navigate("/");
+
+ setTimeout(() => {
+ const element = document.getElementById("eventContainer");
+ if (element) {
+ const offset = element.offsetTop - 100;
+ window.scrollTo({
+ top: offset,
+ behavior: "smooth",
+ });
+ }
+ }, 100);
+ };
+
+ const handleAboutLinkClick = () => {
+ navigate("/");
+
+ setTimeout(() => {
+ const element = document.getElementById("aboutContainer");
+ if (element) {
+ const offset = element.offsetTop - 50;
+ window.scrollTo({
+ top: offset,
+ behavior: "smooth",
+ });
+ setShowNav(false);
+ }
+ }, 100);
+ };
+
+ const handleContactLinkClick = () => {
+ navigate("/");
+
+ setTimeout(() => {
+ const element = document.getElementById("contactForm");
+ if (element) {
+ const offset = element.offsetTop;
+ window.scrollTo({
+ top: offset,
+ behavior: "smooth",
+ });
+ setShowNav(false);
+ }
+ }, 100);
+ };
+
+ return (
+
+
+
+
UTM Robotics
+
+
+ Events
+
+
+ About
+
+
+ Contact
+
+
+
+
+
+ );
+};
export default Header;
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 9bc0c40..0ea368e 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,16 +1,19 @@
-
import React from "react";
-import "../styles/Hero.css"
+import "../styles/Hero.css";
const Hero = () => {
- return (
-
-
-
Welcome to UTM Robotics.
-
We host robotic workshops and casual meetups.
-
-
- )
-}
+ return (
+
+
+
Welcome to UTM Robotics.
+
+ We host robotic workshops and casual meetups.
+
+
+
+ );
+};
-export default Hero;
\ No newline at end of file
+export default Hero;
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index d74d282..79d551d 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -1,40 +1,36 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
-import Header from './Header'
-import Hero from './Hero'
-import About from './About'
-import Contact from './Contact'
-import Events from './Events'
-import Footer from './Footer'
+import Header from "./Header";
+import Hero from "./Hero";
+import About from "./About";
+import Contact from "./Contact";
+import Events from "./Events";
+import Footer from "./Footer";
-import "../styles/Home.css"
+import "../styles/Home.css";
const Home = () => {
- // Fade in and up.
- useEffect(() => {
- const mainContainer = document.querySelector('#main');
- mainContainer.classList.add('fade-in-up');
- }, []);
-
- return (
-
-
- {/*
*/}
-
-
-
-
-
-
-
-
- );
-}
-
-export default Home;
\ No newline at end of file
+ // Fade in and up.
+ useEffect(() => {
+ const mainContainer = document.querySelector("#main");
+ mainContainer.classList.add("fade-in-up");
+ }, []);
+
+ return (
+
+ );
+};
+
+export default Home;
diff --git a/src/components/details/eventDetails.js b/src/components/details/eventDetails.js
index a81a7a5..c20b02f 100644
--- a/src/components/details/eventDetails.js
+++ b/src/components/details/eventDetails.js
@@ -1,51 +1,54 @@
-import sample1 from '../../assets/sample1.jpg';
-import sample2 from '../../assets/sample2.jpg';
-import sample3 from '../../assets/sample3.jpg';
-import sample4 from '../../assets/sample4.jpeg';
+import sample1 from "../../assets/sample1.jpg";
+import sample2 from "../../assets/sample2.jpg";
+import sample3 from "../../assets/sample3.jpg";
+import sample4 from "../../assets/sample4.jpeg";
export const EVENTS = [
- {
- id: 1,
- name: "General Meeting: Exploring the world of Battle Bots!",
- image: sample1,
- venue: "MN1380",
- description: "Navigation, localization, control, planning, perception - ever wonder how robots all of these together efficiently? Join us to learn more about one of the most popular robotics framework used in industry!",
- host: "Jerma",
- date: "02/14/23",
- startTime: "8:00 AM",
- url: `https://github.com/omnipotentsock`
- },
- {
- id: 2,
- name: "The Floor is Lava! Beginner Arduino Workshop.",
- image: sample2,
- venue: "Online",
- description: "Unveiling our SECRET WORKSHOP: The Floor is Lava! 🕹️✨ Join us as we dive into the world of sensors and unleash your creativity to create the ultimate game - using Arduino gyroscopes!",
- host: "Jerma",
- date: "02/14/23",
- startTime: "8:00 AM",
- url: `https://github.com/omnipotentsock`
- },
- {
- id: 3,
- name: "Speaker Series: Robot Guide Dog!",
- image: sample3,
- venue: "O/MN1380",
- description: "They literally got that DAWG in them fr.",
- host: "Jerma",
- date: "02/14/23",
- startTime: "8:00 AM",
- url: `https://github.com/omnipotentsock`
- },
- {
- id: 4,
- name: "Nuclear Reactor Series: A series where CRIME.",
- image: sample4,
- venue: "MN1380",
- description: "Come with us to make a full hydrogen atomic bomb in 17 minutes! Ask PETA. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
- host: "Jerma",
- date: "02/14/23",
- startTime: "8:00 AM",
- url: `https://github.com/omnipotentsock`
- }
-]
+ {
+ id: 1,
+ name: "General Meeting: Exploring the world of Battle Bots!",
+ image: sample1,
+ venue: "MN1380",
+ description:
+ "Navigation, localization, control, planning, perception - ever wonder how robots all of these together efficiently? Join us to learn more about one of the most popular robotics framework used in industry!",
+ host: "Jerma",
+ date: "02/14/23",
+ startTime: "8:00 AM",
+ url: `https://github.com/omnipotentsock`,
+ },
+ {
+ id: 2,
+ name: "The Floor is Lava! Beginner Arduino Workshop.",
+ image: sample2,
+ venue: "Online",
+ description:
+ "Unveiling our SECRET WORKSHOP: The Floor is Lava! 🕹️✨ Join us as we dive into the world of sensors and unleash your creativity to create the ultimate game - using Arduino gyroscopes!",
+ host: "Jerma",
+ date: "02/14/23",
+ startTime: "8:00 AM",
+ url: `https://github.com/omnipotentsock`,
+ },
+ {
+ id: 3,
+ name: "Speaker Series: Robot Guide Dog!",
+ image: sample3,
+ venue: "O/MN1380",
+ description: "They literally got that DAWG in them fr.",
+ host: "Jerma",
+ date: "02/14/23",
+ startTime: "8:00 AM",
+ url: `https://github.com/omnipotentsock`,
+ },
+ {
+ id: 4,
+ name: "Nuclear Reactor Series: A series where CRIME.",
+ image: sample4,
+ venue: "MN1380",
+ description:
+ "Come with us to make a full hydrogen atomic bomb in 17 minutes! Ask PETA. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+ host: "Jerma",
+ date: "02/14/23",
+ startTime: "8:00 AM",
+ url: `https://github.com/omnipotentsock`,
+ },
+];
diff --git a/src/components/details/teamDetails.js b/src/components/details/teamDetails.js
index 06a1332..a848c78 100644
--- a/src/components/details/teamDetails.js
+++ b/src/components/details/teamDetails.js
@@ -1,140 +1,139 @@
-
-import aaron from '../../assets/memberPhotos/Aaron.jpg'
-import alex from '../../assets/memberPhotos/Alex.jpg'
-import usha from '../../assets/memberPhotos/Usha.jpg'
-import ayman from '../../assets/memberPhotos/Ayman.jpg'
-import ido from '../../assets/memberPhotos/Ido.jpg'
-import max from '../../assets/memberPhotos/Max.jpg'
-import razeen from '../../assets/memberPhotos/Razeen.jpg'
-import travis from '../../assets/memberPhotos/Travis.jpg'
-import prottoy from '../../assets/memberPhotos/Prottoy.jpg'
-import none from '../../assets/memberPhotos/none.png'
+import aaron from "../../assets/memberPhotos/Aaron.jpg";
+import alex from "../../assets/memberPhotos/Alex.jpg";
+import usha from "../../assets/memberPhotos/Usha.jpg";
+import ayman from "../../assets/memberPhotos/Ayman.jpg";
+import ido from "../../assets/memberPhotos/Ido.jpg";
+import max from "../../assets/memberPhotos/Max.jpg";
+import razeen from "../../assets/memberPhotos/Razeen.jpg";
+import travis from "../../assets/memberPhotos/Travis.jpg";
+import prottoy from "../../assets/memberPhotos/Prottoy.jpg";
+import none from "../../assets/memberPhotos/none.png";
export const MEMBERS = [
- {
- id: 1,
- name: 'Max',
- role: 'President',
- bio: 'I originally became interested in robotics in high school, and this has led to me studying CompSci Robotics courses at UTM. Looking forward to the semester!',
- image: max,
- linkedin: 'https://www.linkedin.com/in/maksym-woychyshyn-a14836197/',
- github: ''
- },
- {
- id: 2,
- name: 'Usha',
- role: 'Exec Communication',
- bio: 'I\'ve lived in six countries.',
- image: usha,
- linkedin: 'https://www.linkedin.com/in/ushasj/',
- github: 'https://github.com/usha-sj/'
- },
- {
- id: 3,
- name: 'Razeen',
- role: 'Exec Events',
- bio: '3rd year CS and Math student. I enjoy working on robotics, automation and Software Dev.',
- image: razeen,
- linkedin: 'https://www.linkedin.com/in/razeenali/',
- github: 'https://github.com/r4z33n4l1'
- },
- {
- id: 4,
- name: 'Travis',
- role: 'Exec Finance',
- bio: 'Hi! My name is Travis, a fifth year CS Spec. I\'ll be your finance exec this remaining semester.',
- image: travis,
- linkedin: 'https://www.linkedin.com/in/travis-shao-442620173/',
- github: 'https://github.com/FourFourSquareSquare'
- },
- {
- id: 5,
- name: 'Ido',
- role: 'Exec Coordination',
- bio: 'I used to have two cats.',
- image: ido,
- linkedin: 'https://www.linkedin.com/in/idobenhaim/',
- github: 'https://github.com/ggggg'
- },
- {
- id: 6,
- name: 'Alex Apostolu',
- role: 'Tech',
- bio: 'Executive member of the UofT Bees Club.',
- image: alex,
- linkedin: 'https://www.linkedin.com/in/apostolu/',
- github: 'https://www.github.com/alexapostolu'
- },
- {
- id: 8,
- name: 'Damon',
- role: 'Tech',
- bio: '',
- image: none,
- linkedin: 'https://www.linkedin.com/in/damon-d-ma/',
- github: 'https://github.com/Damon-D-Ma'
- },
- {
- id: 9,
- name: 'Yajan',
- role: 'Tech',
- bio: 'Music (Played Drums for 5yrs), Programming/Engineering, JiuJitsu/Muay Thai',
- image: none,
- linkedin: 'https://www.linkedin.com/in/yajansingh/',
- github: 'https://github.com/yajan-singh'
- },
- {
- id: 7,
- name: 'Ayman Mohammed',
- role: 'Graphics',
- bio: 'I sleep excessively, code obsessively, and amass my divine inspirations within the universal malloc.',
- image: ayman,
- linkedin: 'https://github.com/omnipotentsock',
- github: 'https://www.linkedin.com/in/ayman-ahmed-mohammed'
- },
- {
- id: 10,
- name: 'Aaron',
- role: 'Logistics',
- bio: 'Always striving to be the most satisfying partner to work with, and always excited for the passionate talks with problem-solvers and dreamers, so come chat!',
- image: aaron,
- linkedin: 'https://www.linkedin.com/in/aaronwu000/',
- github: 'https://github.com/aaronwu001'
- },
- {
- id: 11,
- name: 'Prottoy',
- role: 'Events',
- bio: 'I have never once lost a game of thumb wars.',
- image: prottoy,
- linkedin: '',
- github: ''
- },
- {
- id: 12,
- name: 'Daksh',
- role: 'Mentor',
- bio: '',
- image: none,
- linkedin: 'https://www.linkedin.com/in/daksh-malhotra',
- github: 'https://github.com/DakshChan'
- },
- {
- id: 13,
- name: 'Hamza',
- role: 'Mentor',
- bio: 'I love talking about all sorts of fun and interesting topics, so feel free to reach out to me @hamza.pp on discord to chat!',
- image: none,
- linkedin: '',
- github: 'https://github.com/gondalm1'
- },
- {
- id: 14,
- name: 'Sammy',
- role: 'Mentor',
- bio: 'I love low-level development and tinkering around with hardware, and I also love languages, both natural and programming. Feel free to say hi!',
- image: none,
- linkedin: '',
- github: ''
- }
+ {
+ id: 1,
+ name: "Max",
+ role: "President",
+ bio: "I originally became interested in robotics in high school, and this has led to me studying CompSci Robotics courses at UTM. Looking forward to the semester!",
+ image: max,
+ linkedin: "https://www.linkedin.com/in/maksym-woychyshyn-a14836197/",
+ github: "",
+ },
+ {
+ id: 2,
+ name: "Usha",
+ role: "Exec Communication",
+ bio: "I've lived in six countries.",
+ image: usha,
+ linkedin: "https://www.linkedin.com/in/ushasj/",
+ github: "https://github.com/usha-sj/",
+ },
+ {
+ id: 3,
+ name: "Razeen",
+ role: "Exec Events",
+ bio: "3rd year CS and Math student. I enjoy working on robotics, automation and Software Dev.",
+ image: razeen,
+ linkedin: "https://www.linkedin.com/in/razeenali/",
+ github: "https://github.com/r4z33n4l1",
+ },
+ {
+ id: 4,
+ name: "Travis",
+ role: "Exec Finance",
+ bio: "Hi! My name is Travis, a fifth year CS Spec. I'll be your finance exec this remaining semester.",
+ image: travis,
+ linkedin: "https://www.linkedin.com/in/travis-shao-442620173/",
+ github: "https://github.com/FourFourSquareSquare",
+ },
+ {
+ id: 5,
+ name: "Ido",
+ role: "Exec Coordination",
+ bio: "I used to have two cats.",
+ image: ido,
+ linkedin: "https://www.linkedin.com/in/idobenhaim/",
+ github: "https://github.com/ggggg",
+ },
+ {
+ id: 6,
+ name: "Alex Apostolu",
+ role: "Tech",
+ bio: "Executive member of the UofT Bees Club.",
+ image: alex,
+ linkedin: "https://www.linkedin.com/in/apostolu/",
+ github: "https://www.github.com/alexapostolu",
+ },
+ {
+ id: 8,
+ name: "Damon",
+ role: "Tech",
+ bio: "",
+ image: none,
+ linkedin: "https://www.linkedin.com/in/damon-d-ma/",
+ github: "https://github.com/Damon-D-Ma",
+ },
+ {
+ id: 9,
+ name: "Yajan",
+ role: "Tech",
+ bio: "Music (Played Drums for 5yrs), Programming/Engineering, JiuJitsu/Muay Thai",
+ image: none,
+ linkedin: "https://www.linkedin.com/in/yajansingh/",
+ github: "https://github.com/yajan-singh",
+ },
+ {
+ id: 7,
+ name: "Ayman Mohammed",
+ role: "Graphics",
+ bio: "I sleep excessively, code obsessively, and amass my divine inspirations within the universal malloc.",
+ image: ayman,
+ linkedin: "https://github.com/omnipotentsock",
+ github: "https://www.linkedin.com/in/ayman-ahmed-mohammed",
+ },
+ {
+ id: 10,
+ name: "Aaron",
+ role: "Logistics",
+ bio: "Always striving to be the most satisfying partner to work with, and always excited for the passionate talks with problem-solvers and dreamers, so come chat!",
+ image: aaron,
+ linkedin: "https://www.linkedin.com/in/aaronwu000/",
+ github: "https://github.com/aaronwu001",
+ },
+ {
+ id: 11,
+ name: "Prottoy",
+ role: "Events",
+ bio: "I have never once lost a game of thumb wars.",
+ image: prottoy,
+ linkedin: "",
+ github: "",
+ },
+ {
+ id: 12,
+ name: "Daksh",
+ role: "Mentor",
+ bio: "",
+ image: none,
+ linkedin: "https://www.linkedin.com/in/daksh-malhotra",
+ github: "https://github.com/DakshChan",
+ },
+ {
+ id: 13,
+ name: "Hamza",
+ role: "Mentor",
+ bio: "I love talking about all sorts of fun and interesting topics, so feel free to reach out to me @hamza.pp on discord to chat!",
+ image: none,
+ linkedin: "",
+ github: "https://github.com/gondalm1",
+ },
+ {
+ id: 14,
+ name: "Sammy",
+ role: "Mentor",
+ bio: "I love low-level development and tinkering around with hardware, and I also love languages, both natural and programming. Feel free to say hi!",
+ image: none,
+ linkedin: "",
+ github: "",
+ },
];
diff --git a/src/main.jsx b/src/main.jsx
index 493c28d..06c4c40 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import "./styles/App.css"
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/App.css";
+import App from "./App.jsx";
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
,
-)
+);
diff --git a/src/styles/About.css b/src/styles/About.css
index a59b16f..db1cd2a 100644
--- a/src/styles/About.css
+++ b/src/styles/About.css
@@ -1,168 +1,157 @@
-
#aboutContainer {
- padding: 1rem 1rem;
- opacity: 0;
- transform: translateY(20px);
- transition: opacity 1s ease, transform 1s ease;
+ padding: 1rem 1rem;
+ opacity: 0;
+ transform: translateY(20px);
+ transition:
+ opacity 1s ease,
+ transform 1s ease;
}
#aboutContainer.fade-in-up {
- opacity: 1;
- transform: translateY(0);
- font-family: '';
+ opacity: 1;
+ transform: translateY(0);
+ font-family: "";
}
#aboutContainer img {
- display: block;
- width: 100%;
- margin: 0 auto;
+ display: block;
+ width: 100%;
+ margin: 0 auto;
- border-radius: 1rem 1rem 0 0;
+ border-radius: 1rem 1rem 0 0;
}
.team-section-container {
- padding: 0.25rem 0;
- box-shadow: 0px 2rem 15rem 16em #000000 inset;
- background-image: url(../assets/svg/circuit-board.svg);
+ padding: 0.25rem 0;
+ box-shadow: 0px 2rem 15rem 16em #000000 inset;
+ background-image: url(../assets/svg/circuit-board.svg);
}
.meet-the-team {
- font-size: 2rem;
- display: block;
- margin-top: 2rem;
- margin-bottom: 2rem;
- text-align: center;
+ font-size: 2rem;
+ display: block;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ text-align: center;
}
.teamContainer {
- /* width: 85%; */
- margin: 0 auto;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-evenly;
+ /* width: 85%; */
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
}
.teamMember {
- box-sizing: border-box;
- /* overflow: hidden; */
-
- margin: 1rem 1rem;
-
- width: 12rem;
- /* max-height: 20em; */
-
- border: 3px solid transparent;
- border-radius: 1rem;
-
- transition: transform 300ms ease-in-out;
-}
-
+ box-sizing: border-box;
+ /* overflow: hidden; */
+
+ margin: 1rem 1rem;
+
+ width: 12rem;
+ /* max-height: 20em; */
+
+ border: 3px solid transparent;
+ border-radius: 1rem;
+
+ transition: transform 300ms ease-in-out;
+}
+
.teamMember:hover {
- /* transform: scale(1.1); */
- border-color: lightgreen;
- /* z-index: 5; */
+ /* transform: scale(1.1); */
+ border-color: lightgreen;
+ /* z-index: 5; */
}
.teamMember img {
- margin: 0;
-
- width: 100%;
- height: auto;
+ margin: 0;
+
+ width: 100%;
+ height: auto;
}
.teamMember .title {
- display: flex;
- justify-content: center;
-
+ display: flex;
+ justify-content: center;
}
.teamMember .linkedin-icon {
- margin-left: 1rem;
- color: #0077b5;
+ margin-left: 1rem;
+ color: #0077b5;
}
.teamMember .github-icon {
- margin-left: 0.5rem;
- color: #333;
+ margin-left: 0.5rem;
+ color: #333;
}
.teamMember .desc {
+ position: relative;
+ padding: 0.5rem 0.25rem 0.5rem;
+ /* width: 100%; */
+ bottom: 0;
+ font-size: 0.75rem;
- position: relative;
- padding: 0.5rem 0.25rem 0.5rem;
- /* width: 100%; */
- bottom: 0;
- font-size: 0.75rem;
-
-
- height: fit-content;
-
- border-bottom-left-radius: 1rem;
- border-bottom-right-radius: 1rem;
-
- background-color: black;
- color: snow;
+ height: fit-content;
- transition: all 300ms ease-in-out;
-}
+ border-bottom-left-radius: 1rem;
+ border-bottom-right-radius: 1rem;
+ background-color: black;
+ color: snow;
+ transition: all 300ms ease-in-out;
+}
.teamMember .role {
- color: gray;
- margin-top: 0.15rem;
- font-size: 0.55rem;
+ color: gray;
+ margin-top: 0.15rem;
+ font-size: 0.55rem;
}
-
-
.teamMember .desc .bio {
+ position: absolute;
+ top: 1.75rem;
+ left: 3rem;
+ z-index: -1;
- position: absolute;
- top: 1.75rem;
- left: 3rem;
- z-index: -1;
+ padding: 0.5rem;
+ background-color: rgba(252, 244, 218, 0);
+ color: #00000000;
+ border: 2px solid #00000000;
+ border-radius: 8px;
+ /* overflow: hidden; */
+ font-size: 0.6rem;
+ text-align: center;
- padding: 0.5rem;
- background-color: rgba(252, 244, 218, 0);
- color: #00000000;
- border: 2px solid #00000000;
- border-radius: 8px;
- /* overflow: hidden; */
- font-size: 0.6rem;
- text-align: center;
-
- transition: all 250ms ease-in-out;
+ transition: all 250ms ease-in-out;
}
-.teamMember:hover .bio{
- background-color: rgb(252, 244, 218);
- color: #000000;
- border: 2px solid #00000000;
+.teamMember:hover .bio {
+ background-color: rgb(252, 244, 218);
+ color: #000000;
+ border: 2px solid #00000000;
- z-index: 5;
+ z-index: 5;
}
+@media screen and (max-width: 600px) {
+ .teamMember {
+ width: 8rem;
+ margin: 0 0.8rem;
+ }
+ .teamMember .title {
+ justify-content: center;
+ }
-@media screen and (max-width: 600px){
-
- .teamMember {
- width: 8rem;
- margin: 0 0.8rem;
- }
-
- .teamMember .title {
- justify-content: center;
- }
-
- .teamMember .bio {
- display: none;
- }
-
+ .teamMember .bio {
+ display: none;
+ }
- /* .teamMember {
+ /* .teamMember {
width: 22rem;
height: 30rem;
} */
-}
\ No newline at end of file
+}
diff --git a/src/styles/App.css b/src/styles/App.css
index 26bc4a3..fa518dc 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -2,135 +2,144 @@
/* ---COLOURS--- */
:root {
- --text: #fffafa
- --body: #01b3e5
- --accent-light: #02c1c2
- --accent-light2: #73dbd4
- --accent-dark: #024ca2
- --accent-dark2: #003366
- --black: #00000
+ --text: #fffafa --body: #01b3e5 --accent-light: #02c1c2 --accent-light2:
+ #73dbd4 --accent-dark: #024ca2 --accent-dark2: #003366 --black: #00000;
}
-p, a, h2, h3, #redirect {
- font-family: 'Inter', sans-serif;
+p,
+a,
+h2,
+h3,
+#redirect {
+ font-family: "Inter", sans-serif;
}
/* --- FONTS --- */
@font-face {
- font-family: "Kanit";
- src: url(../assets/fonts/Kanit/Kanit-Regular.ttf) format("truetype");
+ font-family: "Kanit";
+ src: url(../assets/fonts/Kanit/Kanit-Regular.ttf) format("truetype");
}
@font-face {
- font-family: "Kanit Light";
- src: url(../assets/fonts/Kanit/Kanit-Light.ttf) format("truetype");
+ font-family: "Kanit Light";
+ src: url(../assets/fonts/Kanit/Kanit-Light.ttf) format("truetype");
}
@font-face {
- font-family: "Kanit Thin";
- src: url(../assets/fonts/Kanit/Kanit-Thin.ttf) format("truetype");
+ font-family: "Kanit Thin";
+ src: url(../assets/fonts/Kanit/Kanit-Thin.ttf) format("truetype");
}
@font-face {
- font-family: "Quicksand";
- src: url(../assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf);
+ font-family: "Quicksand";
+ src: url(../assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf);
}
@font-face {
- font-family: "Syne";
- src: url(../assets/fonts/Syne/static/Syne-Regular.ttf);
+ font-family: "Syne";
+ src: url(../assets/fonts/Syne/static/Syne-Regular.ttf);
}
html {
- width: 100vw;
+ width: 100vw;
}
body {
- width: 100vw;
- margin: 0 auto;
+ width: 100vw;
+ margin: 0 auto;
}
-::-webkit-scrollbar{
- display: none;
+::-webkit-scrollbar {
+ display: none;
}
-h1, h2, h3, h4, h5, h6 {
- font-family: 'Syne';
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: "Syne";
}
-p, a, #redirect {
- font-family: 'Quicksand', sans-serif;
+p,
+a,
+#redirect {
+ font-family: "Quicksand", sans-serif;
}
button {
- border: none;
- background-color: transparent;
- color: inherit;
- cursor: pointer;
- padding: 0;
- font-size: inherit;
-}
-
-button:focus {
- outline: none;
+ border: none;
+ background-color: transparent;
+ color: inherit;
+ cursor: pointer;
+ padding: 0;
+ font-size: inherit;
}
-.ul{
- text-decoration: underline;
- text-decoration-color: rgb(54, 92, 74);
+button:focus {
+ outline: none;
}
-span, label {
- font-family: "Quicksand";
+.ul {
+ text-decoration: underline;
+ text-decoration-color: rgb(54, 92, 74);
}
-@media screen and (min-width: 0px){
- html {
- font-size: 10px;
-
- }
-
- h1, h2, h3, h4, h5, h6, p {
- text-align: center;
- }
+span,
+label {
+ font-family: "Quicksand";
}
+@media screen and (min-width: 0px) {
+ html {
+ font-size: 10px;
+ }
-@media screen and (min-width: 480px){
- html {
- font-size: 18px;
- }
-
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p {
+ text-align: center;
+ }
}
-@media screen and (min-width: 600px){
- html {
- font-size: 18px;
- }
+@media screen and (min-width: 480px) {
+ html {
+ font-size: 18px;
+ }
}
-@media screen and (min-width: 1025px){
- html {
- font-size: 18px;
- }
+@media screen and (min-width: 600px) {
+ html {
+ font-size: 18px;
+ }
+}
+@media screen and (min-width: 1025px) {
+ html {
+ font-size: 18px;
+ }
}
-@media screen and (min-width: 1281px){
- html {
- font-size: 20px;
- }
+@media screen and (min-width: 1281px) {
+ html {
+ font-size: 20px;
+ }
}
-@media screen and (min-width: 1681px){
- html {
- font-size: 24px;
- }
+@media screen and (min-width: 1681px) {
+ html {
+ font-size: 24px;
+ }
}
-@media screen and (min-width: 1921px){
- html {
- font-size: 1.5vw;
- }
+@media screen and (min-width: 1921px) {
+ html {
+ font-size: 1.5vw;
+ }
}
/* @media screen and (max-width: 776px) {
diff --git a/src/styles/Blurb.css b/src/styles/Blurb.css
index 9d0ebd4..1fbd25f 100644
--- a/src/styles/Blurb.css
+++ b/src/styles/Blurb.css
@@ -1,64 +1,63 @@
#blurb {
- margin: 5rem 1rem;
- padding: 0;
- width: 60%;
- font-size: 0.85rem;
- margin: 0 auto;
-
- font-size: 0.65rem;
- font-weight: 500;
- color: rgb(161, 161, 161);
+ margin: 5rem 1rem;
+ padding: 0;
+ width: 60%;
+ font-size: 0.85rem;
+ margin: 0 auto;
+
+ font-size: 0.65rem;
+ font-weight: 500;
+ color: rgb(161, 161, 161);
}
.aboutContainer h2 {
- margin: 0;
- font-size: 1.5rem;
- width: 100%;
- text-align: center;
- color: aliceblue;
+ margin: 0;
+ font-size: 1.5rem;
+ width: 100%;
+ text-align: center;
+ color: aliceblue;
}
.aboutUs {
- margin: 1rem 0;
+ margin: 1rem 0;
}
.aboutUs p {
- margin: 0.5rem 0;
- font-size: 0.65rem;
- font-weight: 500;
- color: rgb(161, 161, 161);
+ margin: 0.5rem 0;
+ font-size: 0.65rem;
+ font-weight: 500;
+ color: rgb(161, 161, 161);
}
.goals {
- margin-top: 3rem;
+ margin-top: 3rem;
}
#goalGrid {
- padding: 1rem 0;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 1.7rem;
+ padding: 1rem 0;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.7rem;
}
.goalTitle {
- color: aliceblue;
- font-size: 1.025rem;
- font-weight: 900;
- margin-bottom: 0.5rem;
- margin-top: 0;
+ color: aliceblue;
+ font-size: 1.025rem;
+ font-weight: 900;
+ margin-bottom: 0.5rem;
+ margin-top: 0;
}
-
-@media screen and (max-width: 600px){
- #blurb {
- width: 90%;
- }
- #goalGrid {
- grid-template-columns: repeat(1, 1fr);
- margin-left: 0;
- }
-
- .aboutUs p{
- margin-left: 0;
- }
-}
\ No newline at end of file
+@media screen and (max-width: 600px) {
+ #blurb {
+ width: 90%;
+ }
+ #goalGrid {
+ grid-template-columns: repeat(1, 1fr);
+ margin-left: 0;
+ }
+
+ .aboutUs p {
+ margin-left: 0;
+ }
+}
diff --git a/src/styles/Contact.css b/src/styles/Contact.css
index 598dcd0..791e3a2 100644
--- a/src/styles/Contact.css
+++ b/src/styles/Contact.css
@@ -1,93 +1,95 @@
.contactContainer {
- padding: 2rem 1rem;
- width: 65%;
- margin: 0 auto;
- opacity: 0;
- transform: translateY(20px);
- transition: opacity 1s ease, transform 1s ease;
+ padding: 2rem 1rem;
+ width: 65%;
+ margin: 0 auto;
+ opacity: 0;
+ transform: translateY(20px);
+ transition:
+ opacity 1s ease,
+ transform 1s ease;
}
.contactContainer #title {
- font-size: 1.525rem;
- margin: 1rem 1.5rem 2rem;
- text-align: center;
+ font-size: 1.525rem;
+ margin: 1rem 1.5rem 2rem;
+ text-align: center;
}
.contactContainer.fade-in-up {
- opacity: 1;
- transform: translateY(0);
+ opacity: 1;
+ transform: translateY(0);
}
/* Add your preferred styles for the overall container */
.info {
- display: flex;
- align-items: center;
- font-size: 0.7rem;
- padding: 2rem 1rem 1.5rem;
- background-color: #050505;
+ display: flex;
+ align-items: center;
+ font-size: 0.7rem;
+ padding: 2rem 1rem 1.5rem;
+ background-color: #050505;
}
-
- /* Style for the contact information section */
+
+/* Style for the contact information section */
.contactInfo {
- flex: 1;
- padding-right: 1.5rem;
+ flex: 1;
+ padding-right: 1.5rem;
}
.contactInfo h2 {
- color: white;
+ color: white;
}
-
+
.contactInfo p {
- color: #9b9b9b;
- margin-bottom: 0.75rem;
+ color: #9b9b9b;
+ margin-bottom: 0.75rem;
}
.contactForm {
- flex: 1;
+ flex: 1;
}
-
+
.contactForm label {
- display: block;
- margin-bottom: 1rem;
+ display: block;
+ margin-bottom: 1rem;
}
-
+
.contactForm input,
.contactForm textarea {
- background-color: rgb(46, 54, 61);
- width: 100%;
- padding: 0.25rem;
- min-height: 2.5rem;
- margin-top: 0.5rem;
- /* margin-bottom: 1rem; */
- box-sizing: border-box;
- border-width: 0;
- border-radius: 0.25rem;
+ background-color: rgb(46, 54, 61);
+ width: 100%;
+ padding: 0.25rem;
+ min-height: 2.5rem;
+ margin-top: 0.5rem;
+ /* margin-bottom: 1rem; */
+ box-sizing: border-box;
+ border-width: 0;
+ border-radius: 0.25rem;
}
.contactForm textarea {
- height: 150px; /* Adjust the height as needed */
- resize: vertical; /* Allow vertical resizing */
+ height: 150px; /* Adjust the height as needed */
+ resize: vertical; /* Allow vertical resizing */
}
-
+
.contactForm button {
- background-color: lightgreen;
- color: #000;
- padding: 0.65rem 0.85rem;
- border: none;
- border-radius: 0.75rem;
- cursor: pointer;
+ background-color: lightgreen;
+ color: #000;
+ padding: 0.65rem 0.85rem;
+ border: none;
+ border-radius: 0.75rem;
+ cursor: pointer;
}
-
+
.contactForm button:hover {
- background-color: #45a049;
+ background-color: #45a049;
}
-@media screen and (max-width: 600px){
- .contactContainer {
- width: 95%;
- margin: 0 auto;
- }
- .info {
- display: block;
- }
-}
\ No newline at end of file
+@media screen and (max-width: 600px) {
+ .contactContainer {
+ width: 95%;
+ margin: 0 auto;
+ }
+ .info {
+ display: block;
+ }
+}
diff --git a/src/styles/Events.css b/src/styles/Events.css
index 9918547..d6baeed 100644
--- a/src/styles/Events.css
+++ b/src/styles/Events.css
@@ -1,271 +1,253 @@
-
#eventContainer {
- margin: 0;
- padding: 0rem 1rem 2rem;
+ margin: 0;
+ padding: 0rem 1rem 2rem;
- display: relative;
+ display: relative;
- background-image: url(../assets/svg/circuit-board.svg);
- background-color: #000000;
- box-shadow: 0px 20px 20rem 5rem #000000 inset;
-
+ background-image: url(../assets/svg/circuit-board.svg);
+ background-color: #000000;
+ box-shadow: 0px 20px 20rem 5rem #000000 inset;
}
#eventContainer #header {
-
- font-size: 1.525rem;
- text-align: center;
+ font-size: 1.525rem;
+ text-align: center;
- margin: 0rem 3rem 1.5rem;
+ margin: 0rem 3rem 1.5rem;
}
#events {
+ display: flex;
+ width: 100%;
- display: flex;
- width: 100%;
-
- align-items: center;
- justify-content: center;
-
- flex-wrap: nowrap;
- flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: nowrap;
+ flex-direction: row;
}
/* CARD ALIGNMENT AND ANIMATIONS */
#events .card {
+ position: relative;
+ width: 13rem;
+ height: 16rem;
+ align-items: center;
- position: relative;
- width: 13rem;
- height: 16rem;
- align-items: center;
-
- border-radius: 0.5rem;
- box-sizing: border-box;
- overflow: hidden;
+ border-radius: 0.5rem;
+ box-sizing: border-box;
+ overflow: hidden;
- color: aliceblue;
+ color: aliceblue;
- transition: all 250ms ease-in-out;
+ transition: all 250ms ease-in-out;
}
-.card #cardface p{
- color: rgb(139, 212, 255);
+.card #cardface p {
+ color: rgb(139, 212, 255);
}
-.card::before{
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgb(3,24,11);
- background: linear-gradient(70deg, rgba(223, 33, 163, 0.492) 0%, rgba(255,255,255,0) 50%);
+.card::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgb(3, 24, 11);
+ background: linear-gradient(
+ 70deg,
+ rgba(223, 33, 163, 0.492) 0%,
+ rgba(255, 255, 255, 0) 50%
+ );
}
/* Have cards laid into one another */
-.card:not(:first-child){
- margin-left: -2.25rem;
+.card:not(:first-child) {
+ margin-left: -2.25rem;
}
/* Pop up */
-.card:hover{
- transform: translateY(-1rem);
- box-shadow: -1px 1px 10px 1px #000;
+.card:hover {
+ transform: translateY(-1rem);
+ box-shadow: -1px 1px 10px 1px #000;
}
/* Move succeeding cards to the right */
.card:hover ~ .card {
- transform: translateX(3rem);
+ transform: translateX(3rem);
}
/* OVERLAY */
.overlay {
+ position: absolute;
- position: absolute;
+ left: 0;
+ right: 0;
- left: 0;
- right: 0;
-
- height: 0;
- width: 100%;
+ height: 0;
+ width: 100%;
- background-color: #0e0e13;
-
- overflow: hidden;
- transition: 250ms ease;
+ background-color: #0e0e13;
+ overflow: hidden;
+ transition: 250ms ease;
}
#cardHeader {
- top: 0;
+ top: 0;
}
#cardFooter {
- bottom: 0;
+ bottom: 0;
}
-.card:hover #cardHeader{
- height: 20%;
+.card:hover #cardHeader {
+ height: 20%;
}
.card:hover #cardFooter {
- height: 77.5%;
+ height: 77.5%;
}
/* Event Details */
.overlay label {
+ display: block;
- display: block;
-
- padding: 0 1.25rem;
- width: fit-content;
- height: fit-content;
-
-
- font-size: 0.67rem;
- text-align: center;
+ padding: 0 1.25rem;
+ width: fit-content;
+ height: fit-content;
+ font-size: 0.67rem;
+ text-align: center;
}
#cardHeader #eventName {
+ font-size: 0.825rem;
- font-size: 0.825rem;
-
- position: absolute;
- top: 50%;
-
- transform: translateY(-50%);
- -ms-transform: translateY(-50%);
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
}
#cardFooter #footDetails {
- position: absolute;
- top: 50%;
+ position: absolute;
+ top: 50%;
- transform: translateY(-50%);
- -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
}
#footDetails #eventDetails {
+ display: inline-block;
- display: inline-block;
+ vertical-align: middle;
+ text-align: center;
- vertical-align: middle;
- text-align: center;
-
- height: 6rem;
- overflow-y: scroll;
+ height: 6rem;
+ overflow-y: scroll;
}
#footDetails #venueGrid {
+ display: flex;
+
+ margin: 0;
+ margin-bottom: 1rem;
+ padding: 0 1.25rem;
- display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
- margin: 0;
- margin-bottom: 1rem;
- padding: 0 1.25rem;
-
- flex-wrap: wrap;
- justify-content: space-between;
-
- line-height: 2rem;
+ line-height: 2rem;
}
-#venueGrid label{
- flex: 1 1 auto;
- position: relative;
- text-align: center;
- padding: 0;
+#venueGrid label {
+ flex: 1 1 auto;
+ position: relative;
+ text-align: center;
+ padding: 0;
}
#venueGrid label + label {
- border-left: 0.5px solid #116655;
+ border-left: 0.5px solid #116655;
}
#footDetails a {
- text-decoration: none;
- color: aliceblue;
+ text-decoration: none;
+ color: aliceblue;
}
#footDetails #redirect {
+ display: block;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
- display: block;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
+ background-color: #116655;
- background-color: #116655;
+ position: relative;
+ bottom: 0;
+ width: 100%;
- position: relative;
- bottom: 0;
- width: 100%;
-
-
- transition: all 100ms ease-in-out;
+ transition: all 100ms ease-in-out;
}
#footDetails #redirect:hover {
- border: none;
- background-color: #408678;
- color: #000;
+ border: none;
+ background-color: #408678;
+ color: #000;
}
-
/* CARDFACE */
#cardface {
+ display: flex;
+ align-items: center;
- display: flex;
- align-items: center;
+ margin: 0;
+ height: 100%;
- margin: 0;
- height: 100%;
-
- background-color: #116655;
-
+ background-color: #116655;
}
-
#cardface p {
+ color: black;
- color: black;
+ font-size: 1.225rem;
+ text-align: center;
- font-size: 1.225rem;
- text-align: center;
-
- padding: 2rem 2rem;
+ padding: 2rem 2rem;
}
@media screen and (max-width: 600px) {
- #events {
- justify-content: row;
- flex-wrap: wrap;
- flex-direction: row;
- }
-
- #events .card {
- width: 12rem;
- height: 16rem;
- font-size: 0.8rem;
- }
-
- .card:not(:first-child){
- margin-left: -2.25rem;
- }
-
- #events .card:nth-child(2n + 1){
- margin-left: 0;
- }
-/*
+ #events {
+ justify-content: row;
+ flex-wrap: wrap;
+ flex-direction: row;
+ }
+
+ #events .card {
+ width: 12rem;
+ height: 16rem;
+ font-size: 0.8rem;
+ }
+
+ .card:not(:first-child) {
+ margin-left: -2.25rem;
+ }
+
+ #events .card:nth-child(2n + 1) {
+ margin-left: 0;
+ }
+ /*
.card:not(:first-child){
} */
- /* .card:hover{
+ /* .card:hover{
box-shadow: -1px 1px 10px 1px #000;
}
@@ -273,21 +255,19 @@
transform: translateX(0);
} */
- #cardHeader #eventName {
+ #cardHeader #eventName {
+ font-size: 0.8rem;
+ }
- font-size: 0.8rem;
- }
+ #footDetails #eventDetails {
+ font-size: 0.65rem;
+ }
- #footDetails #eventDetails {
- font-size: 0.65rem;
- }
+ #venueGrid label {
+ font-size: 0.6rem;
+ }
- #venueGrid label{
- font-size: 0.6rem;
- }
-
- #cardface p {
- font-size: 0.8rem;
- }
-
-}
\ No newline at end of file
+ #cardface p {
+ font-size: 0.8rem;
+ }
+}
diff --git a/src/styles/Footer.css b/src/styles/Footer.css
index f7a9eec..ae178e9 100644
--- a/src/styles/Footer.css
+++ b/src/styles/Footer.css
@@ -1,44 +1,41 @@
.footerContainer {
- /* background-color: lime; */
- color: white;
- position: relative;
- width: 100vw;
- border: none;
+ /* background-color: lime; */
+ color: white;
+ position: relative;
+ width: 100vw;
+ border: none;
- display: flex;
- padding-top: 3em;
- align-items: center;
- justify-content: space-between;
+ display: flex;
+ padding-top: 3em;
+ align-items: center;
+ justify-content: space-between;
}
-.footerContainer *{
- padding: 0.25rem 0.25rem;
-
+.footerContainer * {
+ padding: 0.25rem 0.25rem;
}
-.copyright, .socials {
- margin: 12px 1rem;
+.copyright,
+.socials {
+ margin: 12px 1rem;
}
.copyright {
- font-size: 0.85rem;
-
+ font-size: 0.85rem;
}
-
-
+
.footerContainer .socials {
- display: flex;
- justify-content: space-around;
+ display: flex;
+ justify-content: space-around;
}
-
+
.socials a {
- color: white;
- text-decoration: none;
- margin-left: 1rem;
+ color: white;
+ text-decoration: none;
+ margin-left: 1rem;
}
.socials img {
- margin: auto;
- height: 1.25rem;
+ margin: auto;
+ height: 1.25rem;
}
-
\ No newline at end of file
diff --git a/src/styles/Header.css b/src/styles/Header.css
index bc09cde..158fb34 100644
--- a/src/styles/Header.css
+++ b/src/styles/Header.css
@@ -1,130 +1,114 @@
.headerContainer {
- position: sticky;
- top: 0;
- left: 0;
- z-index: 4;
-
- padding: 0rem 1rem;
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 4;
- display: flex;
- justify-content: space-between;
- flex-direction: row;
+ padding: 0rem 1rem;
- background-color: black;
- backdrop-filter: blur(15px);
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
- transition: 300ms ease;
+ background-color: black;
+ backdrop-filter: blur(15px);
+ transition: 300ms ease;
}
-.hiddenNav{
- transform: translateY(-100%);
- transition: all 100ms ease;
+.hiddenNav {
+ transform: translateY(-100%);
+ transition: all 100ms ease;
}
#logoContainer {
- flex-basis: 100%;
+ flex-basis: 100%;
- display: flex;
- flex-direction: row;
- -ms-flex-align: center;
- justify-content: space-around;
+ display: flex;
+ flex-direction: row;
+ -ms-flex-align: center;
+ justify-content: space-around;
- cursor: pointer;
+ cursor: pointer;
}
+.headerContainer .logo {
+ margin: auto 0;
-.headerContainer .logo{
- margin: auto 0;
-
- aspect-ratio: 1 / 1;
- width: 1.8rem;
-
+ aspect-ratio: 1 / 1;
+ width: 1.8rem;
}
-
-
.headerContainer #logoName {
- font-size: 0.65rem;
- display: inline-block;
- width: max-content;
- margin: auto;
- margin-left: 0.5rem;
-
+ font-size: 0.65rem;
+ display: inline-block;
+ width: max-content;
+ margin: auto;
+ margin-left: 0.5rem;
}
-
.headerContainer #pages {
- flex-basis: 100%;
-
- display: flex;
- flex-flow: row nowrap;
- justify-content: center;
+ flex-basis: 100%;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: center;
}
-
-
.headerContainer #redirect {
+ font-size: 0.65rem;
+ color: white;
- font-size: 0.65rem;
- color: white;
+ height: 100%;
+ /* width: 6.5rem; I'm too lazy just change this if the redirect sizes are too small */
+ padding: 1rem 2rem;
- height: 100%;
- /* width: 6.5rem; I'm too lazy just change this if the redirect sizes are too small */
- padding: 1rem 2rem;
+ text-decoration: none;
+ border-bottom: 2px solid rgb(0, 0, 0);
- text-decoration: none;
- border-bottom: 2px solid rgb(0, 0, 0);
-
- transition: 125ms ease-in-out;
+ transition: 125ms ease-in-out;
}
.headerContainer .socials {
- flex-basis: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: end;
- margin: auto 0;
- margin-right: 0.5rem;
-}
-
-.headerContainer .socials img{
- width: 0.85rem;
- height: 0.85rem;
+ flex-basis: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: end;
+ margin: auto 0;
+ margin-right: 0.5rem;
}
-.headerContainer #redirect:hover {
- background-color: #060606;
- border-color: lightgreen;
+.headerContainer .socials img {
+ width: 0.85rem;
+ height: 0.85rem;
}
-@media screen and (max-width: 600px){
-
- .headerContainer {
- justify-content: space-between;
- }
-
- .headerContainer #logoName {
- /* display: none; */
- }
-
- .headerContainer #pages {
- display: flex;
- flex-flow: row nowrap;
- justify-content: end;
-
+.headerContainer #redirect:hover {
+ background-color: #060606;
+ border-color: lightgreen;
+}
- }
+@media screen and (max-width: 600px) {
+ .headerContainer {
+ justify-content: space-between;
+ }
- .headerContainer #redirect {
+ .headerContainer #logoName {
+ /* display: none; */
+ }
- padding: 1.25rem 1rem;
+ .headerContainer #pages {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: end;
+ }
- }
+ .headerContainer #redirect {
+ padding: 1.25rem 1rem;
+ }
- .headerContainer .socials{
- display: none;
- }
-}
\ No newline at end of file
+ .headerContainer .socials {
+ display: none;
+ }
+}
diff --git a/src/styles/Hero.css b/src/styles/Hero.css
index 22900cc..8969520 100644
--- a/src/styles/Hero.css
+++ b/src/styles/Hero.css
@@ -1,33 +1,30 @@
-
#hero {
- /* width: 80%; */
- margin: 0 auto;
- padding: 1rem 2rem 5rem;
- z-index: -1;
+ /* width: 80%; */
+ margin: 0 auto;
+ padding: 1rem 2rem 5rem;
+ z-index: -1;
- background-image: url(../assets/hero.jpg);
+ background-image: url(../assets/hero.jpg);
- background-color: rgb(0, 10, 2);
- background-blend-mode: overlay;
+ background-color: rgb(0, 10, 2);
+ background-blend-mode: overlay;
- box-shadow: 0 0 8em 8em #000000 inset;
+ box-shadow: 0 0 8em 8em #000000 inset;
}
#desc {
- margin-left: 0px;
- padding: 1.5rem 2rem;
-
+ margin-left: 0px;
+ padding: 1.5rem 2rem;
}
#desc h1 {
- font-size: 2.125rem;
- margin-bottom: 0.25rem;
+ font-size: 2.125rem;
+ margin-bottom: 0.25rem;
}
-@media screen and (min-width: 600px){
-
- #hero {
- background-color: rgba(0, 10, 2, 0.911);
- padding-bottom: 2rem;
- }
-}
\ No newline at end of file
+@media screen and (min-width: 600px) {
+ #hero {
+ background-color: rgba(0, 10, 2, 0.911);
+ padding-bottom: 2rem;
+ }
+}
diff --git a/src/styles/Home.css b/src/styles/Home.css
index 20dac22..c7aaa9a 100644
--- a/src/styles/Home.css
+++ b/src/styles/Home.css
@@ -1,30 +1,31 @@
.homeContainer {
- opacity: 0;
- transform: translateY(20px);
- transition: opacity 1s ease, transform 1s ease;
+ opacity: 0;
+ transform: translateY(20px);
+ transition:
+ opacity 1s ease,
+ transform 1s ease;
}
.homeContainer.fade-in-up {
- opacity: 1;
- transform: translateY(0);
+ opacity: 1;
+ transform: translateY(0);
}
#page {
- background-color: black;
+ background-color: black;
}
#main {
- width: 80%;
- margin: 0 auto;
- background-color: black;
+ width: 80%;
+ margin: 0 auto;
+ background-color: black;
}
body {
- background-color: #0e0e13; /* Change the background color to black */
- color: white;
- /* padding: 10px; */
+ background-color: #0e0e13; /* Change the background color to black */
+ color: white;
+ /* padding: 10px; */
}
-@media screen and (max-width: 600px){
-
-}
\ No newline at end of file
+@media screen and (max-width: 600px) {
+}
diff --git a/src/styles/StarryNight.css b/src/styles/StarryNight.css
index d9d7063..d099144 100644
--- a/src/styles/StarryNight.css
+++ b/src/styles/StarryNight.css
@@ -1,9 +1,9 @@
canvas {
- position: fixed;
- top: 0px;
- left: 0px;
- z-index: -2;
- width: 100%;
- height: 100%;
- display: block;
-}
\ No newline at end of file
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ z-index: -2;
+ width: 100%;
+ height: 100%;
+ display: block;
+}
diff --git a/vite.config.js b/vite.config.js
index b2cbec4..d134f93 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
// https://vite.dev/config/
export default defineConfig({
preview: {
- port: 3000
+ port: 3000,
},
- envPrefix: 'REACT_APP_',
+ envPrefix: "REACT_APP_",
plugins: [react()],
-})
+});
-