1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Larry Whiteside Jr. â Cybersecurity Executive · Board Director · Board Advisor · Mentor · Speaker</title> 7 <meta name="description" content="Larry Whiteside Jr. is a cybersecurity executive, board director, board advisor, mentor, keynote speaker, Co-Founder of Confide, Chief Advisory Officer of The CISO Society, and Co-Founder & President Emeritus of Cyversity with 30+ years protecting critical infrastructure." /> 8 <meta name="author" content="Larry Whiteside Jr." /> 9 <meta property="og:title" content="Larry Whiteside Jr. | Cybersecurity Executive & Speaker" /> 10 <meta property="og:description" content="Trusted cybersecurity leader, speaker, advisor, and community builder." /> 11 <meta property="og:type" content="website" /> 12 <meta property="og:url" content="https://www.larrywhitesidejr.com" /> 13 <!-- REPLACE: add a real OG image at assets/images/og-image.jpg (1200Ã630px recommended) --> 14 <!-- <meta property="og:image" content="assets/images/og-image.jpg" /> --> 15 16 <link rel="preconnect" href="https://fonts.googleapis.com" /> 17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 18 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> 19 <link rel="stylesheet" href="styles.css" /> 20</head> 21<body> 22 23 <!-- ============================================================ 24 FIXED FULL-SITE BACKGROUND 25 REPLACE: swap the CSS background-image in styles.css 26 (.site-bg rule) with your real stage photo path: 27 background-image: url('assets/images/hero-bg.jpg'); 28 This image stays fixed behind EVERY section on the page. 29 ============================================================ --> 30 <div class="site-bg" aria-hidden="true"></div> 31 32 <!-- ============================================================ 33 NAVIGATION 34 ============================================================ --> 35 <nav class="nav" id="nav" role="navigation" aria-label="Main navigation"> 36 <div class="nav__inner container"> 37 <a href="#hero" class="nav__logo" aria-label="Larry Whiteside Jr. home"> 38 LWJ<span class="nav__logo-dot">.</span> 39 </a> 40 41 <button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false"> 42 <span></span><span></span><span></span> 43 </button> 44 45 <ul class="nav__links" id="navLinks" role="list"> 46 <li><a href="#about" class="nav__link">About</a></li> 47 <li><a href="#events" class="nav__link">Events</a></li> 48 <li><a href="#speaking" class="nav__link">Speaking</a></li> 49 <li><a href="#organizations" class="nav__link">Organizations</a></li> 50 <li><a href="#content" class="nav__link">Content</a></li> 51 <li><a href="#gallery" class="nav__link">Gallery</a></li> 52 <li><a href="#contact" class="nav__link nav__link--cta">Contact</a></li> 53 </ul> 54 </div> 55 </nav> 56 57 58 <!-- ============================================================ 59 HERO 60 REPLACE: add your real headshot at assets/images/headshot.jpg 61 Recommended size: 600Ã800px, portrait orientation 62 ============================================================ --> 63 <section class="hero" id="hero" aria-label="Introduction"> 64 <div class="hero__overlay" aria-hidden="true"></div> 65 66 <div class="hero__inner container"> 67 <div class="hero__content"> 68 69 <div class="hero__pill reveal"> 70 <span class="hero__pill-dot"></span> 71 Available for Speaking Engagements & Board Directorship & Board Advisory 72 </div> 73 74 <h1 class="hero__name reveal reveal--delay-1"> 75 Larry<br/>Whiteside Jr<span class="gold">.</span> 76 </h1> 77 78 <p class="hero__tagline reveal reveal--delay-2"> 79 Cybersecurity Executive · Board Director · Board Advisor · Co-Founder · Speaker · Community Builder · Investor · Mentor 80 </p> 81 82 <p class="hero__bio reveal reveal--delay-3"> 83 Trusted cybersecurity leader, servant of the mission, and builder of communities 84 that make the digital world safer for everyone. 85 </p> 86 87 <div class="hero__actions reveal reveal--delay-4"> 88 <a href="#contact" class="btn btn--primary">Book Me to Speak</a> 89 <a href="#events" class="btn btn--outline">Upcoming Events</a> 90 </div> 91 92 <!-- UPDATE: tweak numbers here if they change --> 93 <div class="hero__stats reveal reveal--delay-5"> 94 <div class="hero__stat">
95 <span class="hero__stat-number" data-target="30">0</span><span class="hero__stat-suffix">+</span> 96 <span class="hero__stat-label">Years Experience</span> 97 </div> 98 <div class="hero__stat"> 99 <span class="hero__stat-number">8Ã</span> 100 <span class="hero__stat-label">CISO / CTO / CSO</span> 101 </div> 102 <div class="hero__stat"> 103 <span class="hero__stat-number" data-target="2000">0</span><span class="hero__stat-suffix">+</span> 104 <span class="hero__stat-label">CISO Community Members</span> 105 </div> 106 <div class="hero__stat"> 107 <span class="hero__stat-number">USAF</span> 108 <span class="hero__stat-label">Former Officer</span> 109 </div> 110 </div> 111 112 </div> 113 114 <!-- Headshot --> 115 <div class="hero__photo-wrap reveal reveal--delay-2"> 116 <!-- 117 REPLACE: uncomment the <img> below and remove the placeholder div 118 once you have a real headshot at assets/images/headshot.jpg 119 --> 120 <img src="assets/images/headshot.jpg" alt="Larry Whiteside Jr." class="hero__photo" /> 121 <!--<div class="hero__photo-placeholder" aria-label="Photo of Larry Whiteside Jr."> 122 <div class="hero__photo-initials">LWJ</div> 123 </div> --> 124 <div class="hero__photo-badge" aria-hidden="true"> 125 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg> 126 Cybersecurity Executive 127 </div> 128 </div> 129 130 </div> 131 132 <a href="#about" class="hero__scroll" aria-label="Scroll to About section"> 133 <span class="hero__scroll-line"></span> 134 <span class="hero__scroll-text">Scroll</span> 135 </a> 136 </section> 137 138 139 <!-- ============================================================ 140 ABOUT 141 UPDATE: biography text, highlights, and quote below 142 ============================================================ --> 143 <section class="section about" id="about" aria-labelledby="about-heading"> 144 <div class="section__glass-bg" aria-hidden="true"></div> 145 <div class="container"> 146 147 <div class="section__header reveal"> 148 <span class="section__eyebrow">About Me</span> 149 <h2 class="section__title" id="about-heading">Mission-Driven Leader</h2> 150 </div> 151 152 <div class="about__grid"> 153 154 <div class="about__text reveal"> 155 <div class="glass-panel"> 156 <!-- REPLACE: update the biography paragraphs below --> 157 <p> 158 <strong>Larry Whiteside Jr.</strong> is a nationally recognized cybersecurity executive 159 with more than 30 years of experience protecting critical infrastructure, building 160 world-class security organizations, and developing the next generation of cyber leaders. 161 </p> 162 <p> 163 Throughout his career, Larry has served as CISO, CTO, and CSO across healthcare, 164 financial services, retail, and the public sector â bringing a practical, people-first 165 approach to enterprise security strategy and risk management. 166 </p> 167 <p> 168 As the <strong>Co-Founder & President of Confide</strong> and 169 <strong>Chief Advisory Officer of The CISO Society</strong>, Larry has built two of the most 170 respected peer communities in cybersecurity â creating safe spaces where executives 171 share knowledge, support one another, and elevate the profession. 172 </p> 173 <p> 174 A proud veteran of the <strong>United States Air Force</strong>, Larry brings 175 discipline, mission clarity, and servant leadership to everything he does. His 176 faith grounds his purpose: to protect people, develop leaders, and leave the 177 world more secure than he found it. 178 </p> 179 180 <!-- REPLACE: update highlights to match your current roles --> 181 <ul class="about__highlights"> 182 <li>
183 <svg class="about__highlight-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg> 184 Co-Founder & President â Confide 185 </li> 186 <li> 187 <svg class="about__highlight-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg> 188 Chief Advisory Officer â The CISO Society 189 </li> 190 <li> 191 <svg class="about__highlight-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg> 192 Co-Founder & President Emeritus â Cyversity 193 </li> 194 <li> 195 <svg class="about__highlight-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg> 196 Former United States Air Force Officer 197 </li> 198 <li> 199 <svg class="about__highlight-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg> 200 Board Director, Board Advisor, Investor & Mentor 201 </li> 202 <li> 203 <svg class="about__highlight-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg> 204 Keynote Speaker at global security conferences 205 </li> 206 </ul> 207 <a href="#contact" class="btn btn--primary">Work With Me</a> 208 </div> 209 </div> 210 211 <!-- Career Timeline â UPDATE milestones in script.js `timeline` array --> 212 <div class="about__timeline-wrap reveal reveal--delay-1"> 213 <div class="glass-panel about__timeline-panel"> 214 <h3 class="about__timeline-heading">Career Milestones</h3> 215 <div class="timeline" id="timelineList"> 216 <!-- Populated by script.js --> 217 </div> 218 </div> 219 <!-- REPLACE: update the quote below --> 220 <div class="about__quote-card glass-panel" aria-label="Personal philosophy"> 221 "Faith Led â <em>Mission Aligned</em> Protecting people and prevserving purpose." 222 </div> 223 </div> 224 225 </div> 226 </div> 227 </section> 228 229 230 <!-- ============================================================ 231 EVENTS 232 UPDATE: set publicCalendarUrl in content.js 233 ============================================================ --> 234 <section class="section events" id="events" aria-labelledby="events-heading"> 235 <div class="section__glass-bg" aria-hidden="true"></div> 236 <div class="container"> 237 238 <div class="section__header reveal"> 239 <span class="section__eyebrow">Where I'll Be</span> 240 <h2 class="section__title" id="events-heading">Upcoming Events</h2> 241 <p class="section__subtitle">Catch me live â speaking, hosting, or attending the most important events in cybersecurity.</p> 242 </div> 243 244 <!-- Google Calendar embed â populated by script.js using publicCalendarUrl in content.js --> 245 <div id="calendarEmbed" aria-label="Upcoming events calendar"></div> 246 247 </div> 248 </section> 249 250 251 <!-- ============================================================ 252 SPEAKING 253 UPDATE speaking topics in script.js `speakingTopics` array 254 ============================================================ --> 255 <section class="section speaking" id="speaking" aria-labelledby="speaking-heading"> 256 <div class="section__glass-bg section__glass-bg--alt" aria-hidden="true"></div> 257 <div class="container"> 258 259 <!-- ââ INTRO ââ --> 260 <div class="section__header reveal">
261 <span class="section__eyebrow">On the Stage</span> 262 <h2 class="section__title" id="speaking-heading">Speaking & Engagements</h2> 263 </div> 264 265 <div class="speaking__intro reveal"> 266 <div class="glass-panel speaking__intro-panel"> 267 <div class="speaking__intro-text"> 268 <p class="speaking__intro-lead"> 269 Organizations don't invite Larry Whiteside Jr. to fill a timeslot. 270 They invite him because their audience needs to hear something real. 271 </p> 272 <p> 273 With more than three decades leading cybersecurity programs across government and commercial sectors, 274 Larry brings a rare combination of operational depth, executive perspective, and storytelling that 275 makes complex security challenges feel urgent, human, and solvable. 276 </p> 277 <p> 278 His sessions are not slide decks dressed up as keynotes. They are honest, story-driven conversations 279 built from real decisions made under real pressure â with practical guidance audiences can apply 280 the moment they walk out of the room. 281 </p> 282 <p> 283 Whether he is addressing a boardroom, a CISO summit, a university class, or a room full of emerging 284 leaders, Larry reads the room and meets audiences where they are. He has spent his career translating 285 between the language of technology, the language of risk, and the language of people â 286 and that is exactly what he brings to every stage. 287 </p> 288 </div> 289 <div class="speaking__intro-stats"> 290 <div class="speaking__intro-stat"> 291 <span class="speaking__intro-stat-num">30+</span> 292 <span class="speaking__intro-stat-label">Years in Cybersecurity</span> 293 </div> 294 <div class="speaking__intro-stat"> 295 <span class="speaking__intro-stat-num">8Ã</span> 296 <span class="speaking__intro-stat-label">CISO / CSO / CTO</span> 297 </div> 298 <div class="speaking__intro-stat"> 299 <span class="speaking__intro-stat-num">3</span> 300 <span class="speaking__intro-stat-label">Organizations Founded</span> 301 </div> 302 <div class="speaking__intro-stat"> 303 <span class="speaking__intro-stat-num">Global</span> 304 <span class="speaking__intro-stat-label">Stages & Audiences</span> 305 </div> 306 </div> 307 </div> 308 </div> 309 310 <!-- ââ WHY ORGANIZERS INVITE LARRY ââ --> 311 <div class="speaking__why reveal"> 312 <h3 class="speaking__section-heading">Why Event Organizers Invite Larry</h3> 313 <p class="speaking__section-sub"> 314 There is no shortage of cybersecurity speakers. What is rare is someone who can speak fluently 315 to the board and to the analyst, to the skeptic and to the believer â and make both feel seen. 316 </p> 317 <div class="speaking__differentiators" id="speakingDifferentiators"> 318 <!-- Populated by script.js --> 319 </div> 320 </div> 321 322 <!-- ââ SPEAKING TOPICS ââ --> 323 <div class="speaking__topics-section reveal"> 324 <h3 class="speaking__section-heading">Speaking Topics</h3> 325 <p class="speaking__section-sub"> 326 Every session is customized for the audience, the format, and the moment. 327 These are the areas where Larry speaks most frequently and with the greatest impact. 328 </p> 329 <!-- Topic cards rendered by script.js `speakingTopics` --> 330 <div class="speaking__topics" id="speakingTopicsGrid"> 331 <!-- Populated by script.js --> 332 </div> 333 </div> 334 335 <!-- ââ IDEAL AUDIENCES ââ --> 336 <div class="speaking__audiences reveal"> 337 <h3 class="speaking__section-heading">Ideal Audiences</h3> 338 <p class="speaking__section-sub">Larry speaks to audiences across industries, functions, and experience levels.</p> 339 <div class="speaking__audiences-grid" id="speakingAudiences"> 340 <!-- Populated by script.js --> 341 </div> 342 </div> 343 344 <!-- ââ PAST VENUES ââ --> 345 <div class="speaking__venues reveal"> 346 <h3 class="speaking__section-heading">Where Larry Has Contributed</h3> 347 <p class="speaking__section-sub"> 348 A sampling of the conferences, summits, and forums where Larry has delivered keynotes, 349 led panels, and facilitated executive conversations. 350 </p> 351 <div class="speaking__venues-grid" id="speakingVenues"> 352 <!-- Populated by script.js --> 353 </div> 354 </div> 355 356 <!-- ââ SPEAKING FORMATS ââ --> 357 <div class="speaking__formats reveal"> 358 <h3 class="speaking__section-heading">Speaking Formats</h3> 359 <div class="speaking__formats-grid" id="speakingFormats"> 360 <!-- Populated by script.js --> 361 </div> 362 </div> 363 364 <!-- ââ CLOSING CTA ââ --> 365 <div class="speaking__closing reveal"> 366 <div class="glass-panel speaking__closing-panel"> 367 <div class="speaking__closing-tagline" aria-hidden="true"> 368 Faith Led. Mission Aligned. Protecting People and Preserving Purpose. 369 </div> 370 <h3>Bring Larry to Your Event</h3> 371 <p> 372 If you are planning a conference, executive summit, leadership forum, university event, 373 or private gathering and you want a speaker who will prepare, show up, and deliver â
374 Larry would be honored to be part of it. 375 </p> 376 <p> 377 Inquiries are welcomed from event organizers, associations, corporations, government agencies, 378 and universities of all sizes. Every speaking opportunity is taken seriously, regardless of audience size. 379 </p> 380 <div class="speaking__closing-actions"> 381 <a href="#contact" class="btn btn--primary">Inquire About Speaking</a> 382 <!-- 383 REPLACE: uncomment once you have a speaker kit PDF 384 <a href="assets/larry-whiteside-jr-speaker-kit.pdf" class="btn btn--outline" download>Download Speaker Kit</a> 385 --> 386 </div> 387 <p class="speaking__closing-faith"> 388 <em>"Faith Led. Mission Aligned. Protecting People and Preserving Purpose."</em> 389 </p> 390 </div> 391 </div> 392 393 </div> 394 </section> 395 396 397 <!-- ============================================================ 398 ORGANIZATIONS & PARTNERSHIPS 399 UPDATE partners in script.js `partners` array 400 ============================================================ --> 401 <section class="section organizations" id="organizations" aria-labelledby="organizations-heading"> 402 <div class="section__glass-bg" aria-hidden="true"></div> 403 <div class="container"> 404 405 <div class="section__header reveal"> 406 <span class="section__eyebrow">Community & Ecosystem</span> 407 <h2 class="section__title" id="organizations-heading">Organizations & Partnerships</h2> 408 <p class="section__subtitle">Leading and partnering with organizations that move the cybersecurity profession forward.</p> 409 </div> 410 411 <!-- Featured org cards --> 412 <div class="orgs__featured reveal" id="orgsFeatured"> 413 <!-- Populated by script.js `featuredOrgs` --> 414 </div> 415 416 <!-- Scrolling partner marquee --> 417 <div class="partners__marquee reveal" aria-label="Partner organizations"> 418 <div class="partners__track" id="partnersTrack"> 419 <!-- Populated by script.js `partners` --> 420 </div> 421 </div> 422 423 <div class="partners__cta reveal"> 424 <p>Interested in partnering or collaborating?</p> 425 <!-- REPLACE: update with your real partnerships contact --> 426 <a href="mailto:[email protected]" class="btn btn--outline">Let's Build Together</a> 427 </div> 428 429 </div> 430 </section> 431 432 433 <!-- ============================================================ 434 FEATURED CONTENT / MEDIA HUB 435 UPDATE content in script.js `featuredContent` array 436 ============================================================ --> 437 <section class="section content-feed" id="content" aria-labelledby="content-heading"> 438 <div class="section__glass-bg section__glass-bg--alt" aria-hidden="true"></div> 439 <div class="container"> 440 441 <div class="section__header reveal"> 442 <span class="section__eyebrow">Insights & Media</span> 443 <h2 class="section__title" id="content-heading">Featured Content</h2> 444 <p class="section__subtitle">Videos, podcasts, articles, and LinkedIn posts â click any card to view.</p> 445 </div> 446 447 <!-- LinkedIn featured post â UPDATE linkedInPost.embedUrl in content.js --> 448 <div id="linkedInPostWrap" style="display:none"></div> 449 450 <!-- Content cards â populated by script.js using featuredContent in content.js --> 451 <div class="content__grid" id="contentGrid" aria-label="Featured content"> 452 <!-- Populated by script.js --> 453 </div> 454 455 </div> 456 </section> 457 458 459 <!-- ============================================================ 460 SOCIAL MEDIA 461 UPDATE social links in script.js `socialLinks` array 462 ============================================================ --> 463 <section class="section social" id="social" aria-labelledby="social-heading"> 464 <div class="section__glass-bg" aria-hidden="true"></div> 465 <div class="container"> 466 467 <div class="section__header reveal"> 468 <span class="section__eyebrow">Stay Connected</span> 469 <h2 class="section__title" id="social-heading">Find Me Everywhere</h2> 470 <p class="section__subtitle">Follow the journey â insights, behind-the-scenes, and real conversations.
470</p> 471 </div> 472 473 <div class="social__grid" id="socialGrid" aria-label="Social media accounts"> 474 <!-- Populated by script.js --> 475 </div> 476 477 </div> 478 </section> 479 480 481 <!-- ============================================================ 482 PHOTO GALLERY 483 UPDATE: drop photos in assets/images/gallery/ 484 then add filenames to gallery-manifest.js 485 ============================================================ --> 486 <section class="section gallery" id="gallery" aria-labelledby="gallery-heading"> 487 <div class="section__glass-bg section__glass-bg--alt" aria-hidden="true"></div> 488 <div class="container"> 489 490 <div class="section__header reveal"> 491 <span class="section__eyebrow">Life in Focus</span> 492 <h2 class="section__title" id="gallery-heading">Photo Gallery</h2> 493 <p class="section__subtitle">On stages, in rooms, and around the world.</p> 494 </div> 495 496 <!-- Masonry grid populated by script.js using gallery-manifest.js --> 497 <div class="gallery__masonry reveal" id="galleryMasonry"> 498 <!-- Populated by script.js --> 499 </div> 500 501 </div> 502 </section> 503 504 505 <!-- ============================================================ 506 CONTACT 507 UPDATE contact info in script.js `contactInfo` object 508 TO ENABLE NETLIFY FORMS: 509 1. Add data-netlify="true" name="contact" to the <form> tag below 510 2. Add <input type="hidden" name="form-name" value="contact" /> inside the form 511 3. Deploy â Netlify detects and activates the form automatically 512 ============================================================ --> 513 <section class="section contact" id="contact" aria-labelledby="contact-heading"> 514 <div class="section__glass-bg" aria-hidden="true"></div> 515 <div class="container"> 516 517 <div class="section__header reveal"> 518 <span class="section__eyebrow">Let's Talk</span> 519 <h2 class="section__title" id="contact-heading">Get in Touch</h2> 520 <p class="section__subtitle"> 521 For speaking inquiries, board advisory, partnerships, media requests, or just to say hello. 522 </p> 523 </div> 524 525 <div class="contact__grid"> 526 527 <div class="contact__info reveal"> 528 <div class="glass-panel"> 529 <h3>Reach Out Directly</h3> 530 <div id="contactLinks"> 531 <!-- Populated by script.js `contactInfo` --> 532 </div> 533 <div class="contact__inquiry-types"> 534 <h4>Types of Inquiries</h4> 535 <div class="contact__inquiry-btns"> 536 <a href="#contact" class="btn btn--primary btn--sm">Speaking Inquiry</a> 537 <a href="#contact" class="btn btn--outline btn--sm">Board Advisory</a> 538 <a href="#contact" class="btn btn--outline btn--sm">Partnership</a> 539 <a href="#contact" class="btn btn--outline btn--sm">Media / Press</a> 540 </div> 541 </div> 542 </div> 543 </div> 544 545 <div class="contact__form-wrap reveal reveal--delay-1"> 546 <div class="glass-panel"> 547 <!-- 548 NETLIFY FORMS: Add these to the <form> element when ready: 549 data-netlify="true" name="contact" 550 And add this inside the form: 551 <input type="hidden" name="form-name" value="contact" /> 552 --> 553 <form class="contact__form" id="contactForm" novalidate aria-label="Contact form"> 554 <div class="form-row"> 555 <div class="form-group"> 556 <label for="contactName">Full Name <span aria-hidden="true">*</span></label> 557 <input type="text" id="contactName" name="name" required autocomplete="name" placeholder="Your full name" /> 558 </div> 559 <div class="form-group"> 560 <label for="contactEmail">Email Address <span aria-hidden="true">*</span></label> 561 <input type="email" id="contactEmail" name="email" required autocomplete="email" placeholder="[email protected]" /> 562 </div> 563 </div> 564 <div class="form-row"> 565 <div class="form-group"> 566 <label for="contactOrg">Organization</label> 567 <input type="text" id="contactOrg" name="organization" autocomplete="organization" placeholder="Company or organization" /> 568 </div> 569 <div class="form-group"> 570 <label for="contactType">Inquiry Type</label> 571 <select id="contactType" name="inquiry_type"> 572 <option value="">Select typeâ¦</option> 573 <option value="speaking">
573Speaking Engagement</option> 574 <option value="board">Board Advisory</option> 575 <option value="partnership">Partnership</option> 576 <option value="media">Media / Press</option> 577 <option value="mentorship">Mentorship</option> 578 <option value="other">Other</option> 579 </select> 580 </div> 581 </div> 582 <div class="form-group"> 583 <label for="contactMessage">Message <span aria-hidden="true">*</span></label> 584 <textarea id="contactMessage" name="message" required rows="5" placeholder="Tell me about your event, project, or how I can helpâ¦"></textarea> 585 </div> 586 <button type="submit" class="btn btn--primary btn--full">Send Message</button> 587 <p class="contact__form-note">* I typically respond within 2 business days.</p> 588 </form> 589 <div class="contact__success hidden" id="formSuccess" role="alert"> 590 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="20 6 9 17 4 12"/></svg> 591 <h3>Message Sent!</h3> 592 <p>Thank you for reaching out. I'll be in touch soon.</p> 593 </div> 594 </div> 595 </div> 596 597 </div> 598 </div> 599 </section> 600 601 602 <!-- ============================================================ 603 FOOTER 604 ============================================================ --> 605 <footer class="footer" role="contentinfo"> 606 <div class="footer__glass" aria-hidden="true"></div> 607 <div class="footer__inner container"> 608 609 <div class="footer__brand"> 610 <span class="footer__logo">LWJ<span class="gold">.</span></span> 611 <p class="footer__tagline">Cybersecurity Executive · Board Advisor · Speaker</p> 612 <div class="footer__social" id="footerSocial" aria-label="Social links"></div> 613 </div> 614 615 <nav class="footer__nav" aria-label="Footer navigation"> 616 <h4>Navigation</h4> 617 <a href="#about">About</a> 618 <a href="#events">Events</a> 619 <a href="#speaking">Speaking</a> 620 <a href="#organizations">Organizations</a> 621 <a href="#gallery">Gallery</a> 622 <a href="#contact">Contact</a> 623 </nav> 624 625 <div class="footer__orgs"> 626 <h4>Organizations</h4> 627 <!-- REPLACE: update hrefs with real org URLs --> 628 <a href="https://www.confide.group" target="_blank" rel="noopener noreferrer">Confide</a> 629 <a href="https://www.cisosociety.org" target="_blank" rel="noopener noreferrer">The CISO Society</a> 630 <a href="https://cyversity.org" target="_blank" rel="noopener noreferrer">Cyversity</a> 631 <a href="https://cloudsecurityalliance.org" target="_blank" rel="noopener noreferrer">Cloud Security Alliance</a> 632 </div> 633 634 </div> 635 <div class="footer__bottom"> 636 <div class="container"> 637 <p>© <span id="footerYear"></span> Larry Whiteside Jr. All rights reserved.</p> 638 <p class="footer__built">Built with purpose.</p> 639 </div> 640 </div> 641 </footer> 642 643 644 <!-- ============================================================ 645 LIGHTBOX (Gallery) 646 ============================================================ --> 647 <div class="lightbox hidden" id="lightbox" role="dialog" aria-modal="true" aria-label="Photo viewer"> 648 <button class="lightbox__close" id="lightboxClose" aria-label="Close photo viewer">✕</button> 649 <button class="lightbox__prev" id="lightboxPrev" aria-label="Previous photo">←</button> 650 <div class="lightbox__img-wrap"> 651 <img class="lightbox__img" id="lightboxImg" src="" alt="" /> 652 </div> 653 <button class="lightbox__next" id="lightboxNext" aria-label="Next photo">→</button> 654 <p class="lightbox__caption" id="lightboxCaption"></p> 655 </div> 656 657
657<script src="gallery-manifest.js"></script>
657 658
658<script src="content.js"></script>
658 659
659<script src="script.js?v=3"></script>
659 660</body> 661</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.