my personal site
0
fork

Configure Feed

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

Update portfolio with latest resume and project files

+376 -129
Jack_Hannon_Marketing_Resume.pdf Jack_Hannon_Marketing_Resume_Web.pdf

This is a binary file and will not be displayed.

-52
contact.html
··· 1 - <!DOCTYPE html> 2 - <html lang="en"> 3 - <head> 4 - <meta charset="UTF-8" /> 5 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 - <title>Jack Hannon | Contact</title> 7 - <script> 8 - if (localStorage.getItem('theme') === 'dark' || 9 - (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { 10 - document.documentElement.classList.add('dark-theme'); 11 - } 12 - </script> 13 - <link rel="stylesheet" href="style.css" /> 14 - </head> 15 - <body> 16 - <header> 17 - <nav class="container"> 18 - <a href="index.html" class="brand">Jack Hannon</a> 19 - <ul class="menu"> 20 - <li><a href="index.html">About</a></li> 21 - <li><a href="projects.html">Projects</a></li> 22 - <li><a href="resume.html">Resume</a></li> 23 - <li><a href="contact.html" class="active">Contact</a></li> 24 - </ul> 25 - <button id="theme-toggle">Dark Mode</button> 26 - </nav> 27 - </header> 28 - <main class="container"> 29 - <h1>Contact</h1> 30 - <p>If you’d like to get in touch, please fill out the form below or reach out directly via email or LinkedIn.</p> 31 - <form id="contact-form" action="#" method="post"> 32 - <p> 33 - <label> Name:<br/> 34 - <input type="text" name="name" required> 35 - </label> 36 - </p> 37 - <p> 38 - <label> Email:<br/> 39 - <input type="email" name="email" required> 40 - </label> 41 - </p> 42 - <p> 43 - <label> Message:<br/> 44 - <textarea name="message" rows="5" required></textarea> 45 - </label> 46 - </p> 47 - <p><button type="submit" class="btn">Send Message</button></p> 48 - </form> 49 - </main> 50 - <script src="script.js"></script> 51 - </body> 52 - </html>
+24 -15
index.html
··· 17 17 <header> 18 18 <nav class="container"> 19 19 <a href="index.html" class="brand">Jack Hannon</a> 20 - <ul class="menu"> 21 - <li><a href="index.html" class="active">About</a></li> 22 - <li><a href="projects.html">Projects</a></li> 23 - <li><a href="resume.html">Resume</a></li> 24 - <li><a href="contact.html">Contact</a></li> 25 - </ul> 26 - <button id="theme-toggle">Dark Mode</button> 20 + <div class="header-controls"> 21 + <ul class="menu"> 22 + <li><a href="index.html" class="active">About</a></li> 23 + <li><a href="projects.html">Projects</a></li> 24 + <li><a href="resume.html">Resume</a></li> 25 + </ul> 26 + <button id="theme-toggle" aria-label="Toggle dark mode"> 27 + <span class="icon-sun" style="display:none;" aria-hidden="true"> 28 + <!-- Sun SVG --> 29 + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> 30 + </span> 31 + <span class="icon-moon" style="display:none;" aria-hidden="true"> 32 + <!-- Moon SVG --> 33 + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/></svg> 34 + </span> 35 + </button> 36 + </div> 27 37 </nav> 28 38 </header> 29 39 <main class="container"> 30 - <section class="intro"> 31 - <!-- Headshot image placeholder; replace "headshot.jpg" with actual image file --> 32 - <img src="headshot.jpg" alt="Jack Hannon headshot" class="headshot" /> 33 - <div class="intro-text"> 34 - <h1>Jack Hannon</h1> 35 - <p class="tagline"> 40 + <section class="intro profile-header"> 41 + <div class="intro-text profile-header-content"> 42 + <img src="headshot.jpg" alt="Jack Hannon headshot" class="headshot profile-avatar" /> 43 + <h1 class="profile-name">Jack Hannon</h1> 44 + <p class="tagline profile-tagline"> 36 45 Marketing &amp; Advertising Graduate 37 46 <span class="sep">|</span> Community Engagement 38 47 <span class="sep">|</span> Tech Enthusiast 39 48 </p> 40 - <p> 49 + <p class="profile-bio"> 41 50 I'm a recent Virginia Tech graduate with a B.A. in Advertising and a passion for connecting communities through creative marketing. I specialize in social media outreach, content creation, and event coordination – blending strong communication skills with technical know-how to engage audiences effectively. 42 51 </p> 43 - <p> 52 + <p class="profile-bio"> 44 53 During my time at Virginia Tech, I managed campus marketing campaigns for the Yik Yak app, coordinated community service initiatives as an Eagle Scout, and even developed a mobile app to help students track gym occupancy in real-time. These experiences honed my leadership and problem-solving abilities, and I'm excited to leverage them in new professional opportunities. 45 54 </p> 46 55 </div>
+18 -8
projects.html
··· 16 16 <header> 17 17 <nav class="container"> 18 18 <a href="index.html" class="brand">Jack Hannon</a> 19 - <ul class="menu"> 20 - <li><a href="index.html">About</a></li> 21 - <li><a href="projects.html" class="active">Projects</a></li> 22 - <li><a href="resume.html">Resume</a></li> 23 - <li><a href="contact.html">Contact</a></li> 24 - </ul> 25 - <button id="theme-toggle">Dark Mode</button> 19 + <div class="header-controls"> 20 + <ul class="menu"> 21 + <li><a href="index.html">About</a></li> 22 + <li><a href="projects.html" class="active">Projects</a></li> 23 + <li><a href="resume.html">Resume</a></li> 24 + </ul> 25 + <button id="theme-toggle" aria-label="Toggle dark mode"> 26 + <span class="icon-sun" style="display:none;" aria-hidden="true"> 27 + <!-- Sun SVG --> 28 + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> 29 + </span> 30 + <span class="icon-moon" style="display:none;" aria-hidden="true"> 31 + <!-- Moon SVG --> 32 + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/></svg> 33 + </span> 34 + </button> 35 + </div> 26 36 </nav> 27 37 </header> 28 - <main class="container"> 38 + <main class="container projects-main"> 29 39 <h1>Projects</h1> 30 40 <section> 31 41 <h2>The Allentown Village Initiative <small>(Project Lead, 2019–2021)</small></h2>
+23 -14
resume.html
··· 16 16 <header> 17 17 <nav class="container"> 18 18 <a href="index.html" class="brand">Jack Hannon</a> 19 - <ul class="menu"> 20 - <li><a href="index.html">About</a></li> 21 - <li><a href="projects.html">Projects</a></li> 22 - <li><a href="resume.html" class="active">Resume</a></li> 23 - <li><a href="contact.html">Contact</a></li> 24 - </ul> 25 - <button id="theme-toggle">Dark Mode</button> 19 + <div class="header-controls"> 20 + <ul class="menu"> 21 + <li><a href="index.html">About</a></li> 22 + <li><a href="projects.html">Projects</a></li> 23 + <li><a href="resume.html" class="active">Resume</a></li> 24 + </ul> 25 + <button id="theme-toggle" aria-label="Toggle dark mode"> 26 + <span class="icon-sun" style="display:none;" aria-hidden="true"> 27 + <!-- Sun SVG --> 28 + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> 29 + </span> 30 + <span class="icon-moon" style="display:none;" aria-hidden="true"> 31 + <!-- Moon SVG --> 32 + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/></svg> 33 + </span> 34 + </button> 35 + </div> 26 36 </nav> 27 37 </header> 28 - <main class="container"> 29 - <h1>Resume</h1> 30 - <p> 31 - <!-- Download link for PDF resume --> 32 - <a href="Jack_Hannon_Marketing_Resume.pdf" class="btn" download>Download PDF Version</a> 33 - </p> 34 - 38 + <main class="container resume-main"> 39 + <div class="resume-header"> 40 + <h1>Resume</h1> 41 + <a href="Jack_Hannon_Marketing_Resume_Web.pdf" class="btn pdf-btn" download>Download PDF</a> 42 + </div> 43 + 35 44 <h2>Education</h2> 36 45 <ul> 37 46 <li><strong>Virginia Tech, Blacksburg, VA</strong> – Bachelor of Arts in Advertising (Minor in Organizational Leadership), May 2025</li>
+12 -7
script.js
··· 2 2 // Theme toggle 3 3 const themeToggleBtn = document.getElementById('theme-toggle'); 4 4 if (themeToggleBtn) { 5 - // Initial button label 6 - if (document.documentElement.classList.contains('dark-theme')) { 7 - themeToggleBtn.textContent = 'Light Mode'; 8 - } else { 9 - themeToggleBtn.textContent = 'Dark Mode'; 5 + const sunIcon = themeToggleBtn.querySelector('.icon-sun'); 6 + const moonIcon = themeToggleBtn.querySelector('.icon-moon'); 7 + function updateThemeIcon() { 8 + if (document.documentElement.classList.contains('dark-theme')) { 9 + sunIcon.style.display = 'block'; 10 + moonIcon.style.display = 'none'; 11 + } else { 12 + sunIcon.style.display = 'none'; 13 + moonIcon.style.display = 'block'; 14 + } 10 15 } 11 - // Toggle handler 16 + updateThemeIcon(); 12 17 themeToggleBtn.addEventListener('click', () => { 13 18 const html = document.documentElement; 14 19 const isDark = html.classList.toggle('dark-theme'); 15 - themeToggleBtn.textContent = isDark ? 'Light Mode' : 'Dark Mode'; 16 20 localStorage.setItem('theme', isDark ? 'dark' : 'light'); 21 + updateThemeIcon(); 17 22 }); 18 23 } 19 24
+299 -33
style.css
··· 3 3 /* Color theme variables */ 4 4 --bg-color: #ffffff; 5 5 --text-color: #333333; 6 - --link-color: #3498db; 7 - --link-hover-color: #1D6FA5; 6 + --link-color: #444444; /* Changed from blue to neutral gray */ 7 + --link-hover-color: #222222; /* Changed from blue to darker gray */ 8 8 --input-bg: #ffffff; 9 9 --input-text: #000000; 10 10 --input-border: #cccccc; 11 + --nav-bg: rgba(255,255,255,0.97); /* Increased opacity */ 12 + --nav-active-bg: #f0f1f3; /* Subtle gray for active nav */ 13 + --nav-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Softer, more natural shadow */ 14 + --nav-border: 1.5px solid #d0d7de; /* Subtle border */ 15 + --btn-bg: #f4f4f7; 16 + --btn-bg-hover: #e0e0e7; 17 + --btn-text: #232b36; 18 + --btn-active-bg: #111; 19 + --btn-active-text: #fff; 20 + --btn-active-underline: #232b36; 11 21 } 12 22 13 23 /* Dark theme overrides */ 14 24 .dark-theme { 15 25 --bg-color: #1a1a1a; 16 26 --text-color: #e0e0e0; 17 - --link-color: #3498db; 18 - --link-hover-color: #5dade2; 27 + --link-color: #bbbbbb; /* Changed from blue to neutral gray */ 28 + --link-hover-color: #ffffff; /* Changed from blue to white */ 19 29 --input-bg: #333333; 20 30 --input-text: #f0f0f0; 21 31 --input-border: #555555; 32 + --nav-bg: rgba(30,30,30,0.98); /* Increased opacity */ 33 + --nav-active-bg: #232b36; 34 + --nav-shadow: 0 4px 24px rgba(0,0,0,0.32); /* More prominent shadow */ 35 + --nav-border: 1.5px solid #333a40; /* Subtle border for dark */ 36 + --btn-bg: #1A1A1A; 37 + --btn-bg-hover: #232b36; 38 + --btn-text: #fff; 39 + --btn-active-bg: #fff; 40 + --btn-active-text: #232b36; 41 + --btn-active-underline: #fff; 22 42 } 23 43 24 44 /* Global resets/base styles */ ··· 42 62 padding: 1rem; 43 63 } 44 64 65 + /* Add a new class for the right-side controls */ 66 + .header-controls { 67 + display: flex; 68 + align-items: center; 69 + gap: 1.2rem; 70 + } 71 + 45 72 /* Header navigation */ 73 + header { 74 + margin-top: 2.5rem; 75 + } 46 76 header nav { 47 77 display: flex; 48 78 align-items: center; 79 + justify-content: space-between; 80 + background: var(--nav-bg); 81 + border-radius: 1.5rem; 82 + box-shadow: var(--nav-shadow); 83 + border: var(--nav-border); /* Add border */ 84 + padding: 0.5rem 2.2rem 0.5rem 1.5rem; 85 + margin-top: 0.5rem; 86 + gap: 1.2rem; 87 + height: 3.6rem; 49 88 } 50 89 .brand { 51 90 font-weight: bold; 52 91 font-size: 1.2em; 53 92 text-decoration: none; 54 93 color: var(--text-color); 55 - margin-right: auto; 94 + margin-right: 1.2rem; 95 + letter-spacing: 0.5px; 96 + display: flex; 97 + align-items: center; 98 + height: 100%; 56 99 } 57 100 .menu { 58 101 list-style: none; 59 102 margin: 0; 60 103 padding: 0; 61 104 display: flex; 105 + gap: 1.2rem; 106 + justify-content: flex-end; 107 + align-items: center; 108 + height: 100%; 62 109 } 63 - .menu li + li { 64 - margin-left: 1rem; 65 - } 66 - nav a { 110 + .menu a { 111 + display: flex; 112 + align-items: center; 113 + background: none; 114 + color: var(--link-color); 115 + font-weight: 600; /* Unified font-weight */ 116 + font-size: 1.05em; 117 + padding: 0.2em 0.7em 0.2em 0.7em; 118 + border: none; 119 + border-radius: 0; 120 + box-shadow: none; 67 121 text-decoration: none; 68 - color: var(--link-color); 122 + transition: color 0.15s, opacity 0.15s; 123 + position: relative; 124 + height: 100%; 125 + margin-top: 10px; 126 + opacity: 0.55; /* Lower opacity for non-active tabs */ 69 127 } 70 - nav a:hover { 71 - text-decoration: underline; 128 + .menu a:hover, .menu a:focus { 129 + color: var(--link-hover-color); 130 + background: none; 131 + outline: none; 132 + opacity: 0.85; /* Slightly higher on hover */ 133 + } 134 + .menu a.active { 135 + color: #111 !important; /* Pure black for active tab in light theme */ 136 + font-weight: 600; /* Unified font-weight */ 137 + background: none; 138 + box-shadow: none; 139 + border-radius: 0; 140 + z-index: 1; 141 + opacity: 1; 72 142 } 73 - nav a.active { 74 - text-decoration: underline; 75 - font-weight: bold; 143 + .dark-theme .menu a.active { 144 + color: #fff !important; /* Pure white for active tab in dark theme */ 76 145 } 77 - /* Theme toggle button */ 78 146 #theme-toggle { 79 - margin-left: 1rem; 80 - padding: 0.25rem 0.6rem; 81 - border: 1px solid var(--text-color); 147 + margin-left: 1.2rem; 148 + display: flex; 149 + align-items: center; 150 + justify-content: center; 151 + width: 2.4rem; 152 + height: 2.4rem; 153 + border: none; 82 154 background: none; 83 155 color: var(--text-color); 84 - border-radius: 4px; 156 + border-radius: 50%; 85 157 cursor: pointer; 158 + transition: background 0.15s, color 0.15s, box-shadow 0.15s; 159 + box-shadow: 0 1px 2px rgba(0,0,0,0.04); /* Softer, subtler shadow */ 160 + font-size: 1.2rem; 161 + position: relative; 86 162 } 87 - #theme-toggle:hover { 88 - background: var(--text-color); 89 - color: var(--bg-color); 163 + #theme-toggle:hover, #theme-toggle:focus { 164 + background: var(--link-hover-color); 165 + color: #fff; 166 + outline: none; 167 + } 168 + /* Make sun icon black on hover in dark mode */ 169 + .dark-theme #theme-toggle:hover .icon-sun svg, 170 + .dark-theme #theme-toggle:focus .icon-sun svg { 171 + color: #111; 172 + } 173 + #theme-toggle svg { 174 + display: block; 175 + } 176 + .icon-sun, .icon-moon { 177 + position: absolute; 178 + left: 50%; 179 + top: 50%; 180 + transform: translate(-50%, -50%); 90 181 } 91 182 92 183 /* Responsive adjustments */ 93 - @media (max-width: 400px) { 94 - .brand { display: none; } 95 - header nav { justify-content: space-between; } 184 + @media (max-width: 600px) { 185 + header nav { 186 + flex-direction: column; 187 + align-items: stretch; 188 + height: auto; 189 + padding: 0.5rem 0.3rem; 190 + gap: 0.5rem; 191 + margin-top: 0.7rem; 192 + justify-content: flex-start; 193 + } 194 + .brand { 195 + margin-right: 0; 196 + margin-bottom: 0.5rem; 197 + justify-content: center; 198 + } 199 + .header-controls { 200 + flex-direction: column; 201 + align-items: stretch; 202 + gap: 0.3rem; 203 + } 204 + .menu { 205 + flex-direction: column; 206 + gap: 0.3rem; 207 + align-items: stretch; 208 + justify-content: flex-start; 209 + } 210 + .menu a { 211 + font-size: 1em; 212 + padding: 0.3em 0.5em; 213 + margin-top: 0; 214 + justify-content: flex-start; 215 + } 216 + #theme-toggle { 217 + margin-left: 0; 218 + align-self: flex-end; 219 + width: 2rem; 220 + height: 2rem; 221 + font-size: 1rem; 222 + } 96 223 } 97 224 98 225 /* Intro (About section) */ ··· 136 263 /* Buttons */ 137 264 .btn { 138 265 display: inline-block; 139 - background: var(--link-color); 140 - color: #fff; 266 + background: var(--btn-bg); 267 + color: var(--btn-text); 141 268 text-decoration: none; 142 - padding: 0.5rem 1rem; 143 - border: none; 144 - border-radius: 4px; 269 + padding: 0.35em 1em; 270 + border: 1px solid #333; 271 + border-radius: 8px; 272 + font-weight: 600; 273 + font-size: 0.98em; 274 + font-family: inherit; 145 275 cursor: pointer; 276 + box-shadow: 0 1.5px 6px rgba(0,0,0,0.07); /* Softer, more natural shadow */ 277 + transition: background 0.15s, color 0.15s, box-shadow 0.15s, border 0.15s; 146 278 } 147 - .btn:hover { 148 - background: var(--link-hover-color); 279 + .btn:hover, .btn:focus { 280 + background: var(--btn-bg-hover); 281 + color: var(--btn-text); 282 + border-color: #444; 283 + outline: none; 284 + box-shadow: 0 3px 12px rgba(0,0,0,0.10); /* Softer hover shadow */ 285 + } 286 + .btn:active { 287 + background: var(--btn-active-bg); 288 + color: var(--btn-active-text); 289 + border-color: #222; 149 290 } 150 291 151 292 /* Form styles */ ··· 161 302 font: inherit; 162 303 } 163 304 textarea { resize: vertical; } 305 + 306 + /* Enhanced mobile responsiveness */ 307 + @media (max-width: 600px) { 308 + html, body { 309 + font-size: 15px; 310 + padding: 0; 311 + } 312 + .container { 313 + padding: 0.5rem; 314 + max-width: 100%; 315 + } 316 + header nav { 317 + flex-direction: column; 318 + align-items: stretch; 319 + height: auto; 320 + padding: 0.5rem 0.3rem; 321 + gap: 0.5rem; 322 + margin-top: 0.7rem; 323 + } 324 + .brand { 325 + font-size: 1em; 326 + margin-right: 0; 327 + margin-bottom: 0.5rem; 328 + justify-content: center; 329 + } 330 + .header-controls { 331 + flex-direction: column; 332 + align-items: stretch; 333 + gap: 0.3rem; 334 + } 335 + .menu { 336 + flex-direction: column; 337 + gap: 0.3rem; 338 + align-items: stretch; 339 + } 340 + .menu a { 341 + font-size: 1em; 342 + padding: 0.3em 0.5em; 343 + margin-top: 0; 344 + justify-content: flex-start; 345 + } 346 + #theme-toggle { 347 + margin-left: 0; 348 + align-self: flex-end; 349 + width: 2rem; 350 + height: 2rem; 351 + font-size: 1rem; 352 + } 353 + .intro { 354 + flex-direction: column; 355 + gap: 1rem; 356 + margin: 1rem 0; 357 + align-items: center; 358 + } 359 + .headshot { 360 + width: 100px; 361 + height: 100px; 362 + } 363 + .intro-text h1 { 364 + font-size: 1.3em; 365 + } 366 + h1 { 367 + font-size: 1.4em; 368 + } 369 + h2 { 370 + font-size: 1.1em; 371 + } 372 + h3 { 373 + font-size: 1em; 374 + } 375 + .btn { 376 + font-size: 0.95em; 377 + padding: 0.3em 0.7em; 378 + } 379 + form p { 380 + margin-bottom: 0.7rem; 381 + } 382 + input[type=text], input[type=email], textarea { 383 + font-size: 1em; 384 + padding: 0.4rem; 385 + } 386 + ul { 387 + padding-left: 1rem; 388 + } 389 + /* Make images and containers fluid */ 390 + img, .headshot { 391 + max-width: 100%; 392 + height: auto; 393 + } 394 + } 395 + 396 + .resume-header { 397 + display: flex; 398 + align-items: center; 399 + justify-content: space-between; 400 + gap: 1rem; 401 + } 402 + 403 + .resume-header h1 { 404 + margin-top: 0; 405 + } 406 + 407 + .pdf-btn { 408 + background: var(--nav-bg); 409 + color: var(--text-color); 410 + border: var(--nav-border); 411 + border-radius: 1.5rem; 412 + box-shadow: var(--nav-shadow); 413 + padding: 0.5em 1.5em; 414 + font-weight: 600; 415 + font-size: 1em; 416 + transition: background 0.15s, color 0.15s, box-shadow 0.15s, border 0.15s; 417 + text-decoration: none; 418 + display: inline-block; 419 + } 420 + .pdf-btn:hover, .pdf-btn:focus { 421 + background: var(--nav-active-bg); 422 + color: var(--link-hover-color); 423 + box-shadow: 0 4px 16px rgba(0,0,0,0.10); 424 + outline: none; 425 + } 426 + 427 + .projects-main > h1 { 428 + margin-top: 0; 429 + }