Skip to content

Commit 23ecfa6

Browse files
cakcak
committed
Initial commit: landing page for TypeError.com
1 parent a3e4ed5 commit 23ecfa6

File tree

3 files changed

+293
-0
lines changed

3 files changed

+293
-0
lines changed

‎assets/cak-avatar.png‎

136 KB
Loading

‎index.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
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" />
6+
<title>Caleb Kinney</title>
7+
8+
<meta
9+
name="description"
10+
content="Cybersecurity leader, open-source builder, and data storyteller Caleb Kinney."
11+
/>
12+
<link rel="canonical" href="https://typeerror.com/" />
13+
<meta name="theme-color" content="#bb86fc" />
14+
15+
<link rel="preload" as="image" href="assets/cak-avatar.png" />
16+
17+
<link rel="stylesheet" href="style.css" />
18+
</head>
19+
20+
<body>
21+
<div class="hero-bg" aria-hidden="true"></div>
22+
23+
<main id="main">
24+
<header class="hero">
25+
<img
26+
src="assets/cak-avatar.png"
27+
alt="Avatar of Caleb Kinney"
28+
class="avatar"
29+
width="160"
30+
height="160"
31+
loading="lazy"
32+
fetchpriority="high"
33+
/>
34+
<h1 class="name">Caleb Kinney</h1>
35+
<p class="tagline">
36+
Cybersecurity leader · Data storyteller · OSS builder · Dad
37+
</p>
38+
</header>
39+
40+
<article class="bio">
41+
<p>
42+
I cut my teeth on a hand-me-down Apple IIe, late-night IRC ops, and
43+
dial-up <em>Doom</em> deathmatches. That early hacker energy sparked a
44+
lifelong love of code. I taught myself HTML, CSS, and JavaScript by
45+
tweaking profiles on the ahead-of-its-time social network
46+
<a
47+
href="https://web.archive.org/web/19961023021136/http://www.arcadium.com/"
48+
target="_blank"
49+
rel="noopener"
50+
>Arcadium</a
51+
>.
52+
</p>
53+
54+
<p>
55+
By high school, I was hand-coding websites for the dot-com startup
56+
<strong>Iprose Internet · Unique Focus</strong>, building the first
57+
web presence for local businesses, and running
58+
<strong>LightOnline</strong>, an electronic-music e-zine. In college,
59+
I pivoted into design, crafting advertisements and magazine layouts
60+
for MWR Marketing in Yokosuka, Japan.
61+
</p>
62+
63+
<p>
64+
That indie-web chapter evolved into security work: from bug-bounty
65+
hunting to leading application-security and vulnerability-management
66+
programs. The same curiosity that had me reverse-engineering games now
67+
fuels how I blend hacker instincts with data-driven defense.
68+
</p>
69+
70+
<p>
71+
Today I’m Manager of Security Operations at
72+
<a href="https://posit.co" target="_blank" rel="noopener">Posit</a>
73+
(formerly RStudio), shaping strategy that safeguards millions of data
74+
scientists and promoting a secure-by-design culture across product
75+
lines.
76+
</p>
77+
78+
<p>
79+
Open source keeps me grounded. I’m a core maintainer of
80+
<em>Hacker Tracker</em>, a DEF CON Goon, and an adviser to the
81+
NumFOCUS Security Committee. My security-focused code lives at
82+
<a href="https://github.com/TypeError" target="_blank" rel="noopener"
83+
>github.com/TypeError</a
84+
>, while data-driven experiments land at
85+
<a
86+
href="https://github.com/snally-labs"
87+
target="_blank"
88+
rel="noopener"
89+
>github.com/snally-labs</a
90+
>
91+
<span>(in active development)</span>.
92+
</p>
93+
94+
<p>
95+
Away from the keyboard you’ll find me
96+
<a
97+
href="https://www.strava.com/athletes/309741"
98+
target="_blank"
99+
rel="noopener"
100+
>logging miles</a
101+
>
102+
on Maryland back roads, dialing-in craft pour-overs, sampling local
103+
beer, and adventuring with my wife and two imaginative daughters.
104+
</p>
105+
</article>
106+
107+
<footer class="contact">
108+
<span class="connect-label">Connect:</span>
109+
<a
110+
href="https://www.linkedin.com/in/calebk"
111+
target="_blank"
112+
rel="noopener"
113+
>LinkedIn</a
114+
>
115+
·
116+
<a href="https://github.com/cak" target="_blank" rel="noopener"
117+
>GitHub</a
118+
>
119+
· <a href="mailto:[email protected]">Email</a> ·
120+
<a href="https://linktr.ee/typeerror" target="_blank" rel="noopener"
121+
>More links</a
122+
>
123+
</footer>
124+
</main>
125+
</body>
126+
</html>

‎style.css‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/* ===== CSS RESET & TOKENS ===== */
2+
*,
3+
*::before,
4+
*::after {
5+
box-sizing: border-box;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
:root {
11+
/* Typography & colors */
12+
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
13+
sans-serif;
14+
--clr-fg: #1a1a1a;
15+
--clr-muted: #6e6e6e;
16+
--clr-accent: #bb86fc;
17+
--clr-bg: #fafafa;
18+
--clr-vapor-1: #ff9de2;
19+
--clr-vapor-2: #7af8ff;
20+
21+
/* Layout */
22+
--max-w: 60ch;
23+
24+
/* Rhythm */
25+
--space-1: 0.25rem;
26+
--space-2: 0.5rem;
27+
--space-3: 1rem;
28+
--space-4: 1.5rem;
29+
}
30+
31+
@media (prefers-color-scheme: dark) {
32+
:root {
33+
--clr-fg: #f5f5f5;
34+
--clr-muted: #a3a3a3;
35+
--clr-accent: #caa0ff;
36+
--clr-bg: #0e0e0e;
37+
}
38+
}
39+
40+
/* ===== GLOBAL ===== */
41+
body {
42+
font-family: var(--font-sans);
43+
line-height: 1.7;
44+
background: var(--clr-bg);
45+
color: var(--clr-fg);
46+
-webkit-font-smoothing: antialiased;
47+
-moz-osx-font-smoothing: grayscale;
48+
}
49+
50+
main {
51+
padding: var(--space-4) var(--space-3) calc(var(--space-4) * 2);
52+
margin-inline: auto;
53+
max-width: var(--max-w);
54+
}
55+
56+
/* Skip link */
57+
.skip-link {
58+
position: absolute;
59+
left: -999px;
60+
top: auto;
61+
width: 1px;
62+
height: 1px;
63+
overflow: hidden;
64+
}
65+
66+
.skip-link:focus-visible {
67+
position: fixed;
68+
left: var(--space-3);
69+
top: var(--space-3);
70+
padding: var(--space-2) var(--space-3);
71+
background: var(--clr-accent);
72+
color: #fff;
73+
border-radius: 0.25rem;
74+
text-decoration: none;
75+
z-index: 1000;
76+
}
77+
78+
/* ===== HERO ===== */
79+
.hero {
80+
display: flex;
81+
flex-direction: column;
82+
align-items: center;
83+
text-align: center;
84+
margin-bottom: var(--space-4);
85+
gap: var(--space-2);
86+
}
87+
88+
.hero-bg {
89+
position: fixed;
90+
inset: 0;
91+
z-index: -1;
92+
background: linear-gradient(
93+
120deg,
94+
var(--clr-vapor-1),
95+
var(--clr-vapor-2),
96+
var(--clr-bg)
97+
);
98+
opacity: 0.1; /* better contrast */
99+
backdrop-filter: blur(60px);
100+
}
101+
102+
.avatar {
103+
width: 160px;
104+
height: 160px;
105+
border-radius: 50%;
106+
}
107+
108+
.name {
109+
font-size: 2.25rem;
110+
font-weight: 700;
111+
}
112+
113+
.tagline {
114+
margin-top: var(--space-1);
115+
font-size: 1rem;
116+
color: var(--clr-muted);
117+
line-height: 1.4;
118+
}
119+
120+
/* ===== BIO ===== */
121+
.bio p {
122+
margin-top: var(--space-3);
123+
}
124+
125+
/* Links */
126+
a {
127+
color: var(--clr-accent);
128+
text-decoration: none;
129+
text-underline-offset: 0.12em;
130+
}
131+
132+
a:hover {
133+
text-decoration: underline;
134+
}
135+
136+
:where(a, button):focus-visible {
137+
outline: 2px solid var(--clr-accent);
138+
outline-offset: 0.15em;
139+
}
140+
141+
/* ===== FOOTER ===== */
142+
.contact {
143+
margin-top: var(--space-4);
144+
text-align: center;
145+
font-size: 0.9rem;
146+
color: var(--clr-muted);
147+
}
148+
149+
.contact a {
150+
color: inherit;
151+
padding: 0 var(--space-1);
152+
}
153+
154+
.connect-label {
155+
font-weight: 600;
156+
letter-spacing: 0.03em;
157+
margin-right: var(--space-1);
158+
color: var(--clr-fg);
159+
}
160+
161+
/* Reduced-motion preference */
162+
@media (prefers-reduced-motion: reduce) {
163+
* {
164+
animation: none !important;
165+
transition: none !important;
166+
}
167+
}

0 commit comments

Comments
 (0)