my personal site
Update project descriptions and enhance media presentation in portfolio. Rename "The Allentown Village Initiative" project to "Old Burying Ground Restoration Project" and add collaboration details. Introduce media carousels and screenshot grids for improved visual representation of projects, along with new styles for better layout and responsiveness.
+120
-3
images/Troop-180A.png
images/Troop-180A.png
This is a binary file and will not be displayed.
images/vt-gym-Data.png
images/vt-gym-Data.png
This is a binary file and will not be displayed.
images/vt-gym-hours.png
images/vt-gym-hours.png
This is a binary file and will not be displayed.
images/vt-gym-widgets.png
images/vt-gym-widgets.png
This is a binary file and will not be displayed.
+19
-3
projects.html
+19
-3
projects.html
···
61
61
<div id="a11y-status" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
62
62
<h1>Projects</h1>
63
63
<section>
64
-
<h2>The Allentown Village Initiative <small>(Project Lead, 2019–2021)</small></h2>
64
+
<h2>Old Burying Ground Restoration Project <small>(Project Lead, 2019–2021)</small></h2>
65
65
<p>
66
-
Led a community-based restoration of a historic cemetery in Allentown, NJ.
67
-
Coordinated volunteers and managed all project logistics to revitalize the site and engage local participants.
66
+
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.
68
67
</p>
68
+
<div class="project-media allentown-media">
69
+
<div class="carousel">
70
+
<img src="images/Troop-180A.png" alt="Troop 180A of Allentown, NJ" />
71
+
</div>
72
+
</div>
69
73
</section>
70
74
<section>
71
75
<h2>VT Gym Tracker <small>(Independent Developer, 2024–2025)</small></h2>
···
73
77
Developed and launched a mobile app for Virginia Tech campus gyms that provides real-time occupancy data and schedules.
74
78
Created a marketing campaign to drive user adoption during the app’s App Store release.
75
79
</p>
80
+
<div class="project-media gym-tracker-media">
81
+
<div class="screenshots-grid">
82
+
<img src="images/vt-gym-Data.png" alt="VT Gym Tracker screenshot: Data screen" />
83
+
<img src="images/vt-gym-hours.png" alt="VT Gym Tracker screenshot: Hours screen" />
84
+
<img src="images/vt-gym-widgets.png" alt="VT Gym Tracker screenshot: Widgets screen" />
85
+
</div>
86
+
<div class="app-store-link">
87
+
<a href="https://apps.apple.com/us/app/vt-gym-tracker/id6736409867?itscg=30200&itsct=apps_box_badge&mttnsubad=6736409867">
88
+
<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" />
89
+
</a>
90
+
</div>
91
+
</div>
76
92
</section>
77
93
</main>
78
94
<script src="script.js"></script>
+101
style.css
+101
style.css
···
371
371
}
372
372
ul li { margin-bottom: 0.5rem; }
373
373
374
+
/* General link styles */
375
+
a {
376
+
color: var(--text-color);
377
+
text-decoration: underline;
378
+
transition: color 0.15s;
379
+
}
380
+
381
+
a:hover, a:focus {
382
+
color: var(--text-color);
383
+
text-decoration: underline;
384
+
}
385
+
374
386
/* Buttons */
375
387
.btn {
376
388
display: inline-block;
···
854
866
background: #222 !important;
855
867
color: #ffff00 !important;
856
868
}
869
+
870
+
/* Project media carousel styles */
871
+
.project-media {
872
+
margin: 2rem 0;
873
+
}
874
+
875
+
.project-media .carousel {
876
+
display: flex;
877
+
gap: 1rem;
878
+
overflow-x: auto;
879
+
scroll-snap-type: x mandatory;
880
+
-webkit-overflow-scrolling: touch;
881
+
padding-bottom: 0.5rem; /* space for scrollbar */
882
+
}
883
+
884
+
.project-media .carousel img {
885
+
flex: 0 0 auto;
886
+
width: 250px;
887
+
height: auto;
888
+
object-fit: cover;
889
+
border-radius: 8px;
890
+
scroll-snap-align: start;
891
+
}
892
+
893
+
/* Optional: custom scrollbar styling */
894
+
.project-media .carousel::-webkit-scrollbar {
895
+
height: 6px;
896
+
}
897
+
.project-media .carousel::-webkit-scrollbar-track {
898
+
background: transparent;
899
+
}
900
+
.project-media .carousel::-webkit-scrollbar-thumb {
901
+
background-color: rgba(0, 0, 0, 0.2);
902
+
border-radius: 3px;
903
+
}
904
+
905
+
/* Screenshots grid styling */
906
+
.screenshots-grid {
907
+
display: grid;
908
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
909
+
gap: 1rem;
910
+
margin-bottom: 1rem;
911
+
}
912
+
913
+
.screenshots-grid img {
914
+
width: 100%;
915
+
height: auto;
916
+
object-fit: cover;
917
+
border-radius: 8px;
918
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
919
+
}
920
+
921
+
/* App Store link styling */
922
+
.app-store-link {
923
+
display: flex;
924
+
justify-content: center;
925
+
margin-top: 1rem;
926
+
}
927
+
928
+
.app-store-link a {
929
+
display: inline-block;
930
+
text-decoration: none;
931
+
}
932
+
933
+
.app-store-link img {
934
+
width: 180px;
935
+
height: auto;
936
+
object-fit: contain;
937
+
border-radius: 8px;
938
+
}
939
+
940
+
/* Responsive adjustments for smaller screens */
941
+
@media (max-width: 600px) {
942
+
.project-media .carousel {
943
+
gap: 0.5rem;
944
+
}
945
+
.project-media .carousel img {
946
+
width: 70vw;
947
+
}
948
+
949
+
.screenshots-grid {
950
+
grid-template-columns: 1fr;
951
+
gap: 0.8rem;
952
+
}
953
+
954
+
.app-store-link img {
955
+
width: 140px;
956
+
}
957
+
}