WAutoWideWeb/index.html at develop · WisconsinAutonomous/WAutoWideWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Wisconsin Autonomous is a student-led autonomous vehicle team at UW-Madison." />
  <title>Wisconsin Autonomous</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="noise" aria-hidden="true"></div>
  <div class="cow-spots" data-cow-spots aria-hidden="true">
    <span class="cow-spot spot-one">
      <svg viewBox="0 0 180 130" focusable="false">
        <path d="M18 74C8 49 26 31 55 27C70 25 75 9 99 10C122 11 127 30 120 45C146 44 161 55 160 75C159 97 137 101 124 91C116 119 91 128 70 110C55 97 49 91 30 95C15 99 6 90 18 74Z" />
      </svg>
    </span>
    <span class="cow-spot spot-two">
      <svg viewBox="0 0 150 140" focusable="false">
        <path d="M85 6C112 2 130 18 127 44C124 64 143 77 134 102C125 129 96 132 84 108C75 91 53 96 36 88C13 77 18 45 43 38C62 33 59 10 85 6Z" />
      </svg>
    </span>
    <span class="cow-spot spot-three">
      <svg viewBox="0 0 220 120" focusable="false">
        <path d="M13 88C20 59 54 64 73 43C96 17 154 17 174 43C188 62 220 56 211 84C203 109 168 103 143 103C116 102 98 117 72 109C48 101 3 114 13 88Z" />
      </svg>
    </span>
    <span class="cow-spot spot-four">
      <svg viewBox="0 0 120 170" focusable="false">
        <path d="M45 8C71 2 93 24 83 50C78 64 105 74 104 99C103 124 79 126 67 145C55 163 28 161 20 137C14 119 28 105 19 86C9 64 20 47 36 41C52 35 25 14 45 8Z" />
      </svg>
    </span>
    <span class="cow-spot spot-five">
      <svg viewBox="0 0 210 125" focusable="false">
        <path d="M16 78C7 52 37 39 60 43C84 48 87 17 121 17C151 17 156 40 179 43C205 46 209 82 185 98C164 113 141 97 118 103C91 110 77 123 50 111C31 102 21 94 16 78Z" />
      </svg>
    </span>
    <span class="cow-spot spot-six">
      <svg viewBox="0 0 210 100" focusable="false">
        <path d="M15 65C22 39 48 47 69 31C95 11 144 17 159 36C174 55 207 45 201 72C195 99 157 91 132 89C102 87 83 102 54 94C32 88 8 88 15 65Z" />
      </svg>
    </span>
    <span class="cow-spot spot-seven">
      <svg viewBox="0 0 135 170" focusable="false">
        <path d="M78 9C107 12 122 37 111 66C104 85 129 93 121 121C113 150 79 148 66 132C53 115 34 158 17 134C4 116 21 98 17 78C12 51 29 36 50 35C70 35 52 7 78 9Z" />
      </svg>
    </span>
    <span class="cow-spot spot-eight">
      <svg viewBox="0 0 230 150" focusable="false">
        <path d="M26 84C5 55 32 25 73 31C94 34 104 8 138 12C173 16 176 43 161 61C192 56 219 71 215 99C211 130 170 137 145 119C126 105 103 148 69 134C42 123 44 102 26 84Z" />
      </svg>
    </span>
    <span class="cow-spot spot-nine">
      <svg viewBox="0 0 165 125" focusable="false">
        <path d="M16 83C4 55 24 35 52 40C74 44 76 11 105 13C130 15 144 34 137 57C159 59 164 88 143 104C123 119 101 102 82 111C58 121 29 113 16 83Z" />
      </svg>
    </span>
    <span class="cow-spot spot-ten">
      <svg viewBox="0 0 250 95" focusable="false">
        <path d="M15 61C23 34 62 42 91 27C123 10 162 13 179 29C196 45 236 34 242 58C249 87 210 94 178 86C145 77 124 96 92 88C60 81 6 91 15 61Z" />
      </svg>
    </span>
  </div>
  <header class="site-header" data-header>
    <a class="brand" href="#home" aria-label="Wisconsin Autonomous home">
      <img src="assets/images/brand/wisconsin_autonomous_logo.jpeg" alt="Wisconsin Autonomous" />
    </a>

    <button class="menu-toggle" data-menu-toggle aria-label="Open navigation" aria-expanded="false">
      <span></span><span></span>
    </button>

    <nav class="nav" data-nav>
      <a href="#about">About</a>
      <a href="#vehicle">Vehicle</a>
      <a href="#competitions">Competitions</a>
      <a href="#work">Work</a>
      <a href="#people">People</a>
      <a href="#sponsors">Sponsors</a>
      <a href="#join" class="nav-cta">Join</a>
    </nav>
  </header>

  <main id="home">
    <section class="hero section">
      <div class="hero-copy">
        <p class="eyebrow"><span></span> UW-Madison autonomous vehicle team</p>
        <h1>Building autonomy that can handle the real world.</h1>
        <p class="hero-subtitle">
          A student-led team designing perception, planning, controls, simulation,
          and vehicle systems around one unmistakable cow-print Blazer EV.
        </p>

        <div class="hero-actions">
          <a href="#join" class="button primary">Get involved</a>
          <a href="#work" class="button ghost">See our work</a>
        </div>

        <div class="ticker" aria-label="Team focus areas">
          <span>Perception</span>
          <span>Infrastructure</span>
          <span>Controls</span>
          <span>Hardware</span>
          <span>Vehicle integration</span>
        </div>
      </div>

      <div class="hero-visual">
        <img src="assets/images/hero/DSC07960.jpg" alt="Wisconsin Autonomous car driving during testing" />
        <div class="status-card">
          <span class="pulse"></span>
          <p>Vehicle online</p>
          <img src="assets/images/brand/wisconsin_autonomous_logo.jpeg" alt="Wisconsin Autonomous" />
        </div>
      </div>
    </section>

    <section class="section split" id="about">
      <div>
        <p class="eyebrow"><span></span> Who we are</p>
        <h2>Student-led research and development for self-driving vehicles.</h2>
      </div>
      <div class="section-text">
        <p>
          Wisconsin Autonomous is a University of Wisconsin-Madison organization dedicated
          to the research and development of self-driving vehicles.
        </p>
        <p>
          The team builds around real competitions, physical vehicle testing, and the
          state-of-the-art technologies needed to demonstrate autonomous driving behavior.
        </p>
      </div>
    </section>

    <section class="section vehicle" id="vehicle">
      <div class="vehicle-card reveal">
        <div class="vehicle-image">
          <img src="assets/images/vehicle/IMG_0768.PNG" alt="Side profile of Wisconsin Autonomous vehicle in the garage" />
        </div>
        <div class="vehicle-copy">
          <p class="eyebrow"><span></span> The car</p>
          <h2>White base. Black cow spots. Red Wisconsin energy.</h2>
          <p>
            The visual system uses the car itself as the identity: strong white space,
            soft black spot shapes, and sharp red accents for calls to action.
          </p>
          <div class="spec-grid">
            <span>Camera-first autonomy</span>
            <span>Student-built stack</span>
            <span>Real vehicle testing</span>
            <span>UW-Madison team</span>
          </div>
        </div>
      </div>
    </section>

    <section class="section competitions" id="competitions">
      <div class="section-heading">
        <p class="eyebrow"><span></span> Competitions</p>
        <h2>Past competitions and the next challenge.</h2>
      </div>

      <h3 class="stats-title">AutoDrive final year rankings</h3>
      <div class="stats-strip" aria-label="Final year rankings">
        <article>
          <strong data-count="2" data-suffix="nd">0</strong>
          <span>Year 5 Overall</span>
        </article>
        <article>
          <strong data-count="2" data-suffix="nd">0</strong>
          <span>Dynamic events</span>
        </article>
        <article>
          <strong data-count="1" data-suffix="st">0</strong>
          <span>Design Your Own</span>
        </article>
        <article>
          <strong data-count="3" data-suffix="rd">0</strong>
          <span>100% Buy Off Challenge</span>
        </article>
        <article>
          <strong data-count="2" data-suffix="nd">0</strong>
          <span>Localization Challenge</span>
        </article>
      </div>

      <div class="competition-showcase">
        <article class="competition-card competition-card-large next-competition reveal">
          <div class="competition-media">
            <img src="assets/images/competitions/ecocar-innovation.png" alt="Wisconsin Autonomous members at the ECOCAR Innovation Challenge" />
          </div>
          <div>
            <p class="eyebrow"><span></span> Next competition</p>
            <h3>ECOCAR Innovation Challenge</h3>
            <p>
              UW-Madison is one of 20 universities selected by the U.S. Department of
              Energy and Argonne National Laboratory for the EcoCAR Innovation Challenge,
              the next Advanced Vehicle Technology Competition. The team will compete on
              the General Motors Track with a 2026 Chevrolet Blazer EV provided by GM.
            </p>
            <a class="button ghost source-link" href="https://engineering.wisc.edu/blog/uw-madison-selected-for-ecocar-innovation-challenge/" target="_blank" rel="noopener">Read the announcement</a>
          </div>
        </article>

        <article class="competition-card competition-card-large reveal">
          <div class="competition-video">
            <iframe
              src="https://www.youtube.com/embed/buRxjcsR3aQ?enablejsapi=1&rel=0&playsinline=1&vq=hd1080"
              title="AutoDrive Challenge II video"
              data-youtube-player
              data-playback-rate="2"
              data-playback-quality="hd1080"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen>
            </iframe>
          </div>
          <div>
            <p class="eyebrow"><span></span> Past competition</p>
            <h3>AutoDrive Challenge II final year results</h3>
            <p>
              General Motors and SAE organized the AutoDrive Challenge II, where collegiate
              teams develop and demonstrate autonomous vehicle technologies. Wisconsin
              Autonomous finished the final year ranked 2nd overall, 2nd in
              dynamic events, 1st in Design Your Own Challenge, 3rd in the 100% Buy Off
              Ride Challenge, and 2nd in Localization Challenge. Across the full five-year
              AutoDrive II Challenge, the team finished 3rd overall.
            </p>
            <a class="button ghost source-link" href="https://engineering.wisc.edu/blog/wisconsin-autonomous-wraps-up-autodrive-ii-challenge/" target="_blank" rel="noopener">Read the wrap-up</a>
          </div>
        </article>

        <article class="competition-card reveal">
          <img src="assets/images/competitions/evgrandprix-2022.png" alt="Wisconsin Autonomous team with evGrandPrix go-kart" />
          <div>
            <h3>evGrandPrix</h3>
            <p>
              In May 2022, the team showcased autonomous go-kart progress through time
              trials and obstacle avoidance, earning 3rd place.
            </p>
          </div>
        </article>

        <article class="competition-card reveal">
          <img src="assets/images/competitions/past-competitions.jpg" alt="Wisconsin Autonomous past competition vehicle" />
          <div>
            <h3>Indy Autonomous Challenge</h3>
            <p>
              Wisconsin Autonomous also competed in the international Indy Autonomous
              Challenge with the MIT-PITT-RW team.
            </p>
          </div>
        </article>
      </div>
    </section>

    <section class="section" id="work">
      <div class="section-heading">
        <p class="eyebrow"><span></span> What we build</p>
        <h2>One stack. Many disciplines.</h2>
      </div>

      <div class="cards">
        <article class="work-card reveal" data-tilt>
          <span class="card-number">01</span>
          <h3>Perception</h3>
          <p>Scene understanding, lanes, traffic controls, obstacles, drivable space, and real-time deployment.</p>
        </article>
        <article class="work-card reveal" data-tilt>
          <span class="card-number">02</span>
          <h3>Infrastructure</h3>
          <p>Compute, networking, sensor integration, logging, visualization, and race-day reliability.</p>
        </article>
        <article class="work-card reveal" data-tilt>
          <span class="card-number">03</span>
          <h3>Controls</h3>
          <p>Vehicle behavior, tracking, actuation, simulation-assisted development, and validation.</p>
        </article>
        <article class="work-card reveal" data-tilt>
          <span class="card-number">04</span>
          <h3>Hardware</h3>
          <p>Mechanical and electrical hardware for mounts, wiring, sensors, power, fabrication, and vehicle integration.</p>
        </article>
      </div>
    </section>

    <section class="section people" id="people">
      <div class="section-heading">
        <p class="eyebrow"><span></span> People</p>
        <h2>Student leaders building across the whole autonomy stack.</h2>
      </div>

      <div class="team-photo reveal">
        <img src="assets/images/people/team-group-2025.jpeg" alt="Wisconsin Autonomous team with the cow-print vehicle" />
      </div>

      <div class="people-intro">
        <article class="people-card reveal">
          <span>75+</span>
          <h3>Students annually</h3>
          <p>Members contribute across autonomy, vehicle integration, operations, and competition execution.</p>
        </article>
        <article class="people-card reveal">
          <span>8</span>
          <h3>Leadership roles</h3>
          <p>The team is organized around technical leads and operations support pulled from the official WA roster.</p>
        </article>
      </div>

      <div class="team-grid">
        <article class="team-card reveal">
          <img src="assets/images/people/team-patrick-chen.jpg" alt="Patrick Chen" />
          <div>
            <p>Technical Director</p>
            <h3>Patrick Chen</h3>
          </div>
        </article>
        <article class="team-card reveal">
          <img src="assets/images/people/team-keshav-sharan.jpg" alt="Keshav Sharan" />
          <div>
            <p>Technical Director</p>
            <h3>Keshav Sharan</h3>
          </div>
        </article>
        <article class="team-card reveal">
          <img src="assets/images/people/team-ryan-murphy.jpg" alt="Ryan Murphy" />
          <div>
            <p>President</p>
            <h3>Ryan Murphy</h3>
          </div>
        </article>
        <article class="team-card reveal">
          <img src="assets/images/people/team-allen-xia.jpg" alt="Allen Xia" />
          <div>
            <p>Perception Lead</p>
            <h3>Allen Xia</h3>
          </div>
        </article>
        <article class="team-card reveal">
          <img src="assets/images/people/team-edison-xie.jpg" alt="Edison Xie" />
          <div>
            <p>Infrastructure Lead</p>
            <h3>Edison Xie</h3>
          </div>
        </article>
        <article class="team-card reveal">
          <img src="assets/images/people/team-akash-deepak.jpg" alt="Akash Deepak" />
          <div>
            <p>Controls Lead</p>
            <h3>Akash Deepak</h3>
          </div>
        </article>
        <article class="team-card reveal">
          <img src="assets/images/people/team-joshua-clark.jpg" alt="Joshua Clark" />
          <div>
            <p>Operations Lead</p>
            <h3>Joshua Clark</h3>
          </div>
        </article>
        <article class="team-card reveal">
          <img src="assets/images/people/team-warner-vance.jpg" alt="Warner Vance" />
          <div>
            <p>Hardware Lead</p>
            <h3>Warner Vance</h3>
          </div>
        </article>
      </div>
    </section>

    <section class="section sponsors" id="sponsors">
      <div class="sponsor-copy">
        <p class="eyebrow"><span></span> Partners</p>
        <h2>Thank you sponsors.</h2>
        <p>
          Wisconsin Autonomous relies on professional partners for the parts, tools,
          materials, and funds needed to build a level 4 autonomous race car.
          Sponsorship also supports STEM education and the next generation of
          Wisconsin problem solvers.
        </p>
      </div>
      <div class="sponsor-logo-board reveal">
        <img src="assets/images/sponsors/sponsor-cluster-2025-26.png" alt="Wisconsin Autonomous 2025-2026 sponsors" />
      </div>
    </section>

    <section class="section join" id="join">
      <div class="join-panel reveal">
        <p class="eyebrow"><span></span> Join the team</p>
        <h2>Want your work to move a real autonomous vehicle?</h2>
        <p>
          We are looking for students who can learn fast, build carefully, and keep showing up
          when the car refuses to cooperate.
        </p>
        <form class="signup" data-form>
          <input type="email" placeholder="student@wisc.edu" aria-label="Email address" required />
          <button type="submit">Stay updated</button>
        </form>
        <p class="form-note" data-form-note></p>
      </div>
    </section>
  </main>

  <footer class="footer">
    <a class="brand small" href="#home" aria-label="Wisconsin Autonomous home">
      <img src="assets/images/brand/wisconsin_autonomous_logo.jpeg" alt="Wisconsin Autonomous" />
    </a>
    <p>Built at UW-Madison.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>