diff --git a/src/public/components/Availability.tsx b/src/public/components/Availability.tsx index 27ced49..41ea97d 100644 --- a/src/public/components/Availability.tsx +++ b/src/public/components/Availability.tsx @@ -1,7 +1,9 @@ import * as React from "react"; import {Component} from "react"; -interface AvailabilityProps {} +interface AvailabilityProps { + checkUrl: string; +} interface AvailabilityState { available: boolean; } @@ -13,6 +15,9 @@ export default class Availability extends Component diff --git a/src/public/components/Carousel.tsx b/src/public/components/Carousel.tsx index 43705d0..9f09e86 100644 --- a/src/public/components/Carousel.tsx +++ b/src/public/components/Carousel.tsx @@ -15,8 +15,8 @@ export default class Carousel extends Component { } private scrollToNext(e: MouseEvent) { - let elem = (this.state.innerRef as any).current; - elem.scrollTo({left: elem.scrollWidth, behavior: "smooth"}) + let elem = (this.state.innerRef as any).current as HTMLDivElement; + elem.scrollBy({left: elem.parentElement.getBoundingClientRect().width, behavior: "smooth"}) } public render() { diff --git a/src/public/components/Officer.tsx b/src/public/components/Officer.tsx new file mode 100644 index 0000000..a995073 --- /dev/null +++ b/src/public/components/Officer.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import {Component} from "react"; + +interface OfficerProps { + name: string; + position: string; + photo: string; +} +interface OfficerState {} + +export default class Officer extends Component { + constructor(props: OfficerProps) { + super(props); + this.state = {}; + } + + public render() { + return
+ + {this.props.name} + {this.props.position} +
; + } +} diff --git a/src/public/components/TopNav.tsx b/src/public/components/TopNav.tsx index 5430fdb..ba539c4 100644 --- a/src/public/components/TopNav.tsx +++ b/src/public/components/TopNav.tsx @@ -21,7 +21,7 @@ export default class TopNav extends React.Component { return
- {this.props.alt} + {this.props.alt} {navLinks}
diff --git a/src/public/css/styles.css b/src/public/css/styles.css index 5f3eaae..b04a4ce 100644 --- a/src/public/css/styles.css +++ b/src/public/css/styles.css @@ -1,5 +1,3 @@ - - /* Color vars should go here */ :root { --dark-blue: #00629b; @@ -7,8 +5,12 @@ --sky-blue: #6ab7ff; --grey: #c4d2e3; --black: #1f1f1f; - --white: #eeeeee; - --accent: #ffe419; + --white: #F2F6FF; + --accent: #FFCD00; +} + +#root { + background-color: var(--white); } * { @@ -44,13 +46,15 @@ body { position: relative; } .logo { - width: 10em; + width: 20em; height: auto; padding: 0.5em; + margin-left: 1em; + image-rendering: -webkit-optimize-contrast; } .nav-link { color: var(--white); - font-size: 1.6em; + font-size: 1.5em; margin-left: 0.75em; margin-right: 0.75em; text-decoration: none; @@ -86,6 +90,10 @@ body { .row-group { display: flex; flex-direction: row; + flex-wrap: wrap; + align-items: baseline; + justify-content: space-between; + column-gap: 2.5em; } .section-title { color: var(--med-blue); @@ -120,11 +128,11 @@ body { position: absolute; top: 0; right: 0; - background: linear-gradient(270deg, white, transparent) + background: linear-gradient(270deg, var(--white), transparent) } .carousel::before { left: 0; - background: linear-gradient(90deg, white, transparent); + background: linear-gradient(90deg, var(--white), transparent); } .carousel-next { position: absolute; @@ -152,9 +160,11 @@ body { font-weight: 500; color: var(--med-blue); padding: 0.5em; + text-decoration: none; } .carousel-item a:hover { color: var(--sky-blue); + text-decoration: underline; } .carousel-item a:active { color: var(--dark-blue) @@ -162,6 +172,9 @@ body { .description-text { font-size: 1.2em; } +.carousel-item img { + max-width: 20em; +} /* Image slideshow styles */ .slideshow-image { width: 22em; @@ -182,6 +195,7 @@ body { font-size: 1.5em; color: white; margin-top: 1em; + cursor: pointer; } .link-button:hover { background-color: var(--sky-blue); @@ -190,6 +204,31 @@ body { background-color: var(--dark-blue); } +.officer { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 1em 0; + width: 10em; +} +.officer-image { + aspect-ratio: 1 / 1; + max-width: 10em; + max-height: 10em; +} +.officer-name { + font-weight: bold; + font-size: 1.2em; + text-align: center; + margin-bottom: 0.15em; +} +.officer-position { + font-style: italic; + font-size: 1.1em; + text-align: center; +} + /* Responsive queries go here */ @media screen and (max-width: 760px) { diff --git a/src/public/img/IEEEUCSD.png b/src/public/img/IEEEUCSD.png new file mode 100644 index 0000000..45996d6 Binary files /dev/null and b/src/public/img/IEEEUCSD.png differ diff --git a/src/public/img/IMG_0217_cropped.jpg b/src/public/img/IMG_0217_cropped.jpg new file mode 100644 index 0000000..5c46c09 Binary files /dev/null and b/src/public/img/IMG_0217_cropped.jpg differ diff --git a/src/public/img/abby.jpg b/src/public/img/abby.jpg new file mode 100644 index 0000000..3f8f869 Binary files /dev/null and b/src/public/img/abby.jpg differ diff --git a/src/public/img/brigette.jpg b/src/public/img/brigette.jpg new file mode 100644 index 0000000..c88c1c3 Binary files /dev/null and b/src/public/img/brigette.jpg differ diff --git a/src/public/img/clyde.jpg b/src/public/img/clyde.jpg new file mode 100644 index 0000000..42d01d4 Binary files /dev/null and b/src/public/img/clyde.jpg differ diff --git a/src/public/img/danny.jpg b/src/public/img/danny.jpg new file mode 100644 index 0000000..334f5a6 Binary files /dev/null and b/src/public/img/danny.jpg differ diff --git a/src/public/img/darin.jpg b/src/public/img/darin.jpg new file mode 100644 index 0000000..117e708 Binary files /dev/null and b/src/public/img/darin.jpg differ diff --git a/src/public/img/event.png b/src/public/img/event.png index e837c6c..c903f4c 100644 Binary files a/src/public/img/event.png and b/src/public/img/event.png differ diff --git a/src/public/img/ieeeucsdlogo.png b/src/public/img/ieeeucsdlogo.png new file mode 100644 index 0000000..82f0ff7 Binary files /dev/null and b/src/public/img/ieeeucsdlogo.png differ diff --git a/src/public/img/ieeeucsdlogowhite.png b/src/public/img/ieeeucsdlogowhite.png new file mode 100644 index 0000000..aa09ed3 Binary files /dev/null and b/src/public/img/ieeeucsdlogowhite.png differ diff --git a/src/public/img/jason.jpg b/src/public/img/jason.jpg new file mode 100644 index 0000000..f3aaecf Binary files /dev/null and b/src/public/img/jason.jpg differ diff --git a/src/public/img/jiawen.jpg b/src/public/img/jiawen.jpg new file mode 100644 index 0000000..aa72958 Binary files /dev/null and b/src/public/img/jiawen.jpg differ diff --git a/src/public/img/kevin.jpg b/src/public/img/kevin.jpg new file mode 100644 index 0000000..8be99f4 Binary files /dev/null and b/src/public/img/kevin.jpg differ diff --git a/src/public/img/owen.jpg b/src/public/img/owen.jpg new file mode 100644 index 0000000..5e86ed1 Binary files /dev/null and b/src/public/img/owen.jpg differ diff --git a/src/public/img/parth.jpg b/src/public/img/parth.jpg new file mode 100644 index 0000000..066afea Binary files /dev/null and b/src/public/img/parth.jpg differ diff --git a/src/public/img/sarp.jpg b/src/public/img/sarp.jpg new file mode 100644 index 0000000..3821888 Binary files /dev/null and b/src/public/img/sarp.jpg differ diff --git a/src/public/img/sunny.jpg b/src/public/img/sunny.jpg new file mode 100644 index 0000000..ff1c2e1 Binary files /dev/null and b/src/public/img/sunny.jpg differ diff --git a/src/public/img/tasnia.jpg b/src/public/img/tasnia.jpg new file mode 100644 index 0000000..4c48fd0 Binary files /dev/null and b/src/public/img/tasnia.jpg differ diff --git a/src/public/img/thanh.jpg b/src/public/img/thanh.jpg new file mode 100644 index 0000000..e32eea8 Binary files /dev/null and b/src/public/img/thanh.jpg differ diff --git a/src/public/img/victor.jpg b/src/public/img/victor.jpg new file mode 100644 index 0000000..28ad8e8 Binary files /dev/null and b/src/public/img/victor.jpg differ diff --git a/src/public/img/vuong.jpg b/src/public/img/vuong.jpg new file mode 100644 index 0000000..d55567a Binary files /dev/null and b/src/public/img/vuong.jpg differ diff --git a/src/public/index.tsx b/src/public/index.tsx index b02d1f9..d1f828f 100644 --- a/src/public/index.tsx +++ b/src/public/index.tsx @@ -6,6 +6,8 @@ import ImageGallery from "./components/ImageSlideshow"; import Carousel from "./components/Carousel"; import CarouselItem from "./components/CarouselItem"; import ButtonLink from "./components/ButtonLink"; +import Availability from "./components/Availability"; +import Officer from "./components/Officer"; // The links that are on the top nav bar that link to a lowercase version of their page const ACTIVE_PAGES: string[] = ["About","Events","Officers","Projects","Resources","Sponsors"]; @@ -42,6 +44,104 @@ const EVENTS = [{ location: "/" }]; +const officers = [{ + name: "Sarp User", + position: "Chair", + photo: "img/sarp.jpg" +},{ + name: "Parth Desai", + position: "Vice Chair Finance", + photo: "img/parth.jpg" +},{ + name: "Derek Cantor", + position: "Vice Chair Internal", + photo: "img/derek.jpg" +},{ + name: "Clyde Baron Rapinan", + position: "Vice Chair Events", + photo: "img/clyde.jpg" +},{ + name: "Danny Vo", + position: "Vice Chair Projects", + photo: "img/danny.jpg" +},{ + name: "Nick Petrone", + position: "Webmaster", + photo: "img/nick.jpg" +},{ + name: "Jiawen Yu", + position: "Technical Chair", + photo: "img/jiawen.jpg" +},{ + name: "Victor Ku", + position: "Technical Chair", + photo: "img/victor.jpg" +},{ + name: "Sunny Chu", + position: "Technical Chair", + photo: "img/sunny.jpg" +},{ + name: "Samyak Karnavat", + position: "Social Chair", + photo: "img/samyak.jpg" +},{ + name: "Tasnia Jamal", + position: "Social Chair", + photo: "img/tasnia.jpg" +},{ + name: "Hector Montenegro", + position: "Robocup Soccer Chair", + photo: "img/hector.jpg" +},{ + name: "Zhiqiang Pi", + position: "Quarterly Projects Chair", + photo: "img/zhiqiang.jpg" +},{ + name: "Kevin Chang", + position: "Quarterly Projects Chair", + photo: "img/kevin.jpg" +},{ + name: "Benjamin Tang", + position: "Project Space Chair", + photo: "img/benjamin.jpg" +},{ + name: "Narek Boghozian", + position: "Project Drive Chair", + photo: "img/narek.jpg" +},{ + name: "Jason Liang", + position: "Professional Chair", + photo: "img/jason.jpg" +},{ + name: "Vuong Bui", + position: "Professional Chair", + photo: "img/vuong.jpg" +},{ + name: "Thanh Tong", + position: "PR Chair - Graphics", + photo: "img/thanh.jpg" +},{ + name: "Abby Hackbarth", + position: "PR Chair - Graphics", + photo: "img/abby.jpg" +},{ + name: "Brigette Hacia", + position: "PR Chair - Marketing", + photo: "img/brigette.jpg" +},{ + name: "Darin Tsui", + position: "Outreach Chair", + photo: "img/darin.jpg" +},{ + name: "Soyon Kim", + position: "Outreach Chair", + photo: "img/soyon.jpg" +},{ + name: "Niklas Chang", + position: "Events Coordinator", + photo: "img/niklas.jpg" +}]; + interface MainProps {} interface MainState {} @@ -52,15 +152,12 @@ class Main extends React.Component { } public render() { return <> - "#" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"> + "#" + e.toLowerCase())} image="img/IEEEUCSD.png" alt="IEEE at UCSD Logo"> - This is the about IEEE text that should describe all about our organization. - This text should be a succinct summary of what we're all about. Lorem, ipsum dolor - sit amet consectetur adipisicing elit. Soluta voluptate eligendi vero enim, qui - fugiat eveniet consectetur quis, quas deleniti perferendis minus commodi ducimus - ipsum necessitatibus voluptates sed dolor neque? + We are dedicated to helping develop students into professional Engineers

+ As an organization, we strive to provide opportunities to students both at UC San Diego and in the larger STEM community to gain hands-on experience with autonomous robotics and its various disciplines. Throughout the year, we host dozens of events and workshops to teach skills not frequently taught in the classroom, as well as outreach events for students looking to give back to the STEM community. We also provide professional development and other resources to help students achieve their true potential as they develop into professional engineers. @@ -78,8 +175,12 @@ class Main extends React.Component { ipsum necessitatibus voluptates sed dolor neque?
+ Check all availability Check all availability + + {officers.map(o=>)} + ; } }