Skip to content

Commit 59d9fba

Browse files
DanielChrobakDanielChrobak
authored
Update index.html
1 parent b4c2323 commit 59d9fba

1 file changed

Lines changed: 124 additions & 36 deletions

File tree

‎index.html‎

Lines changed: 124 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Resume/CV</title>
6+
<title>Professional Resume - Full Stack Developer</title>
77
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
88
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
99
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;600&family=Poppins:wght@500;700&display=swap" rel="stylesheet">
@@ -27,6 +27,55 @@
2727
.contact a { color: white; text-decoration: none; transition: 0.3s; }
2828
.contact a:hover { transform: translateY(-2px); opacity: 0.8; }
2929
.contact i { margin-right: 0.5rem; font-size: 1.2rem; }
30+
31+
/* Scroll Spy Navigation */
32+
.scroll-spy-nav {
33+
position: fixed;
34+
left: 2rem;
35+
top: 50%;
36+
transform: translateY(-50%);
37+
z-index: 999;
38+
background: white;
39+
border-radius: 0.75rem;
40+
padding: 1.5rem 1rem;
41+
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
42+
border: 1px solid var(--border);
43+
max-width: 220px;
44+
}
45+
.scroll-spy-nav ul {
46+
list-style: none;
47+
padding: 0;
48+
margin: 0;
49+
}
50+
.scroll-spy-nav li {
51+
margin-bottom: 0.75rem;
52+
}
53+
.scroll-spy-nav li:last-child {
54+
margin-bottom: 0;
55+
}
56+
.scroll-spy-nav a {
57+
display: block;
58+
color: var(--text-light);
59+
text-decoration: none;
60+
font-size: 0.875rem;
61+
padding: 0.5rem 0.75rem;
62+
border-left: 3px solid transparent;
63+
transition: all 0.3s;
64+
font-weight: 500;
65+
}
66+
.scroll-spy-nav a:hover {
67+
color: var(--primary);
68+
background: var(--bg-light);
69+
border-left-color: var(--primary);
70+
padding-left: 1rem;
71+
}
72+
.scroll-spy-nav a.active {
73+
color: var(--primary);
74+
background: linear-gradient(90deg, rgba(37,99,235,0.1), transparent);
75+
border-left-color: var(--primary);
76+
font-weight: 600;
77+
}
78+
3079
.section { padding: 3rem 0; }
3180
.section-title { font-size: 2rem; color: var(--primary); margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--primary); display: inline-block; }
3281
.card { background: white; border: 1px solid var(--border); border-radius: 0.75rem; padding: 2rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: 0.3s; }
@@ -52,7 +101,7 @@
52101
.tech-badge { background: var(--bg-light); color: var(--text-light); padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; border: 1px solid var(--border); display: inline-block; margin: 0.25rem; transition: 0.3s; }
53102
.tech-badge:hover { background: var(--primary); color: white; transform: translateY(-2px); }
54103

55-
/* New Certification Styles */
104+
/* Certification Styles */
56105
.cert-category { background: white; border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: 0.75rem; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.08); transition: 0.3s; }
57106
.cert-category:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.12); transform: translateX(3px); }
58107
.cert-category-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--bg-light); }
@@ -68,8 +117,11 @@
68117
.cert-btn:hover { color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,0.4); }
69118
.cert-btn i { font-size: 1rem; }
70119

71-
.download-btn { position: fixed; bottom: 2rem; right: 2rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; border-radius: 50%; width: 60px; height: 60px; font-size: 1.5rem; box-shadow: 0 10px 15px rgba(0,0,0,0.1); cursor: pointer; transition: 0.3s; z-index: 1000; }
72-
.download-btn:hover { transform: scale(1.1) rotate(15deg); }
120+
@media (max-width: 1200px) {
121+
.scroll-spy-nav {
122+
display: none;
123+
}
124+
}
73125

74126
@media (max-width: 768px) {
75127
.hero h1 { font-size: 2.5rem; }
@@ -83,12 +135,25 @@
83135
}
84136

85137
@media print {
86-
.download-btn { display: none; }
138+
.scroll-spy-nav { display: none; }
87139
.card, .project, .cert-category { break-inside: avoid; }
88140
}
89141
</style>
90142
</head>
91143
<body>
144+
<!-- Scroll Spy Navigation -->
145+
<nav class="scroll-spy-nav">
146+
<ul>
147+
<li><a href="#summary" class="nav-link">Professional Summary</a></li>
148+
<li><a href="#education" class="nav-link">Education</a></li>
149+
<li><a href="#experience" class="nav-link">Experience</a></li>
150+
<li><a href="#skills" class="nav-link">Technical Skills</a></li>
151+
<li><a href="#projects" class="nav-link">Projects</a></li>
152+
<li><a href="#certifications" class="nav-link">Certifications</a></li>
153+
<li><a href="#expertise" class="nav-link">Additional Expertise</a></li>
154+
</ul>
155+
</nav>
156+
92157
<!-- Hero -->
93158
<div class="hero">
94159
<div class="container">
@@ -104,22 +169,18 @@ <h1>Daniel Chrobak</h1>
104169
</div>
105170
</div>
106171

107-
108-
109172
<!-- Content -->
110173
<div class="container">
111174
<!-- Summary -->
112-
<section class="section">
175+
<section class="section" id="summary">
113176
<h2 class="section-title">Professional Summary</h2>
114177
<div class="card">
115178
<p style="margin:0;">Innovative full-stack developer and entrepreneur with expertise in web application development, wireless networking infrastructure, and embedded systems. Currently building and deploying commercial wireless solutions. Strong technical background in Python Flask development, Arduino/ESP32 programming, and server infrastructure management. Proven ability to design, develop, and deploy production systems from concept to implementation.</p>
116179
</div>
117180
</section>
118181

119-
120-
121182
<!-- Education -->
122-
<section class="section">
183+
<section class="section" id="education">
123184
<h2 class="section-title">Education</h2>
124185
<div class="card">
125186
<div class="card-header">
@@ -143,10 +204,8 @@ <h3 class="card-title">Moraine Valley Community College</h3>
143204
</div>
144205
</section>
145206

146-
147-
148207
<!-- Experience -->
149-
<section class="section">
208+
<section class="section" id="experience">
150209
<h2 class="section-title">Professional Experience</h2>
151210
<div class="card">
152211
<div class="card-header">
@@ -199,10 +258,8 @@ <h3 class="card-title">Server Administrator & Community Manager</h3>
199258
</div>
200259
</section>
201260

202-
203-
204261
<!-- Skills -->
205-
<section class="section">
262+
<section class="section" id="skills">
206263
<h2 class="section-title">Technical Skills</h2>
207264
<div class="skills-grid">
208265
<div class="skill-category">
@@ -266,10 +323,8 @@ <h3><i class="fas fa-tools"></i>Tools & Platforms</h3>
266323
</div>
267324
</section>
268325

269-
270-
271326
<!-- Projects -->
272-
<section class="section">
327+
<section class="section" id="projects">
273328
<h2 class="section-title">Featured Projects</h2>
274329
<div class="project">
275330
<h3 class="card-title">GPU Virtualization & Partitioning Tool</h3>
@@ -342,10 +397,8 @@ <h3 class="card-title">Authenticated File Storage System</h3>
342397
</div>
343398
</section>
344399

345-
346-
347400
<!-- Certifications -->
348-
<section class="section">
401+
<section class="section" id="certifications">
349402
<h2 class="section-title">Professional Certifications</h2>
350403

351404
<div class="cert-category">
@@ -502,10 +555,8 @@ <h3 class="cert-category-title">CAD & Design</h3>
502555
</div>
503556
</section>
504557

505-
506-
507558
<!-- Additional Expertise -->
508-
<section class="section">
559+
<section class="section" id="expertise">
509560
<h2 class="section-title">Additional Expertise</h2>
510561
<div class="card">
511562
<h3 class="card-title">GPU Virtualization & System Architecture</h3>
@@ -526,16 +577,53 @@ <h3 class="card-title">3D Printing & Hardware Prototyping</h3>
526577
</section>
527578
</div>
528579

529-
530-
531-
<!-- Download Button -->
532-
<button class="download-btn" onclick="window.print()" title="Download/Print Resume">
533-
<i class="fas fa-download"></i>
534-
</button>
535-
536-
537-
538580
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
581+
<script>
582+
// Scroll Spy Functionality
583+
document.addEventListener('DOMContentLoaded', function() {
584+
const sections = document.querySelectorAll('.section');
585+
const navLinks = document.querySelectorAll('.scroll-spy-nav .nav-link');
586+
587+
function updateActiveLink() {
588+
let currentSection = '';
589+
590+
sections.forEach(section => {
591+
const sectionTop = section.offsetTop;
592+
const sectionHeight = section.clientHeight;
593+
594+
if (window.pageYOffset >= sectionTop - 200) {
595+
currentSection = section.getAttribute('id');
596+
}
597+
});
598+
599+
navLinks.forEach(link => {
600+
link.classList.remove('active');
601+
if (link.getAttribute('href') === `#${currentSection}`) {
602+
link.classList.add('active');
603+
}
604+
});
605+
}
606+
607+
// Smooth scroll to section
608+
navLinks.forEach(link => {
609+
link.addEventListener('click', function(e) {
610+
e.preventDefault();
611+
const targetId = this.getAttribute('href');
612+
const targetSection = document.querySelector(targetId);
613+
614+
window.scrollTo({
615+
top: targetSection.offsetTop - 100,
616+
behavior: 'smooth'
617+
});
618+
});
619+
});
620+
621+
// Update on scroll
622+
window.addEventListener('scroll', updateActiveLink);
623+
624+
// Initial update
625+
updateActiveLink();
626+
});
627+
</script>
539628
</body>
540629
</html>
541-

0 commit comments

Comments
 (0)