-
-
-
-
-
- )
-}
-
-export default EclairDrawer
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..054fb6c
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,87 @@
+.footer {
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid var(--border);
+ padding: 28px 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 16px;
+ background: var(--black);
+}
+
+.footer-left {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.footer-brand {
+ font-family: var(--display);
+ font-weight: 800;
+ font-size: 14px;
+ letter-spacing: 0.15em;
+ background: var(--grad);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.footer-copy {
+ font-family: var(--mono);
+ font-size: 10px;
+ color: var(--lo);
+ letter-spacing: 0.08em;
+}
+
+.footer-links {
+ display: flex;
+ gap: 28px;
+ list-style: none;
+}
+
+.footer-links a {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--lo);
+ transition: color 0.2s;
+}
+
+.footer-links a:hover {
+ color: var(--muted);
+}
+
+.footer-social {
+ display: flex;
+ gap: 20px;
+}
+
+.footer-social a {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--lo);
+ transition: color 0.2s;
+}
+
+.footer-social a:hover {
+ color: var(--magenta);
+}
+
+@media (max-width: 700px) {
+ .footer {
+ padding: 24px 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+ }
+
+ .footer-links {
+ flex-wrap: wrap;
+ gap: 16px;
+ }
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 73302e1..9b0fac5 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,93 +1,26 @@
-import * as React from 'react';
-import BottomNavigation from '@mui/material/BottomNavigation';
-import { Grid } from '@mui/material';
-import { createTheme } from '@mui/material/styles';
-import { ThemeProvider } from '@emotion/react';
-import DiscordLogo from '../static/images/footer-icons/Discord-Logo-White.png';
-import GithubLogo from '../static/images/footer-icons/GitHub-Mark-Light-32px.png';
-import InstaIcon from '../static/images/footer-icons/insta_icon.png';
-import EmailIcon from '../static/images/footer-icons/emailIcon2.png'
-import '../styles/footer.css'
-// import EmailIcon from '@mui/icons-material/Email';
+import React from 'react';
+import './Footer.css';
-export default function SimpleBottomNavigation() {
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/Nav.css b/src/components/Nav.css
new file mode 100644
index 0000000..8e8aa5f
--- /dev/null
+++ b/src/components/Nav.css
@@ -0,0 +1,213 @@
+.nav {
+ position: fixed;
+ top: 0; left: 0; right: 0;
+ z-index: 100;
+ height: var(--nav-height);
+ padding: 0 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid var(--border);
+ background: rgba(5, 5, 8, 0.7);
+ backdrop-filter: blur(24px) saturate(1.3);
+ transition: background 0.3s;
+}
+
+.nav--scrolled {
+ background: rgba(5, 5, 8, 0.92);
+}
+
+/* Logo */
+.nav-logo {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.nav-logo-img {
+ height: 64px;
+ width: auto;
+}
+
+.nav-logo-text {
+ font-family: var(--display);
+ font-weight: 800;
+ font-size: 17px;
+ letter-spacing: 0.15em;
+ color: var(--text);
+}
+
+/* Desktop links */
+.nav-links {
+ display: flex;
+ gap: 36px;
+ list-style: none;
+}
+
+.nav-link {
+ font-family: var(--mono);
+ font-size: 11px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--muted);
+ transition: color 0.2s;
+ position: relative;
+}
+
+.nav-link::after {
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: var(--grad);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.3s;
+}
+
+.nav-link:hover,
+.nav-link--active {
+ color: var(--text);
+}
+
+.nav-link:hover::after,
+.nav-link--active::after {
+ transform: scaleX(1);
+}
+
+/* CTA */
+.nav-cta {
+ font-family: var(--mono);
+ font-size: 11px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--text);
+ padding: 10px 22px;
+ border: 1px solid rgba(217, 70, 239, 0.45);
+ background: rgba(217, 70, 239, 0.07);
+ transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+.nav-cta:hover {
+ border-color: var(--magenta);
+ box-shadow: 0 0 24px rgba(217, 70, 239, 0.2);
+ background: rgba(217, 70, 239, 0.14);
+}
+
+/* Hamburger */
+.nav-hamburger {
+ display: none;
+ flex-direction: column;
+ gap: 5px;
+ padding: 4px;
+ background: none;
+ border: none;
+}
+
+.nav-hamburger span {
+ display: block;
+ width: 22px;
+ height: 1.5px;
+ background: var(--text);
+ transition: transform 0.3s, opacity 0.3s;
+}
+
+.nav-hamburger--open span:nth-child(1) {
+ transform: translateY(6.5px) rotate(45deg);
+}
+.nav-hamburger--open span:nth-child(2) {
+ opacity: 0;
+}
+.nav-hamburger--open span:nth-child(3) {
+ transform: translateY(-6.5px) rotate(-45deg);
+}
+
+/* Mobile drawer */
+.nav-drawer {
+ position: fixed;
+ top: var(--nav-height);
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ background: rgba(5, 5, 8, 0.97);
+ backdrop-filter: blur(24px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transform: translateY(-100%);
+ opacity: 0;
+ pointer-events: none;
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
+ border-top: 1px solid var(--border);
+}
+
+.nav-drawer--open {
+ transform: translateY(0);
+ opacity: 1;
+ pointer-events: all;
+}
+
+.nav-drawer-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 98;
+}
+
+.nav-drawer-links {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 40px 24px;
+}
+
+.nav-drawer-link {
+ display: block;
+ font-family: var(--display);
+ font-weight: 700;
+ font-size: clamp(28px, 6vw, 48px);
+ color: var(--muted);
+ letter-spacing: -0.01em;
+ padding: 8px 0;
+ transition: color 0.2s;
+ width: 100%;
+ text-align: center;
+}
+
+.nav-drawer-link:hover {
+ color: var(--text);
+}
+
+.nav-drawer-cta {
+ display: inline-block;
+ margin-top: 16px;
+ font-family: var(--mono);
+ font-size: 12px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--text);
+ padding: 14px 32px;
+ border: 1px solid rgba(217, 70, 239, 0.5);
+ background: rgba(217, 70, 239, 0.1);
+}
+
+/* ─── RESPONSIVE ────────────────────────────────────────────── */
+@media (max-width: 900px) {
+ .nav {
+ padding: 0 20px;
+ }
+
+ .nav-links,
+ .nav-cta {
+ display: none;
+ }
+
+ .nav-hamburger {
+ display: flex;
+ }
+}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 0000000..fe46d7c
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import Logo from '../static/images/logo/E.png';
+import './Nav.css';
+
+const NAV_LINKS = [
+ { label: 'About', href: '/about' },
+ { label: 'Projects', href: '/projects' },
+ { label: 'Team', href: '/about#team' },
+ { label: 'Sponsors', href: '/sponsors' },
+ { label: 'Contact', href: '/contact' },
+];
+
+export default function Nav() {
+ const location = useLocation();
+ const [menuOpen, setMenuOpen] = useState(false);
+ const [scrolled, setScrolled] = useState(false);
+
+ useEffect(() => {
+ const onScroll = () => setScrolled(window.scrollY > 20);
+ window.addEventListener('scroll', onScroll, { passive: true });
+ return () => window.removeEventListener('scroll', onScroll);
+ }, []);
+
+ // Close drawer on route change
+ useEffect(() => { setMenuOpen(false); }, [location]);
+
+ return (
+ <>
+
+
+ {/* Mobile drawer */}
+
- {!drawerOpen && (
-
-
-
-
-
-
-
-
-
-
-
-
- ECLAIR
-
-
-
-
-
- Home
-
-
-
- {currentPath['/'] && ()}
-
-
-
- About
-
-
-
- {currentPath['/about'] && ()}
-
-
-
- Sponsors
-
-
-
- {currentPath['/sponsors'] && ()}
-
-
-
- What We Do
-
-
-
- {currentPath['/projects'] && ()}
-
-
-
- Contact Us
-
-
-
- {currentPath['/contact'] && ()}
-
+
+ {menuOpen && (
+ -
+ {NAV_LINKS.map(({ label, href }) => (
+
- + {label} + + ))} +
- + Partner With Us + +
setMenuOpen(false)} />
+ )}
+
+ );
+}
diff --git a/src/components/NavbarElement.tsx b/src/components/NavbarElement.tsx
deleted file mode 100644
index 352f773..0000000
--- a/src/components/NavbarElement.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-import { useState, useEffect, useRef } from 'react'
-import { useLocation } from 'react-router-dom';
-import '../styles/navbarelement.css'
-import { Link } from 'react-router-dom';
-
-interface Props {
- text: string;
- highlighted?: boolean;
- href: string;
- ref?: any;
- onclick?: () => void;
-}
-
-function NavbarElement(props: Props) {
- const location = useLocation();
- const [currentUrl, setCurrentUrl] = useState('');
- const elementRef = useRef(null);
-
- useEffect(() => {
-
-
- const elementBounds = elementRef.current?.getBoundingClientRect();
- console.log(elementBounds?.width);
- const width = elementBounds?.width;
- }, []);
-
- useEffect(() => {
-
- setCurrentUrl(location.pathname);
-
- }, [location.pathname]);
-
- return (
-
-
-
-
-
-
-
-
- );
-}
-export default memo(ResponsiveAppBar);
\ No newline at end of file
diff --git a/src/components/YoutubeEmbed.tsx b/src/components/YoutubeEmbed.tsx
deleted file mode 100644
index dddbe6d..0000000
--- a/src/components/YoutubeEmbed.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import '../styles/youtubeEmbed.css';
-function YoutubeEmbed() {
- return (
- (0);
+
+ useEffect(() => {
+ const cursor = document.getElementById('cursor');
+ const ring = document.getElementById('cursor-ring');
+ if (!cursor || !ring) return;
+
+ const onMove = (e: MouseEvent) => {
+ mx.current = e.clientX;
+ my.current = e.clientY;
+ cursor.style.left = `${e.clientX}px`;
+ cursor.style.top = `${e.clientY}px`;
+ };
+
+ const animRing = () => {
+ rx.current += (mx.current - rx.current) * 0.12;
+ ry.current += (my.current - ry.current) * 0.12;
+ ring.style.left = `${rx.current}px`;
+ ring.style.top = `${ry.current}px`;
+ rafId.current = requestAnimationFrame(animRing);
+ };
+
+ const onEnter = () => {
+ cursor.style.transform = 'translate(-50%, -50%) scale(2.2)';
+ ring.style.opacity = '0';
+ };
+
+ const onLeave = () => {
+ cursor.style.transform = 'translate(-50%, -50%) scale(1)';
+ ring.style.opacity = '1';
+ };
+
+ document.addEventListener('mousemove', onMove);
+ rafId.current = requestAnimationFrame(animRing);
+
+ // Expand on interactive elements
+ const interactives = document.querySelectorAll('a, button');
+ interactives.forEach((el) => {
+ el.addEventListener('mouseenter', onEnter);
+ el.addEventListener('mouseleave', onLeave);
+ });
+
+ return () => {
+ document.removeEventListener('mousemove', onMove);
+ cancelAnimationFrame(rafId.current);
+ interactives.forEach((el) => {
+ el.removeEventListener('mouseenter', onEnter);
+ el.removeEventListener('mouseleave', onLeave);
+ });
+ };
+ }, []);
+}
diff --git a/src/hooks/useReveal.ts b/src/hooks/useReveal.ts
new file mode 100644
index 0000000..5cfdd17
--- /dev/null
+++ b/src/hooks/useReveal.ts
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+/**
+ * Attaches IntersectionObserver to all .reveal elements on the page.
+ * Call once per page component in a useEffect.
+ */
+export function useReveal() {
+ useEffect(() => {
+ document.body.classList.add('js-loaded');
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ observer.unobserve(entry.target);
+ }
+ });
+ },
+ { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
+ );
+
+ const els = document.querySelectorAll('.reveal');
+ els.forEach((el) => observer.observe(el));
+
+ return () => observer.disconnect();
+ }, []);
+}
diff --git a/src/index.tsx b/src/index.tsx
index 149e3f0..4a288da 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import './styles/index.css';
+import './styles/globals.css';
import App from './pages/App';
const root = document.getElementById('root') as HTMLElement;
diff --git a/src/pages/About.css b/src/pages/About.css
new file mode 100644
index 0000000..300a90f
--- /dev/null
+++ b/src/pages/About.css
@@ -0,0 +1,277 @@
+/* ── MISSION ──────────────────────────────────────────────── */
+.about-mission {
+ padding: 120px 48px;
+ border-bottom: 1px solid var(--border);
+}
+
+.about-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 80px;
+ align-items: start;
+}
+
+.about-body {
+ font-family: var(--mono);
+ font-size: 14px;
+ line-height: 1.85;
+ color: var(--muted);
+ margin-top: 32px;
+}
+
+.about-body p + p { margin-top: 18px; }
+.about-body strong { color: var(--text); font-weight: 500; }
+
+.terminal-box {
+ background: var(--surface2);
+ border: 1px solid var(--border);
+ font-family: var(--mono);
+}
+
+.terminal-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 14px;
+ background: var(--surface3);
+ border-bottom: 1px solid var(--border);
+}
+
+.t-dot {
+ width: 10px; height: 10px;
+ border-radius: 50%;
+ display: inline-block;
+}
+
+.t-dot:nth-child(1) { background: #ff5f57; }
+.t-dot:nth-child(2) { background: #febc2e; }
+.t-dot:nth-child(3) { background: #28c840; }
+
+.terminal-title {
+ font-size: 10px;
+ color: var(--lo);
+ letter-spacing: 0.1em;
+ margin: 0 auto;
+}
+
+.terminal-body {
+ padding: 20px 22px;
+ font-size: 12px;
+ line-height: 2;
+ color: var(--muted);
+}
+
+.t-prompt { color: var(--magenta); }
+.t-hi { color: var(--violet); }
+.t-dim { color: var(--lo); }
+
+.t-cursor {
+ display: inline-block;
+ width: 7px; height: 13px;
+ background: var(--magenta);
+ vertical-align: middle;
+ animation: blink 1s step-end infinite;
+}
+
+/* ── TEAM ─────────────────────────────────────────────────── */
+.team-section {
+ background: var(--surface);
+ padding: 120px 48px;
+ border-top: 1px solid var(--border);
+}
+
+.team-divider {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--lo);
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-top: 64px;
+ margin-bottom: 24px;
+}
+
+.team-divider::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: var(--border);
+}
+
+.team-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2px;
+}
+
+/* ── MEMBER CARD ───────────────────────────────────────────── */
+.member-card {
+ position: relative;
+ border: 1px solid var(--border);
+ overflow: hidden;
+ cursor: pointer;
+ transition: border-color 0.3s;
+ aspect-ratio: 3 / 4;
+}
+
+.member-card:hover,
+.member-card--open {
+ border-color: rgba(217, 70, 239, 0.45);
+}
+
+.member-photo {
+ position: absolute;
+ inset: 0;
+}
+
+.member-photo img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center top;
+ display: block;
+ transition: opacity 0.35s ease;
+}
+
+.member-card--open .member-photo img {
+ opacity: 0.15;
+}
+
+.member-initials {
+ width: 100%;
+ height: 100%;
+ background: var(--surface2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.member-initials span {
+ font-size: 48px;
+ font-weight: 800;
+ background: var(--grad);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+/* Gradient scrim + nameplate */
+.member-nameplate {
+ position: absolute;
+ bottom: 0; left: 0; right: 0;
+ padding: 14px 16px 18px;
+ z-index: 2;
+ background: linear-gradient(to top, rgba(5,5,8,0.92) 0%, transparent 100%);
+ transition: opacity 0.3s ease;
+}
+
+.member-card--open .member-nameplate {
+ opacity: 0;
+}
+
+.member-name {
+ font-size: 15px;
+ font-weight: 700;
+ line-height: 1.2;
+ color: #f0f0f8;
+}
+
+.member-role {
+ font-family: var(--mono);
+ font-size: 10px;
+ color: rgba(240, 240, 248, 0.45);
+ margin-top: 4px;
+ letter-spacing: 0.06em;
+}
+
+/* Bio overlay: fades in over the dimmed image */
+.member-overlay {
+ position: absolute;
+ inset: 0;
+ z-index: 3;
+ opacity: 0;
+ transition: opacity 0.35s ease;
+ pointer-events: none;
+ display: flex;
+ align-items: flex-end;
+}
+
+.member-card--open .member-overlay {
+ opacity: 1;
+ pointer-events: all;
+}
+
+.member-overlay-inner {
+ padding: 20px 18px 48px;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.member-bio {
+ font-family: var(--mono);
+ font-size: 12px;
+ color: rgba(240, 240, 248, 0.75);
+ line-height: 1.75;
+ font-style: italic;
+}
+
+.member-links {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.member-link {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.08em;
+ padding: 5px 12px;
+ border: 1px solid rgba(255,255,255,0.12);
+ color: rgba(240, 240, 248, 0.5);
+ transition: border-color 0.2s, color 0.2s;
+}
+
+.member-link:hover {
+ border-color: rgba(139, 92, 246, 0.5);
+ color: #8b5cf6;
+}
+
+.member-hint {
+ position: absolute;
+ top: 12px; right: 12px;
+ z-index: 4;
+ width: 26px; height: 26px;
+ background: rgba(5, 5, 8, 0.7);
+ border: 1px solid rgba(255,255,255,0.07);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ color: rgba(240, 240, 248, 0.45);
+ transition: border-color 0.2s, color 0.2s;
+}
+
+.member-card--open .member-hint {
+ border-color: rgba(217, 70, 239, 0.5);
+ color: #d946ef;
+}
+
+/* ─── RESPONSIVE ────────────────────────────────────────────── */
+@media (max-width: 1100px) {
+ .team-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 900px) {
+ .about-mission { padding: 80px 24px; }
+ .about-grid { grid-template-columns: 1fr; gap: 48px; }
+ .team-section { padding: 80px 24px; }
+ .team-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 500px) {
+ .team-grid { grid-template-columns: 1fr; }
+}
\ No newline at end of file
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 1eb7aff..71ec270 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,192 +1,133 @@
-import React, {useState, useRef, useEffect} from 'react'
-import Grid from '@mui/material/Grid';
-import Loader from '../components/Loader'
-import OfficerCard from '../components/about/OfficerCard'
-import '../styles/about/about.css'
-import aboutUsBackground from '../static/vectors/about-us-background.svg'
-import foundersBackground from '../static/vectors/founders-background.svg'
-import foundersBackground2 from '../static/vectors/founders-background-2.svg'
-import {
- OFFICER_KEYS,
- OFFICER_NAMES,
- OFFICER_POSITIONS,
- OFFICER_EMAILS,
- OFFICER_LINKED_INS,
- OFFICER_DESCS,
- OFFICER_FUN_IMAGES,
- CUR_TECH_LEAD_KEYS,
- TECH_LEAD_NAMES,
- TECH_LEAD_EMAILS,
- TECH_LEAD_LINKED_INS,
- TECH_LEAD_DESCS,
- TECH_LEAD_FUN_IMAGES,
-} from "../static/constants/About";
+import React, { useState } from 'react';
+import { useReveal } from '../hooks/useReveal';
+import { OFFICERS, FOUNDERS } from '../data/officers';
+import type { Officer } from '../data/officers';
+import './About.css';
-import {
- PROJECT_NAMES
-} from "../static/constants/Projects"
-import conradImg from '../static/images/officer/conrad.webp'
-import sahilImg from '../static/images/officer/sahil.webp'
-import JoinUs from '../components/general/JoinUs';
+export default function About() {
+ useReveal();
-function About() {
- const [aBGLoaded, setABGLoaded] = useState(false);
- const aBGDivRef = useRef(null);
- const aElementRef = useRef(null);
-
- const[resize, isResized] = useState(false);
-
- useEffect(() => {
- if (aBGDivRef.current && aElementRef.current) {
- const divHeight = aBGDivRef.current.clientHeight;
- aElementRef.current.style.height = `${divHeight}px`;
- }
- }, [resize]);
-
-
- function handleResize() {
- // setABGLoaded(false);
- isResized(!resize);
- }
- window.addEventListener('resize', handleResize);
-
- function wrapperFunction() {
- setABGLoaded(true);
- }
-
- async function handleLoad() {
- setTimeout(wrapperFunction, 0)
-
- }
return (
- <>
-
-
-
-
- 
-
-
-
- )
-}
-
-export default NavbarElement
diff --git a/src/components/ResponsiveAppBar.tsx b/src/components/ResponsiveAppBar.tsx
deleted file mode 100644
index 5aa56c6..0000000
--- a/src/components/ResponsiveAppBar.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import * as React from 'react';
-import { memo, useState, useEffect } from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
-import NavbarElement from './NavbarElement';
-import { createTheme } from '@mui/material/styles';
-import { ThemeProvider } from '@emotion/react';
-import { useNavigate } from 'react-router-dom';
-import '../styles/navbar.css';
-
-
-function ResponsiveAppBar() {
-
- const navigate = useNavigate();
-
- useEffect(() => {
- window.scrollTo(0, 0);
- }, [navigate]);
-
- const theme = createTheme({
- palette: {
- primary: {
- // light: will be calculated from palette.primary.main,
- main: '#2d354948',
- },
- secondary: {
- light: '#0066ff',
- main: '#0044ff',
- // dark: will be calculated from palette.secondary.main,
- contrastText: '#ffcc00',
- },
- },
- });
-
- const titleStyle = {
- background: 'linear-gradient(to right, #20c997, #ff77ff)',
- backgroundClip: 'text',
- WebkitBackgroundClip: 'text',
- color: 'transparent',
- alignItems: 'center',
- display: 'flex',
- justifyContent: 'center',
-
- }
-
- return (
-
- {props.text}
-
-
- { props.href===currentUrl &&()}
-
-
-
-
- ECLAIR
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default YoutubeEmbed
diff --git a/src/data/officers.ts b/src/data/officers.ts
new file mode 100644
index 0000000..5767873
--- /dev/null
+++ b/src/data/officers.ts
@@ -0,0 +1,117 @@
+import arnavImg from '../static/images/officer/arnav.webp';
+import cameronImg from '../static/images/officer/cameron.webp';
+import manasImg from '../static/images/officer/manas.webp';
+import manavImg from '../static/images/officer/manav.webp';
+import nogaImg from '../static/images/officer/noga.webp';
+import zoeImg from '../static/images/officer/zoe.webp';
+import nuzhatImg from '../static/images/officer/nuzhat.webp';
+import rizkyImg from '../static/images/officer/rizky.webp';
+// import vishnuImg from '../static/images/officer/vishnu.webp';
+import sahilImg from '../static/images/officer/sahil.webp';
+import conradImg from '../static/images/officer/conrad.webp';
+export interface Officer {
+ initials: string;
+ name: string;
+ role: string;
+ bio: string;
+ email?: string;
+ linkedin?: string;
+ img?: string; // ← add this
+
+}
+
+export const OFFICERS: Officer[] = [
+ {
+ initials: 'AJ',
+ name: 'Arnav Joshi',
+ role: 'President',
+ bio: "Hi, I'm Arnav! I'm a third year C.S. major minoring in robotics. I've been making robots going on six years now, and particularly enjoy being somewhere in between the hardware and the software. In other news, I like running, climbing, hiking (motion may be a trend here), and playing music, and just about any sport. Open to song recommendations, welcome to ECLAIR",
+ email: 'arnavjoshi@utexas.edu',
+ img: arnavImg
+ },
+ {
+ initials: 'CC',
+ name: 'Cameron Cox',
+ role: 'Vice President',
+ bio: "CS major, robotics minor. I love combat robotics and dream of making robots that improve home life. Piano, chess, D&D, Zelda, singing, and ballroom dance when I'm not building.",
+ email: 'cameron.cox@utexas.edu',
+ img: cameronImg
+ },
+ {
+ initials: 'MA',
+ name: 'Manas Agrawal',
+ role: 'Corporate Relations Director',
+ bio: "Hi, my name is Manas. I'm the CR director at ECLAIR. I'm majoring in Computer Science and have a minor in Robotics. I love TTRPGs, swimming, and trying out new foods. I'm super interested in Robot Perception and Computer Vision. Join me in CRACKLE (the best ECLAIR Project). We have tons of fun!",
+ email: 'manas.agrawal2@utexas.edu',
+ img: manasImg
+ },
+ {
+ initials: 'MK',
+ name: 'Manav Karonde',
+ role: 'Events Director · C.R.A.C.K.L.E. Lead',
+ bio: "Hello friend, My name is Manav and I'm a sophmore in Computer Science here at UT. I've lived in Austin for the past decade, but am from New York originally. I've spent the past two semesters on CRACKLE, but when I'm not doing that or building wacky personal robotics projects, I like to play the drums / guitar (especially rock punk and blues), dabble in photography, drive around windows down with my dog, or just stare at a blank wall and contemplate life.",
+ email: 'karonde.manav@gmail.com',
+ img : manavImg
+ },
+ {
+ initials: 'NR',
+ name: 'Noga Rosenberg',
+ role: 'Outreach Director',
+ bio: "CS major interested in software development and cybersecurity. Video games, TTRPGs, and watching too many movies in my free time.",
+ email: 'noga.rosenberg007@gmail.com',
+ img: nogaImg
+ },
+ {
+ initials: 'ZV',
+ name: 'Zoe Vo',
+ role: 'Public Relations Director',
+ bio: "Hi I'm Zoe and I'm a Mechanical Engineering major. My favorite book series, movie franchise, and religion is The Hunger Games. Please marry me Thida",
+ email: 'zk4thyv@gmail.com',
+ img: zoeImg
+ },
+ {
+ initials: 'NN',
+ name: 'Nuzhat Nabi',
+ role: 'Technology Director',
+ bio: "Hello! My name is Nuzhat. I am a Computer Science major interested in robotics, AI, and full-stack web development. I mainly do software stuff but hoping to learn more hardware content. I enjoy playing games (board, card, and video games) and hanging out with friends.",
+ email: 'nuzhat.nabi@utexas.edu',
+ img: nuzhatImg
+ },
+ {
+ initials: 'RP',
+ name: 'Rizky Pratama',
+ role: 'Financial Director · TAKOS Lead',
+ bio: "CS major from Katy, TX. Into robotics, computer vision, and AI. I boulder, dance, play D&D, and eat lots. Never challenge me to a card game.",
+ email: 'rapratama2005@gmail.com',
+ img: rizkyImg
+ },
+ {
+ initials: 'VS',
+ name: 'Vishnu Sharma',
+ role: 'Freshman Representative',
+ bio: "CS major from New Jersey, interested in software, AI, and robotics. I like reading, learning new things, and hanging out with friends.",
+ email: 'vishnuamogha.sharma@gmail.com',
+ // img: vishnuImg
+ },
+];
+
+export const FOUNDERS: Officer[] = [
+ {
+ initials: 'SJ',
+ name: 'Sahil Jain',
+ role: 'Co-Founder',
+ bio: "Software developer interested in robotics, creative writing, and pandas (especially those that know kung fu).",
+ email: 'sahil.jain.1@outlook.com',
+ linkedin: 'https://www.linkedin.com/in/sahil-jain-ab012614b/',
+ img: sahilImg
+ },
+ {
+ initials: 'CL',
+ name: 'Conrad Li',
+ role: 'Co-Founder',
+ bio: "Recently graduated CS, neuroscience, and chemistry major from UT Austin. Aspiring physician at the intersection of medicine and technology.",
+ email: 'conradliste@utexas.edu',
+ linkedin: 'https://www.linkedin.com/in/conradfli/',
+ img: conradImg
+ },
+];
diff --git a/src/data/projects.ts b/src/data/projects.ts
new file mode 100644
index 0000000..dd0b80f
--- /dev/null
+++ b/src/data/projects.ts
@@ -0,0 +1,225 @@
+export interface Project {
+ id: string;
+ num: string;
+ category: string;
+ name: string;
+ description: string;
+ tags: string[];
+ leads: string[];
+ status: 'active' | 'completed';
+ github?: string;
+ teamPage?: string;
+ img?: string;
+}
+
+export const PROJECTS: Project[] = [
+ // ── ACTIVE ────────────────────────────────────────────────
+ {
+ id: 'crackle',
+ num: '01',
+ category: 'Manipulation · AI',
+ name: 'C.R.A.C.K.L.E.',
+ description: "Emulating DUM-E from Iron Man — a robotic arm that resolves spoken voice commands into dynamically generated execution plans via GPT. Can perform any physically possible task a user requests.",
+ tags: ['GPT', 'ROS2', 'Voice', 'Planning'],
+ leads: ['Tanay Garg', 'Manav Karonde'],
+ status: 'active',
+ github: 'https://github.com/ECLAIR-Robotics/crackle',
+ teamPage: 'https://befitting-galliform-d9c.notion.site/Crackle-Teamspace-Home-9e32fd2ea0ca4e4695607c16f522433f',
+ },
+ {
+ id: 'auto-car',
+ num: '02',
+ category: 'Autonomy · NLP',
+ name: 'Autonomous Car',
+ description: "A fully autonomous RC car with natural language intake and feedback, building a greater bond of trust between user and vehicle — an open problem the industry is still tackling today.",
+ tags: ['NLP', 'OpenCV', 'ROS2', 'Autonomy'],
+ leads: ['Marcus Fojas', 'Victor Sanchez'],
+ status: 'active',
+ github: 'https://github.com/MaxGamer1312/autonomous-car',
+ },
+ {
+ id: 'mcqueen',
+ num: '03',
+ category: 'RL · Racing',
+ name: 'McQueen',
+ description: "Training and fine-tuning reinforcement learning models to navigate a racetrack at speed, working with an AWS DeepRacer autonomous racecar platform.",
+ tags: ['Reinforcement Learning', 'AWS DeepRacer', 'Fine-Tuning'],
+ leads: ['Suhas Voolla', 'Yash Karandikar'],
+ status: 'active',
+ teamPage: 'https://www.notion.so/Radiator-Springs-Home-2d8d0549950a8159a688e2ea12b16581',
+ },
+ {
+ id: 'takos',
+ num: '04',
+ category: 'Bio-Inspired · Hardware',
+ name: 'TAKOS',
+ description: "The Tactile Appendage Kinematic Octopus System explores biomimicry of octopus features — dexterous flexible tentacles, environmental camouflage, and independent limb actuation for a variety of robotic applications.",
+ tags: ['Biomimicry', 'Kinematics', 'SBC', 'Pneumatics'],
+ leads: ['Christopher Elwood', 'Rizky Pratama'],
+ status: 'active',
+ teamPage: 'https://www.notion.so/TAKOS-Tactile-Appendage-Kinematic-Octopus-System-2a47d39cd23f80e2b943d0dd4f9c8010',
+ },
+ {
+ id: 'eye-tracker',
+ num: '05',
+ category: 'Computer Vision · Assistive',
+ name: 'Eye Tracker',
+ description: "A low-cost, accurate eye-tracking system using computer vision — enabling assistive technology for individuals with disabilities, user experience research, and interactive gaming.",
+ tags: ['Computer Vision', 'OpenCV', 'Assistive Tech'],
+ leads: ['Dev Patel'],
+ status: 'active',
+ teamPage: 'https://www.notion.so/invite/d4e646c11b954dc0323659094bb4b41c3d7c56cd',
+ },
+ {
+ id: 'beginners-track',
+ num: '06',
+ category: 'Education · Hardware',
+ name: "Beginner's Track",
+ description: "A hands-on intro to robotics for freshmen. Students learn to build and program small robots that play soccer — a fun entry point into hardware and embedded systems.",
+ tags: ['Education', 'Embedded', 'Hardware'],
+ leads: [],
+ status: 'active',
+ },
+
+ // ── COMPLETED ─────────────────────────────────────────────
+ {
+ id: 'trace',
+ num: '07',
+ category: 'Controls · CV',
+ name: 'T.R.A.C.E.',
+ description: "Tracks and controls the position of a ball on a tilting platform — a basic two-DOF control system that also implements computer vision.",
+ tags: ['Controls', 'Computer Vision', 'Simulation'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/TRACE',
+ teamPage: 'https://www.notion.so/TRACE-18feaa211e138031b1b3cc379fa48413',
+ },
+ {
+ id: 'texel-arts',
+ num: '08',
+ category: 'ML · Animation',
+ name: 'Texel Arts',
+ description: "A machine learning system that takes videos and transforms them into animation files applied on given rigs — an online library of continuously updated, readily downloadable animations.",
+ tags: ['ML', 'Animation', 'Computer Vision'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/Umer-K-PersonOOO/Texel-Art-Media',
+ teamPage: 'https://eclair-texel-arts.notion.site/Texel-Arts-19ac77b011c880428939f28b8f068d94',
+ },
+ {
+ id: 'epic',
+ num: '09',
+ category: 'Controls · Hardware',
+ name: 'E.P.I.C.',
+ description: "An expressive self-balancing robot exploring PID control, computer vision, sensor interfacing, and custom PCB design. Features an LCD face that adjusts expressions based on stability.",
+ tags: ['PID', 'ESP32', 'PCB', 'Computer Vision'],
+ leads: [],
+ status: 'completed',
+ teamPage: 'https://docs.google.com/document/d/1gbFuBh5Rj6CCqdpV75lZLSzmt4x5dXSdN6iSoQHVaYI/edit',
+ },
+ {
+ id: 'duckduckflow',
+ num: '10',
+ category: 'IoT · Environmental',
+ name: 'DuckDuckFlow',
+ description: "A wireless, solar-powered water level monitoring device for flood-prone zones in the Hill Country. Provides real-time early flood detection to help emergency services respond faster.",
+ tags: ['IoT', 'Solar', 'Sensors', 'Open Source'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/duck-duck-flow',
+ teamPage: 'https://www.notion.so/DuckDuckHome-22fd0549950a8075bed4d31c18fd877b',
+ },
+ {
+ id: 'pcr',
+ num: '11',
+ category: 'Biotech · Automation',
+ name: 'P.C.R.',
+ description: "Automating PCR — a medical technique used to duplicate DNA. All individual components were built and integrated, culminating in a published research paper.",
+ tags: ['Automation', 'Biotech', 'Research'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/PCR_Automation',
+ teamPage: 'https://docs.google.com/spreadsheets/d/1qEEfA078V_SaOaCuu-pih-EUJhn9BdbRNVKUYMlfKlY/edit',
+ },
+ {
+ id: 'chess-teacher',
+ num: '12',
+ category: 'CV · Robotics',
+ name: 'Chess Teacher',
+ description: "A robot that plays chess and teaches the player how to improve. Uses overhead computer vision for board state, and an in-house chess engine for comprehensive positional understanding.",
+ tags: ['Computer Vision', 'Chess Engine', 'Robotics'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/Chess_Teacher',
+ teamPage: 'https://docs.google.com/spreadsheets/d/1CbTH5hqcQgmXZnDkoqhe9yYVnaWjdlhSyqxfz_0mcEA/edit',
+ },
+ {
+ id: 'autonomous-drone',
+ num: '13',
+ category: 'Autonomy · Aerial',
+ name: 'Autonomous Drone',
+ description: "A hexacopter drone programmed to navigate and perform tasks autonomously using a suite of cameras and sensors — indoor mapping, trash pickup, and search missions.",
+ tags: ['ROS', 'ArduCopter', 'Autonomy', 'Aerial'],
+ leads: [],
+ status: 'completed',
+ teamPage: 'https://docs.google.com/spreadsheets/d/1HXZt8AaNJ8NgtD4zdfVyAx9iu88J-shJCg4XmMV2MSs/edit',
+ },
+ {
+ id: 'music-mood',
+ num: '14',
+ category: 'NLP · ML',
+ name: 'Music Mood',
+ description: "Fine-tuned a large language model to associate emotions with songs via lyrics, then used it to analyze Spotify profiles and playlists for emotional content.",
+ tags: ['NLP', 'LLM', 'Spotify', 'Fine-Tuning'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/Song-Analysis',
+ teamPage: 'https://docs.google.com/spreadsheets/d/1X8J35_nY-nvYd4q41Xf4_2WzTLX5uL0LTaCeWgZsZ2c/edit',
+ },
+ {
+ id: 'robotic-arm',
+ num: '15',
+ category: 'Kinematics · Hardware',
+ name: 'Robotic Arm',
+ description: "Implementing inverse kinematics and advanced software features on a robotic arm to deepen understanding of arm construction and motion planning.",
+ tags: ['Inverse Kinematics', 'Motion Planning', 'Hardware'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/RoboticArm-',
+ },
+ {
+ id: 'fitness-tracker',
+ num: '16',
+ category: 'ML · Wearable',
+ name: 'Fitness Tracker',
+ description: "A smart fitness band that tracks reps and measures form using IMU sensor data and an ML model — provides real-time suggestions based on common form errors.",
+ tags: ['IMU', 'ML', 'Wearable', 'Health'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/fitness-tracker',
+ teamPage: 'https://docs.google.com/spreadsheets/d/1X8J35_nY-nvYd4q41Xf4_2WzTLX5uL0LTaCeWgZsZ2c/edit',
+ },
+ {
+ id: 'smart-mirror',
+ num: '17',
+ category: 'HCI · Hardware',
+ name: 'Smart Mirror',
+ description: "A modified Samsung infrared TV converted into a functional smart mirror capable of interacting with a user and performing basic utility functions.",
+ tags: ['HCI', 'Hardware', 'Display'],
+ leads: [],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/Smart-Mirror',
+ teamPage: 'https://docs.google.com/spreadsheets/d/1cCVkAxT6YRqcerKprb5HxVsnR_jYmP8Ai7Nvbnz0M0I/edit',
+ },
+ {
+ id: 'hydroponics',
+ num: '18',
+ category: 'Automation · AgTech',
+ name: 'Hydroponics',
+ description: "An automated hydroponic garden — autonomous nutrient delivery, environmental monitoring, and growth tracking.",
+ tags: ['Automation', 'AgTech', 'Sensors'],
+ leads: [],
+ status: 'completed',
+ teamPage: 'https://www.notion.so/Autonomous-Hydroponics-de7db5da18214e42a170f000432b0deb',
+ },
+];
\ No newline at end of file
diff --git a/src/hooks/useCursor.ts b/src/hooks/useCursor.ts
new file mode 100644
index 0000000..e1fa7ac
--- /dev/null
+++ b/src/hooks/useCursor.ts
@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Wires up the custom magenta cursor + lagging ring.
+ * Attach cursor div IDs: #cursor and #cursor-ring to your layout.
+ */
+export function useCursor() {
+ const mx = useRef(0);
+ const my = useRef(0);
+ const rx = useRef(0);
+ const ry = useRef(0);
+ const rafId = useRefAbout Us
-
-
-
-
-
- {OFFICER_KEYS.map((key) => (
-
-
- ))}
-
-
-
+
+
+ {/* ── MISSION ─────────────────────────────────────────── */}
+
+
-
-
-
-
-
-
-
+
-
+ We build robots.
+
+
- About ECLAIR
+ We build robots.
We build community.
+
+
+
+ ECLAIR — Engineering & Computational Learning of AI in Robotics — + is an undergraduate organization in the Department of Computer Science + at the University of Texas at Austin. +
++ We provide hardware, funding, and mentorship so any + student with a robotics idea can build it. From neural networks to + reinforcement learning, we teach the techniques that make robots intelligent. +
++ We meet every Monday and Thursday, 6–8 PM at the + Gates-Dell Complex. Drop in, pitch a project, and start building. +
+
-
- {CUR_TECH_LEAD_KEYS.map((key) => {
- const projectKey = key.replace(/[0-9]/g, "");
- const projectName = PROJECT_NAMES[projectKey];
-
- return (
-
-
- );
- })}
-
-
-
-
-
+ {/* Terminal */}
+
+
+
+
+
+ eclair — bash
+
+
+
+
+
+
+ ~ ./eclair --init
+ Loading ECLAIR environment...
+ ~ status --all
+ ✓ Projects active: 5
+ ✓ Members: 30+ undergrads
+ ✓ Stack: ROS2 · PyTorch · OpenCV
+ ✓ Facilities: GDC · AHG · Makerspace
+ ~ meetings --schedule
+ → Mon & Thu 6:00 PM GDC Bridges
+ ~ git clone eclair/your-project
+
-
-
-
-
-
-
+ {/* ── OFFICERS ────────────────────────────────────────── */}
+
+
-
-
+ );
+}
+function MemberCard({ officer, delay }: { officer: Officer; delay: number }) {
+ const [open, setOpen] = useState(false);
- The People
+ Leadership & Leads
+Officers
+
+ {OFFICERS.map((officer, i) => (
+
+ Founders
+
+ {FOUNDERS.map((founder, i) => (
+
-
+ return (
+
+ (false);
- const [isSmol, setIsSmol] = useState(false);
+// ─── App shell ─────────────────────────────────────────────────────────────
+function AppShell() {
+ useCursor();
- useEffect(() => {
- const handleResize = () => {
-
- setIsSmol(window.innerWidth < 1000);
- };
- const userAgent = navigator.userAgent.toLowerCase();
+ return (
+ <>
+ {/* Atmosphere layers */}
+
+
+
+
+ {/* Custom cursor */}
+
+
+
+
+
+
+
+
+
- setIsMobile(/iphone|ipad|ipod|android|blackberry|windows phone/.test(userAgent));
- // Attach event listener for window resize
- window.addEventListener('resize', handleResize);
+
+
+ );
+}
- }, []);
+export default function App() {
return (
-
-
-
-
+
- )
+ );
}
-
-export default App
\ No newline at end of file
diff --git a/src/pages/Contact.css b/src/pages/Contact.css
new file mode 100644
index 0000000..ea1568f
--- /dev/null
+++ b/src/pages/Contact.css
@@ -0,0 +1,165 @@
+.contact-section {
+ padding: 120px 48px 100px;
+}
+
+.contact-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 80px;
+ margin-top: 64px;
+}
+
+.contact-info h3 {
+ font-size: 24px;
+ font-weight: 800;
+ line-height: 1.2;
+ margin-bottom: 16px;
+}
+
+.contact-info p {
+ font-family: var(--mono);
+ font-size: 13px;
+ color: var(--muted);
+ line-height: 1.8;
+ margin-bottom: 32px;
+}
+
+.contact-links {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.contact-link {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ font-family: var(--mono);
+ font-size: 12px;
+ color: var(--muted);
+ transition: color 0.3s, border-color 0.3s;
+ padding: 13px 16px;
+ border: 1px solid var(--border);
+ background: var(--surface2);
+}
+
+.contact-link:hover {
+ color: var(--text);
+ border-color: var(--border-hi);
+}
+
+.contact-link-icon {
+ width: 28px;
+ height: 28px;
+ background: var(--grad);
+ opacity: 0.7;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ flex-shrink: 0;
+}
+
+/* Form */
+.contact-form {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 7px;
+}
+
+.form-label {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.form-input {
+ background: var(--surface2);
+ border: 1px solid var(--border);
+ color: var(--text);
+ font-family: var(--mono);
+ font-size: 13px;
+ padding: 13px 17px;
+ outline: none;
+ transition: border-color 0.3s;
+ resize: none;
+}
+
+.form-input:focus {
+ border-color: rgba(139, 92, 246, 0.55);
+}
+
+.form-input::placeholder {
+ color: var(--lo);
+}
+
+textarea.form-input {
+ min-height: 120px;
+ resize: vertical;
+}
+
+.form-error {
+ font-family: var(--mono);
+ font-size: 11px;
+ color: #f87171;
+ padding: 8px 12px;
+ border: 1px solid rgba(248, 113, 113, 0.3);
+ background: rgba(248, 113, 113, 0.05);
+}
+
+.form-submit {
+ align-self: flex-start;
+}
+
+.form-submit:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+/* Success state */
+.form-success {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ height: 320px;
+ border: 1px solid var(--border);
+ background: var(--surface2);
+ text-align: center;
+}
+
+.form-success-icon {
+ width: 48px; height: 48px;
+ border-radius: 50%;
+ background: var(--grad);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ color: white;
+}
+
+.form-success-text {
+ font-weight: 700;
+ font-size: 18px;
+}
+
+.form-success-sub {
+ font-family: var(--mono);
+ font-size: 12px;
+ color: var(--muted);
+}
+
+@media (max-width: 900px) {
+ .contact-section { padding: 80px 24px; }
+ .contact-grid { grid-template-columns: 1fr; gap: 48px; }
+}
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index f497086..25e8a8b 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -1,58 +1,152 @@
-import React, { useEffect, useRef, useState } from 'react';
-import '../styles/contact.css';
-import divider from '../static/vectors/contactDivider.svg';
-import cBG from '../static/vectors/contactBackground.svg';
-import Mailer from '../components/contact/Mailer';
-import Loader from '../components/Loader';
-
-
-function Contact() {
- const [cBGLoaded, setCBGLoaded] = useState(false);
- const cBGDivRef = useRef(null);
- const sElementRef = useRef(null);
-
- const[resize, isResized] = useState(false);
-
- useEffect(() => {
- if (cBGDivRef.current && sElementRef.current) {
- const divHeight = cBGDivRef.current.clientHeight;
- sElementRef.current.style.height = `${divHeight}px`;
+import React, { useRef, useState } from 'react';
+import emailjs from '@emailjs/browser';
+import { useReveal } from '../hooks/useReveal';
+import './Contact.css';
+
+export default function Contact() {
+ useReveal();
+
+ const formRef = useRef(null);
+ const [sent, setSent] = useState(false);
+ const [sending, setSending] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!formRef.current) return;
+
+ const name = formRef.current.querySelector('#name')?.value;
+ const email = formRef.current.querySelector('#email')?.value;
+
+ if (!name || !email) {
+ setError('Please fill out all required fields.');
+ return;
}
- }, [resize]);
-
-
- function handleResize() {
- // setCBGLoaded(false);
- isResized(!resize);
- }
- window.addEventListener('resize', handleResize);
-
- function wrapperFunction() {
- setCBGLoaded(true);
- }
-
- async function handleLoad() {
- setTimeout(wrapperFunction, 0)
- }
-
+
+ setSending(true);
+ setError('');
+
+ try {
+ await emailjs.sendForm(
+ 'service_lf68y8i',
+ 'template_a7v3kjq',
+ formRef.current,
+ 'NIC61fRJW1mmr-YPC'
+ );
+ setSent(true);
+ } catch (err) {
+ setError('Something went wrong. Please email us directly.');
+ } finally {
+ setSending(false);
+ }
+ };
+
return (
- <>
-
setOpen(!open)}
+ >
+
+ );
+}
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 60513f7..670d2b8 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -1,86 +1,76 @@
-import React, { useState, useEffect } from 'react'
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import About from './About';
+import React, { useEffect } from 'react';
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
+import { initializeApp } from 'firebase/app';
+
+import Nav from '../components/Nav';
+import Footer from '../components/Footer';
import Homepage from './Homepage';
+import About from './About';
import Projects from './Projects';
-import ResponsiveAppBar from '../components/ResponsiveAppBar';
-import Contact from './Contact';
-import Footer from '../components/Footer';
import Sponsors from './Sponsors';
-import EclairDrawer from '../components/EclairDrawer';
-// Import the functions you need from the SDKs you need
-import { initializeApp } from "firebase/app";
+import Contact from './Contact';
+
+import { useCursor } from '../hooks/useCursor';
+import '../styles/globals.css';
+// ─── Firebase ──────────────────────────────────────────────────────────────
const firebaseConfig = {
- apiKey: "AIzaSyApKv2_Muv15F14Vfuo04rwuqxUcTtMy9o",
- authDomain: "eclair-website-387316.firebaseapp.com",
- projectId: "eclair-website-387316",
- storageBucket: "eclair-website-387316.appspot.com",
- messagingSenderId: "664767979379",
- appId: "1:664767979379:web:7904edda15a1350c3b6f06",
- measurementId: "G-XVQ8FB05W1"
+ apiKey: 'AIzaSyApKv2_Muv15F14Vfuo04rwuqxUcTtMy9o',
+ authDomain: 'eclair-website-387316.firebaseapp.com',
+ projectId: 'eclair-website-387316',
+ storageBucket: 'eclair-website-387316.appspot.com',
+ messagingSenderId: '664767979379',
+ appId: '1:664767979379:web:7904edda15a1350c3b6f06',
+ measurementId: 'G-XVQ8FB05W1',
};
+initializeApp(firebaseConfig);
-
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-
-const homepage = () => {
- return
+ {officer.img
+ ? 
+ :
- {officer.initials}
+ }
-
-
- )
-}
+
+
- Where to find us!
-
-
- We meet in the Gates-Dell Complex, home of UT CS!
-
+
+
-
- {officer.name}
+ {officer.role}
+
-export default About
+
+ {officer.bio &&
+ "{officer.bio}"
} + e.stopPropagation()}>
+ {officer.linkedin && (
+
+ LinkedIn ↗
+
+ )}
+ {officer.email && (
+
+ Email ↗
+
+ )}
+
+ {open ? '✕' : '+'}
+
-
- {isMobile || isSmol ? (
-
- Contact Us
-
-
-
- 
-
-
- { (null);
- const hElementRef = useRef(null);
-
- const [resize, isResized] = useState(false);
-
- useEffect(() => {
- if (hBGDivRef.current && hElementRef.current) {
- const divHeight = hBGDivRef.current.clientHeight;
- hElementRef.current.style.height = `${divHeight}px`;
- }
- }, [resize]);
-
-
- function handleResize() {
- // setHBGLoaded(false);
- isResized(!resize);
- }
- window.addEventListener('resize', handleResize);
-
- function wrapperFunction() {
- setHBGLoaded(true);
- }
-
- async function handleLoad() {
- setTimeout(wrapperFunction, 0)
-
- }
return (
+
+
+
+
+
+ );
}
-
-export default Contact
diff --git a/src/pages/Homepage.css b/src/pages/Homepage.css
new file mode 100644
index 0000000..d3cb77a
--- /dev/null
+++ b/src/pages/Homepage.css
@@ -0,0 +1,246 @@
+.page-wrapper {
+ padding-top: var(--nav-height);
+ position: relative;
+ z-index: 2;
+}
+
+/* ── HERO ──────────────────────────────────────────────────── */
+.hero {
+ position: relative;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 120px 48px 100px;
+ overflow: hidden;
+}
+
+.hero-glow {
+ position: absolute;
+ top: -220px; right: -100px;
+ width: 800px; height: 800px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, transparent 68%);
+ pointer-events: none;
+ animation: glowPulse 6s ease-in-out infinite alternate;
+}
+
+.hero-glow2 {
+ position: absolute;
+ bottom: -200px; left: 15%;
+ width: 700px; height: 700px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(236, 72, 153, 0.09) 0%, transparent 68%);
+ pointer-events: none;
+ animation: glowPulse 9s ease-in-out infinite alternate-reverse;
+}
+
+.hero-tag {
+ font-family: var(--mono);
+ font-size: 11px;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--magenta);
+ margin-bottom: 28px;
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ animation: fadeUp 0.8s 0.2s both;
+}
+
+.hero-tag::before {
+ content: '';
+ display: inline-block;
+ width: 40px;
+ height: 1px;
+ background: var(--grad);
+}
+
+.hero-h1 {
+ font-family: var(--display);
+ font-weight: 800;
+ font-size: clamp(58px, 9.5vw, 124px);
+ line-height: 0.91;
+ letter-spacing: -0.025em;
+ max-width: 940px;
+ animation: fadeUp 0.9s 0.35s both;
+}
+
+.grad-text {
+ background: var(--grad);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.hero-sub {
+ font-family: var(--mono);
+ font-size: 15px;
+ line-height: 1.75;
+ color: var(--muted);
+ max-width: 500px;
+ margin-top: 32px;
+ animation: fadeUp 0.9s 0.5s both;
+}
+
+.hero-actions {
+ display: flex;
+ gap: 16px;
+ margin-top: 48px;
+ flex-wrap: wrap;
+ animation: fadeUp 0.9s 0.65s both;
+}
+
+.hero-stats {
+ display: flex;
+ gap: 48px;
+ margin-top: 80px;
+ padding-top: 48px;
+ border-top: 1px solid var(--border);
+ animation: fadeUp 0.9s 0.85s both;
+ flex-wrap: wrap;
+}
+
+.stat-num {
+ font-size: 40px;
+ font-weight: 800;
+ line-height: 1;
+ background: var(--grad);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.stat-label {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-top: 6px;
+}
+
+/* ── MISSION STRIP ──────────────────────────────────────────── */
+.mission-strip {
+ border-top: 1px solid var(--border);
+ background: var(--surface);
+ padding: 80px 48px;
+}
+
+.mission-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2px;
+}
+
+.mission-item {
+ background: var(--surface2);
+ border: 1px solid var(--border);
+ padding: 32px 28px;
+ transition: border-color 0.3s, transform 0.3s;
+ position: relative;
+ overflow: hidden;
+}
+
+.mission-item::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 2px;
+ background: var(--grad);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.35s;
+}
+
+.mission-item:hover {
+ border-color: var(--border-hi);
+ transform: translateY(-4px);
+}
+
+.mission-item:hover::before {
+ transform: scaleX(1);
+}
+
+.mission-icon {
+ font-size: 1.75rem;
+ margin-bottom: 16px;
+}
+
+.mission-title {
+ font-size: 14px;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ margin-bottom: 8px;
+}
+
+.mission-text {
+ font-family: var(--mono);
+ font-size: 12px;
+ color: var(--muted);
+ line-height: 1.65;
+}
+
+/* ── WHERE WE MEET ──────────────────────────────────────────── */
+.meet-section {
+ border-top: 1px solid var(--border);
+ padding: 120px 48px;
+}
+
+.meet-inner {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 80px;
+ align-items: center;
+}
+
+.meet-body {
+ font-family: var(--mono);
+ font-size: 14px;
+ line-height: 1.85;
+ color: var(--muted);
+ margin: 24px 0 36px;
+ max-width: 440px;
+}
+
+.meet-body strong {
+ color: var(--text);
+ font-weight: 500;
+}
+
+.meet-actions {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+}
+
+.map-embed {
+ height: 400px;
+ border: 1px solid var(--border);
+ overflow: hidden;
+ filter: grayscale(1) invert(0.9) hue-rotate(180deg);
+ opacity: 0.8;
+ transition: opacity 0.3s;
+}
+
+.map-embed:hover {
+ opacity: 1;
+}
+
+/* ─── RESPONSIVE ────────────────────────────────────────────── */
+@media (max-width: 900px) {
+ .hero { padding: 100px 24px 70px; }
+ .hero-stats { gap: 28px; }
+ .mission-strip { padding: 60px 24px; }
+ .mission-grid { grid-template-columns: 1fr 1fr; }
+ .meet-section { padding: 80px 24px; }
+ .meet-inner { grid-template-columns: 1fr; gap: 48px; }
+ .map-embed { height: 280px; }
+}
+
+@media (max-width: 600px) {
+ .mission-grid { grid-template-columns: 1fr; }
+ .hero-actions { flex-direction: column; }
+ .meet-actions { flex-direction: column; }
+}
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index 6ad4503..913021c 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -1,229 +1,126 @@
import React from 'react';
-import Logo from '../static/images/logo/ECLAIR_logo2.webp';
-import '../styles/app.css';
-import ECLAIRButton from '../components/general/ECLAIRButton';
-import Loader from '../components/Loader';
-import { Slide, Fade } from '@mui/material';
-import YoutubeEmbed from '../components/YoutubeEmbed';
-import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
-import wavesHeader from '../static/vectors/waves-header.svg';
-import headerBackground from '../static/vectors/polygon-header.svg';
-import headerImage_1 from '../static/images/homepage/drone.webp';
-import headerImage_2 from '../static/images/homepage/eclair_group.webp';
-//import CalendarEmbed from '../components/CalendarEmbed';
-import SponsorRow from '../components/sponsors/SponsorRow';
-import JoinUs from '../components/general/JoinUs';
-
-function Homepage() {
- const [screenSize, setScreenSize] = useState(getCurrentDimension());
-
- function getCurrentDimension() {
- return {
- width: window.innerWidth,
- height: window.innerHeight
- }
- }
-
- useEffect(() => {
- const updateDimension = () => {
-
- setScreenSize(getCurrentDimension())
- console.log(screenSize.width);
- }
- window.addEventListener('resize', updateDimension);
-
- return (() => {
- window.removeEventListener('resize', updateDimension);
- })
- }, [])
-
- const handleClick = () => {
- navigate('/projects');
- }
+import { useReveal } from '../hooks/useReveal';
+import './Homepage.css';
+export default function Homepage() {
+ useReveal();
const navigate = useNavigate();
- const [hBGLoaded, setHBGLoaded] = useState(false);
- const hBGDivRef = useRefReach Out
+ Get In Touch
+ +
+
+ {/* Left — info */}
+
-
-
- )
+
+ Join us. Build with us.
+
- Join us. Build with us.
Support us.
+ + Whether you're a student looking to get involved, a company interested + in partnering, or just curious about what we're building — we want to + hear from you. +
+ +
+
+ {/* Right — form */}
+
-
+ {sent ? (
+
+
+
+ ) : (
+
+ )}
+ ✓
+ Message sent successfully.
+ We'll get back to you soon.
+
+ {/* ── HERO ─────────────────────────────────────────────── */}
+
+
+
+
+
+ Building the
+
+
-
UT Austin · CS Department · Est. 2021
+
+
+ Building the
+ machines
+ of tomorrow.
+
+
+ + ECLAIR is UT Austin's undergraduate robotics organization — where engineers + learn state-of-the-art AI and turn ambitious ideas into physical robots. +
+ +
+
+
+
- <>
-
-
- 
-
-
-
- 
-
-
-
-
-
-
-
-
-
Our mission is to drive innovation in AI and robotics at the undergraduate level.
-
+
-
-
-
+
-
- 30+
+ Active Members
-
+
-
-
-
+
- 5
+ Active Projects
Geared Toward Helping Students Pursue Their Passion for Robotics
-
- The Engineering and Computational Learning of Artificial Intelligence in Robotics (ECLAIR) is a club at UT Austin dedicated to helping all robot-loving students to transform their passionate robotics ideas into reality. We provide the robotics parts and teach members state-of-the-art machine learning techiniques such as neural networks and reinforcement learning to give students the ability to pursue their robotics projects. If you have a cool robot you want to build, come join us!
-
-
- 
-
-
-
- Situated at the Gates-Dell Complex at UT Austin - A leading Robotics and AI Institution
+
-
+
- 500+
+ Alumni Network
- Come find us every Monday and Thursday from 6 to 8 PM at the Gates-Dell Complex at UT Austin. Here, there is a wide range of robotics research, from surgical robotics to autonomous driving to artificial assistants. In ECLAIR, students can take advantage of all the resources at UT to explore their interests in robotics.
+
-
+
-
1
+ Industry Sponsors
-
- Our Members enjoy access to State of the Art Facilities!
+ {/* ── MISSION STRIP ────────────────────────────────────── */}
+
+
+
+ ('all');
-import { PROJECT_KEYS, PROJECT_NAMES, PROJECT_IMAGES, PROJECT_TEAM_PAGES, PROJECT_CODEBASES, PROJECT_DESCRIPTIONS, FINISHED_PROJECTS, ONGOING_PROJECTS, PROJECT_VIDEOS, PROJECT_SLIDESHOWS} from '../static/constants/Projects';
-import { TECH_LEAD_NAMES } from '../static/constants/About';
-
-import cv from '../static/images/lectures/cv.webp';
-import deepLearning from '../static/images/lectures/deepLearning.webp';
-import cvIntro from '../static/images/lectures/introToCV.webp';
-import mlIntro from '../static/images/lectures/introToML.webp';
-import rlIntro from '../static/images/lectures/introToRL.webp';
-import qL from '../static/images/lectures/qL.webp';
-import markov from '../static/images/lectures/markovModelFree.webp';
-
-
-import projectTransHead from '../static/vectors/projectHeaderTransition.svg';
-import temp from '../static/vectors/projectBackground.svg';
-
-
-
-function Projects() {
- const [showPopup, setShowPopup] = useState(false);
- const [cardInfo, setCardInfo] = useState<{
- id: number;
- img: string;
- name: string;
- lName: string;
- members: string;
- desc?: string;
- git: string;
- gantt: string;
- SliderData ?: Array;
- rect?: DOMRect;
- }>({
- id: 0,
- img: "",
- name: "Dummy Name",
- lName: "Dummy Last Name",
- members: "Dummy Members",
- desc: "Dummy Description",
- git: "https://github.com/dummy",
- gantt: "https://dummy.com/gantt",
- rect: new DOMRect(10, 20, 30, 40)
- });
-
-
- const handleOpenPopup = (info : {
- id: number;
- img: string;
- name: string;
- lName: string;
- members: string;
- desc?: string;
- git: string;
- gantt: string;
- SliderData ?: Array;
- }, ClientRect : DOMRect | undefined) => {
- setCardInfo({...info, rect: ClientRect});
- setShowPopup(true);
- console.log(ClientRect);
- };
-
- const handleClosePopup = () => {
- setShowPopup(false);
- };
-
- const MLData = [
- {
- id: 100,
- name : 'Computer Vision and Deep Q Learning',
- img : cv ,
- link: 'https://docs.google.com/presentation/d/1E0I_jpDuo3InZgVY09Y_CuMULSV6ivXKMwIHtpYaibI/edit?usp=sharing'
- },
- {
- id : 99,
- name : 'Deep Learning',
- img : deepLearning ,
- link: 'https://docs.google.com/presentation/d/14xJvQWdyEbCfhtOw9rDB0D9fre4sfTTEozrbnPKXTdQ/edit?usp=sharing'
- },
- {
- id : 98,
- name : 'Intro to Computer Vision',
- img : cvIntro ,
- link: 'https://docs.google.com/presentation/d/13ZllB7QOsSzvGN76JujV0NKRovjCL5EI1GnVKJK1Bss/edit?usp=sharing'
- },
- {
- id : 97,
- name : 'Intro to Machine Learning',
- img : mlIntro,
- link : 'https://docs.google.com/presentation/d/1faTl-GikKtQH4NQ8ZQqSYvJYA-5l-EdlEbioTP6G0kI/edit?usp=sharing'
- },
- {
- id : 96,
- name : 'Intro to Reinforcement Learning',
- img : rlIntro,
- link : 'https://docs.google.com/presentation/d/1z2ItVMJxIbRFmlTMc_EnbV_Rkl_XM0YXgNn0G_MD-FY/edit?usp=sharing'
- },
- {
- id : 95,
- name : 'Q-Learning',
- img : qL,
- link : 'https://docs.google.com/presentation/d/1VEJUk3_Sf1wC-RRmQxsi5HooLLMD0V_doVKPRyrr9W0/edit?usp=sharing'
- },
- {
- id : 94,
- name : 'Markov Decision Processes & Model-Free Methods',
- img : markov ,
- link: 'https://docs.google.com/presentation/d/1mCNnuxMEcQ9zPQJO4LZ14VRzMCkMAqkjmGqCErXx26s/edit?usp=sharing'
- }
- ];
-
- function handleSlideClick(link : string | URL | undefined): void {
- window.open(link, '_blank');
- }
-
- const [curFilter, setCurFilter] = useState("inprogress");
- const [filteredKeys, setFilteredKeys] = useState(ONGOING_PROJECTS);
-
- const cardLocations = useRef>([]);
-
- useEffect(() => {
- console.log("Filter changed to: ", curFilter);
- if (curFilter === "all") {
- setFilteredKeys(PROJECT_KEYS);
- console.log("All keys: ", PROJECT_KEYS);
- } else if (curFilter === "inprogress") {
- setFilteredKeys(ONGOING_PROJECTS);
- console.log("Ongoing keys: ", ONGOING_PROJECTS);
- } else if (curFilter === "completed") {
- setFilteredKeys(FINISHED_PROJECTS);
- console.log("Finished keys: ", FINISHED_PROJECTS);
- }
-
- console.log("Filtered keys: ", filteredKeys);
- cardLocations.current = cardLocations.current.slice(0, filteredKeys.length);
- handleResize();
-
- }, [curFilter]);
-
- const [pBGLoaded, setPBGLoaded] = useState(false);
- const pBGDivRef = useRef(null);
- const pElementRef = useRef(null);
-
- const[resize, isResized] = useState(false);
-
- useEffect(() => {
- if (pBGDivRef.current && pElementRef.current) {
- const divHeight = pBGDivRef.current.clientHeight;
- pElementRef.current.style.height = `${divHeight}px`;
- }
- }, [resize]);
-
-
- function handleResize() {
- isResized(!resize);
- }
- window.addEventListener('resize', handleResize);
-
- function wrapperFunction() {
- setPBGLoaded(true);
- }
-
- async function handleLoad() {
- setTimeout(wrapperFunction, 200)
- }
+ const visible = PROJECTS.filter(
+ (p) => filter === 'all' || p.status === filter
+ );
return (
-
+
- 🤖
+ Build Real Robots
+ Pitch any project and get it financed and supported by ECLAIR.
- Partnering with the Anna Hiss Gymnasium and UT Austin Makerspace, ECLAIR helps provide resources that students need to create and test their AI algorithms on physical robots. Our members are free to pitch any project they want to build and get it financed by ECLAIR.
+
-
+
+ 🧠
+ Learn Modern ML
+ Workshops on RL, deep learning, computer vision, and ROS2.
+
+
+ 🔧
+ World-Class Facilities
+ Anna Hiss Gym, UT Makerspace, and GDC labs at your fingertips.
+
+
- 🌐
+ Industry Pipeline
+ Direct connections to internships and roles at leading robotics companies.
- 
-
-
+
-
-
-
-
-
-
- {/*
-
- */}
-
);
}
-
-export default Homepage;
diff --git a/src/pages/Projects.css b/src/pages/Projects.css
new file mode 100644
index 0000000..b363079
--- /dev/null
+++ b/src/pages/Projects.css
@@ -0,0 +1,183 @@
+.projects-section {
+ padding: 120px 48px 100px;
+}
+
+.projects-header {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ margin-bottom: 64px;
+ flex-wrap: wrap;
+ gap: 24px;
+}
+
+.filter-bar {
+ display: flex;
+ gap: 4px;
+}
+
+.filter-btn {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ padding: 7px 16px;
+ border: 1px solid var(--border);
+ color: var(--muted);
+ background: transparent;
+ transition: all 0.2s;
+}
+
+.filter-btn--active,
+.filter-btn:hover {
+ border-color: rgba(217, 70, 239, 0.5);
+ color: var(--magenta);
+ background: rgba(217, 70, 239, 0.06);
+}
+
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2px;
+}
+
+.project-card {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ padding: 36px 32px 56px;
+ position: relative;
+ overflow: hidden;
+ transition: border-color 0.3s;
+}
+
+.project-card::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 2px;
+ background: var(--grad);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.4s;
+}
+
+.project-card:hover::before { transform: scaleX(1); }
+.project-card:hover { border-color: var(--border-hi); }
+
+.project-num {
+ font-family: var(--mono);
+ font-size: 10px;
+ color: var(--magenta);
+ letter-spacing: 0.15em;
+ margin-bottom: 10px;
+}
+
+.project-status {
+ display: inline-block;
+ font-family: var(--mono);
+ font-size: 9px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ padding: 3px 9px;
+ margin-bottom: 14px;
+}
+
+.project-status--active {
+ border: 1px solid rgba(79, 127, 255, 0.35);
+ color: #7da6ff;
+ background: rgba(79, 127, 255, 0.07);
+}
+
+.project-status--completed {
+ border: 1px solid rgba(40, 200, 100, 0.3);
+ color: #5be49b;
+ background: rgba(40, 200, 100, 0.07);
+}
+
+.project-name {
+ font-size: 21px;
+ font-weight: 800;
+ margin-bottom: 12px;
+ line-height: 1.15;
+}
+
+.project-desc {
+ font-family: var(--mono);
+ font-size: 12px;
+ color: var(--muted);
+ line-height: 1.75;
+ margin-bottom: 20px;
+}
+
+.project-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-bottom: 16px;
+}
+
+.tag {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ padding: 4px 11px;
+ border: 1px solid var(--border);
+ color: var(--muted);
+}
+
+.project-leads {
+ font-family: var(--mono);
+ font-size: 10px;
+ color: var(--lo);
+ letter-spacing: 0.06em;
+ margin-bottom: 8px;
+}
+
+.project-leads::before {
+ content: 'Lead: ';
+ color: var(--muted);
+}
+
+.project-ext-links {
+ display: flex;
+ gap: 12px;
+}
+
+.project-ext-link {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.08em;
+ color: var(--violet);
+ transition: color 0.2s;
+}
+
+.project-ext-link:hover { color: var(--pink); }
+
+.project-arrow {
+ position: absolute;
+ bottom: 28px;
+ right: 28px;
+ font-size: 18px;
+ color: var(--border);
+ transition: color 0.3s, transform 0.3s;
+}
+
+.project-card:hover .project-arrow {
+ color: var(--pink);
+ transform: translate(4px, -4px);
+}
+
+.projects-grid .reveal {
+ opacity: 1 !important;
+ transform: none !important;
+}
+@media (max-width: 900px) {
+ .projects-section { padding: 80px 24px; }
+ .projects-grid { grid-template-columns: 1fr 1fr; }
+ .projects-header { flex-direction: column; align-items: flex-start; }
+}
+
+@media (max-width: 600px) {
+ .projects-grid { grid-template-columns: 1fr; }
+}
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 9f3e0ed..7e4cfc1 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,248 +1,81 @@
-import React from 'react';
-import {useState, useRef, useEffect} from 'react';
-import '../styles/projects/projects.css';
-import ProjectCard from '../components/projects/ProjectCard';
-import ProjectFilter from '../components/projects/ProjectFilter';
-import ResourcesCard from '../components/projects/ResourcesCard';
-import ProjectPopup from '../components/projects/ProjectPopup';
-import Loader from '../components/Loader';
+import React, { useState } from 'react';
+import { useReveal } from '../hooks/useReveal';
+import { PROJECTS, Project } from '../data/projects';
+import './Projects.css';
-import pcrVid from '../static/videos/pcrTest.gif';
+type Filter = 'all' | 'active' | 'completed';
+export default function Projects() {
+ const [filter, setFilter] = useState
+ Gates-Dell Complex,
+
- Find Us
+ Gates-Dell Complex,
UT Austin.
+ + We meet every Monday and Thursday, 6–8 PM in the GDC. + Drop in and start building. +
+
+
+ Join Discord
+
+
+
+
-
-
- {/* This entire div is just a vector that contains the blob, a rectangle, and text at the bottom of the homepage */}
-
-
-
-
+
+
Our Sponsors
-
-
- What We Do
-
-
-
- 
-
-
Projects
-
-
- {filteredKeys.map((key, index) => {
- const techLeads = Object.entries(TECH_LEAD_NAMES)
- .filter(([leadKey]) => leadKey.startsWith(key))
- .map(([, name]) => name)
- .join(", ");
+
+
- return (
- (cardLocations.current[index] = el)}
- onOpenPopup={() =>
- handleOpenPopup(
- {
- id: index,
- name: PROJECT_NAMES[key],
- img: PROJECT_IMAGES[key],
- lName: techLeads,
- members: "",
- desc: PROJECT_DESCRIPTIONS[key],
- git: PROJECT_CODEBASES[key],
- gantt: PROJECT_TEAM_PAGES[key],
- SliderData: PROJECT_SLIDESHOWS[key],
- },
- cardLocations.current[index]?.getBoundingClientRect()
- )
- }
- />
- );
- })}
+
+
-
+
- What We Build
+ Active Projects
-
-
-
- (null);
- const sElementRef = useRef(null);
-
- const[resize, isResized] = useState(false);
-
- useEffect(() => {
- if (bgDivRef.current && sElementRef.current) {
- const divHeight = bgDivRef.current.clientHeight;
- sElementRef.current.style.height = `${divHeight}px`;
- }
- }, [resize]);
-
-
- function handleResize() {
- // setSBGLoaded(false);
- isResized(!resize);
- }
- window.addEventListener('resize', handleResize);
-
- function wrapperFunction() {
- setSBGLoaded(true);
- }
-
- async function handleLoad() {
- setTimeout(wrapperFunction, 0)
-
- }
-
return (
-
Machine Learning Resources
-
-
+
+
- )
+ );
}
-
-export default Projects
+function ProjectCard({ project, delay }: { project: Project; delay: number }) {
+ return (
+
- {MLData.map((card, index) => (
- handleSlideClick(card.link)}
- />
+
-
+ {(['all', 'active', 'completed'] as Filter[]).map((f) => (
+
))}
-
-
+ {visible.map((project, i) => (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/Sponsors.css b/src/pages/Sponsors.css
new file mode 100644
index 0000000..49dd45d
--- /dev/null
+++ b/src/pages/Sponsors.css
@@ -0,0 +1,155 @@
+.sponsors-section {
+ padding: 120px 48px 100px;
+}
+
+.sponsors-header {
+ margin-bottom: 64px;
+}
+
+.sponsor-inner {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ padding: 72px 64px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 64px;
+ align-items: start;
+}
+
+.sponsor-pitch {
+ font-size: clamp(24px, 3vw, 36px);
+ font-weight: 800;
+ line-height: 1.1;
+ margin-bottom: 20px;
+}
+
+.sponsor-inner > div > p {
+ font-family: var(--mono);
+ font-size: 13px;
+ color: var(--muted);
+ line-height: 1.8;
+ margin-bottom: 16px;
+}
+
+.current-sponsors {
+ display: flex;
+ gap: 32px;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-top: 36px;
+ padding-top: 36px;
+ border-top: 1px solid var(--border);
+}
+
+.current-sponsors-label {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--lo);
+ width: 100%;
+}
+
+.sponsor-name {
+ font-family: var(--display);
+ font-weight: 700;
+ font-size: 15px;
+ color: var(--muted);
+ letter-spacing: 0.05em;
+ transition: color 0.2s;
+}
+
+.sponsor-name:hover { color: var(--text); }
+
+/* Tiers */
+.sponsor-tiers {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2px;
+}
+
+.tier {
+ padding: 28px 20px;
+ border: 1px solid var(--border);
+ background: var(--surface2);
+ transition: border-color 0.3s, transform 0.3s;
+ position: relative;
+ overflow: hidden;
+}
+
+.tier::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 2px;
+ background: var(--grad);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.35s;
+}
+
+.tier:hover {
+ border-color: var(--border-hi);
+ transform: translateY(-4px);
+}
+
+.tier:hover::before { transform: scaleX(1); }
+
+.tier-name {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 6px;
+}
+
+.tier-label {
+ font-size: 20px;
+ font-weight: 800;
+ background: var(--grad);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 16px;
+}
+
+.tier-perks {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.tier-perks li {
+ font-family: var(--mono);
+ font-size: 11px;
+ color: var(--muted);
+ line-height: 1.5;
+ display: flex;
+ gap: 8px;
+}
+
+.tier-perks li::before {
+ content: '→';
+ color: var(--violet);
+ flex-shrink: 0;
+}
+
+.sponsor-note {
+ font-family: var(--mono);
+ font-size: 11px;
+ color: var(--lo);
+ margin-top: 20px;
+ line-height: 1.65;
+}
+
+@media (max-width: 900px) {
+ .sponsors-section { padding: 80px 24px; }
+ .sponsor-inner { grid-template-columns: 1fr; padding: 40px 28px; gap: 40px; }
+ .sponsor-tiers { grid-template-columns: 1fr 1fr; }
+}
+
+@media (max-width: 500px) {
+ .sponsor-tiers { grid-template-columns: 1fr; }
+}
diff --git a/src/pages/Sponsors.tsx b/src/pages/Sponsors.tsx
index e31fea3..085fdbc 100644
--- a/src/pages/Sponsors.tsx
+++ b/src/pages/Sponsors.tsx
@@ -1,145 +1,111 @@
+import React from 'react';
+import { useReveal } from '../hooks/useReveal';
+import './Sponsors.css';
-import '../styles/sponsors/sponsors.css';
-import spon from '../static/vectors/sponsorsDivider.svg';
-import bg from '../static/vectors/sponsorsBackground.svg';
+export default function Sponsors() {
+ useReveal();
-import Loader from '../components/Loader';
-
-import phone from '../static/images/sponsor-images/phoneIcon1.webp';
-import email from '../static/images/sponsor-images/emailIcon1.webp';
-import form from '../static/images/sponsor-images/formIcon.webp';
-import React, { useEffect, useRef, useState } from 'react';
-//import SponsorPackageRow from '../components/SponsorPackageRow';
-import SponsorRow from '../components/sponsors/SponsorRow';
-import ContactInformationContainer from '../components/general/ContactInformationContainer';
-
-function Sponsors() {
-
- // const [isVisible, setIsVisible] = useState(false);
- // const elementRef = useRef(null);
-
- // useEffect(() => {
- // const observer = new IntersectionObserver((entries) => {
- // const [entry] = entries;
- // setIsVisible(entry.isIntersecting);
-
- // if (entry.isIntersecting) {
- // observer.unobserve(entry.target);
- // }
- // });
- // if (elementRef.current) {
- // observer.observe(elementRef.current);
- // }
- // return () => {
- // if (elementRef.current) {
- // observer.unobserve(elementRef.current);
- // }
- // };
- // }, []);
-
- const [isElementVisible, setElementVisible] = useState(false);
- const targetElementRef = useRef(null);
-
-
- useEffect(() => {
- const observer = new IntersectionObserver((entries) => {
- const [entry] = entries;
- setElementVisible(entry.isIntersecting);
-
- if (entry.isIntersecting) {
- observer.unobserve(entry.target);
- }
- });
- if (targetElementRef.current) {
- observer.observe(targetElementRef.current);
- }
- return () => {
- if (targetElementRef.current) {
- observer.unobserve(targetElementRef.current);
- }
- };
- }, []);
-
- const [sBGLoaded, setSBGLoaded] = useState(false);
- const bgDivRef = useRef
+
+ {project.num} — {project.category}
+
+ {project.status === 'active' ? 'In Progress' : 'Completed'}
+
+ {project.name}
+{project.description}
+
+ {project.tags.map((tag) => (
+ {tag}
+ ))}
+
+
+ {project.leads.join(' · ')}
+
+
+ {project.github && (
+
+ GitHub ↗
+
+ )}
+ {project.teamPage && (
+
+ Team Page ↗
+
+ )}
+
+ ↗
+
-
Current Sponsors
-
-
- 
-
-
*/}
-
-
- {/*
*/}
-
- We are always trying to provide our members with the most cutting-edge robotics hardware available and would greatly appreciate any potential sponsorships. If you are interested in sponsoring UT ECLAIR, please contact us at the email below and we can send you our sponsor packet!
-
+
+
+
+ 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
diff --git a/src/components/Footer.css b/src/components/Footer.css
index 054fb6c..644df5c 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -19,7 +19,7 @@
.footer-brand {
font-family: var(--display);
- font-weight: 800;
+ font-weight: 700;
font-size: 14px;
letter-spacing: 0.15em;
background: var(--grad);
diff --git a/src/components/Nav.css b/src/components/Nav.css
index 8e8aa5f..a9084b7 100644
--- a/src/components/Nav.css
+++ b/src/components/Nav.css
@@ -31,7 +31,7 @@
.nav-logo-text {
font-family: var(--display);
- font-weight: 800;
+ font-weight: 700;
font-size: 17px;
letter-spacing: 0.15em;
color: var(--text);
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index fe46d7c..983db2e 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -8,6 +8,7 @@ const NAV_LINKS = [
{ label: 'Projects', href: '/projects' },
{ label: 'Team', href: '/about#team' },
{ label: 'Sponsors', href: '/sponsors' },
+ { label: 'News', href: '/news' },
{ label: 'Contact', href: '/contact' },
];
@@ -57,7 +58,6 @@ export default function Nav() {
- {/* Mobile drawer */}
- {/* Terminal */}
+ Sponsors &
+
+
+ Partner With Us
+ Sponsors &
Supporters
+
+ {/* Left col */}
+
);
}
-export default Sponsors
-
+function TierCard({ name, label, perks }: { name: string; label: string; perks: string[] }) {
+ return (
+
+
-
-
- + Invest in the next generation of roboticists. +
++ ECLAIR builds a direct pipeline from UT Austin's CS program to the + robotics industry. Our sponsors get early access to talented, + project-tested engineers before they hit the job market. +
++ Your support funds hardware, demos, and the infrastructure that lets + students build things that matter. +
+ + Become a Sponsor → + + +
-
+
+
+
-
-
+
-
-
+
+ + Custom partnership packages available. Reach out to discuss what works + best for your organization. +
+
+ );
+}
diff --git a/src/static/images/logo/E.png b/src/static/images/logo/E.png
new file mode 100644
index 0000000000000000000000000000000000000000..79260b93248788744e70b306eb313de713d5e450
GIT binary patch
literal 12066
zcmeHtc{tSV`!>@EQACj_(`Mh|$&wf{name}
+ {label}
+ -
+ {perks.map((p) =>
- {p} )} +
-
{NAV_LINKS.map(({ label, href }) => (
diff --git a/src/data/projects.ts b/src/data/projects.ts
index dd0b80f..c7f8378 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -19,7 +19,7 @@ export const PROJECTS: Project[] = [
num: '01',
category: 'Manipulation · AI',
name: 'C.R.A.C.K.L.E.',
- description: "Emulating DUM-E from Iron Man — a robotic arm that resolves spoken voice commands into dynamically generated execution plans via GPT. Can perform any physically possible task a user requests.",
+ description: "Emulating DUM-E from Iron Man, a robotic arm that resolves spoken voice commands into dynamically generated execution plans via GPT. Can perform any physically possible task a user requests.",
tags: ['GPT', 'ROS2', 'Voice', 'Planning'],
leads: ['Tanay Garg', 'Manav Karonde'],
status: 'active',
@@ -31,7 +31,7 @@ export const PROJECTS: Project[] = [
num: '02',
category: 'Autonomy · NLP',
name: 'Autonomous Car',
- description: "A fully autonomous RC car with natural language intake and feedback, building a greater bond of trust between user and vehicle — an open problem the industry is still tackling today.",
+ description: "A fully autonomous RC car with natural language intake and feedback",
tags: ['NLP', 'OpenCV', 'ROS2', 'Autonomy'],
leads: ['Marcus Fojas', 'Victor Sanchez'],
status: 'active',
@@ -53,7 +53,7 @@ export const PROJECTS: Project[] = [
num: '04',
category: 'Bio-Inspired · Hardware',
name: 'TAKOS',
- description: "The Tactile Appendage Kinematic Octopus System explores biomimicry of octopus features — dexterous flexible tentacles, environmental camouflage, and independent limb actuation for a variety of robotic applications.",
+ description: "The Tactile Appendage Kinematic Octopus System explores biomimicry of octopus features, including dexterous flexible tentacles and independent limb actuation for a variety of robotic applications.",
tags: ['Biomimicry', 'Kinematics', 'SBC', 'Pneumatics'],
leads: ['Christopher Elwood', 'Rizky Pratama'],
status: 'active',
@@ -64,7 +64,7 @@ export const PROJECTS: Project[] = [
num: '05',
category: 'Computer Vision · Assistive',
name: 'Eye Tracker',
- description: "A low-cost, accurate eye-tracking system using computer vision — enabling assistive technology for individuals with disabilities, user experience research, and interactive gaming.",
+ description: "A low-cost, accurate eye-tracking system using computer vision, enabling assistive technology for individuals with disabilities, user experience research, and interactive gaming.",
tags: ['Computer Vision', 'OpenCV', 'Assistive Tech'],
leads: ['Dev Patel'],
status: 'active',
@@ -75,7 +75,7 @@ export const PROJECTS: Project[] = [
num: '06',
category: 'Education · Hardware',
name: "Beginner's Track",
- description: "A hands-on intro to robotics for freshmen. Students learn to build and program small robots that play soccer — a fun entry point into hardware and embedded systems.",
+ description: "A hands-on intro to robotics for freshmen. Students learn to build and program small robots that play soccer, a fun entry point into hardware and embedded systems.",
tags: ['Education', 'Embedded', 'Hardware'],
leads: [],
status: 'active',
@@ -87,7 +87,7 @@ export const PROJECTS: Project[] = [
num: '07',
category: 'Controls · CV',
name: 'T.R.A.C.E.',
- description: "Tracks and controls the position of a ball on a tilting platform — a basic two-DOF control system that also implements computer vision.",
+ description: "Tracks and controls the position of a ball on a tilting platform, a basic two-DOF control system that also implements computer vision.",
tags: ['Controls', 'Computer Vision', 'Simulation'],
leads: [],
status: 'completed',
@@ -99,7 +99,7 @@ export const PROJECTS: Project[] = [
num: '08',
category: 'ML · Animation',
name: 'Texel Arts',
- description: "A machine learning system that takes videos and transforms them into animation files applied on given rigs — an online library of continuously updated, readily downloadable animations.",
+ description: "A machine learning system that takes videos and transforms them into animation files applied on given rigs, forming an online library of continuously updated, readily downloadable animations.",
tags: ['ML', 'Animation', 'Computer Vision'],
leads: [],
status: 'completed',
@@ -134,7 +134,7 @@ export const PROJECTS: Project[] = [
num: '11',
category: 'Biotech · Automation',
name: 'P.C.R.',
- description: "Automating PCR — a medical technique used to duplicate DNA. All individual components were built and integrated, culminating in a published research paper.",
+ description: "Automating PCR, a medical technique used to duplicate DNA. All individual components were built and integrated, culminating in a published research paper.",
tags: ['Automation', 'Biotech', 'Research'],
leads: [],
status: 'completed',
@@ -158,7 +158,7 @@ export const PROJECTS: Project[] = [
num: '13',
category: 'Autonomy · Aerial',
name: 'Autonomous Drone',
- description: "A hexacopter drone programmed to navigate and perform tasks autonomously using a suite of cameras and sensors — indoor mapping, trash pickup, and search missions.",
+ description: "A hexacopter drone programmed to navigate and perform tasks autonomously using a suite of cameras and sensors for indoor mapping, trash pickup, and search missions.",
tags: ['ROS', 'ArduCopter', 'Autonomy', 'Aerial'],
leads: [],
status: 'completed',
@@ -192,7 +192,7 @@ export const PROJECTS: Project[] = [
num: '16',
category: 'ML · Wearable',
name: 'Fitness Tracker',
- description: "A smart fitness band that tracks reps and measures form using IMU sensor data and an ML model — provides real-time suggestions based on common form errors.",
+ description: "A smart fitness band that tracks reps and measures form using IMU sensor data and an ML model. It provides real-time suggestions based on common form errors.",
tags: ['IMU', 'ML', 'Wearable', 'Health'],
leads: [],
status: 'completed',
@@ -216,7 +216,7 @@ export const PROJECTS: Project[] = [
num: '18',
category: 'Automation · AgTech',
name: 'Hydroponics',
- description: "An automated hydroponic garden — autonomous nutrient delivery, environmental monitoring, and growth tracking.",
+ description: "An automated hydroponic garden with autonomous nutrient delivery, environmental monitoring, and growth tracking.",
tags: ['Automation', 'AgTech', 'Sensors'],
leads: [],
status: 'completed',
diff --git a/src/pages/About.css b/src/pages/About.css
index 300a90f..9bb6fbd 100644
--- a/src/pages/About.css
+++ b/src/pages/About.css
@@ -149,8 +149,9 @@
}
.member-initials span {
+ font-family: var(--display);
font-size: 48px;
- font-weight: 800;
+ font-weight: 700;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 71ec270..4f0813c 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -20,7 +20,7 @@ export default function About() {
- ECLAIR — Engineering & Computational Learning of AI in Robotics — + ECLAIR, Engineering & Computational Learning of AI in Robotics, is an undergraduate organization in the Department of Computer Science at the University of Texas at Austin.
@@ -36,13 +36,12 @@ export default function About() {
- eclair — bash
+ eclair · bash
~ ./eclair --init
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 19719e7..491607e 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -9,6 +9,7 @@ import About from './About';
import Projects from './Projects';
import Sponsors from './Sponsors';
import Contact from './Contact';
+import News from './News';
import { useCursor } from '../hooks/useCursor';
@@ -40,12 +41,10 @@ function AppShell() {
return (
<>
- {/* Atmosphere layers */}
- {/* Custom cursor */}
@@ -57,6 +56,7 @@ function AppShell() {
- {/* Left — info */}
Join us. Build with us.
- {/* Right — form */}
Join us. Build with us.
Support us.
Whether you're a student looking to get involved, a company interested - in partnering, or just curious about what we're building — we want to + in partnering, or just curious about what we're building, we want to hear from you.
{sent ? (
diff --git a/src/pages/Homepage.css b/src/pages/Homepage.css
index d3cb77a..83ae3a0 100644
--- a/src/pages/Homepage.css
+++ b/src/pages/Homepage.css
@@ -58,7 +58,7 @@
.hero-h1 {
font-family: var(--display);
- font-weight: 800;
+ font-weight: 700;
font-size: clamp(58px, 9.5vw, 124px);
line-height: 0.91;
letter-spacing: -0.025em;
@@ -67,6 +67,8 @@
}
.grad-text {
+ font-family: var(--display);
+ font-weight: 700;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -102,8 +104,9 @@
}
.stat-num {
+ font-family: var(--display);
font-size: 40px;
- font-weight: 800;
+ font-weight: 700;
line-height: 1;
background: var(--grad);
-webkit-background-clip: text;
@@ -164,6 +167,7 @@
.mission-icon {
font-size: 1.75rem;
+ color: #8b5cf6;
margin-bottom: 16px;
}
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index 913021c..f77462a 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
+import { FaRobot, FaBrain, FaTools, FaNetworkWired } from 'react-icons/fa';
import { useReveal } from '../hooks/useReveal';
import './Homepage.css';
@@ -9,7 +10,6 @@ export default function Homepage() {
return (
- {/* ── WHERE WE MEET ─────────────────────────────────────── */}
+
- {/* ── HERO ─────────────────────────────────────────────── */}
@@ -23,7 +23,7 @@ export default function Homepage() {
- {/* ── MISSION STRIP ────────────────────────────────────── */}
- ECLAIR is UT Austin's undergraduate robotics organization — where engineers + ECLAIR is UT Austin's undergraduate robotics organization, where engineers learn state-of-the-art AI and turn ambitious ideas into physical robots.
@@ -56,33 +56,31 @@ export default function Homepage() {
-
🤖
+ Build Real Robots
Pitch any project and get it financed and supported by ECLAIR.
-
🧠
+ Learn Modern ML
Workshops on RL, deep learning, computer vision, and ROS2.
-
🔧
+ World-Class Facilities
Anna Hiss Gym, UT Makerspace, and GDC labs at your fingertips.
-
🌐
+ Industry Pipeline
Direct connections to internships and roles at leading robotics companies.
diff --git a/src/pages/News.css b/src/pages/News.css
new file mode 100644
index 0000000..c2b8c9f
--- /dev/null
+++ b/src/pages/News.css
@@ -0,0 +1,30 @@
+.news-section {
+ padding: 120px 48px 100px;
+}
+
+.news-sub {
+ font-family: var(--mono);
+ font-size: 14px;
+ color: var(--muted);
+ line-height: 1.75;
+ margin-top: 24px;
+ max-width: 620px;
+}
+
+.news-sub a {
+ color: var(--violet);
+ transition: color 0.2s;
+}
+
+.news-sub a:hover {
+ color: var(--pink);
+}
+
+.news-embed {
+ margin-top: 56px;
+ min-height: 400px;
+}
+
+@media (max-width: 900px) {
+ .news-section { padding: 80px 24px; }
+}
diff --git a/src/pages/News.tsx b/src/pages/News.tsx
new file mode 100644
index 0000000..75a0385
--- /dev/null
+++ b/src/pages/News.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { useReveal } from '../hooks/useReveal';
+import './News.css';
+
+declare global {
+ interface Window {
+ __bhldScript?: boolean;
+ }
+}
+
+function loadBeholdScript() {
+ if (window.__bhldScript) return;
+ window.__bhldScript = true;
+ const script = document.createElement('script');
+ script.type = 'module';
+ script.src = 'https://w.behold.so/widget.js';
+ setTimeout(() => { document.head.append(script); }, 0);
+}
+
+export default function News() {
+ useReveal();
+ useEffect(() => { loadBeholdScript(); }, []);
+
+ return (
+ ('all');
+ const [activeTags, setActiveTags] = useState([]);
+
+ const toggleTag = (tag: string) => {
+ setActiveTags((prev) =>
+ prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+ );
+ };
const visible = PROJECTS.filter(
- (p) => filter === 'all' || p.status === filter
+ (p) =>
+ (filter === 'all' || p.status === filter) &&
+ (activeTags.length === 0 || activeTags.some((t) => p.tags.includes(t)))
);
return (
@@ -34,6 +45,27 @@ export default function Projects() {
+
+
+
+
+ );
+}
diff --git a/src/pages/Projects.css b/src/pages/Projects.css
index b363079..3c9b07e 100644
--- a/src/pages/Projects.css
+++ b/src/pages/Projects.css
@@ -35,6 +35,56 @@
background: rgba(217, 70, 239, 0.06);
}
+.tag-filter-bar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ align-items: center;
+ margin-bottom: 48px;
+}
+
+.tag-filter-btn {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ padding: 6px 14px;
+ border: 1px solid var(--border);
+ color: var(--muted);
+ background: transparent;
+ transition: all 0.2s;
+}
+
+.tag-filter-btn:hover {
+ border-color: rgba(139, 92, 246, 0.5);
+ color: var(--violet);
+}
+
+.tag-filter-btn--active {
+ border-color: var(--border-hi);
+ color: white;
+ background: var(--grad);
+}
+
+.tag-filter-clear {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.08em;
+ color: var(--pink);
+ padding: 6px 8px;
+}
+
+.tag-filter-clear:hover {
+ color: var(--magenta);
+}
+
+.projects-empty {
+ font-family: var(--mono);
+ font-size: 13px;
+ color: var(--muted);
+ padding: 40px 0;
+}
+
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -96,7 +146,7 @@
.project-name {
font-size: 21px;
- font-weight: 800;
+ font-weight: 700;
margin-bottom: 12px;
line-height: 1.15;
}
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 7e4cfc1..ee0f6a4 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -5,11 +5,22 @@ import './Projects.css';
type Filter = 'all' | 'active' | 'completed';
+const ALL_TAGS = Array.from(new Set(PROJECTS.flatMap((p) => p.tags))).sort();
+
export default function Projects() {
const [filter, setFilter] = useStateStay Connected
+ ECLAIR News
++ Follow{' '} + + @eclairrobotics + {' '} + to keep up to date with events, robots, and opportunities. +
+ +
+
+
+
+ {ALL_TAGS.map((tag) => (
+
+ ))}
+ {activeTags.length > 0 && (
+
+ )}
+
+
+ {visible.length === 0 && (
+ No projects match the selected filters.
+ )} +
{visible.map((project, i) => (
& { 'feed-id': string },
+ HTMLElement
+ >;
+ }
+}
From 7b15a5942008ec26ea959ec9ab729e6332c2bb2c Mon Sep 17 00:00:00 2001
From: devpatel-07
Date: Tue, 22 Sep 2026 20:10:30 -0500
Subject: [PATCH 4/7] Added up-to-date info, improved aesthetics, added
manuverability and search features
---
src/components/Footer.css | 9 +-
src/components/Nav.tsx | 27 +++++-
src/data/officers.ts | 132 +++++++++++++++++++++-----
src/data/projects.ts | 130 ++++++++++++++++---------
src/pages/About.css | 45 +++++++--
src/pages/About.tsx | 46 ++++++---
src/pages/Homepage.tsx | 6 +-
src/pages/Projects.css | 33 ++++---
src/pages/Projects.tsx | 8 +-
src/pages/Sponsors.css | 20 ++--
src/pages/Sponsors.tsx | 11 ++-
src/static/images/officer/annika.webp | Bin 0 -> 1603642 bytes
src/static/images/officer/ethan.webp | Bin 0 -> 276352 bytes
src/static/images/officer/shreya.webp | Bin 0 -> 2021530 bytes
src/styles/globals.css | 22 ++++-
15 files changed, 359 insertions(+), 130 deletions(-)
create mode 100644 src/static/images/officer/annika.webp
create mode 100644 src/static/images/officer/ethan.webp
create mode 100644 src/static/images/officer/shreya.webp
diff --git a/src/components/Footer.css b/src/components/Footer.css
index 644df5c..ce2c553 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -9,6 +9,7 @@
flex-wrap: wrap;
gap: 16px;
background: var(--black);
+ margin-top: auto;
}
.footer-left {
@@ -31,7 +32,7 @@
.footer-copy {
font-family: var(--mono);
font-size: 10px;
- color: var(--lo);
+ color: var(--text);
letter-spacing: 0.08em;
}
@@ -46,12 +47,12 @@
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
- color: var(--lo);
+ color: var(--text);
transition: color 0.2s;
}
.footer-links a:hover {
- color: var(--muted);
+ color: var(--magenta);
}
.footer-social {
@@ -64,7 +65,7 @@
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
- color: var(--lo);
+ color: var(--text);
transition: color 0.2s;
}
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 983db2e..1fc37e0 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -16,6 +16,7 @@ export default function Nav() {
const location = useLocation();
const [menuOpen, setMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
+ const [aboutSection, setAboutSection] = useState<'about' | 'team'>('about');
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
@@ -23,6 +24,30 @@ export default function Nav() {
return () => window.removeEventListener('scroll', onScroll);
}, []);
+ useEffect(() => {
+ if (location.pathname !== '/about') return;
+ const updateAboutSection = () => {
+ const teamSection = document.getElementById('team');
+ if (!teamSection) return;
+ if (teamSection.getBoundingClientRect().top <= 120) {
+ setAboutSection('team');
+ } else {
+ setAboutSection('about');
+ }
+ };
+ updateAboutSection();
+ window.addEventListener('scroll', updateAboutSection, { passive: true });
+ return () => window.removeEventListener('scroll', updateAboutSection);
+ }, [location.pathname]);
+
+ const isActive = (label: string, href: string) => {
+ if (location.pathname === '/about') {
+ if (label === 'About') return aboutSection === 'about';
+ if (label === 'Team') return aboutSection === 'team';
+ }
+ return location.pathname === href;
+ };
+
// Close drawer on route change
useEffect(() => { setMenuOpen(false); }, [location]);
@@ -39,7 +64,7 @@ export default function Nav() {
{label}
diff --git a/src/data/officers.ts b/src/data/officers.ts
index 5767873..7f38ddc 100644
--- a/src/data/officers.ts
+++ b/src/data/officers.ts
@@ -3,10 +3,15 @@ import cameronImg from '../static/images/officer/cameron.webp';
import manasImg from '../static/images/officer/manas.webp';
import manavImg from '../static/images/officer/manav.webp';
import nogaImg from '../static/images/officer/noga.webp';
-import zoeImg from '../static/images/officer/zoe.webp';
-import nuzhatImg from '../static/images/officer/nuzhat.webp';
+import yashImg from '../static/images/officer/yash.webp';
+import devImg from '../static/images/officer/dev.webp';
import rizkyImg from '../static/images/officer/rizky.webp';
-// import vishnuImg from '../static/images/officer/vishnu.webp';
+// import vidyaImg from '../static/images/officer/vidya.webp';
+import tanayImg from '../static/images/officer/tanay.webp';
+import annikaImg from '../static/images/officer/annika.webp';
+import chrisImg from '../static/images/officer/chris.webp';
+import ethanImg from '../static/images/officer/ethan.webp';
+import shreyaImg from '../static/images/officer/shreya.webp';
import sahilImg from '../static/images/officer/sahil.webp';
import conradImg from '../static/images/officer/conrad.webp';
export interface Officer {
@@ -25,7 +30,7 @@ export const OFFICERS: Officer[] = [
initials: 'AJ',
name: 'Arnav Joshi',
role: 'President',
- bio: "Hi, I'm Arnav! I'm a third year C.S. major minoring in robotics. I've been making robots going on six years now, and particularly enjoy being somewhere in between the hardware and the software. In other news, I like running, climbing, hiking (motion may be a trend here), and playing music, and just about any sport. Open to song recommendations, welcome to ECLAIR",
+ bio: "Hi, I'm Arnav! I'm a fourth year C.S. major minoring in robotics. I've been making robots going on six years now, and particularly enjoy being somewhere in between the hardware and the software. In other news, I like running, climbing, hiking (motion may be a trend here), and playing music, and just about any sport. Open to song recommendations, welcome to ECLAIR",
email: 'arnavjoshi@utexas.edu',
img: arnavImg
},
@@ -48,8 +53,8 @@ export const OFFICERS: Officer[] = [
{
initials: 'MK',
name: 'Manav Karonde',
- role: 'Events Director · C.R.A.C.K.L.E. Lead',
- bio: "Hello friend, My name is Manav and I'm a sophmore in Computer Science here at UT. I've lived in Austin for the past decade, but am from New York originally. I've spent the past two semesters on CRACKLE, but when I'm not doing that or building wacky personal robotics projects, I like to play the drums / guitar (especially rock punk and blues), dabble in photography, drive around windows down with my dog, or just stare at a blank wall and contemplate life.",
+ role: 'Events Director',
+ bio: "Hello friend, My name is Manav and I'm a junior in Computer Science here at UT. I've lived in Austin for the past decade, but am from New York originally. I've spent the past two semesters on CRACKLE, but when I'm not doing that or building wacky personal robotics projects, I like to play the drums / guitar (especially rock punk and blues), dabble in photography, drive around windows down with my dog, or just stare at a blank wall and contemplate life.",
email: 'karonde.manav@gmail.com',
img : manavImg
},
@@ -62,36 +67,119 @@ export const OFFICERS: Officer[] = [
img: nogaImg
},
{
- initials: 'ZV',
- name: 'Zoe Vo',
+ initials: 'YK',
+ name: 'Yash Karandikar',
role: 'Public Relations Director',
- bio: "Hi I'm Zoe and I'm a Mechanical Engineering major. My favorite book series, movie franchise, and religion is The Hunger Games. Please marry me Thida",
- email: 'zk4thyv@gmail.com',
- img: zoeImg
+ bio: "Hi! I am a Junior CS major. I am interested in Robotics, Linux, and computing in general.",
+ email: 'yashkarandikar158@gmail.com',
+ img: yashImg
},
{
- initials: 'NN',
- name: 'Nuzhat Nabi',
+ initials: 'DP',
+ name: 'Dev Patel',
role: 'Technology Director',
- bio: "Hello! My name is Nuzhat. I am a Computer Science major interested in robotics, AI, and full-stack web development. I mainly do software stuff but hoping to learn more hardware content. I enjoy playing games (board, card, and video games) and hanging out with friends.",
- email: 'nuzhat.nabi@utexas.edu',
- img: nuzhatImg
+ bio: "Hi, I'm Dev! I'm a sophomore biomedical engineering major on the pre-med track. I'm interested in all things that intersect engineering and medicine. Out of class, I enjoy playing tennis and reading.",
+ email: 'dap4675@utexas.edu',
+ img: devImg
},
{
initials: 'RP',
name: 'Rizky Pratama',
- role: 'Financial Director · TAKOS Lead',
+ role: 'Financial Director',
bio: "CS major from Katy, TX. Into robotics, computer vision, and AI. I boulder, dance, play D&D, and eat lots. Never challenge me to a card game.",
email: 'rapratama2005@gmail.com',
img: rizkyImg
},
{
- initials: 'VS',
- name: 'Vishnu Sharma',
+ initials: 'VP',
+ name: 'Vidya Puralasetty',
role: 'Freshman Representative',
- bio: "CS major from New Jersey, interested in software, AI, and robotics. I like reading, learning new things, and hanging out with friends.",
- email: 'vishnuamogha.sharma@gmail.com',
- // img: vishnuImg
+ bio: "",
+ email: 'vidya.puralasetty@gmail.com',
+ // img: vidyaImg
+ },
+];
+
+export const LEADS: Officer[] = [
+ {
+ initials: 'MK',
+ name: 'Manav Karonde',
+ role: 'ICARUS Lead',
+ bio: "Hello friend, My name is Manav and I'm a junior in Computer Science here at UT. I've lived in Austin for the past decade, but am from New York originally. I've spent the past two semesters on CRACKLE, but when I'm not doing that or building wacky personal robotics projects, I like to play the drums / guitar (especially rock punk and blues), dabble in photography, drive around windows down with my dog, or just stare at a blank wall and contemplate life.",
+ email: 'karonde.manav@gmail.com',
+ img: manavImg
+ },
+ {
+ initials: 'TK',
+ name: 'Tanay Garg',
+ role: 'ICARUS Lead',
+ bio: "Hi! I am Tanay, and I am a CS major at UT Austin. I love Formula 1, soccer, and playing the guitar! I want to use AI to revolutionize educational technology!",
+ email: 'Tanay.garg@utexas.edu',
+ img: tanayImg
+ },
+ {
+ initials: 'DP',
+ name: 'Dev Patel',
+ role: 'EyeTracker Lead',
+ bio: "Hi, I'm Dev! I'm a sophomore biomedical engineering major on the pre-med track. I'm interested in all things that intersect engineering and medicine. Out of class, I enjoy playing tennis and reading.",
+ email: 'dap4675@utexas.edu',
+ img: devImg
+ },
+ {
+ initials: 'AS',
+ name: 'Annika Shivam',
+ role: 'AMAZE Lead',
+ bio: "Hey! I'm Annika, a sophomore majoring in computer science and minoring in robotics. I love engineering projects where I can work with my hands—and no, typing nonstop C code does not count ;). I also enjoy music, bouldering, puns, and anything space-related. I hope to work in mission control or at the intersection of space & robotics!",
+ email: 'dap4675@utexas.edu',
+ img: annikaImg
+ },
+ {
+ initials: 'RP',
+ name: 'Rizky Pratama',
+ role: 'Takos Lead',
+ bio: "CS major from Katy, TX. Into robotics, computer vision, and AI. I boulder, dance, play D&D, and eat lots. Never challenge me to a card game.",
+ email: 'rapratama2005@gmail.com',
+ img: rizkyImg
+ },
+ {
+ initials: 'CE',
+ name: 'Chris Elwood',
+ role: 'Takos Lead',
+ bio: "Hello, I'm Chris. I am a third year CS student. I am from Austin and I enjoy reading, watching films, and basketball. I really enjoy systems programming.",
+ email: 'christopher.elwood2024@gmail.com',
+ img: chrisImg
+ },
+ {
+ initials: 'EG',
+ name: 'Ethan Gopez',
+ role: 'H.A.N.D Lead',
+ bio: "Heyo, I'm Ethan! I'm a third-year Computer Science major minoring in Robotics. I'm very passionate about AI and robot planning. Outside of work, you can find me bouldering, making music with friends, playing games, writing puzzles, and just generally sidequesting.",
+ email: 'ethangopez@gmail.com',
+ img: ethanImg
+ },
+ {
+ initials: 'SG',
+ name: 'Shreya Ganti',
+ role: 'ARGO III Lead',
+ bio: "Hi! I'm Shreya, a senior Biomedical Engineering Major. I love working on cool project ideas especially in medical/laboratory contexts. Outside of robots, I enjoy cooking and baking, trying new restaurants, and board games!",
+ email: 'shreyaganti1@gmail.com',
+ img: shreyaImg
+ },
+ {
+ initials: 'NC',
+ name: 'Nithya Challa',
+ role: 'ARGO III Lead',
+ bio: "",
+ email: 'nithyachalla@utexas.edu',
+ //img: nithyaImg
+ },
+ {
+ initials: 'NS',
+ name: 'Navya Swali',
+ role: 'ARGO III Lead',
+ bio: "",
+ email: 'swalinav000@gmail.com',
+ //img: navyaImg
},
];
diff --git a/src/data/projects.ts b/src/data/projects.ts
index c7f8378..f1ebea8 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -15,38 +15,37 @@ export interface Project {
export const PROJECTS: Project[] = [
// ── ACTIVE ────────────────────────────────────────────────
{
- id: 'crackle',
+ id: 'icarus',
num: '01',
- category: 'Manipulation · AI',
- name: 'C.R.A.C.K.L.E.',
- description: "Emulating DUM-E from Iron Man, a robotic arm that resolves spoken voice commands into dynamically generated execution plans via GPT. Can perform any physically possible task a user requests.",
- tags: ['GPT', 'ROS2', 'Voice', 'Planning'],
- leads: ['Tanay Garg', 'Manav Karonde'],
+ category: 'Autonomy · Sensors',
+ name: 'ICARUS',
+ description: "VLA-based search and rescue robot",
+ tags: ['Autonomy', 'Sensors'],
+ leads: ['Manav Karonde', 'Tanay Garg'],
status: 'active',
- github: 'https://github.com/ECLAIR-Robotics/crackle',
- teamPage: 'https://befitting-galliform-d9c.notion.site/Crackle-Teamspace-Home-9e32fd2ea0ca4e4695607c16f522433f',
+ teamPage: 'https://github.com/ECLAIR-Robotics/icarus.git',
},
{
- id: 'auto-car',
+ id: 'amaze',
num: '02',
- category: 'Autonomy · NLP',
- name: 'Autonomous Car',
- description: "A fully autonomous RC car with natural language intake and feedback",
- tags: ['NLP', 'OpenCV', 'ROS2', 'Autonomy'],
- leads: ['Marcus Fojas', 'Victor Sanchez'],
+ category: ' ',
+ name: 'AMAZE',
+ description: "Drone missions—Project Hail Mary-style!",
+ tags: ['Ariel', 'Simulation'],
+ leads: ['Annika Shivam'],
status: 'active',
- github: 'https://github.com/MaxGamer1312/autonomous-car',
+ teamPage: 'https://github.com/booleansarebinary/amaze-autonomous-drone.git',
},
{
- id: 'mcqueen',
+ id: 'eye-tracker',
num: '03',
- category: 'RL · Racing',
- name: 'McQueen',
- description: "Training and fine-tuning reinforcement learning models to navigate a racetrack at speed, working with an AWS DeepRacer autonomous racecar platform.",
- tags: ['Reinforcement Learning', 'AWS DeepRacer', 'Fine-Tuning'],
- leads: ['Suhas Voolla', 'Yash Karandikar'],
+ category: 'Computer Vision · Assistive',
+ name: 'Eye Tracker',
+ description: "Creating a low-cost, wearable video eye-tracking system capable of moving a robotic arm to the user's 3D gaze point, meant to enable assistive technology for individuals with disabilities.",
+ tags: ['Computer Vision', 'OpenCV', 'Assistive Tech', 'Wearable'],
+ leads: ['Dev Patel'],
status: 'active',
- teamPage: 'https://www.notion.so/Radiator-Springs-Home-2d8d0549950a8159a688e2ea12b16581',
+ teamPage: 'https://www.notion.so/invite/d4e646c11b954dc0323659094bb4b41c3d7c56cd',
},
{
id: 'takos',
@@ -60,31 +59,76 @@ export const PROJECTS: Project[] = [
teamPage: 'https://www.notion.so/TAKOS-Tactile-Appendage-Kinematic-Octopus-System-2a47d39cd23f80e2b943d0dd4f9c8010',
},
{
- id: 'eye-tracker',
+ id: 'hand',
num: '05',
- category: 'Computer Vision · Assistive',
- name: 'Eye Tracker',
- description: "A low-cost, accurate eye-tracking system using computer vision, enabling assistive technology for individuals with disabilities, user experience research, and interactive gaming.",
- tags: ['Computer Vision', 'OpenCV', 'Assistive Tech'],
- leads: ['Dev Patel'],
+ category: 'Biotech · Hardware',
+ name: 'H.A.N.D.',
+ description: "Sleek, Haptic Glove that Teleoperates a Robotic Arm.",
+ tags: ['Wearable', 'Simulation'],
+ leads: ['Ethan Gopez'],
status: 'active',
- teamPage: 'https://www.notion.so/invite/d4e646c11b954dc0323659094bb4b41c3d7c56cd',
+ teamPage: 'https://app.notion.com/p/c3dd0549950a8290b76681646eba85f6',
},
{
- id: 'beginners-track',
+ id: 'argo',
num: '06',
+ category: 'Rover · Hardware',
+ name: 'ARGO III',
+ description: "Autonomous rover using computer vision to detect obstacles and navigate terrain.",
+ tags: ['Robotics'],
+ leads: ['Nithya Challa', 'Shreya Ganti', 'Navya Swali'],
+ status: 'active',
+ teamPage: 'https://app.notion.com/p/ARGO-III-Landing-Site-3cfc85d2976f8024a0f3f17bc52d9284',
+ },
+ {
+ id: 'beginners-track',
+ num: '07',
category: 'Education · Hardware',
name: "Beginner's Track",
description: "A hands-on intro to robotics for freshmen. Students learn to build and program small robots that play soccer, a fun entry point into hardware and embedded systems.",
tags: ['Education', 'Embedded', 'Hardware'],
- leads: [],
+ leads: ['Manas Agrawal', 'Yash Karandikar', 'Arnav Joshi'],
status: 'active',
},
// ── COMPLETED ─────────────────────────────────────────────
+ {
+ id: 'crackle',
+ num: '08',
+ category: 'Manipulation · AI',
+ name: 'C.R.A.C.K.L.E.',
+ description: "Emulating DUM-E from Iron Man, a robotic arm that resolves spoken voice commands into dynamically generated execution plans via GPT. Can perform any physically possible task a user requests.",
+ tags: ['GPT', 'ROS2', 'Voice', 'Planning'],
+ leads: ['Tanay Garg', 'Manav Karonde'],
+ status: 'completed',
+ github: 'https://github.com/ECLAIR-Robotics/crackle',
+ teamPage: 'https://befitting-galliform-d9c.notion.site/Crackle-Teamspace-Home-9e32fd2ea0ca4e4695607c16f522433f',
+ },
+ {
+ id: 'auto-car',
+ num: '09',
+ category: 'Autonomy · NLP',
+ name: 'Autonomous Car',
+ description: "A fully autonomous RC car with natural language intake and feedback",
+ tags: ['NLP', 'OpenCV', 'ROS2', 'Autonomy'],
+ leads: ['Marcus Fojas', 'Victor Sanchez'],
+ status: 'completed',
+ github: 'https://github.com/MaxGamer1312/autonomous-car',
+ },
+ {
+ id: 'mcqueen',
+ num: '10',
+ category: 'RL · Racing',
+ name: 'McQueen',
+ description: "Training and fine-tuning reinforcement learning models to navigate a racetrack at speed, working with an AWS DeepRacer autonomous racecar platform.",
+ tags: ['Reinforcement Learning', 'AWS DeepRacer', 'Fine-Tuning'],
+ leads: ['Suhas Voolla', 'Yash Karandikar'],
+ status: 'completed',
+ teamPage: 'https://www.notion.so/Radiator-Springs-Home-2d8d0549950a8159a688e2ea12b16581',
+ },
{
id: 'trace',
- num: '07',
+ num: '11',
category: 'Controls · CV',
name: 'T.R.A.C.E.',
description: "Tracks and controls the position of a ball on a tilting platform, a basic two-DOF control system that also implements computer vision.",
@@ -96,7 +140,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'texel-arts',
- num: '08',
+ num: '12',
category: 'ML · Animation',
name: 'Texel Arts',
description: "A machine learning system that takes videos and transforms them into animation files applied on given rigs, forming an online library of continuously updated, readily downloadable animations.",
@@ -108,7 +152,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'epic',
- num: '09',
+ num: '13',
category: 'Controls · Hardware',
name: 'E.P.I.C.',
description: "An expressive self-balancing robot exploring PID control, computer vision, sensor interfacing, and custom PCB design. Features an LCD face that adjusts expressions based on stability.",
@@ -119,7 +163,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'duckduckflow',
- num: '10',
+ num: '14',
category: 'IoT · Environmental',
name: 'DuckDuckFlow',
description: "A wireless, solar-powered water level monitoring device for flood-prone zones in the Hill Country. Provides real-time early flood detection to help emergency services respond faster.",
@@ -131,7 +175,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'pcr',
- num: '11',
+ num: '15',
category: 'Biotech · Automation',
name: 'P.C.R.',
description: "Automating PCR, a medical technique used to duplicate DNA. All individual components were built and integrated, culminating in a published research paper.",
@@ -143,7 +187,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'chess-teacher',
- num: '12',
+ num: '16',
category: 'CV · Robotics',
name: 'Chess Teacher',
description: "A robot that plays chess and teaches the player how to improve. Uses overhead computer vision for board state, and an in-house chess engine for comprehensive positional understanding.",
@@ -155,7 +199,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'autonomous-drone',
- num: '13',
+ num: '17',
category: 'Autonomy · Aerial',
name: 'Autonomous Drone',
description: "A hexacopter drone programmed to navigate and perform tasks autonomously using a suite of cameras and sensors for indoor mapping, trash pickup, and search missions.",
@@ -166,7 +210,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'music-mood',
- num: '14',
+ num: '18',
category: 'NLP · ML',
name: 'Music Mood',
description: "Fine-tuned a large language model to associate emotions with songs via lyrics, then used it to analyze Spotify profiles and playlists for emotional content.",
@@ -178,7 +222,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'robotic-arm',
- num: '15',
+ num: '19',
category: 'Kinematics · Hardware',
name: 'Robotic Arm',
description: "Implementing inverse kinematics and advanced software features on a robotic arm to deepen understanding of arm construction and motion planning.",
@@ -189,7 +233,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'fitness-tracker',
- num: '16',
+ num: '20',
category: 'ML · Wearable',
name: 'Fitness Tracker',
description: "A smart fitness band that tracks reps and measures form using IMU sensor data and an ML model. It provides real-time suggestions based on common form errors.",
@@ -201,7 +245,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'smart-mirror',
- num: '17',
+ num: '21',
category: 'HCI · Hardware',
name: 'Smart Mirror',
description: "A modified Samsung infrared TV converted into a functional smart mirror capable of interacting with a user and performing basic utility functions.",
@@ -213,7 +257,7 @@ export const PROJECTS: Project[] = [
},
{
id: 'hydroponics',
- num: '18',
+ num: '22',
category: 'Automation · AgTech',
name: 'Hydroponics',
description: "An automated hydroponic garden with autonomous nutrient delivery, environmental monitoring, and growth tracking.",
diff --git a/src/pages/About.css b/src/pages/About.css
index 9bb6fbd..b477de5 100644
--- a/src/pages/About.css
+++ b/src/pages/About.css
@@ -58,12 +58,12 @@
padding: 20px 22px;
font-size: 12px;
line-height: 2;
- color: var(--muted);
+ color: var(--text);
}
.t-prompt { color: var(--magenta); }
.t-hi { color: var(--violet); }
-.t-dim { color: var(--lo); }
+.t-dim { color: var(--muted); }
.t-cursor {
display: inline-block;
@@ -82,10 +82,10 @@
.team-divider {
font-family: var(--mono);
- font-size: 10px;
+ font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
- color: var(--lo);
+ color: var(--text);
display: flex;
align-items: center;
gap: 16px;
@@ -106,6 +106,36 @@
gap: 2px;
}
+/* ── NAVIGATION ─────────────────────────────────────────────────── */
+.team-nav {
+ display: flex;
+ gap: 12px;
+ margin: 32px 0 48px;
+}
+
+.team-nav-button {
+ font-family: var(--mono);
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--text);
+ background: transparent;
+ border: 1px solid var(--border);
+ padding: 14px 24px;
+ text-decoration: none;
+ transition: border-color 0.2s, background 0.2s, color 0.2s;
+}
+
+.team-nav-button:hover {
+ border-color: var(--magenta);
+ color: var(--magenta);
+}
+
+.team-group {
+ scroll-margin-top: 100px;
+}
+
/* ── MEMBER CARD ───────────────────────────────────────────── */
.member-card {
position: relative;
@@ -173,7 +203,7 @@
}
.member-name {
- font-size: 15px;
+ font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: #f0f0f8;
@@ -181,8 +211,9 @@
.member-role {
font-family: var(--mono);
- font-size: 10px;
- color: rgba(240, 240, 248, 0.45);
+ font-size: 14px;
+ /*color: rgba(240, 240, 248, 0.45);*/
+ color: var(--magenta);
margin-top: 4px;
letter-spacing: 0.06em;
}
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 4f0813c..400d762 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { useReveal } from '../hooks/useReveal';
-import { OFFICERS, FOUNDERS } from '../data/officers';
+import { OFFICERS, LEADS, FOUNDERS } from '../data/officers';
import type { Officer } from '../data/officers';
import './About.css';
@@ -48,8 +48,8 @@ export default function About() {
@@ -67,18 +67,38 @@ export default function About() {
-
{project.num} — {project.category}
+ {project.num} · {project.category}
{project.status === 'active' ? 'In Progress' : 'Completed'}
diff --git a/src/pages/Sponsors.css b/src/pages/Sponsors.css
index 49dd45d..5dcbf4d 100644
--- a/src/pages/Sponsors.css
+++ b/src/pages/Sponsors.css
@@ -18,7 +18,7 @@
.sponsor-pitch {
font-size: clamp(24px, 3vw, 36px);
- font-weight: 800;
+ font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
}
@@ -105,8 +105,9 @@
}
.tier-label {
+ font-family: var(--display);
font-size: 20px;
- font-weight: 800;
+ font-weight: 700;
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
diff --git a/src/pages/Sponsors.tsx b/src/pages/Sponsors.tsx
index 085fdbc..dcb6885 100644
--- a/src/pages/Sponsors.tsx
+++ b/src/pages/Sponsors.tsx
@@ -15,7 +15,6 @@ export default function Sponsors() {
- {/* Left col */}
- {/* Right col — tiers */}
Invest in the next generation of roboticists. @@ -51,7 +50,6 @@ export default function Sponsors() {
Loading ECLAIR environment...
~ status --all
- ✓ Projects active: 5
- ✓ Members: 30+ undergrads
+ ✓ Projects active: 7
+ ✓ Members: 75+ undergrads
✓ Stack: ROS2 · PyTorch · OpenCV
✓ Facilities: GDC · AHG · Makerspace
The People
Leadership & Leads
-Officers
-
- {OFFICERS.map((officer, i) => (
-
Founders
-
- {FOUNDERS.map((founder, i) => (
-
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
+
+
+ Officers
+
+ {OFFICERS.map((officer, i) => (
+
+
+
+
+ Tech Leads
+
+ {LEADS.map((lead, i) => (
+
+
+
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index f77462a..1ef0374 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -38,11 +38,11 @@ export default function Homepage() {
Founders
+
+ {FOUNDERS.map((founder, i) => (
+
-
30+
+ 75+
Active Members
-
5
+ 7
Active Projects
@@ -50,7 +50,7 @@ export default function Homepage() {
Alumni Network
-
1
+ 2
Industry Sponsors
-
+
@@ -56,8 +59,8 @@ export default function Sponsors() {
name="Silver"
label="Entry Tier"
perks={[
- 'T-shirt listing (30+ members)',
- 'Instagram shoutout (150+ followers)',
+ 'T-shirt listing (75+ members)',
+ 'Instagram shoutout (1,000+ followers)',
'Featured on club website',
'Swag & flyers at our meetings',
]}
@@ -77,7 +80,7 @@ export default function Sponsors() {
label="Premier Partner"
perks={[
'All Gold perks',
- 'Full resume book (30+ engineers)',
+ 'Full resume book (75+ engineers)',
'Priority recruiting access',
'50 campus flyers (~10K impressions)',
'Discord & mailing list (500+ network)',
diff --git a/src/static/images/officer/annika.webp b/src/static/images/officer/annika.webp
new file mode 100644
index 0000000000000000000000000000000000000000..90b5a2a74e4de2bfbc5575c2b2435a750a33f790
GIT binary patch
literal 1603642
zcma&MV|1oLvo8F^wmGq#i9OMiOq_{ro0Cjz+xEns*tTuk=JVy<``c@uKWDAe_p0uz
zuCA)C#-F=aD@jR6u({&`)Wm-%s48%)!vg>SnlI@>0ZbtPq(ns(aKXP+064CJy}dQ$
z7qYQ+c2tu5L87jqNdj{S0Q>s>s~8wL*^4MB$oxn7pZ33d{-=Ii{BPSi#{b0nANK#T
zg*P^FGWxQ8{}L7>dq-yg0F2=aE4Vq^{|Ep1!kCUWhat We Build
- Active Projects
-Projects
{(['all', 'active', 'completed'] as Filter[]).map((f) => (
))}
@@ -82,7 +80,7 @@ function ProjectCard({ project, delay }: { project: Project; delay: number }) {
{project.num} · {project.category}
- {project.status === 'active' ? 'In Progress' : 'Completed'}
+ {project.status === 'active' ? 'Active' : 'Completed'}
{project.name}
{project.description}
diff --git a/src/pages/Sponsors.css b/src/pages/Sponsors.css index 5dcbf4d..aa30f64 100644 --- a/src/pages/Sponsors.css +++ b/src/pages/Sponsors.css @@ -21,12 +21,13 @@ font-weight: 700; line-height: 1.1; margin-bottom: 20px; + color: var(--magenta); } -.sponsor-inner > div > p { +.sponsor-inner > div > p:not(.sponsor-note) { font-family: var(--mono); font-size: 13px; - color: var(--muted); + color: var(--text); line-height: 1.8; margin-bottom: 16px; } @@ -43,10 +44,11 @@ .current-sponsors-label { font-family: var(--mono); - font-size: 10px; + font-size: 14px; + font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; - color: var(--lo); + color: var(--magenta); width: 100%; } @@ -54,12 +56,12 @@ font-family: var(--display); font-weight: 700; font-size: 15px; - color: var(--muted); + color: var(--text); letter-spacing: 0.05em; transition: color 0.2s; } -.sponsor-name:hover { color: var(--text); } +.sponsor-name:hover { color: var(--magenta); } /* Tiers */ .sponsor-tiers { @@ -100,7 +102,7 @@ font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; - color: var(--muted); + color: var(--text); margin-bottom: 6px; } @@ -139,8 +141,8 @@ .sponsor-note { font-family: var(--mono); - font-size: 11px; - color: var(--lo); + font-size: 12px; + color: var(--muted); margin-top: 20px; line-height: 1.65; } diff --git a/src/pages/Sponsors.tsx b/src/pages/Sponsors.tsx index dcb6885..993854e 100644 --- a/src/pages/Sponsors.tsx +++ b/src/pages/Sponsors.tsx @@ -25,7 +25,7 @@ export default function Sponsors() { project-tested engineers before they hit the job market.- Your support funds hardware, demos, and the infrastructure that lets + Your support funds hardware, demos, and the infrastructure that let students build things that matter.
Texel Arts + + Jane Street +