923 lines
29 KiB
HTML
923 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TechGarage - STEM HQ Inc.</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--primary: #0d406b;
|
|
--accent: #f5873e;
|
|
--success: #1e8e2b;
|
|
--danger: #d9534f;
|
|
--hero-dark: #04121e;
|
|
--hero-light: #07253e;
|
|
--text: #333;
|
|
--light-bg: #f4f7fa;
|
|
--white: #fff;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Open Sans', sans-serif;
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== HEADER / NAV ===== */
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: var(--primary);
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
nav {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
height: 64px;
|
|
}
|
|
|
|
nav .logo img {
|
|
height: 48px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
nav .nav-links {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 4px;
|
|
}
|
|
|
|
nav .nav-links a {
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
transition: background 0.2s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
nav .nav-links a:hover,
|
|
nav .nav-links a.active {
|
|
background: rgba(255,255,255,0.15);
|
|
}
|
|
|
|
.hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
padding: 8px;
|
|
}
|
|
|
|
.hamburger span {
|
|
display: block;
|
|
width: 26px;
|
|
height: 3px;
|
|
background: var(--white);
|
|
border-radius: 2px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* ===== HERO CAROUSEL ===== */
|
|
.hero {
|
|
position: relative;
|
|
height: 80vh;
|
|
min-height: 500px;
|
|
overflow: hidden;
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.carousel {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: 0;
|
|
transition: opacity 1s ease;
|
|
}
|
|
|
|
.carousel-slide.active { opacity: 1; }
|
|
|
|
.carousel-slide::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(4,18,30,0.8), rgba(7,37,62,0.7));
|
|
}
|
|
|
|
.hero-content {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
z-index: 2;
|
|
padding: 40px 20px;
|
|
color: var(--white);
|
|
}
|
|
|
|
.hero-content .badge {
|
|
display: inline-block;
|
|
background: var(--accent);
|
|
color: var(--white);
|
|
padding: 6px 20px;
|
|
border-radius: 30px;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero-content h1 {
|
|
font-size: 2.4rem;
|
|
font-weight: 800;
|
|
max-width: 800px;
|
|
line-height: 1.3;
|
|
margin-bottom: 16px;
|
|
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.hero-content p {
|
|
font-size: 1.1rem;
|
|
max-width: 700px;
|
|
opacity: 0.9;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.carousel-caption {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 3;
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.carousel-dots {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 3;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.carousel-dots button {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--white);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.carousel-dots button.active {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* ===== SECTIONS ===== */
|
|
section {
|
|
padding: 80px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
max-width: 600px;
|
|
margin: 0 auto 50px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.section-divider {
|
|
width: 60px;
|
|
height: 4px;
|
|
background: var(--accent);
|
|
margin: 0 auto 20px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* ===== MISSION ===== */
|
|
.mission-section { background: var(--white); }
|
|
|
|
.mission-block {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.mission-block h3 {
|
|
font-size: 1.3rem;
|
|
color: var(--primary);
|
|
margin-bottom: 12px;
|
|
font-weight: 700;
|
|
border-left: 4px solid var(--accent);
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.mission-block p {
|
|
color: #555;
|
|
line-height: 1.8;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* ===== PROGRAMS ===== */
|
|
.programs-section { background: var(--light-bg); }
|
|
|
|
.programs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 28px;
|
|
}
|
|
|
|
.program-card {
|
|
background: var(--white);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.program-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.program-card-img {
|
|
height: 200px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-color: var(--primary);
|
|
position: relative;
|
|
}
|
|
|
|
.program-card-img.placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.program-card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.program-card-body h4 {
|
|
font-size: 1.1rem;
|
|
color: var(--primary);
|
|
margin-bottom: 8px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.program-card-body p {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ===== PEOPLE CARDS (Board + Coaches) ===== */
|
|
.board-section { background: var(--white); }
|
|
.coaches-section { background: var(--light-bg); }
|
|
|
|
.people-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 32px;
|
|
}
|
|
|
|
.person-card {
|
|
background: var(--white);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
text-align: center;
|
|
padding-bottom: 28px;
|
|
}
|
|
|
|
.coaches-section .person-card { background: var(--white); }
|
|
|
|
.person-photo {
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin: 28px auto 16px;
|
|
display: block;
|
|
border: 4px solid var(--light-bg);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.person-card h4 {
|
|
font-size: 1.15rem;
|
|
color: var(--primary);
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.person-card p {
|
|
color: #666;
|
|
font-size: 0.88rem;
|
|
line-height: 1.7;
|
|
padding: 0 24px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* ===== SPONSORS ===== */
|
|
.sponsors-section { background: var(--white); }
|
|
|
|
.sponsors-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 24px;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
.sponsor-logo {
|
|
max-width: 130px;
|
|
max-height: 90px;
|
|
object-fit: contain;
|
|
filter: grayscale(30%);
|
|
opacity: 0.85;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.sponsor-logo:hover {
|
|
filter: grayscale(0%);
|
|
opacity: 1;
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* ===== MEMBERSHIP ===== */
|
|
.membership-section {
|
|
background: linear-gradient(135deg, var(--hero-dark), var(--hero-light));
|
|
color: var(--white);
|
|
text-align: center;
|
|
}
|
|
|
|
.membership-section .section-title { color: var(--white); }
|
|
|
|
.membership-details {
|
|
max-width: 650px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.membership-price {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
margin: 20px 0 8px;
|
|
}
|
|
|
|
.membership-price span {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.membership-details p {
|
|
font-size: 1rem;
|
|
line-height: 1.8;
|
|
opacity: 0.9;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.btn-cta {
|
|
display: inline-block;
|
|
background: var(--accent);
|
|
color: var(--white);
|
|
padding: 14px 40px;
|
|
border-radius: 50px;
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-top: 24px;
|
|
transition: 0.3s;
|
|
box-shadow: 0 4px 15px rgba(245,135,62,0.4);
|
|
}
|
|
|
|
.btn-cta:hover {
|
|
background: #e5762e;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(245,135,62,0.5);
|
|
}
|
|
|
|
.membership-contact {
|
|
margin-top: 24px;
|
|
font-size: 0.95rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.membership-contact a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ===== FOOTER ===== */
|
|
footer {
|
|
background: #0a0f14;
|
|
color: rgba(255,255,255,0.6);
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
footer .footer-brand {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--white);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
footer p { font-size: 0.85rem; margin-bottom: 6px; }
|
|
|
|
footer a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer .social-links {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
footer .social-links a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.1);
|
|
color: var(--white);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
footer .social-links a:hover { background: var(--accent); }
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@media (max-width: 768px) {
|
|
.hamburger { display: flex; }
|
|
|
|
nav .nav-links {
|
|
position: fixed;
|
|
top: 64px;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--primary);
|
|
flex-direction: column;
|
|
padding: 0 20px 20px;
|
|
gap: 0;
|
|
display: none;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
nav .nav-links.open { display: flex; }
|
|
|
|
nav .nav-links a {
|
|
padding: 12px 8px;
|
|
font-size: 0.95rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.hero-content h1 { font-size: 1.5rem; }
|
|
.hero { min-height: 400px; height: 70vh; }
|
|
|
|
.programs-grid { grid-template-columns: 1fr; }
|
|
.people-grid { grid-template-columns: 1fr; }
|
|
.sponsors-grid { grid-template-columns: repeat(3, 1fr); }
|
|
|
|
section { padding: 50px 16px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===== HEADER ===== -->
|
|
<header>
|
|
<nav>
|
|
<a href="#home" class="logo">
|
|
<img src="images/TechGarageHighResTransparent200H.png" alt="TechGarage">
|
|
</a>
|
|
<button class="hamburger" id="hamburger" aria-label="Toggle navigation">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#mission">Mission</a></li>
|
|
<li><a href="#programs">Programs</a></li>
|
|
<li><a href="#board">Board</a></li>
|
|
<li><a href="#coaches">Coaches</a></li>
|
|
<li><a href="#sponsors">Sponsors</a></li>
|
|
<li><a href="#membership">Membership</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- ===== HERO CAROUSEL ===== -->
|
|
<section class="hero" id="home">
|
|
<div class="carousel">
|
|
<div class="carousel-slide active" style="background-image:url('images/image12.jpg')" data-caption="The TechGarage Team Finished 3rd and Received A Grant That Will Be Used To Start & Support Competitive Robotics Teams In At-Risk Communities in Palm Beach County"></div>
|
|
<div class="carousel-slide" style="background-image:url('images/image11.jpg')" data-caption="CodeCombat"></div>
|
|
<div class="carousel-slide" style="background-image:url('images/image1.jpg')" data-caption="CodeCombat"></div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<span class="badge">We're a winner!</span>
|
|
<h1>CHECK THIS OUT!</h1>
|
|
<p>The TechGarage Team Finished 3rd and Received A Grant That Will Be Used To Start & Support Competitive Robotics Teams In At-Risk Communities in Palm Beach County.</p>
|
|
</div>
|
|
<div class="carousel-dots">
|
|
<button class="active" data-index="0"></button>
|
|
<button data-index="1"></button>
|
|
<button data-index="2"></button>
|
|
</div>
|
|
<div class="carousel-caption" id="carouselCaption"></div>
|
|
</section>
|
|
|
|
<!-- ===== MISSION ===== -->
|
|
<section class="mission-section" id="mission">
|
|
<div class="container">
|
|
<h2 class="section-title">Our Mission</h2>
|
|
<div class="section-divider"></div>
|
|
<p class="section-subtitle">Inspiring the next generation through STEM education and robotics</p>
|
|
|
|
<div class="mission-block">
|
|
<h3>Our Mission</h3>
|
|
<p>The Mission of STEM HQ is to develop self-sustainable models for educational robotics programs that engage young minds in building science, technology, engineering, and math skills, while simultaneously inspiring innovation and creativity. Additionally, to enable students to work collaboratively in a team environment and fostering well-rounded life capabilities, including self-confidence, communication, and leadership.</p>
|
|
</div>
|
|
|
|
<div class="mission-block">
|
|
<h3>Robotics League</h3>
|
|
<p>At the end of each school day, many students are involved with sports-laden extra-curricular activities. Our Robotics League model isn't much different from a sports league. Groups of students create their own or are assigned to teams and are assigned a challenge. Teams then work together to build, program, and strategize their robot to complete the challenge in a head-to-head competition format. This creates excitement, teamwork, and real-world problem solving experience for every participant.</p>
|
|
</div>
|
|
|
|
<div class="mission-block">
|
|
<h3>TechGarage Concept</h3>
|
|
<p>TechGarage is a concept developed by the minds here at STEM HQ that represents the epitome of a long-term self-sustainable education robotics model. TechGarage would become a centralized robotics workspace. By pooling resources across multiple teams such as lego kits, countless tools, and mentors and experienced robotics students, TechGarage creates an environment where teams share resources, collaborate, and push each other to excel. This shared-space model dramatically reduces costs per student while increasing the quality of the robotics experience.</p>
|
|
</div>
|
|
|
|
<div class="mission-block">
|
|
<h3>At-Risk Student Outreach</h3>
|
|
<p>TechGarage has addressed the need for increased STEM exposure to at-risk youth and minorities by introducing these students to STEM concepts within their community setting. By partnering with organizations like the Boys & Girls Club and the Sheriff's PAL program, TechGarage brings robotics directly into communities that otherwise would not have access. These programs ignite curiosity, build confidence, and open doors to futures in technology and engineering for students who need it most.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== PROGRAMS ===== -->
|
|
<section class="programs-section" id="programs">
|
|
<div class="container">
|
|
<h2 class="section-title">Programs</h2>
|
|
<div class="section-divider"></div>
|
|
<p class="section-subtitle">Our robotics competitions, hackathons, and summer camps</p>
|
|
|
|
<div class="programs-grid">
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/RDL2019.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>Robot Drone League 2019</h4>
|
|
<p>All new game for 2019, with a focus on drones going on offense.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/RDL2018.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>Robot Drone League 2018</h4>
|
|
<p>MineField competitive robotics program.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/Code-For-Good-Hackathon-05-2015.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>Code4Good Hackathon</h4>
|
|
<p>Won 1st place as the only high school team competing against college and professional teams.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/eMergeHackathonWinners.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>eMerge Americas Hackathon</h4>
|
|
<p>Won the hackathon with SmileMetrics, an innovative facial recognition solution.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/SmartCart.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>AI & IoT Hackathon</h4>
|
|
<p>Placed 2nd with SmartCart, an AI-powered smart shopping experience.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img placeholder" style="background:linear-gradient(135deg,var(--primary),var(--hero-light))">
|
|
<svg width="48" height="48" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
|
|
</div>
|
|
<div class="program-card-body">
|
|
<h4>Palm Beach Tech Hackathon</h4>
|
|
<p>VR games to teach science concepts. Won 4th place against experienced teams.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/FAUTGSUMMERCAMP2018.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>FAU Summer Camp 2018</h4>
|
|
<p>Hands-on robotics and coding summer camp at Florida Atlantic University.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/FAUTGSUMMERCAMP2017.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>FAU Summer Camp 2017</h4>
|
|
<p>STEM education summer camp partnered with FAU.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/FAUTGSUMMERCAMP2016.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>FAU Summer Camp 2016</h4>
|
|
<p>Our inaugural summer camp program at Florida Atlantic University.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/FAUMATEROV2018.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>MATE ROV 2018</h4>
|
|
<p>Underwater robotics competition building remotely operated vehicles.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="program-card">
|
|
<div class="program-card-img" style="background-image:url('images/TeamPhoto.jpg')"></div>
|
|
<div class="program-card-body">
|
|
<h4>FRC 2019</h4>
|
|
<p>FIRST Robotics Competition 2019 season team.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== BOARD MEMBERS ===== -->
|
|
<section class="board-section" id="board">
|
|
<div class="container">
|
|
<h2 class="section-title">Board Members</h2>
|
|
<div class="section-divider"></div>
|
|
<p class="section-subtitle">The leadership team behind TechGarage and STEM HQ</p>
|
|
|
|
<div class="people-grid">
|
|
<div class="person-card">
|
|
<img class="person-photo" src="images/ScooterSquared.jpg" alt="Scooter Willis">
|
|
<h4>Scooter Willis</h4>
|
|
<p>Scooter brings years of experience in FIRST robotics and a deep commitment to STEM education. He earned his PhD and has worked at the Avera Cancer Institute, combining his passion for technology with cutting-edge research. A graduate of the University of Florida, Scooter founded STEM HQ to create sustainable robotics programs that reach students in underserved communities. His vision for TechGarage drives the organization forward.</p>
|
|
</div>
|
|
|
|
<div class="person-card">
|
|
<img class="person-photo" src="images/frank.jpg" alt="Frank Dickinson">
|
|
<h4>Frank Dickinson</h4>
|
|
<p>Frank Dickinson serves as CTO of AffinityX and is a graduate of Rensselaer Polytechnic Institute (RPI). With deep expertise in technology leadership and software engineering, Frank is passionate about mentoring the next generation. His involvement in STEM education and the TechGarage initiative helps bridge the gap between industry expertise and student learning, ensuring programs remain relevant and impactful.</p>
|
|
</div>
|
|
|
|
<div class="person-card">
|
|
<img class="person-photo" src="images/Vlad-Headshot.jpg" alt="Vladimir Safin">
|
|
<h4>Vladimir Safin</h4>
|
|
<p>Vladimir Safin is a graduate of Yaroslavl State University with a background in Applied Mathematics. His analytical mindset and dedication to education make him an invaluable member of the board. Vladimir is deeply committed to mentoring students, bringing a global perspective to STEM education and helping young people develop the mathematical and computational thinking skills that underpin modern technology.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== COACHES ===== -->
|
|
<section class="coaches-section" id="coaches">
|
|
<div class="container">
|
|
<h2 class="section-title">Coaches</h2>
|
|
<div class="section-divider"></div>
|
|
<p class="section-subtitle">Dedicated mentors guiding our students to success</p>
|
|
|
|
<div class="people-grid">
|
|
<div class="person-card">
|
|
<img class="person-photo" src="images/20180804_161734.jpg" alt="Tadas Orentas">
|
|
<h4>Tadas Orentas</h4>
|
|
<p>Tadas is an Electrical Engineering student at Florida Atlantic University. His hands-on expertise in electronics and circuit design brings real-world engineering experience to the team. Tadas works closely with students on robot wiring, sensor integration, and electrical system design, helping them understand the fundamentals of electrical engineering.</p>
|
|
</div>
|
|
|
|
<div class="person-card">
|
|
<img class="person-photo" src="images/IMG_20180504_220059_154.jpg" alt="Dexter Dixon">
|
|
<h4>Dexter Dixon</h4>
|
|
<p>Dexter Dixon studies Electrical Engineering at Florida Atlantic University and is a founding member of the Drone Robotics club. His expertise in drone technology and autonomous systems brings an exciting aerial dimension to the TechGarage programs. Dexter mentors students in drone building, programming, and the Robot Drone League competitions.</p>
|
|
</div>
|
|
|
|
<div class="person-card">
|
|
<img class="person-photo" src="images/Portait-darkend.jpg" alt="Gunnar Bjorkman">
|
|
<h4>Gunnar Bjorkman</h4>
|
|
<p>Gunnar is a Mechanical Engineering student at Florida Atlantic University. His knowledge of mechanical design, CAD modeling, and fabrication techniques helps students bring their robot designs from concept to reality. Gunnar guides teams through the mechanical engineering process, from initial sketches to fully functional competition robots.</p>
|
|
</div>
|
|
|
|
<div class="person-card">
|
|
<img class="person-photo" src="images/IMG_2672.jpg" alt="Holden Gibler">
|
|
<h4>Holden Gibler</h4>
|
|
<p>Holden studies Mechanical Engineering at Florida Atlantic University. With a strong foundation in mechanical systems and manufacturing, Holden helps students understand structural design, material selection, and assembly techniques. His patient coaching style makes complex engineering concepts accessible to students of all experience levels.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== SPONSORS ===== -->
|
|
<section class="sponsors-section" id="sponsors">
|
|
<div class="container">
|
|
<h2 class="section-title">Our Sponsors</h2>
|
|
<div class="section-divider"></div>
|
|
<p class="section-subtitle">Thank you to the organizations that make our programs possible</p>
|
|
|
|
<div class="sponsors-grid">
|
|
<img class="sponsor-logo" src="images/advent-school-boca-logo-sm-284x300.png" alt="Advent School" title="Advent School">
|
|
<img class="sponsor-logo" src="images/LNRS_2C_PMS_POS_CMYK.jpg" alt="Lexis Nexis" title="Lexis Nexis">
|
|
<img class="sponsor-logo" src="images/argosy.png" alt="Argosy" title="Argosy">
|
|
<img class="sponsor-logo" src="images/bgc-logo.jpg" alt="Boys and Girls Club" title="Boys and Girls Club">
|
|
<img class="sponsor-logo" src="images/blazers.jpg" alt="Boca Christian Blazers" title="Boca Christian Blazers">
|
|
<img class="sponsor-logo" src="images/fauhigh.jpg" alt="FAU High School" title="FAU High School">
|
|
<img class="sponsor-logo" src="images/fautechrunway.png" alt="FAU TechRunway" title="FAU TechRunway">
|
|
<img class="sponsor-logo" src="images/florida.gif" alt="State of Florida" title="State of Florida">
|
|
<img class="sponsor-logo" src="images/fpl.jpg" alt="FPL" title="FPL">
|
|
<img class="sponsor-logo" src="images/gobilda.png" alt="goBILDA" title="goBILDA">
|
|
<img class="sponsor-logo" src="images/Greeat-Charity-Challenge-Logo-2015.jpg" alt="Great Charity Challenge" title="Great Charity Challenge">
|
|
<img class="sponsor-logo" src="images/hagenfamilyfoundation.jpg" alt="Hagen Family Foundation" title="Hagen Family Foundation">
|
|
<img class="sponsor-logo" src="images/IMPACT100MEN1.png" alt="IMPACT 100" title="IMPACT 100">
|
|
<img class="sponsor-logo" src="images/motorolasolutions.jpg" alt="Motorola Solutions" title="Motorola Solutions">
|
|
<img class="sponsor-logo" src="images/North_Broward_Preparatory_School_logo.png" alt="North Broward Prep" title="North Broward Prep">
|
|
<img class="sponsor-logo" src="images/NVLogo_2D_H.jpg" alt="NV5" title="NV5">
|
|
<img class="sponsor-logo" src="images/pearlcitycats.jpg" alt="Pearl City Cats" title="Pearl City Cats">
|
|
<img class="sponsor-logo" src="images/pjp.png" alt="PJP" title="PJP">
|
|
<img class="sponsor-logo" src="images/sheriffPAL.png" alt="Palm Beach County Sheriff PAL" title="Palm Beach County Sheriff PAL">
|
|
<img class="sponsor-logo" src="images/wpbpal.jpg" alt="WPB PAL" title="WPB PAL">
|
|
<img class="sponsor-logo" src="images/rdl.png" alt="RDL" title="RDL">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== MEMBERSHIP ===== -->
|
|
<section class="membership-section" id="membership">
|
|
<div class="container">
|
|
<h2 class="section-title">Membership</h2>
|
|
<div class="section-divider"></div>
|
|
|
|
<div class="membership-details">
|
|
<div class="membership-price">$125 <span>/ month</span></div>
|
|
<p>Monthly membership covers all equipment and competition registration fees. Everything your student needs to participate is included.</p>
|
|
<p>Members also receive a <strong>$125/week discount</strong> off summer camp tuition.</p>
|
|
<a href="https://form.jotform.com/82168769186170" target="_blank" class="btn-cta">Sign Up Now</a>
|
|
<div class="membership-contact">
|
|
<p>Questions? Contact us at <a href="mailto:contact@stemhq.org">contact@stemhq.org</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== FOOTER ===== -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-brand">STEM HQ Inc.</div>
|
|
<p>Empowering students through robotics and STEM education</p>
|
|
<p>Contact: <a href="mailto:contact@stemhq.org">contact@stemhq.org</a></p>
|
|
<div class="social-links">
|
|
<a href="#" title="Facebook">FB</a>
|
|
<a href="#" title="Twitter">TW</a>
|
|
<a href="#" title="Instagram">IG</a>
|
|
<a href="#" title="YouTube">YT</a>
|
|
</div>
|
|
<p style="margin-top:20px;font-size:0.8rem;">© 2024 STEM HQ Inc. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Carousel
|
|
(function() {
|
|
const slides = document.querySelectorAll('.carousel-slide');
|
|
const dots = document.querySelectorAll('.carousel-dots button');
|
|
const captionEl = document.getElementById('carouselCaption');
|
|
let current = 0;
|
|
let timer;
|
|
|
|
function showSlide(index) {
|
|
slides.forEach(s => s.classList.remove('active'));
|
|
dots.forEach(d => d.classList.remove('active'));
|
|
current = index;
|
|
slides[current].classList.add('active');
|
|
dots[current].classList.add('active');
|
|
captionEl.textContent = slides[current].dataset.caption;
|
|
}
|
|
|
|
function next() {
|
|
showSlide((current + 1) % slides.length);
|
|
}
|
|
|
|
function startTimer() {
|
|
timer = setInterval(next, 5000);
|
|
}
|
|
|
|
dots.forEach(dot => {
|
|
dot.addEventListener('click', function() {
|
|
clearInterval(timer);
|
|
showSlide(parseInt(this.dataset.index));
|
|
startTimer();
|
|
});
|
|
});
|
|
|
|
showSlide(0);
|
|
startTimer();
|
|
})();
|
|
|
|
// Mobile nav toggle
|
|
document.getElementById('hamburger').addEventListener('click', function() {
|
|
document.getElementById('navLinks').classList.toggle('open');
|
|
});
|
|
|
|
// Close mobile nav on link click
|
|
document.querySelectorAll('.nav-links a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
document.getElementById('navLinks').classList.remove('open');
|
|
});
|
|
});
|
|
|
|
// Active nav highlight on scroll
|
|
(function() {
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('.nav-links a');
|
|
|
|
function onScroll() {
|
|
const scrollY = window.scrollY + 100;
|
|
sections.forEach(section => {
|
|
const top = section.offsetTop;
|
|
const height = section.offsetHeight;
|
|
const id = section.getAttribute('id');
|
|
if (scrollY >= top && scrollY < top + height) {
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
const active = document.querySelector('.nav-links a[href="#' + id + '"]');
|
|
if (active) active.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
onScroll();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|