my personal site
Update portfolio with new images and content
+1091
-61
images/Yik Yak VT/YYVT-1.png
images/Yik Yak VT/YYVT-1.png
This is a binary file and will not be displayed.
images/Yik Yak VT/YYVT-2.png
images/Yik Yak VT/YYVT-2.png
This is a binary file and will not be displayed.
images/Yik Yak VT/YYVT-3.png
images/Yik Yak VT/YYVT-3.png
This is a binary file and will not be displayed.
+1
images/bluesky-brands-solid.svg
+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
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
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
images/vt-gym-screenshot.jpeg
This is a binary file and will not be displayed.
images/yikyak-profile.jpg
images/yikyak-profile.jpg
This is a binary file and will not be displayed.
+21
-1
index.html
+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 & Advertising Graduate
76
96
<span class="sep">|</span> Community Engagement
+134
-18
projects.html
+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
+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
+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
}