-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
438 lines (409 loc) · 24.6 KB
/
index.html
File metadata and controls
438 lines (409 loc) · 24.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<title>Access To — Open Tools for Human Rights</title>
<meta name="description" content="Open-source AI-powered tools expanding access to health, education, safety, housing, services, jobs, and business. Built in Missouri, serving nationwide.">
<meta property="og:title" content="Access To — Open Tools for Human Rights">
<meta property="og:description" content="7 open-source projects across 7 pillars — closing the access gaps that matter most.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://dougdevitre.org/">
<meta property="og:image" content="https://dougdevitre.org/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Access To — Open Tools for Human Rights">
<meta name="twitter:description" content="7 open-source projects across 7 pillars — closing the access gaps that matter most.">
<meta name="twitter:image" content="https://dougdevitre.org/og-image.png">
<link rel="canonical" href="https://dougdevitre.org/">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1A1A1A">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="styles.css">
<noscript><style>.stat-number{opacity:1!important}.pillar-card{opacity:1!important;transform:none!important;animation:none!important}.back-to-top{display:none!important}.hamburger{display:none!important}.topbar-links{display:flex!important;position:static!important;flex-direction:row!important;background:none!important;box-shadow:none!important}</style></noscript>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Access To",
"url": "https://dougdevitre.org/",
"description": "Open-source AI-powered tools expanding access to health, education, safety, housing, services, jobs, and business.",
"founder": {
"@type": "Person",
"name": "Doug Devitre",
"url": "https://linkedin.com/in/dougdevitre",
"jobTitle": "Founder & CEO, CoTrackPro"
},
"sameAs": [
"https://github.com/dougdevitre",
"https://linkedin.com/in/dougdevitre"
]
}
</script>
<!-- Apply saved theme before paint to prevent flash -->
<script>
(function(){
var t = localStorage.getItem('theme');
if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<div class="topbar">
<div class="topbar-logo"><a href="#">Access To</a></div>
<button class="hamburger" aria-label="Toggle menu" onclick="this.classList.toggle('open');document.querySelector('.topbar-links').classList.toggle('open');">
<span></span><span></span><span></span>
</button>
<nav class="topbar-links">
<a href="#pillars" onclick="closeMobileNav()">Pillars</a>
<a href="#how-it-works" onclick="closeMobileNav()">How It Works</a>
<a href="#updates" onclick="closeMobileNav()">Updates</a>
<a href="#about" onclick="closeMobileNav()">About</a>
<a href="https://github.com/dougdevitre" target="_blank" rel="noopener" onclick="closeMobileNav()">GitHub</a>
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode">
<svg class="icon-moon" viewBox="0 0 20 20" fill="currentColor"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
<svg class="icon-sun" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/></svg>
</button>
<a href="#donate" class="nav-donate" onclick="closeMobileNav()">Donate</a>
</nav>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="hero-badge">Open Source · Missouri · Nationwide</div>
<h1>Open tools for the access gaps that matter most</h1>
<p>A growing collection of AI-powered, open-source projects organized around seven pillars of human access — built for practitioners, advocates, and the people they serve.</p>
<div class="hero-actions">
<a href="#pillars" class="btn-primary">Browse the Projects ↓</a>
<a href="#how-it-works" class="btn-secondary">How It Works</a>
</div>
</section>
<!-- IMPACT STATS (animated on scroll) -->
<div class="impact-stats" id="stats">
<div class="stat"><div class="stat-number" data-target="7">0</div><div class="stat-label">Pillars</div></div>
<div class="stat"><div class="stat-number" data-target="7">0</div><div class="stat-label">Projects</div></div>
<div class="stat"><div class="stat-number" data-target="400" data-suffix="+">0</div><div class="stat-label">Modules</div></div>
<div class="stat"><div class="stat-number" data-target="114">0</div><div class="stat-label">MO Counties Served</div></div>
</div>
<!-- SOCIAL PROOF -->
<div class="social-proof reveal">
<div class="social-proof-label">Built for audiences at</div>
<div class="social-proof-logos">
<span>AFCC</span>
<span>Missouri Bar</span>
<span>NASW</span>
<span>EAPA</span>
<span>Justice Technology Association</span>
</div>
</div>
<!-- PILLARS (config-driven from repos.json) -->
<section class="pillars" id="pillars">
<noscript>
<p>Enable JavaScript to view project cards, or <a href="https://github.com/dougdevitre">browse all projects on GitHub</a>.</p>
</noscript>
</section>
<!-- WHAT ARE CLAUDE SKILLS EXPLAINER -->
<section class="explainer reveal" id="how-it-works">
<div class="explainer-inner">
<div class="explainer-header">
<h2>What are Claude Skills?</h2>
<p>These projects are structured AI prompt systems that run inside Claude.ai — no coding required.</p>
</div>
<div class="explainer-step">
<div class="step-num">1</div>
<h3>Clone the repo</h3>
<p>Download the skill from GitHub. The key file is <code>SKILL.md</code> — a structured prompt that teaches Claude a specialized workflow.</p>
<div class="copy-block">
<code>git clone https://github.com/dougdevitre/<repo-name></code>
<button class="copy-btn" aria-label="Copy git clone command" onclick="copyCmd(this,'git clone https://github.com/dougdevitre/')">Copy</button>
</div>
</div>
<div class="explainer-step">
<div class="step-num">2</div>
<h3>Upload to Claude</h3>
<p>Create a new Project in <a href="https://claude.ai" target="_blank" rel="noopener" style="color:var(--color-accent-primary)">Claude.ai</a> and add the <code>SKILL.md</code> file as project knowledge.</p>
</div>
<div class="explainer-step">
<div class="step-num">3</div>
<h3>Start a conversation</h3>
<p>The skill guides you through its capabilities. Ask it for help — it handles the rest.</p>
</div>
</div>
</section>
<!-- EMAIL CAPTURE (Mailchimp) -->
<section class="email-capture reveal" id="updates">
<div class="email-capture-inner">
<h2>Stay in the loop</h2>
<p>Get notified when new tools launch, existing projects hit milestones, or speaking events are announced.</p>
<form action="https://us16.list-manage.com/subscribe/post?u=62137ae349&id=090aae7d15" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="email-form" target="_blank" novalidate>
<input type="email" name="EMAIL" placeholder="your@email.com" id="mce-EMAIL" aria-label="Email address" required>
<!-- Bot honeypot field — do not remove -->
<div style="position:absolute;left:-5000px" aria-hidden="true"><input type="text" name="b_62137ae349_090aae7d15" tabindex="-1" value=""></div>
<button type="submit" name="subscribe" id="mc-embedded-subscribe">Get Updates</button>
</form>
<div class="email-success" id="email-success">✓ You're subscribed! Check your inbox to confirm.</div>
<p class="email-privacy">No spam. Unsubscribe anytime. Updates only.</p>
</div>
</section>
<!-- DONATE CTA -->
<section class="donate-section reveal" id="donate">
<div class="donate-banner">
<h2>These tools are free. Building them isn't.</h2>
<p>Every dollar funds development time on open-source tools that help families, job seekers, educators, and advocates navigate broken systems.</p>
<a href="https://venmo.com/dougdevitre" target="_blank" rel="noopener" class="donate-btn">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.27 3c.76 1.25 1.1 2.54 1.1 4.17 0 5.19-4.43 11.93-8.03 16.63H5.72L3.13 4.08l5.76-.55 1.48 11.92c1.38-2.25 3.08-5.78 3.08-8.2 0-1.54-.26-2.6-.68-3.45L19.27 3z"/></svg>
Fund the Mission on Venmo
</a>
<span class="donate-subtext">100% goes to development · No overhead · Receipt on request</span>
</div>
</section>
<!-- ABOUT -->
<section class="about reveal" id="about">
<div>
<h2>Why "Access"?</h2>
<p>Every day, people fall through gaps — in courts, classrooms, housing markets, and service systems — not because solutions don't exist, but because the tools to navigate them are scattered, expensive, or built for insiders.</p>
<p>These projects exist to close those gaps with practical, AI-powered, open-source tools that meet people where they are.</p>
</div>
<div>
<h2>Built by</h2>
<p><strong>Doug Devitre</strong> — product builder, speaker, and founder of <a href="https://cotrackpro.com" target="_blank" rel="noopener">CoTrackPro</a>, based in the St. Louis metro area.</p>
<p>Focused on family law technology, workforce development, and civic access tools for Missouri and beyond.</p>
<p><a href="https://linkedin.com/in/dougdevitre" target="_blank" rel="noopener">LinkedIn</a> · <a href="https://github.com/dougdevitre" target="_blank" rel="noopener">GitHub</a> · <a href="mailto:dougdevitre@gmail.com">Email</a></p>
</div>
</section>
<!-- CHANGELOG -->
<section class="changelog reveal" id="changelog">
<h2>Latest Updates</h2>
<ul class="changelog-list">
<li class="changelog-item">
<div class="changelog-date">Mar 2026</div>
<div class="changelog-text"><a href="safety.html">Access to Safety</a> pillar launched — safety planning, risk assessment, and crisis resources now available.</div>
</li>
<li class="changelog-item">
<div class="changelog-date">Apr 2026</div>
<div class="changelog-text">Site rebuilt to be <strong>config-driven</strong> — pillar cards now render from <code>repos.json</code>, 7 pillars across 7 projects.</div>
</li>
<li class="changelog-item">
<div class="changelog-date">Mar 2026</div>
<div class="changelog-text"><a href="jobs.html">Access to Jobs</a> workforce navigator expanded to cover all 114 Missouri counties with WIOA-grounded modules.</div>
</li>
<li class="changelog-item">
<div class="changelog-date">Mar 2026</div>
<div class="changelog-text"><a href="housing.html">Access to Housing</a> PropTech skill reached 74 modules across 6 analytical pods.</div>
</li>
<li class="changelog-item">
<div class="changelog-date">Mar 2026</div>
<div class="changelog-text"><a href="business.html">Access to Business</a> startup guide launched for Missouri entrepreneurs.</div>
</li>
<li class="changelog-item">
<div class="changelog-date">Feb 2026</div>
<div class="changelog-text"><a href="health.html">Access to Health</a> added Medicaid eligibility screening and Medicare Advantage comparison tools.</div>
</li>
</ul>
</section>
<!-- CONTRIBUTOR CTA -->
<section class="contributor-cta reveal">
<div class="contributor-inner">
<div>
<h2>Want to contribute or partner?</h2>
<p>Whether you're a developer, practitioner, researcher, or organization — there's a way to get involved. Open issues, suggest features, or bring these tools to your community.</p>
</div>
<div class="contributor-actions">
<a href="https://github.com/dougdevitre" target="_blank" rel="noopener" class="btn-primary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
View on GitHub
</a>
<a href="mailto:dougdevitre@gmail.com?subject=Access%20To%20—%20Partnership%20Inquiry" class="btn-secondary">Get in Touch</a>
</div>
</div>
</section>
</main>
<!-- RICH FOOTER -->
<footer class="site-footer">
<div class="footer-grid">
<div class="footer-brand">
<div class="topbar-logo">Access To</div>
<p>Open-source, AI-powered tools closing the access gaps that matter most. Built in Missouri, serving nationwide.</p>
<div class="footer-social">
<a href="https://github.com/dougdevitre" target="_blank" rel="noopener">GitHub</a>
<a href="https://linkedin.com/in/dougdevitre" target="_blank" rel="noopener">LinkedIn</a>
<a href="mailto:dougdevitre@gmail.com">Email</a>
</div>
</div>
<div class="footer-col">
<h4>Pillars</h4>
<ul>
<li><a href="health.html">Health</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="safety.html">Safety</a></li>
<li><a href="housing.html">Housing</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="business.html">Business</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Resources</h4>
<ul>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#changelog">Changelog</a></li>
<li><a href="https://github.com/dougdevitre" target="_blank" rel="noopener">GitHub</a></li>
<li><a href="https://claude.ai" target="_blank" rel="noopener">Claude.ai</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Connect</h4>
<ul>
<li><a href="#updates">Get Updates</a></li>
<li><a href="#donate">Donate</a></li>
<li><a href="https://cotrackpro.com" target="_blank" rel="noopener">CoTrackPro</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Doug Devitre. Open source under MIT unless otherwise noted.</p>
<a href="#">Back to top ↑</a>
</div>
</footer>
<!-- BACK TO TOP -->
<button class="back-to-top" id="backToTop" onclick="window.scrollTo({top:0})" aria-label="Back to top">↑</button>
<script>
// ── Pillar card renderer (config-driven from repos.json) ──
var PILLAR_ICONS = {
health: '<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="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>',
education: '<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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>',
safety: '<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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
housing: '<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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>',
services: '<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="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
jobs: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>',
business: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>'
};
var GITHUB_ICON = '<svg class="repo-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>';
var SCOPE_LABELS = { missouri: 'Missouri', nationwide: 'Nationwide', global: 'Global' };
function renderPillars(data) {
var container = document.getElementById('pillars');
var repos = data.repos.filter(function(r){ return r.role !== 'hub'; });
var html = '';
repos.forEach(function(repo) {
var pillar = repo.pillar;
var icon = PILLAR_ICONS[pillar] || '';
var scope = SCOPE_LABELS[repo.scope] || repo.scope;
var title = pillar.charAt(0).toUpperCase() + pillar.slice(1);
var pageUrl = pillar + '.html';
var repoUrl = 'https://github.com/' + data.owner + '/' + repo.name;
html += '<div class="pillar-card" data-pillar="' + pillar + '">' +
'<div class="pillar-icon" role="img" aria-label="' + title + '">' + icon + '</div>' +
'<h2>Access to ' + title + '</h2>' +
'<p class="pillar-desc">' + repo.description + '</p>' +
'<div class="tag-row"><span class="tag">Claude Skill</span><span class="tag">' + scope + '</span><span class="tag tag-time">5 min setup</span></div>' +
'<a href="' + pageUrl + '" class="pillar-link">Explore projects →</a>' +
'<ul class="repo-list"><li><a href="' + repoUrl + '" target="_blank" rel="noopener">' + GITHUB_ICON + ' ' + repo.name + ' <span class="repo-arrow">↗</span></a></li></ul>' +
'<span class="pillar-status">Active</span>' +
'</div>';
});
container.innerHTML = html;
}
fetch('.github/config/repos.json')
.then(function(r){ return r.json(); })
.then(renderPillars)
.catch(function(){
var c = document.getElementById('pillars');
if (c && !c.querySelector('.pillar-card')) {
c.innerHTML = '<p style="text-align:center;color:var(--color-muted)">Could not load projects. <a href="https://github.com/dougdevitre">Browse on GitHub</a>.</p>';
}
});
// Mobile nav
function closeMobileNav(){
document.querySelector('.hamburger').classList.remove('open');
document.querySelector('.topbar-links').classList.remove('open');
}
// Dark mode toggle
function toggleTheme(){
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
if (isDark) {
document.documentElement.removeAttribute('data-theme');
localStorage.setItem('theme','light');
} else {
document.documentElement.setAttribute('data-theme','dark');
localStorage.setItem('theme','dark');
}
}
// Back to top visibility
var btt = document.getElementById('backToTop');
window.addEventListener('scroll', function(){
btt.classList.toggle('visible', window.scrollY > 600);
}, {passive:true});
// Animated stat counters
var statsObserved = false;
var statsObserver = new IntersectionObserver(function(entries){
if (entries[0].isIntersecting && !statsObserved) {
statsObserved = true;
document.querySelectorAll('.stat-number[data-target]').forEach(function(el){
var target = parseInt(el.getAttribute('data-target'));
var suffix = el.getAttribute('data-suffix') || '';
var duration = 1200;
var start = performance.now();
function tick(now){
var elapsed = now - start;
var progress = Math.min(elapsed / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
el.textContent = Math.round(target * ease) + suffix;
if (progress < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
});
}
}, {threshold: 0.3});
statsObserver.observe(document.getElementById('stats'));
// Mailchimp form — show success message after submit
var mcForm = document.getElementById('mc-embedded-subscribe-form');
if (mcForm) {
mcForm.addEventListener('submit', function(){
setTimeout(function(){
mcForm.style.display = 'none';
document.getElementById('email-success').classList.add('show');
}, 300);
});
}
// Copy to clipboard
function copyCmd(btn, text) {
navigator.clipboard.writeText(text).then(function(){
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(function(){ btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
}, function(){
btn.textContent = 'Failed';
setTimeout(function(){ btn.textContent = 'Copy'; }, 2000);
});
}
// Scroll reveal observer
var revealObserver = new IntersectionObserver(function(entries){
entries.forEach(function(entry){
if (entry.isIntersecting) {
entry.target.classList.add('visible');
revealObserver.unobserve(entry.target);
}
});
}, {threshold: 0.12, rootMargin: '0px 0px -40px 0px'});
document.querySelectorAll('.reveal').forEach(function(el){
revealObserver.observe(el);
});
</script>
</body>
</html>