my personal site
Update portfolio with latest resume and project files
+376
-129
Jack_Hannon_Marketing_Resume.pdf
Jack_Hannon_Marketing_Resume_Web.pdf
Jack_Hannon_Marketing_Resume.pdf
Jack_Hannon_Marketing_Resume_Web.pdf
This is a binary file and will not be displayed.
-52
contact.html
-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
+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 & 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
+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
+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
+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
+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
+
}