Skip to content

Commit 587f7ae

Browse files
captkernelclaude
captkernel
and
claude
committed
Build captkernel.com portfolio: dark technical single-page site
- index.html, styles.css, main.js (no build step, progressive enhancement) - CNAME for captkernel.com, README, favicon - Hero, About, What I do, Projects (6 public repos), Skills, Contact Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 2c31764 commit 587f7ae

5 files changed

Lines changed: 529 additions & 0 deletions

File tree

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
captkernel.com

‎README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# captkernel.com
2+
3+
Personal portfolio for **captKernel** (Karan Parmar) — a single static page hosted on
4+
GitHub Pages at the apex domain `captkernel.com`.
5+
6+
## Stack
7+
8+
No build step, no framework. Just:
9+
10+
- `index.html` — all content, semantic HTML
11+
- `styles.css` — dark technical theme (terminal green accent), responsive
12+
- `main.js` — scroll-reveal + active-nav highlight (vanilla, progressive enhancement)
13+
- `CNAME` — binds the repo to `captkernel.com`
14+
15+
## Local preview
16+
17+
Open `index.html` in a browser, or serve it:
18+
19+
```bash
20+
python -m http.server 8080 # then visit http://localhost:8080
21+
```
22+
23+
## Deploy
24+
25+
Hosted via GitHub Pages from the `main` branch of `captkernel/captkernel.github.io`.
26+
DNS (apex A records + `www` CNAME) is managed on GoDaddy. See
27+
`docs/superpowers/specs/2026-06-27-captkernel-portfolio-design.md` for the full design,
28+
deployment steps, and DNS plan.
29+
30+
## Editing
31+
32+
- Add the X/Twitter link: uncomment the `<!-- X: ... -->` line in `index.html`.
33+
- Projects are hardcoded cards in `index.html` under `#projects`.

‎index.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
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>captKernel — I build with AI</title>
7+
<meta name="description" content="captKernel is the workshop of Karan Parmar — AI Decision Science Manager at Accenture, independent builder of AI agents, developer tooling, and desktop apps." />
8+
9+
<!-- Open Graph -->
10+
<meta property="og:type" content="website" />
11+
<meta property="og:title" content="captKernel — I build with AI" />
12+
<meta property="og:description" content="AI agents, developer tools, and the occasional desktop app." />
13+
<meta property="og:url" content="https://captkernel.com" />
14+
<meta name="theme-color" content="#0d1117" />
15+
<meta name="twitter:card" content="summary" />
16+
17+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230d1117'/%3E%3Ctext x='5' y='23' font-family='monospace' font-size='18' fill='%233fb950'%3E%3E_%3C/text%3E%3C/svg%3E" />
18+
<link rel="stylesheet" href="styles.css" />
19+
</head>
20+
<body>
21+
<a class="skip-link" href="#main">Skip to content</a>
22+
23+
<header class="nav" id="top">
24+
<a class="nav__brand" href="#top" aria-label="captKernel home">
25+
<span class="nav__prompt">&gt;_</span> captKernel
26+
</a>
27+
<nav class="nav__links" aria-label="Primary">
28+
<a href="#about">About</a>
29+
<a href="#what">What I do</a>
30+
<a href="#projects">Projects</a>
31+
<a href="#skills">Skills</a>
32+
<a href="#contact">Contact</a>
33+
</nav>
34+
</header>
35+
36+
<main id="main">
37+
38+
<!-- HERO -->
39+
<section class="hero" id="hero">
40+
<div class="hero__inner">
41+
<p class="hero__prompt"><span class="hero__user">captkernel</span>:<span class="hero__path">~</span>$ <span class="hero__cmd">whoami</span></p>
42+
<h1 class="hero__title">I build with AI.</h1>
43+
<p class="hero__sub">Agents, developer tools, and the occasional desktop app.</p>
44+
<div class="hero__cta">
45+
<a class="btn btn--primary" href="#projects">View projects</a>
46+
<a class="btn" href="https://github.com/captkernel" target="_blank" rel="noopener">GitHub ↗</a>
47+
</div>
48+
</div>
49+
</section>
50+
51+
<!-- ABOUT -->
52+
<section class="section" id="about">
53+
<h2 class="section__title"><span class="section__hash">#</span> About</h2>
54+
<div class="about reveal">
55+
<p>
56+
<strong>captKernel</strong> is the workshop of <strong>Karan Parmar</strong> —
57+
an AI Decision Science Manager at <strong>Accenture</strong>, working at the
58+
industrial edge of generative AI.
59+
</p>
60+
<p>
61+
Off the clock I build relentlessly: autonomous agents, developer tooling for
62+
Claude&nbsp;Code, and small, sharp desktop apps. This site is where that work lives.
63+
</p>
64+
</div>
65+
</section>
66+
67+
<!-- WHAT I DO -->
68+
<section class="section" id="what">
69+
<h2 class="section__title"><span class="section__hash">#</span> What I do</h2>
70+
<div class="cards cards--what">
71+
<article class="card reveal">
72+
<div class="card__icon" aria-hidden="true">⌁</div>
73+
<h3 class="card__title">AI agents &amp; automation</h3>
74+
<p class="card__desc">Autonomous, tool-using agents that do real work — from research to operations.</p>
75+
</article>
76+
<article class="card reveal">
77+
<div class="card__icon" aria-hidden="true">⌘</div>
78+
<h3 class="card__title">Developer tooling</h3>
79+
<p class="card__desc">Toolkits and skills that make AI coding sharper, especially for Claude&nbsp;Code.</p>
80+
</article>
81+
<article class="card reveal">
82+
<div class="card__icon" aria-hidden="true">▣</div>
83+
<h3 class="card__title">Desktop &amp; product builds</h3>
84+
<p class="card__desc">Polished native apps and end-to-end products, shipped solo.</p>
85+
</article>
86+
</div>
87+
</section>
88+
89+
<!-- PROJECTS -->
90+
<section class="section" id="projects">
91+
<h2 class="section__title"><span class="section__hash">#</span> Projects</h2>
92+
<div class="cards cards--projects">
93+
94+
<a class="card card--project card--featured reveal" href="https://github.com/captkernel/Skills_Curator" target="_blank" rel="noopener">
95+
<span class="card__star" title="Featured">★ featured</span>
96+
<h3 class="card__title">Skills Curator</h3>
97+
<p class="card__desc">Decide once, re-decide never — evaluates Claude Code skills before installing and persists every decision.</p>
98+
<span class="card__lang"><span class="dot dot--python"></span>Python</span>
99+
</a>
100+
101+
<a class="card card--project reveal" href="https://github.com/captkernel/sounddeck" target="_blank" rel="noopener">
102+
<h3 class="card__title">SoundDeck</h3>
103+
<p class="card__desc">Windows 11 tray audio control panel — switch devices, ride volume, test mics, save profiles. Native acrylic UI, hotkeys, auto-update.</p>
104+
<span class="card__lang"><span class="dot dot--ts"></span>TypeScript</span>
105+
</a>
106+
107+
<a class="card card--project reveal" href="https://github.com/captkernel/claude-dev-toolkit" target="_blank" rel="noopener">
108+
<h3 class="card__title">Claude Dev Toolkit</h3>
109+
<p class="card__desc">CLAUDE.md starter kit, secrets manager, frontend self-review, and an A2A tutorial.</p>
110+
<span class="card__lang"><span class="dot dot--python"></span>Python</span>
111+
</a>
112+
113+
<a class="card card--project reveal" href="https://github.com/captkernel/claude-everyday-tools" target="_blank" rel="noopener">
114+
<h3 class="card__title">Claude Everyday Tools</h3>
115+
<p class="card__desc">Everyday Claude tools — /flights /farecheck /focus /learn, flight + coaching packs, and a wardrobe app.</p>
116+
<span class="card__lang"><span class="dot dot--python"></span>Python</span>
117+
</a>
118+
119+
<a class="card card--project reveal" href="https://github.com/captkernel/claude-writing-tools" target="_blank" rel="noopener">
120+
<h3 class="card__title">Claude Writing Tools</h3>
121+
<p class="card__desc">Writing &amp; content tools — /humanize /tighten /hook, plus a brand + publish pipeline.</p>
122+
<span class="card__lang"><span class="dot dot--md"></span>Skills</span>
123+
</a>
124+
125+
<a class="card card--project reveal" href="https://github.com/captkernel/claude-thinking-tools" target="_blank" rel="noopener">
126+
<h3 class="card__title">Claude Thinking Tools</h3>
127+
<p class="card__desc">Decision &amp; critique tools — council skill, /brutal /premortem /redteam /pressure-test.</p>
128+
<span class="card__lang"><span class="dot dot--md"></span>Skills</span>
129+
</a>
130+
131+
</div>
132+
<p class="projects__more">
133+
<a href="https://github.com/captkernel?tab=repositories" target="_blank" rel="noopener">See all on GitHub →</a>
134+
</p>
135+
</section>
136+
137+
<!-- SKILLS -->
138+
<section class="section" id="skills">
139+
<h2 class="section__title"><span class="section__hash">#</span> Skills</h2>
140+
<ul class="tags reveal">
141+
<li>TypeScript</li>
142+
<li>Python</li>
143+
<li>Claude Code / Agent SDK</li>
144+
<li>LLM / GenAI</li>
145+
<li>Prompt &amp; agent design</li>
146+
<li>Node.js</li>
147+
<li>Electron</li>
148+
<li>Git / GitHub</li>
149+
<li>Windows tooling</li>
150+
<li>REST APIs</li>
151+
</ul>
152+
</section>
153+
154+
<!-- CONTACT -->
155+
<section class="section section--contact" id="contact">
156+
<h2 class="section__title"><span class="section__hash">#</span> Contact</h2>
157+
<p class="contact__lead">Building something, or want to talk AI? Find me here.</p>
158+
<div class="contact__links">
159+
<a class="btn" href="https://github.com/captkernel" target="_blank" rel="noopener">GitHub ↗</a>
160+
<a class="btn" href="https://www.linkedin.com/in/karanparmar99" target="_blank" rel="noopener">LinkedIn ↗</a>
161+
<!-- X: add handle then uncomment -->
162+
<!-- <a class="btn" href="https://x.com/HANDLE" target="_blank" rel="noopener">X ↗</a> -->
163+
</div>
164+
</section>
165+
166+
</main>
167+
168+
<footer class="footer">
169+
<p><span class="footer__prompt">&gt;_</span> captKernel · Karan Parmar · built with AI</p>
170+
</footer>
171+
172+
<script src="main.js" defer></script>
173+
</body>
174+
</html>

‎main.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* captKernel — progressive enhancement only.
2+
Scroll-reveal of sections + active-nav highlighting. Site is fully readable without JS. */
3+
(function () {
4+
"use strict";
5+
6+
var reduce = window.matchMedia &&
7+
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
8+
9+
/* Reveal-on-scroll */
10+
var reveals = document.querySelectorAll(".reveal");
11+
if (reduce || !("IntersectionObserver" in window)) {
12+
reveals.forEach(function (el) { el.classList.add("is-visible"); });
13+
} else {
14+
var revObserver = new IntersectionObserver(function (entries) {
15+
entries.forEach(function (entry) {
16+
if (entry.isIntersecting) {
17+
entry.target.classList.add("is-visible");
18+
revObserver.unobserve(entry.target);
19+
}
20+
});
21+
}, { threshold: 0.12 });
22+
reveals.forEach(function (el) { revObserver.observe(el); });
23+
}
24+
25+
/* Active nav link based on section in view */
26+
var navLinks = Array.prototype.slice.call(
27+
document.querySelectorAll(".nav__links a")
28+
);
29+
var byId = {};
30+
navLinks.forEach(function (a) {
31+
var id = a.getAttribute("href").replace("#", "");
32+
byId[id] = a;
33+
});
34+
35+
var sections = navLinks
36+
.map(function (a) { return document.getElementById(a.getAttribute("href").replace("#", "")); })
37+
.filter(Boolean);
38+
39+
if ("IntersectionObserver" in window && sections.length) {
40+
var navObserver = new IntersectionObserver(function (entries) {
41+
entries.forEach(function (entry) {
42+
if (entry.isIntersecting) {
43+
navLinks.forEach(function (a) { a.classList.remove("is-active"); });
44+
var link = byId[entry.target.id];
45+
if (link) link.classList.add("is-active");
46+
}
47+
});
48+
}, { rootMargin: "-45% 0px -50% 0px", threshold: 0 });
49+
sections.forEach(function (s) { navObserver.observe(s); });
50+
}
51+
})();

0 commit comments

Comments
 (0)