my personal site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Update portfolio with new images and content

+1091 -61
images/Yik Yak VT/YYVT-1.png

This is a binary file and will not be displayed.

images/Yik Yak VT/YYVT-2.png

This is a binary file and will not be displayed.

images/Yik Yak VT/YYVT-3.png

This is a binary file and will not be displayed.

+1
images/bluesky-brands-solid.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
+1
images/github-brands.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+1
images/linkedin-brands.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
images/vt-gym-screenshot.jpeg

This is a binary file and will not be displayed.

images/yikyak-profile.jpg

This is a binary file and will not be displayed.

+21 -1
index.html
··· 13 13 </script> 14 14 <link rel="stylesheet" href="style.css" /> 15 15 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=match_case" /> 16 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> 16 17 <style> 17 18 .material-symbols-outlined { 18 19 font-variation-settings: ··· 70 71 <section class="intro profile-header"> 71 72 <div class="intro-text profile-header-content"> 72 73 <img src="headshot.jpg" alt="Jack Hannon headshot" class="headshot profile-avatar" /> 73 - <h1 class="profile-name">Jack Hannon</h1> 74 + <div class="name-and-social"> 75 + <h1 class="profile-name">Jack Hannon</h1> 76 + <div class="social-links"> 77 + <a href="https://www.linkedin.com/in/jackphannon/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile"> 78 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="linkedin-icon"> 79 + <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/> 80 + </svg> 81 + </a> 82 + <a href="https://github.com/Hann8n" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile"> 83 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="github-icon"> 84 + <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/> 85 + </svg> 86 + </a> 87 + <a href="https://bsky.app/profile/jackhannon.me" target="_blank" rel="noopener noreferrer" aria-label="Bluesky Profile"> 88 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bluesky-icon"> 89 + <path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/> 90 + </svg> 91 + </a> 92 + </div> 93 + </div> 74 94 <p class="tagline profile-tagline"> 75 95 Marketing &amp; Advertising Graduate 76 96 <span class="sep">|</span> Community Engagement
+134 -18
projects.html
··· 68 68 <div id="a11y-status" class="visually-hidden" aria-live="polite" aria-atomic="true"></div> 69 69 <h1>Projects</h1> 70 70 <section> 71 - <h2>Old Burying Ground Restoration Project <small>(Project Lead, 2019–2021)</small></h2> 71 + <h2>VT Gym Tracker <small>(Independent Developer, 2024)</small></h2> 72 72 <p> 73 - In collaboration with <a href="https://www.allentownvinj.org" target="_blank" rel="noopener">The Allentown Village Initiative</a>, I led the restoration of a historic cemetery in Allentown, NJ. 73 + Developed and launched a mobile app for Virginia Tech campus gyms that provides real-time occupancy data and schedules. 74 + Created a marketing campaign to drive user adoption during the app's App Store release. 74 75 </p> 75 - <div class="project-media allentown-media"> 76 - <div class="carousel"> 77 - <img src="images/Troop-180A.png" alt="Troop 180A of Allentown, NJ" /> 76 + 77 + <div class="ios-app-showcase"> 78 + <div class="showcase-content"> 79 + <h3>VT Gym Tracker</h3> 80 + <p class="app-description"> 81 + A native iOS app that helps Virginia Tech students track real-time gym occupancy, 82 + view facility hours, and plan their workouts efficiently. Built with SwiftUI and 83 + integrated with campus data systems. 84 + </p> 85 + 86 + 87 + 88 + <!-- App Screenshots Horizontal List --> 89 + <div class="app-screenshots" id="app-screenshots" role="region" aria-label="VT Gym Tracker screenshots"> 90 + <div class="screenshot-item"> 91 + <img src="images/vt-gym-Data.png" alt="VT Gym Tracker: Data screen showing real-time occupancy" loading="lazy" /> 92 + </div> 93 + <div class="screenshot-item"> 94 + <img src="images/vt-gym-hours.png" alt="VT Gym Tracker: Hours screen showing facility schedules" loading="lazy" /> 95 + </div> 96 + <div class="screenshot-item"> 97 + <img src="images/vt-gym-widgets.png" alt="VT Gym Tracker: Widgets screen showing quick access features" loading="lazy" /> 98 + </div> 99 + </div> 100 + 101 + <!-- App Features --> 102 + <div class="app-features"> 103 + <div class="feature-card"> 104 + <h4>Real-time Data</h4> 105 + <p>Live occupancy tracking for all campus gym facilities with minute-by-minute updates</p> 106 + </div> 107 + <div class="feature-card"> 108 + <h4>Widget Support</h4> 109 + <p>Quick access widgets for instant gym status without opening the app</p> 110 + </div> 111 + </div> 112 + 113 + <!-- App Stats --> 114 + <div class="app-stats"> 115 + <div class="stat-item"> 116 + <span class="stat-number">1k+</span> 117 + <span class="stat-label">Active Users</span> 118 + </div> 119 + <div class="stat-item"> 120 + <span class="stat-number">5.0 ★</span> 121 + <span class="stat-label">App Store Rating</span> 122 + </div> 123 + </div> 124 + 125 + <!-- App Store Link --> 126 + <div class="app-store-section"> 127 + <a href="https://apps.apple.com/us/app/vt-gym-tracker/id6736409867?itscg=30200&itsct=apps_box_badge&mttnsubad=6736409867" 128 + class="app-store-badge" target="_blank" rel="noopener noreferrer"> 129 + <img src="https://toolbox.marketingtools.apple.com/api/v2/badges/download-on-the-app-store/black/en-us?releaseDate=1737590400" 130 + alt="Download VT Gym Tracker on the App Store" /> 131 + </a> 78 132 </div> 79 133 </div> 134 + </div> 80 135 </section> 81 136 <section> 82 - <h2>VT Gym Tracker <small>(Independent Developer, 2024–2025)</small></h2> 137 + <h2>Yik Yak Virginia Tech <small>(Social Media Manager, 2022–2024)</small></h2> 83 138 <p> 84 - Developed and launched a mobile app for Virginia Tech campus gyms that provides real-time occupancy data and schedules. 85 - Created a marketing campaign to drive user adoption during the app’s App Store release. 139 + Managed the official Yik Yak Virginia Tech social media presence, creating engaging content and fostering community engagement. 140 + Developed templates and content strategies for other university accounts in the program. 86 141 </p> 87 - <div class="project-media gym-tracker-media"> 88 - <div class="screenshots-grid"> 89 - <img src="images/vt-gym-Data.png" alt="VT Gym Tracker screenshot: Data screen" /> 90 - <img src="images/vt-gym-hours.png" alt="VT Gym Tracker screenshot: Hours screen" /> 91 - <img src="images/vt-gym-widgets.png" alt="VT Gym Tracker screenshot: Widgets screen" /> 92 - </div> 93 - <div class="app-store-link"> 94 - <a href="https://apps.apple.com/us/app/vt-gym-tracker/id6736409867?itscg=30200&itsct=apps_box_badge&mttnsubad=6736409867"> 95 - <img src="https://toolbox.marketingtools.apple.com/api/v2/badges/download-on-the-app-store/black/en-us?releaseDate=1737590400" alt="Download on the App Store" /> 96 - </a> 142 + 143 + <div class="vt-yikyak-showcase"> 144 + <div class="showcase-content"> 145 + <!-- Profile Picture and Title --> 146 + <div class="profile-header"> 147 + <img src="images/yikyak-profile.jpg" alt="Yik Yak Virginia Tech profile picture" class="profile-picture" loading="lazy" /> 148 + <div class="title-section"> 149 + <h3>Yik Yak Virginia Tech</h3> 150 + <p class="subtitle">@yikyakvtech</p> 151 + </div> 152 + </div> 153 + <p class="app-description"> 154 + Led social media management for the official Yik Yak Virginia Tech account, creating engaging content 155 + that resonated with the student community. Developed templates and strategies that were adopted by 156 + other university accounts in the Yik Yak program. 157 + </p> 158 + 159 + <!-- Top Posts Section --> 160 + <div class="content-section"> 161 + <h4 class="section-title-left">Top Posts</h4> 162 + <div class="static-image-section"> 163 + <p>Posting consistent and engaging content regularly has helped maintain and grow the page.</p> 164 + <img src="images/Yik Yak VT/YYVT-1.png" alt="Yik Yak Virginia Tech Top Posts" loading="lazy" class="rounded-image" style="max-width:100%;height:auto;" /> 165 + </div> 166 + </div> 167 + 168 + <!-- Event Posts Section --> 169 + <div class="content-section"> 170 + <h4 class="section-title-left">Event Posts</h4> 171 + <div class="static-image-section"> 172 + <p>Creating event specific content for the page to capitalize on increased engagement.</p> 173 + <img src="images/Yik Yak VT/YYVT-2.png" alt="Yik Yak Virginia Tech Event Posts" loading="lazy" class="rounded-image" style="max-width:100%;height:auto;" /> 174 + </div> 175 + </div> 176 + 177 + <!-- Templates Section --> 178 + <div class="content-section"> 179 + <h4 class="section-title-left">Content Templates</h4> 180 + <div class="static-image-section"> 181 + <p>I've created a few different post templates for other schools on Yik Yak. Post formats help establish a recognizable brand and create a more professional looking page.</p> 182 + <img src="images/Yik Yak VT/YYVT-3.png" alt="Yik Yak Virginia Tech Templates" loading="lazy" class="rounded-image" style="max-width:100%;height:auto;" /> 183 + </div> 184 + </div> 185 + 186 + <!-- Project Features --> 187 + <p><strong>Content Creation:</strong> Developed engaging social media content that increased community engagement and follower growth</p> 188 + <p><strong>Template Development:</strong> Created reusable content templates adopted by other university accounts in the Yik Yak program</p> 189 + <p><strong>Community Management:</strong> Fostered positive community interactions and maintained brand voice across all communications</p> 190 + 191 + <!-- Project Stats --> 192 + <div class="app-stats"> 193 + <div class="stat-item"> 194 + <span class="stat-number">2+</span> 195 + <span class="stat-label">Years Experience</span> 196 + </div> 197 + <div class="stat-item"> 198 + <span class="stat-number">3</span> 199 + <span class="stat-label">University Templates</span> 200 + </div> 201 + </div> 97 202 </div> 98 203 </div> 204 + </section> 205 + <section> 206 + <h2>Old Burying Ground Restoration Project <small>(Project Lead, 2019–2021)</small></h2> 207 + <p> 208 + In collaboration with <a href="https://www.allentownvinj.org" target="_blank" rel="noopener">The Allentown Village Initiative</a>, I led the restoration of a historic cemetery in Allentown, NJ. 209 + </p> 210 + <div class="project-media allentown-media"> 211 + <div class="carousel"> 212 + <img src="images/Troop-180A.png" alt="Troop-180A of Allentown, NJ" /> 213 + </div> 214 + </div> 99 215 </section> 100 216 </main> 101 217 <script>
+89 -1
script.js
··· 285 285 navContent.classList.toggle('mobile-nav-open'); 286 286 }); 287 287 } 288 - } 288 + } 289 + 290 + // VT Gym Tracker Carousel Logic 291 + (function() { 292 + const carousel = document.getElementById('app-screenshots'); 293 + if (!carousel) return; 294 + const items = carousel.querySelectorAll('.screenshot-item'); 295 + const prevBtn = document.getElementById('carousel-prev'); 296 + const nextBtn = document.getElementById('carousel-next'); 297 + const dotsContainer = document.getElementById('carousel-dots'); 298 + let current = 0; 299 + let touchStartX = null; 300 + 301 + function showSlide(idx) { 302 + items.forEach((item, i) => { 303 + item.style.display = (i === idx) ? 'block' : 'none'; 304 + item.setAttribute('aria-hidden', i === idx ? 'false' : 'true'); 305 + }); 306 + // Update dots 307 + if (dotsContainer) { 308 + Array.from(dotsContainer.children).forEach((dot, i) => { 309 + dot.classList.toggle('active', i === idx); 310 + dot.setAttribute('aria-selected', i === idx ? 'true' : 'false'); 311 + dot.setAttribute('tabindex', i === idx ? '0' : '-1'); 312 + }); 313 + } 314 + current = idx; 315 + } 316 + 317 + function goToSlide(idx) { 318 + if (idx < 0) idx = items.length - 1; 319 + if (idx >= items.length) idx = 0; 320 + showSlide(idx); 321 + } 322 + 323 + // Dots 324 + if (dotsContainer) { 325 + dotsContainer.innerHTML = ''; 326 + items.forEach((_, i) => { 327 + const dot = document.createElement('button'); 328 + dot.className = 'carousel-dot'; 329 + dot.setAttribute('role', 'tab'); 330 + dot.setAttribute('aria-label', `Go to screenshot ${i+1}`); 331 + dot.setAttribute('tabindex', i === 0 ? '0' : '-1'); 332 + dot.setAttribute('aria-selected', i === 0 ? 'true' : 'false'); 333 + dot.addEventListener('click', () => goToSlide(i)); 334 + dot.addEventListener('keydown', (e) => { 335 + if (e.key === 'Enter' || e.key === ' ') { 336 + e.preventDefault(); 337 + goToSlide(i); 338 + } 339 + }); 340 + dotsContainer.appendChild(dot); 341 + }); 342 + } 343 + 344 + // Button events 345 + prevBtn && prevBtn.addEventListener('click', () => goToSlide(current - 1)); 346 + nextBtn && nextBtn.addEventListener('click', () => goToSlide(current + 1)); 347 + 348 + // Keyboard navigation 349 + carousel.addEventListener('keydown', (e) => { 350 + if (e.key === 'ArrowLeft') { 351 + goToSlide(current - 1); 352 + } else if (e.key === 'ArrowRight') { 353 + goToSlide(current + 1); 354 + } 355 + }); 356 + 357 + // Touch swipe support 358 + carousel.addEventListener('touchstart', (e) => { 359 + if (e.touches.length === 1) { 360 + touchStartX = e.touches[0].clientX; 361 + } 362 + }); 363 + carousel.addEventListener('touchend', (e) => { 364 + if (touchStartX !== null && e.changedTouches.length === 1) { 365 + const dx = e.changedTouches[0].clientX - touchStartX; 366 + if (Math.abs(dx) > 40) { 367 + if (dx > 0) goToSlide(current - 1); 368 + else goToSlide(current + 1); 369 + } 370 + touchStartX = null; 371 + } 372 + }); 373 + 374 + // Initialize 375 + showSlide(0); 376 + })();
+844 -41
style.css
··· 18 18 --btn-active-bg: #111; 19 19 --btn-active-text: #fff; 20 20 --btn-active-underline: #232b36; 21 + /* VT Brand Colors */ 22 + --vt-maroon: #861F41; 23 + --vt-burntOrange: #E5751F; 24 + --vt-hokieStone: #75787b; 25 + --vt-white: #FFFFFF; 26 + --vt-purple: #642667; 27 + --vt-pink: #CE0058; 28 + --vt-yellow: #F7EA48; 29 + --vt-teal: #508590; 30 + --vt-turquoise: #2CD5C4; 31 + --vt-grey: #D7D2CB; 32 + --vt-smoke: #E5E1E6; 33 + --vt-impactOrange: #CA4F00; 21 34 } 22 35 23 36 /* Dark theme overrides */ ··· 89 102 * { 90 103 box-sizing: border-box; 91 104 } 105 + 106 + /* Name and social links container */ 107 + .name-and-social { 108 + display: flex; 109 + align-items: center; 110 + gap: 1rem; 111 + margin: 1rem 0; 112 + } 113 + 114 + /* Social links styling */ 115 + .social-links { 116 + display: flex; 117 + gap: 1rem; 118 + align-items: center; 119 + } 120 + 121 + .social-links a { 122 + display: flex; 123 + align-items: center; 124 + justify-content: center; 125 + width: 2.5rem; 126 + height: 2.5rem; 127 + border-radius: 50%; 128 + background: transparent; 129 + color: var(--text-color); 130 + text-decoration: none; 131 + transition: all 0.2s ease; 132 + border: none; 133 + } 134 + 135 + .social-links a:hover, 136 + .social-links a:focus { 137 + background: transparent; 138 + color: var(--link-hover-color); 139 + transform: translateY(-2px); 140 + } 141 + 142 + .social-links i { 143 + font-size: 1.2rem; 144 + } 145 + 146 + .social-links .bluesky-icon, 147 + .social-links .github-icon, 148 + .social-links .linkedin-icon { 149 + width: 1.2rem; 150 + height: 1.2rem; 151 + fill: currentColor; 152 + } 153 + 154 + .dark-theme .social-links a { 155 + background: transparent; 156 + color: var(--text-color); 157 + border: none; 158 + } 159 + 160 + .dark-theme .social-links a:hover, 161 + .dark-theme .social-links a:focus { 162 + background: transparent; 163 + color: var(--link-hover-color); 164 + } 92 165 html, body { 93 166 margin: 0; 94 167 padding: 0; ··· 177 250 178 251 /* Header navigation */ 179 252 header { 180 - margin-top: 2.5rem; 253 + margin-top: 1rem; 181 254 } 182 255 header nav { 183 256 display: flex; ··· 188 261 box-shadow: var(--nav-shadow); 189 262 border: var(--nav-border); /* Add border */ 190 263 padding: 0.5rem 2.2rem 0.5rem 1.5rem; 191 - margin-top: 0.5rem; 264 + margin-top: 0.2rem; 192 265 gap: 1.2rem; 193 266 height: 3.6rem; 194 267 } ··· 611 684 max-width: 100%; 612 685 height: auto; 613 686 } 687 + 688 + /* Name and social links mobile styling */ 689 + .name-and-social { 690 + flex-direction: column; 691 + gap: 0.75rem; 692 + align-items: flex-start; 693 + } 694 + 695 + /* Social links mobile styling */ 696 + .social-links { 697 + gap: 0.75rem; 698 + justify-content: flex-start; 699 + } 700 + 701 + .social-links a { 702 + width: 2.2rem; 703 + height: 2.2rem; 704 + } 705 + 706 + .social-links i { 707 + font-size: 1rem; 708 + } 709 + 710 + /* Resume header mobile styling - keep button on same line */ 711 + .resume-header { 712 + flex-direction: row; 713 + align-items: center; 714 + justify-content: space-between; 715 + gap: 0.75rem; 716 + } 717 + 718 + .resume-header h1 { 719 + margin: 0; 720 + flex-shrink: 0; 721 + } 722 + 723 + .pdf-btn { 724 + font-size: 0.9em; 725 + padding: 0.4em 1.2em; 726 + flex-shrink: 0; 727 + } 614 728 } 615 729 616 730 .resume-header { ··· 1079 1193 } 1080 1194 1081 1195 /* Project media carousel styles */ 1082 - .project-media { 1083 - margin: 2rem 0; 1084 - } 1085 - 1086 - .project-media .carousel { 1087 - display: flex; 1088 - gap: 1rem; 1089 - overflow-x: auto; 1090 - scroll-snap-type: x mandatory; 1091 - -webkit-overflow-scrolling: touch; 1092 - padding-bottom: 0.5rem; /* space for scrollbar */ 1093 - } 1094 - 1095 - .project-media .carousel img { 1096 - flex: 0 0 auto; 1097 - width: 250px; 1098 - height: auto; 1099 - object-fit: cover; 1100 - border-radius: 8px; 1101 - scroll-snap-align: start; 1102 - } 1103 - 1104 - /* Optional: custom scrollbar styling */ 1105 - .project-media .carousel::-webkit-scrollbar { 1106 - height: 6px; 1107 - } 1108 - .project-media .carousel::-webkit-scrollbar-track { 1109 - background: transparent; 1110 - } 1111 - .project-media .carousel::-webkit-scrollbar-thumb { 1112 - background-color: rgba(0, 0, 0, 0.2); 1113 - border-radius: 3px; 1114 - } 1196 + /* Removed carousel styles */ 1115 1197 1116 1198 /* Screenshots grid styling */ 1117 1199 .screenshots-grid { ··· 1129 1211 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 1130 1212 } 1131 1213 1214 + /* Screenshots container for mobile carousel */ 1215 + /* Removed carousel styles */ 1216 + 1217 + /* Carousel navigation */ 1218 + /* Removed carousel navigation styles */ 1219 + 1220 + /* Mobile carousel styles for screenshots */ 1221 + /* Removed mobile carousel styles */ 1222 + 1223 + /* Custom scrollbar for mobile carousel */ 1224 + /* Removed custom scrollbar styles */ 1225 + 1226 + /* Show carousel navigation on mobile */ 1227 + /* Removed mobile carousel navigation styles */ 1228 + 1229 + /* App Screenshots Carousel */ 1230 + /* Removed app screenshots carousel styles */ 1231 + 1132 1232 /* App Store link styling */ 1133 1233 .app-store-link { 1134 1234 display: flex; ··· 1157 1257 width: 70vw; 1158 1258 } 1159 1259 1160 - .screenshots-grid { 1161 - grid-template-columns: 1fr; 1162 - gap: 0.8rem; 1163 - } 1260 + /* Screenshots grid is now handled by carousel styles above */ 1164 1261 1165 - .app-store-link img { 1166 - width: 140px; 1262 + .app-store-badge img { 1263 + height: 40px; 1167 1264 } 1168 1265 } 1169 1266 ··· 1310 1407 1311 1408 :root:not(.light-theme):not(.dark-theme) .brand, :root:not(.light-theme):not(.dark-theme) .profile-name { 1312 1409 color: #fff !important; 1410 + } 1411 + 1412 + /* Modern iOS App Showcase Styles */ 1413 + .ios-app-showcase { 1414 + background: linear-gradient(135deg, #1f1f1f 0%, #2f2f2f 50%, #3f3f3f 100%); 1415 + border-radius: 20px; 1416 + padding: 2rem; 1417 + margin: 2rem 0; 1418 + position: relative; 1419 + overflow: hidden; 1420 + } 1421 + 1422 + .ios-app-showcase::before { 1423 + content: ''; 1424 + position: absolute; 1425 + top: 0; 1426 + left: 0; 1427 + right: 0; 1428 + bottom: 0; 1429 + background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); 1430 + opacity: 0.3; 1431 + } 1432 + 1433 + .ios-app-showcase .showcase-content { 1434 + position: relative; 1435 + z-index: 2; 1436 + } 1437 + 1438 + .ios-app-showcase h3 { 1439 + color: white; 1440 + font-size: 1.8rem; 1441 + margin: 0 0 1rem 0; 1442 + font-weight: 600; 1443 + } 1444 + 1445 + .ios-app-showcase .app-description { 1446 + color: rgba(255, 255, 255, 0.9); 1447 + margin-bottom: 2rem; 1448 + line-height: 1.6; 1449 + } 1450 + 1451 + /* Device Mockup Container */ 1452 + .device-showcase { 1453 + display: flex; 1454 + align-items: center; 1455 + justify-content: center; 1456 + gap: 2rem; 1457 + margin: 2rem 0; 1458 + } 1459 + 1460 + /* iPhone Mockup */ 1461 + .iphone-mockup { 1462 + position: relative; 1463 + width: 240px; 1464 + height: 521px; 1465 + background: #1a1a1a; 1466 + border-radius: 40px; 1467 + padding: 8px; 1468 + box-shadow: 1469 + 0 20px 40px rgba(0, 0, 0, 0.3), 1470 + 0 0 0 1px rgba(255, 255, 255, 0.1) inset; 1471 + transform: perspective(1000px) rotateY(-15deg) rotateX(5deg); 1472 + transition: transform 0.3s ease; 1473 + } 1474 + 1475 + .iphone-mockup:hover { 1476 + transform: perspective(1000px) rotateY(-10deg) rotateX(2deg) scale(1.02); 1477 + } 1478 + 1479 + .iphone-mockup .screen { 1480 + width: 100%; 1481 + height: 100%; 1482 + border-radius: 32px; 1483 + overflow: hidden; 1484 + position: relative; 1485 + background: #000; 1486 + } 1487 + 1488 + .iphone-mockup .screen img { 1489 + width: 100%; 1490 + height: 100%; 1491 + object-fit: cover; 1492 + border-radius: 32px; 1493 + } 1494 + 1495 + /* App Screenshots Carousel */ 1496 + /* Removed app screenshots carousel styles */ 1497 + 1498 + /* App Store Badge */ 1499 + .app-store-section { 1500 + text-align: center; 1501 + margin-top: 2rem; 1502 + } 1503 + 1504 + .app-store-badge { 1505 + display: inline-block; 1506 + text-decoration: none; 1507 + transition: transform 0.3s ease; 1508 + } 1509 + 1510 + .app-store-badge:hover { 1511 + transform: translateY(-2px); 1512 + } 1513 + 1514 + .app-store-badge img { 1515 + height: 50px; 1516 + width: auto; 1517 + } 1518 + 1519 + /* Feature Highlights */ 1520 + .app-features { 1521 + display: grid; 1522 + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 1523 + gap: 1.5rem; 1524 + margin: 2rem 0; 1525 + } 1526 + 1527 + .feature-card { 1528 + background: rgba(255, 255, 255, 0.1); 1529 + border: 1px solid rgba(255, 255, 255, 0.2); 1530 + border-radius: 15px; 1531 + padding: 1.5rem; 1532 + backdrop-filter: blur(10px); 1533 + transition: all 0.3s ease; 1534 + } 1535 + 1536 + .feature-card:hover { 1537 + background: rgba(255, 255, 255, 0.15); 1538 + transform: translateY(-3px); 1539 + } 1540 + 1541 + .feature-card h4 { 1542 + color: white; 1543 + margin: 0 0 0.5rem 0; 1544 + font-size: 1.2rem; 1545 + } 1546 + 1547 + .feature-card p { 1548 + color: rgba(255, 255, 255, 0.8); 1549 + margin: 0; 1550 + font-size: 0.9rem; 1551 + line-height: 1.5; 1552 + } 1553 + 1554 + /* Stats Section */ 1555 + .app-stats { 1556 + display: flex; 1557 + justify-content: space-around; 1558 + margin: 2rem 0; 1559 + flex-wrap: nowrap; 1560 + gap: 1rem; 1561 + } 1562 + 1563 + .stat-item { 1564 + text-align: center; 1565 + color: white; 1566 + } 1567 + 1568 + .stat-number { 1569 + font-size: 2rem; 1570 + font-weight: 700; 1571 + display: block; 1572 + margin-bottom: 0.25rem; 1573 + } 1574 + 1575 + .stat-label { 1576 + font-size: 0.9rem; 1577 + opacity: 0.8; 1578 + } 1579 + 1580 + /* Dark theme adjustments */ 1581 + .dark-theme .ios-app-showcase { 1582 + background: linear-gradient(135deg, #151515 0%, #1f1f1f 50%, #2f2f2f 100%); 1583 + } 1584 + 1585 + /* Mobile Responsive */ 1586 + @media (max-width: 768px) { 1587 + .ios-app-showcase { 1588 + padding: 1.5rem; 1589 + margin: 1rem 0; 1590 + } 1591 + 1592 + .device-showcase { 1593 + flex-direction: column; 1594 + gap: 1rem; 1595 + } 1596 + 1597 + .iphone-mockup { 1598 + width: 200px; 1599 + height: 434px; 1600 + transform: none; 1601 + } 1602 + 1603 + .iphone-mockup:hover { 1604 + transform: scale(1.02); 1605 + } 1606 + 1607 + .app-screenshots { 1608 + gap: 1rem; 1609 + justify-content: flex-start; 1610 + margin-left: calc(-1 * (100vw - 100%) / 2); 1611 + margin-right: calc(-1 * (100vw - 100%) / 2); 1612 + padding-left: calc((100vw - 100%) / 2); 1613 + padding-right: calc((100vw - 100%) / 2); 1614 + } 1615 + 1616 + .app-screenshots .screenshot-item img { 1617 + width: 180px; 1618 + height: 391px; 1619 + } 1620 + 1621 + .app-features { 1622 + grid-template-columns: 1fr; 1623 + } 1624 + 1625 + .app-stats { 1626 + flex-direction: row; 1627 + align-items: center; 1628 + } 1629 + } 1630 + 1631 + @media (max-width: 480px) { 1632 + .ios-app-showcase h3 { 1633 + font-size: 1.5rem; 1634 + } 1635 + 1636 + .iphone-mockup { 1637 + width: 160px; 1638 + height: 347px; 1639 + } 1640 + 1641 + .app-screenshots { 1642 + justify-content: flex-start; 1643 + margin-left: calc(-1 * (100vw - 100%) / 2); 1644 + margin-right: calc(-1 * (100vw - 100%) / 2); 1645 + padding-left: calc((100vw - 100%) / 2); 1646 + padding-right: calc((100vw - 100%) / 2); 1647 + } 1648 + 1649 + .app-screenshots .screenshot-item img { 1650 + width: 160px; 1651 + height: 347px; 1652 + } 1653 + } 1654 + 1655 + /* Animation for showcase entrance */ 1656 + @keyframes showcaseFadeIn { 1657 + from { 1658 + opacity: 0; 1659 + transform: translateY(30px); 1660 + } 1661 + to { 1662 + opacity: 1; 1663 + transform: translateY(0); 1664 + } 1665 + } 1666 + 1667 + .ios-app-showcase { 1668 + animation: showcaseFadeIn 0.6s ease-out; 1669 + } 1670 + 1671 + /* Hover effects for interactive elements */ 1672 + .ios-app-showcase .screenshot-item { 1673 + cursor: pointer; 1674 + } 1675 + 1676 + .ios-app-showcase .screenshot-item:active img { 1677 + transform: scale(0.98); 1678 + } 1679 + 1680 + /* Loading state for images */ 1681 + .ios-app-showcase img { 1682 + transition: opacity 0.3s ease; 1683 + } 1684 + 1685 + .ios-app-showcase img[loading] { 1686 + opacity: 0.7; 1687 + } 1688 + 1689 + /* Accessibility improvements */ 1690 + .ios-app-showcase .app-store-badge:focus { 1691 + outline: 2px solid rgba(255, 255, 255, 0.8); 1692 + outline-offset: 2px; 1693 + } 1694 + 1695 + /* High contrast mode support */ 1696 + .high-contrast .ios-app-showcase { 1697 + background: #000; 1698 + border: 2px solid #fff; 1699 + } 1700 + 1701 + .high-contrast .ios-app-showcase .feature-card { 1702 + background: #fff; 1703 + color: #000; 1704 + border: 2px solid #000; 1705 + } 1706 + 1707 + .high-contrast .ios-app-showcase .feature-card h4 { 1708 + color: #000; 1709 + } 1710 + 1711 + .high-contrast .ios-app-showcase .feature-card p { 1712 + color: #333; 1713 + } 1714 + 1715 + /* Yik Yak Project Specific Styles */ 1716 + .profile-header { 1717 + display: flex; 1718 + align-items: center; 1719 + gap: 1.5rem; 1720 + margin-bottom: 1.5rem; 1721 + } 1722 + 1723 + .profile-picture { 1724 + width: 120px; 1725 + height: 120px; 1726 + border-radius: 50%; 1727 + object-fit: cover; 1728 + transition: transform 0.3s ease; 1729 + flex-shrink: 0; 1730 + } 1731 + 1732 + .profile-picture:hover { 1733 + transform: scale(1.05); 1734 + } 1735 + 1736 + .title-section { 1737 + display: flex; 1738 + flex-direction: column; 1739 + gap: 0.1rem; 1740 + } 1741 + 1742 + .title-section h3 { 1743 + margin: 0; 1744 + font-size: 1.8em; 1745 + color: var(--text-color); 1746 + } 1747 + 1748 + .title-section .subtitle { 1749 + margin: 0; 1750 + font-size: 1.1em; 1751 + color: var(--link-color); 1752 + opacity: 0.8; 1753 + } 1754 + 1755 + .content-section { 1756 + margin: 2rem 0; 1757 + } 1758 + 1759 + .content-section h4 { 1760 + font-size: 1.3em; 1761 + margin-bottom: 1rem; 1762 + color: var(--text-color); 1763 + text-align: center; 1764 + } 1765 + 1766 + .section-title-left { 1767 + text-align: left !important; 1768 + display: block; 1769 + } 1770 + 1771 + @media (max-width: 768px) { 1772 + .profile-header { 1773 + gap: 1rem; 1774 + } 1775 + 1776 + .profile-picture { 1777 + width: 80px; 1778 + height: 80px; 1779 + } 1780 + 1781 + .title-section h3 { 1782 + font-size: 1.5em; 1783 + } 1784 + 1785 + .title-section .subtitle { 1786 + font-size: 1em; 1787 + } 1788 + 1789 + .content-section h4 { 1790 + font-size: 1.1em; 1791 + } 1792 + } 1793 + 1794 + /* VT Yik Yak Showcase Styles */ 1795 + .vt-yikyak-showcase { 1796 + background: linear-gradient(135deg, var(--vt-maroon) 0%, var(--vt-impactOrange) 100%); 1797 + border-radius: 22px; 1798 + padding: 2.2rem 2rem; 1799 + margin: 2.5rem 0; 1800 + position: relative; 1801 + overflow: hidden; 1802 + box-shadow: 0 6px 32px rgba(134,31,65,0.18); 1803 + } 1804 + .vt-yikyak-showcase .showcase-content { 1805 + position: relative; 1806 + z-index: 2; 1807 + } 1808 + .vt-yikyak-showcase h3 { 1809 + color: var(--vt-burntOrange); 1810 + font-size: 2rem; 1811 + margin: 0 0 1.1rem 0; 1812 + font-weight: 700; 1813 + letter-spacing: 1px; 1814 + } 1815 + .vt-yikyak-showcase .app-description { 1816 + color: var(--vt-white); 1817 + margin-bottom: 2rem; 1818 + line-height: 1.7; 1819 + font-size: 1.08em; 1820 + } 1821 + .vt-yikyak-showcase .profile-header { 1822 + display: flex; 1823 + align-items: center; 1824 + gap: 1.7rem; 1825 + margin-bottom: 1.7rem; 1826 + } 1827 + .vt-yikyak-showcase .profile-picture { 1828 + width: 120px; 1829 + height: 120px; 1830 + border-radius: 50%; 1831 + object-fit: cover; 1832 + border: 4px solid var(--vt-burntOrange); 1833 + background: var(--vt-white); 1834 + box-shadow: 0 2px 12px rgba(229,117,31,0.13); 1835 + transition: transform 0.3s; 1836 + } 1837 + .vt-yikyak-showcase .profile-picture:hover { 1838 + transform: scale(1.06); 1839 + } 1840 + .vt-yikyak-showcase .title-section h3 { 1841 + color: var(--vt-burntOrange); 1842 + font-size: 2em; 1843 + margin: 0; 1844 + } 1845 + .vt-yikyak-showcase .title-section .subtitle { 1846 + color: var(--vt-yellow); 1847 + font-size: 1.1em; 1848 + opacity: 0.95; 1849 + margin: 0; 1850 + } 1851 + .vt-yikyak-showcase .content-section h4 { 1852 + color: var(--vt-impactOrange); 1853 + font-size: 1.25em; 1854 + margin-bottom: 1rem; 1855 + text-align: center; 1856 + letter-spacing: 0.5px; 1857 + } 1858 + .vt-yikyak-showcase .app-screenshots .screenshot-item img { 1859 + border-radius: 18px; 1860 + border: none; 1861 + box-shadow: none; 1862 + } 1863 + .vt-yikyak-showcase .feature-card { 1864 + background: none; 1865 + border: none; 1866 + border-radius: 15px; 1867 + padding: 1.3rem; 1868 + color: var(--vt-white); 1869 + box-shadow: 0 2px 10px rgba(134,31,65,0.10); 1870 + transition: background 0.3s, color 0.3s, border 0.3s; 1871 + } 1872 + .vt-yikyak-showcase .feature-card:hover { 1873 + background: rgba(134,31,65,0.12); 1874 + color: var(--vt-white); 1875 + border: none; 1876 + } 1877 + .vt-yikyak-showcase .feature-card h4 { 1878 + color: var(--vt-yellow); 1879 + margin: 0 0 0.5rem 0; 1880 + font-size: 1.15rem; 1881 + } 1882 + .vt-yikyak-showcase .feature-card p { 1883 + color: var(--vt-white); 1884 + font-size: 0.97rem; 1885 + margin: 0; 1886 + } 1887 + .vt-yikyak-showcase .feature-card:hover { 1888 + background: linear-gradient(120deg, var(--vt-maroon) 0%, var(--vt-burntOrange) 100%); 1889 + color: var(--vt-yellow); 1890 + border-color: var(--vt-impactOrange); 1891 + } 1892 + .vt-yikyak-showcase .app-stats { 1893 + display: flex; 1894 + justify-content: space-around; 1895 + margin: 2rem 0 0.5rem 0; 1896 + flex-wrap: nowrap; 1897 + gap: 1.2rem; 1898 + } 1899 + .vt-yikyak-showcase .stat-item { 1900 + text-align: center; 1901 + color: var(--vt-yellow); 1902 + } 1903 + .vt-yikyak-showcase .stat-number { 1904 + font-size: 2.1rem; 1905 + font-weight: 800; 1906 + display: block; 1907 + margin-bottom: 0.2rem; 1908 + color: var(--vt-burntOrange); 1909 + } 1910 + .vt-yikyak-showcase .stat-label { 1911 + font-size: 1rem; 1912 + opacity: 0.9; 1913 + color: var(--vt-yellow); 1914 + } 1915 + .vt-yikyak-showcase .content-section { 1916 + margin: 2rem 0; 1917 + background: none; 1918 + border-radius: 0; 1919 + padding: 0; 1920 + } 1921 + @media (max-width: 768px) { 1922 + .vt-yikyak-showcase { 1923 + padding: 1.2rem 0.5rem; 1924 + } 1925 + .vt-yikyak-showcase .profile-header { 1926 + gap: 1rem; 1927 + } 1928 + .vt-yikyak-showcase .profile-picture { 1929 + width: 80px; 1930 + height: 80px; 1931 + } 1932 + .vt-yikyak-showcase .title-section h3 { 1933 + font-size: 1.3em; 1934 + } 1935 + .vt-yikyak-showcase .title-section .subtitle { 1936 + font-size: 1em; 1937 + } 1938 + .vt-yikyak-showcase .content-section h4 { 1939 + font-size: 1.1em; 1940 + } 1941 + } 1942 + .vt-yikyak-showcase, 1943 + .vt-yikyak-showcase h3, 1944 + .vt-yikyak-showcase .app-description, 1945 + .vt-yikyak-showcase .profile-header, 1946 + .vt-yikyak-showcase .title-section h3, 1947 + .vt-yikyak-showcase .title-section .subtitle, 1948 + .vt-yikyak-showcase .content-section h4, 1949 + .vt-yikyak-showcase .feature-card, 1950 + .vt-yikyak-showcase .feature-card h4, 1951 + .vt-yikyak-showcase .feature-card p, 1952 + .vt-yikyak-showcase .stat-item, 1953 + .vt-yikyak-showcase .stat-number, 1954 + .vt-yikyak-showcase .stat-label { 1955 + color: var(--vt-white) !important; 1956 + } 1957 + .rounded-image { 1958 + border-radius: 20px; 1959 + overflow: hidden; 1960 + } 1961 + 1962 + /* VT Gym Tracker Carousel Controls */ 1963 + .app-screenshots { 1964 + position: relative; 1965 + display: flex; 1966 + align-items: center; 1967 + justify-content: center; 1968 + gap: 0.5rem; 1969 + min-height: 420px; 1970 + } 1971 + .app-screenshots .screenshot-item { 1972 + flex: 1 1 auto; 1973 + display: none; 1974 + justify-content: center; 1975 + align-items: center; 1976 + text-align: center; 1977 + } 1978 + .app-screenshots .screenshot-item img { 1979 + max-width: 220px; 1980 + max-height: 420px; 1981 + width: 100%; 1982 + height: auto; 1983 + border-radius: 18px; 1984 + box-shadow: 0 2px 12px rgba(0,0,0,0.10); 1985 + background: #fff; 1986 + } 1987 + .carousel-btn { 1988 + background: var(--btn-bg); 1989 + color: var(--btn-text); 1990 + border: 1.5px solid #bbb; 1991 + border-radius: 50%; 1992 + width: 2.5rem; 1993 + height: 2.5rem; 1994 + font-size: 1.5rem; 1995 + display: flex; 1996 + align-items: center; 1997 + justify-content: center; 1998 + cursor: pointer; 1999 + transition: background 0.15s, color 0.15s, border 0.15s; 2000 + z-index: 2; 2001 + margin: 0 0.5rem; 2002 + } 2003 + .carousel-btn:hover, .carousel-btn:focus { 2004 + background: var(--btn-bg-hover); 2005 + color: var(--btn-active-text); 2006 + border-color: #888; 2007 + outline: none; 2008 + } 2009 + .carousel-dots { 2010 + display: flex; 2011 + justify-content: center; 2012 + align-items: center; 2013 + gap: 0.5rem; 2014 + margin-top: 1rem; 2015 + width: 100%; 2016 + position: absolute; 2017 + bottom: 0.5rem; 2018 + left: 0; 2019 + } 2020 + .carousel-dot { 2021 + width: 0.9rem; 2022 + height: 0.9rem; 2023 + border-radius: 50%; 2024 + background: #bbb; 2025 + border: none; 2026 + cursor: pointer; 2027 + transition: background 0.2s, box-shadow 0.2s; 2028 + outline: none; 2029 + margin: 0 0.1rem; 2030 + padding: 0; 2031 + } 2032 + .carousel-dot.active, .carousel-dot:focus { 2033 + background: var(--btn-active-bg); 2034 + box-shadow: 0 0 0 2px var(--btn-active-underline); 2035 + } 2036 + @media (max-width: 650px) { 2037 + .app-screenshots { 2038 + min-height: 260px; 2039 + } 2040 + .app-screenshots .screenshot-item img { 2041 + max-width: 120px; 2042 + max-height: 260px; 2043 + } 2044 + } 2045 + 2046 + /* VT Gym Tracker Horizontal Screenshot List */ 2047 + .app-screenshots { 2048 + display: flex; 2049 + flex-direction: row; 2050 + gap: 1.2rem; 2051 + align-items: flex-start; 2052 + justify-content: flex-start; 2053 + overflow-x: auto; 2054 + padding-bottom: 0.5rem; 2055 + min-height: unset; 2056 + position: relative; 2057 + } 2058 + .app-screenshots .screenshot-item { 2059 + flex: 0 0 auto; 2060 + display: block !important; 2061 + align-items: center; 2062 + justify-content: center; 2063 + text-align: center; 2064 + } 2065 + .app-screenshots .screenshot-item img { 2066 + max-width: 220px; 2067 + max-height: 420px; 2068 + width: 100%; 2069 + height: auto; 2070 + border-radius: 18px; 2071 + box-shadow: 0 2px 12px rgba(0,0,0,0.10); 2072 + background: #fff; 2073 + margin: 0; 2074 + } 2075 + @media (max-width: 650px) { 2076 + .app-screenshots { 2077 + gap: 0.7rem; 2078 + padding-bottom: 0.3rem; 2079 + } 2080 + .app-screenshots .screenshot-item img { 2081 + max-width: 120px; 2082 + max-height: 260px; 2083 + } 2084 + } 2085 + 2086 + /* Old Burying Ground image sizing */ 2087 + .allentown-media .carousel img { 2088 + max-width: 400px; 2089 + width: 100%; 2090 + height: auto; 2091 + display: block; 2092 + margin: 0 auto; 2093 + border-radius: 16px; 2094 + box-shadow: 0 2px 12px rgba(0,0,0,0.10); 2095 + } 2096 + @media (max-width: 650px) { 2097 + .allentown-media .carousel img { 2098 + max-width: 95vw; 2099 + } 2100 + } 2101 + 2102 + /* Yik Yak panel image sizing */ 2103 + .vt-yikyak-showcase .content-section img { 2104 + max-width: 260px; 2105 + width: 100%; 2106 + height: auto; 2107 + margin: 0 auto; 2108 + border-radius: 14px; 2109 + box-shadow: 0 2px 8px rgba(0,0,0,0.08); 2110 + display: block; 2111 + } 2112 + @media (max-width: 650px) { 2113 + .vt-yikyak-showcase .content-section img { 2114 + max-width: 90vw; 2115 + } 1313 2116 }