my personal site
0
fork

Configure Feed

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

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

This is a binary file and will not be displayed.

images/vt-gym-Data.png

This is a binary file and will not be displayed.

images/vt-gym-hours.png

This is a binary file and will not be displayed.

images/vt-gym-widgets.png

This is a binary file and will not be displayed.

+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
··· 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 + }