Skip to content

Commit 7b5d201

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Add sticky category nav and consolidate IDE workshops
- Add sticky pill-style category navigation bar for quick access - Smooth scroll to sections with active state highlighting - Merge Visual Studio, JetBrains, and Xcode into single IDEs category - Remove redundant Workshops heading and subtitle - Reduce spacing between hero stats and category nav Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 9eccc1c commit 7b5d201

2 files changed

Lines changed: 48 additions & 22 deletions

File tree

‎index.html‎

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@
2424
.workshop-card:hover .card-arrow { color: var(--neon-magenta); transform: translateX(4px); }
2525
.section-subtitle { text-align: center; color: var(--text-secondary); max-width: 700px; margin: -1.5rem auto 3rem; font-size: 1.1rem; }
2626
.category-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--neon-magenta); font-family: 'JetBrains Mono', monospace; margin-bottom: 1.5rem; padding-left: 0.5rem; border-left: 3px solid var(--neon-magenta); }
27-
.category-section { margin-bottom: 3rem; }
27+
.category-section { margin-bottom: 3rem; scroll-margin-top: 5rem; }
28+
.category-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 1200px; margin: 0 auto 3rem; padding: 0 2rem; position: sticky; top: 0; z-index: 100; background: var(--bg-dark); padding-top: 1rem; padding-bottom: 1rem; }
29+
[data-theme="light"] .category-nav { background: var(--bg-dark); }
30+
.category-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 50px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; text-decoration: none; transition: all 0.3s ease; cursor: pointer; white-space: nowrap; }
31+
.category-pill:hover, .category-pill.active { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0,245,255,0.08); }
32+
@media (max-width: 768px) { .category-nav { gap: 0.4rem; } .category-pill { font-size: 0.7rem; padding: 0.4rem 0.75rem; } }
2833
.org-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; }
2934
.org-link:hover { color: var(--neon-cyan); }
3035
.org-link svg { width: 20px; height: 20px; fill: currentColor; }
@@ -69,10 +74,15 @@ <h1>GitHub Copilot Dev Days</h1>
6974

7075
<section class="features" id="workshops">
7176
<div class="container">
72-
<h2 class="section-title">Workshops</h2>
73-
<p class="section-subtitle">Each workshop is self-paced, hands-on, and designed to be completed in about an hour. Choose your IDE and language to get started.</p>
77+
<nav class="category-nav" aria-label="Workshop categories">
78+
<a href="#cat-agent-lab" class="category-pill">🐍 VS Code — Agent Lab</a>
79+
<a href="#cat-specialized" class="category-pill">🎮 VS Code — Specialized</a>
80+
<a href="#cat-terminal" class="category-pill">💻 Terminal — CLI</a>
81+
<a href="#cat-actions" class="category-pill">🤖 GitHub Actions</a>
82+
<a href="#cat-ides" class="category-pill">🖥️ IDEs</a>
83+
</nav>
7484

75-
<div class="category-section">
85+
<div class="category-section" id="cat-agent-lab">
7686
<div class="category-label">VS Code — Agent Lab (Social Bingo)</div>
7787
<div class="workshop-grid">
7888
<a href="https://copilot-dev-days.github.io/agent-lab-python/" class="workshop-card">
@@ -122,7 +132,7 @@ <h2 class="section-title">Workshops</h2>
122132
</div>
123133
</div>
124134

125-
<div class="category-section">
135+
<div class="category-section" id="cat-specialized">
126136
<div class="category-label">VS Code — Specialized Workshops</div>
127137
<div class="workshop-grid">
128138
<a href="https://copilot-dev-days.github.io/mona-mayhem/" class="workshop-card">
@@ -150,7 +160,7 @@ <h2 class="section-title">Workshops</h2>
150160
</div>
151161
</div>
152162

153-
<div class="category-section">
163+
<div class="category-section" id="cat-terminal">
154164
<div class="category-label">Terminal — Copilot CLI</div>
155165
<div class="workshop-grid">
156166
<a href="https://copilot-dev-days.github.io/tailspin-toys-workshop/" class="workshop-card">
@@ -166,7 +176,7 @@ <h2 class="section-title">Workshops</h2>
166176
</div>
167177
</div>
168178

169-
<div class="category-section">
179+
<div class="category-section" id="cat-actions">
170180
<div class="category-label">GitHub Actions — Agentic Workflows</div>
171181
<div class="workshop-grid">
172182
<a href="https://copilot-dev-days.github.io/agentic-workflows-workshop/" class="workshop-card">
@@ -182,9 +192,19 @@ <h2 class="section-title">Workshops</h2>
182192
</div>
183193
</div>
184194

185-
<div class="category-section">
186-
<div class="category-label">Other IDEs</div>
195+
<div class="category-section" id="cat-ides">
196+
<div class="category-label">IDEs</div>
187197
<div class="workshop-grid">
198+
<a href="https://dotnet-presentations.github.io/visual-studio-github-copilot-lab/" class="workshop-card">
199+
<span class="card-badge">🖥️ Visual Studio 2026 + .NET 10</span>
200+
<div class="card-title">Copilot for Visual Studio</div>
201+
<p class="card-desc">Complete and enhance the TinyShop application using GitHub Copilot in Visual Studio 2026. Explore code completion, Copilot Chat, Agent Mode, Custom Instructions, MCP Servers, Copilot Vision, and more.</p>
202+
<div class="card-meta">
203+
<span class="card-tag">~60min</span>
204+
<span class="card-tag">13 parts</span>
205+
</div>
206+
<span class="card-arrow">→</span>
207+
</a>
188208
<a href="https://copilot-dev-days.github.io/jetbrains-workshop/" class="workshop-card">
189209
<span class="card-badge">🧩 IntelliJ IDEA + Spring PetClinic</span>
190210
<div class="card-title">Copilot for JetBrains</div>
@@ -206,16 +226,6 @@ <h2 class="section-title">Workshops</h2>
206226
</div>
207227
<span class="card-arrow">→</span>
208228
</a>
209-
<a href="https://dotnet-presentations.github.io/visual-studio-github-copilot-lab/" class="workshop-card">
210-
<span class="card-badge">🖥️ Visual Studio 2026 + .NET 10</span>
211-
<div class="card-title">Copilot for Visual Studio</div>
212-
<p class="card-desc">Complete and enhance the TinyShop application using GitHub Copilot in Visual Studio 2026. Explore code completion, Copilot Chat, Agent Mode, Custom Instructions, MCP Servers, Copilot Vision, and more.</p>
213-
<div class="card-meta">
214-
<span class="card-tag">~60min</span>
215-
<span class="card-tag">13 parts</span>
216-
</div>
217-
<span class="card-arrow">→</span>
218-
</a>
219229
</div>
220230
</div>
221231
</div>
@@ -256,5 +266,21 @@ <h2 class="section-title">General Prerequisites</h2>
256266
<p class="footer-credit" style="margin-top: 1rem;">Organizers of GitHub Copilot Dev Days, visit <a href="https://github.com/github/GitHub-Copilot-Dev-Days/" target="_blank" style="color: var(--neon-cyan);">github.com/github/GitHub-Copilot-Dev-Days</a> for more information.</p>
257267
</div>
258268
</footer>
269+
<script>
270+
document.querySelectorAll('.category-pill').forEach(pill => {
271+
pill.addEventListener('click', e => {
272+
e.preventDefault();
273+
const target = document.querySelector(pill.getAttribute('href'));
274+
if (target) target.scrollIntoView({ behavior: 'smooth' });
275+
});
276+
});
277+
const pills = document.querySelectorAll('.category-pill');
278+
const sections = document.querySelectorAll('.category-section[id]');
279+
window.addEventListener('scroll', () => {
280+
let current = '';
281+
sections.forEach(s => { if (window.scrollY >= s.offsetTop - 120) current = s.id; });
282+
pills.forEach(p => p.classList.toggle('active', p.getAttribute('href') === '#' + current));
283+
});
284+
</script>
259285
</body>
260286
</html>

‎styles.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
body { font-family: 'Space Grotesk', sans-serif; background: var(--bg-dark); color: var(--text-primary); line-height: 1.6; min-height: 100vh; }
1313
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px), linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: -1; }
1414
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
15-
.hero { padding: 6rem 0 4rem; text-align: center; position: relative; }
15+
.hero { padding: 6rem 0 2.5rem; text-align: center; position: relative; }
1616
.hero-badge { display: inline-block; padding: 0.5rem 1rem; background: rgba(0,245,255,0.1); border: 1px solid var(--neon-cyan); border-radius: 50px; font-size: 0.875rem; color: var(--neon-cyan); margin-bottom: 2rem; font-family: 'JetBrains Mono', monospace; }
1717
.hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
1818
.hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem; }
@@ -22,11 +22,11 @@ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; heigh
2222
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,245,255,0.3); }
2323
.btn-secondary { background: transparent; border: 2px solid var(--border-color); color: var(--text-primary); }
2424
.btn-secondary:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
25-
.stats { display: flex; justify-content: center; gap: 3rem; margin-top: 4rem; flex-wrap: wrap; }
25+
.stats { display: flex; justify-content: center; gap: 3rem; margin-top: 2.5rem; flex-wrap: wrap; }
2626
.stat { text-align: center; }
2727
.stat-value { font-size: 2rem; font-weight: 700; color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; }
2828
.stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }
29-
.features { padding: 4rem 0; }
29+
.features { padding: 2rem 0; }
3030
.section-title { font-size: 2rem; text-align: center; margin-bottom: 3rem; }
3131
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
3232
.feature-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 2rem; transition: all 0.3s ease; }

0 commit comments

Comments
 (0)