my personal site
Create index.html
+51
+51
index.html
+51
index.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 | About</title>
7
+
<script>
8
+
// Apply saved theme or OS preference before CSS loads to prevent flash
9
+
if (localStorage.getItem('theme') === 'dark' ||
10
+
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
11
+
document.documentElement.classList.add('dark-theme');
12
+
}
13
+
</script>
14
+
<link rel="stylesheet" href="style.css" />
15
+
</head>
16
+
<body>
17
+
<header>
18
+
<nav class="container">
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>
27
+
</nav>
28
+
</header>
29
+
<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">
36
+
Marketing & Advertising Graduate
37
+
<span class="sep">|</span> Community Engagement
38
+
<span class="sep">|</span> Tech Enthusiast
39
+
</p>
40
+
<p>
41
+
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
+
</p>
43
+
<p>
44
+
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
+
</p>
46
+
</div>
47
+
</section>
48
+
</main>
49
+
<script src="script.js"></script>
50
+
</body>
51
+
</html>