Skip to content

Commit 02db017

Browse files
cakcak
committed
misc updates and enhancements
1 parent a550a70 commit 02db017

2 files changed

Lines changed: 160 additions & 74 deletions

File tree

‎index.html‎

Lines changed: 60 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,17 @@
2626
src="assets/cak-avatar.png"
2727
alt="Avatar of Caleb Kinney"
2828
class="avatar"
29-
width="160"
30-
height="160"
31-
loading="lazy"
29+
width="240"
30+
height="240"
3231
fetchpriority="high"
32+
decoding="async"
3333
/>
3434
<h1 class="name">Caleb Kinney</h1>
3535
<p class="tagline">
36-
Cybersecurity leader · Data storyteller · OSS builder · Dad
36+
<span class="lead"
37+
>Turning hacker curiosity into data-driven defense.</span
38+
><br />
39+
<span class="subtitle">Cybersecurity leader · OSS builder · Dad</span>
3740
</p>
3841
</header>
3942

@@ -46,80 +49,96 @@ <h1 class="name">Caleb Kinney</h1>
4649
<a
4750
href="https://web.archive.org/web/19961023021136/http://www.arcadium.com/"
4851
target="_blank"
49-
rel="noopener"
52+
rel="noopener noreferrer"
5053
>Arcadium</a
5154
>.
5255
</p>
5356

5457
<p>
5558
By high school, I was hand-coding websites for the dot-com startup
56-
<strong>Iprose Internet · Unique Focus</strong>, building the first
59+
<strong>Iprose Internet / Unique Focus</strong>, building the first
5760
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+
<strong>LightOnline</strong>, a music e-zine. In college, I pivoted
62+
into design, crafting advertisements and magazine layouts for MWR
63+
Marketing in Yokosuka, Japan.
6164
</p>
6265

6366
<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.
67+
That indie web chapter led naturally into security, moving from bug
68+
bounties to leading application security and vulnerability management
69+
programs. The same curiosity that once had me reverse engineering
70+
games now fuels how I blend hacker instincts with data-driven defense.
6871
</p>
6972

7073
<p>
71-
Today I’m Manager of Security Operations at
72-
<a href="https://posit.co" target="_blank" rel="noopener">Posit</a>
74+
Today I'm the Manager of Security Operations at
75+
<a href="https://posit.co" target="_blank" rel="noopener noreferrer"
76+
>Posit</a
77+
>
7378
(formerly RStudio), shaping strategy that safeguards millions of data
7479
scientists and promoting a secure-by-design culture across product
7580
lines.
7681
</p>
7782

7883
<p>
79-
Open source keeps me grounded. I’m a core maintainer of
84+
Open source keeps me grounded. I'm a core maintainer of
8085
<em>Hacker Tracker</em>, a DEF CON Goon, and an adviser to the
8186
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
8587
<a
86-
href="https://github.com/snally-labs"
88+
href="https://github.com/TypeError"
8789
target="_blank"
88-
rel="noopener"
89-
>github.com/snally-labs</a
90-
>
91-
<span>(in active development)</span>.
90+
rel="noopener noreferrer"
91+
>github.com/TypeError</a
92+
>, while data-driven experiments land at
93+
<a href="https://snally.com" target="_blank" rel="noopener noreferrer"
94+
>Snally</a
95+
>.
9296
</p>
9397

9498
<p>
9599
Away from the keyboard you’ll find me
96100
<a
97101
href="https://www.strava.com/athletes/309741"
98102
target="_blank"
99-
rel="noopener"
103+
rel="noopener noreferrer"
100104
>logging miles</a
101105
>
102-
on Maryland back roads, dialing-in craft pour-overs, sampling local
106+
on Maryland back roads, dialing in craft pour-overs, sampling local
103107
beer, and adventuring with my wife and two imaginative daughters.
104108
</p>
105109
</article>
106110

107111
<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:caleb@typeerror.com">Email</a> ·
120-
<a href="https://linktr.ee/typeerror" target="_blank" rel="noopener"
121-
>More links</a
122-
>
112+
<nav aria-label="Connect">
113+
<span class="connect-label">Connect:</span>
114+
<ul class="contact-list">
115+
<li>
116+
<a
117+
href="https://www.linkedin.com/in/calebk"
118+
target="_blank"
119+
rel="noopener noreferrer"
120+
>LinkedIn</a
121+
>
122+
</li>
123+
<li>
124+
<a
125+
href="https://github.com/cak"
126+
target="_blank"
127+
rel="noopener noreferrer"
128+
>GitHub</a
129+
>
130+
</li>
131+
<li><a href="mailto:caleb@typeerror.com">Email</a></li>
132+
<li>
133+
<a
134+
href="https://linktr.ee/typeerror"
135+
target="_blank"
136+
rel="noopener noreferrer"
137+
>More links</a
138+
>
139+
</li>
140+
</ul>
141+
</nav>
123142
</footer>
124143
</main>
125144
</body>

‎style.css‎

Lines changed: 100 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
--clr-bg: #fafafa;
1818
--clr-vapor-1: #ff9de2;
1919
--clr-vapor-2: #7af8ff;
20+
color-scheme: light dark;
2021

2122
/* Layout */
2223
--max-w: 60ch;
@@ -45,6 +46,8 @@ body {
4546
color: var(--clr-fg);
4647
-webkit-font-smoothing: antialiased;
4748
-moz-osx-font-smoothing: grayscale;
49+
text-wrap: pretty;
50+
hanging-punctuation: first;
4851
}
4952

5053
main {
@@ -53,28 +56,6 @@ main {
5356
max-width: var(--max-w);
5457
}
5558

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-
7859
/* ===== HERO ===== */
7960
.hero {
8061
display: flex;
@@ -95,28 +76,27 @@ main {
9576
var(--clr-vapor-2),
9677
var(--clr-bg)
9778
);
98-
opacity: 0.1; /* better contrast */
79+
opacity: 0.1;
9980
backdrop-filter: blur(60px);
10081
}
10182

83+
@supports (backdrop-filter: blur(1px)) {
84+
.hero-bg {
85+
backdrop-filter: blur(60px);
86+
}
87+
}
88+
10289
.avatar {
103-
width: 160px;
104-
height: 160px;
90+
width: clamp(128px, 20vw, 240px);
91+
height: clamp(128px, 20vw, 240px);
10592
border-radius: 50%;
10693
}
10794

10895
.name {
109-
font-size: 2.25rem;
96+
font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
11097
font-weight: 700;
11198
}
11299

113-
.tagline {
114-
margin-top: var(--space-1);
115-
font-size: 1rem;
116-
color: var(--clr-muted);
117-
line-height: 1.4;
118-
}
119-
120100
/* ===== BIO ===== */
121101
.bio p {
122102
margin-top: var(--space-3);
@@ -165,3 +145,90 @@ a:hover {
165145
transition: none !important;
166146
}
167147
}
148+
149+
/* Contact list */
150+
.contact-list {
151+
display: inline-flex;
152+
gap: var(--space-1);
153+
list-style: none;
154+
padding: 0;
155+
margin: 0;
156+
}
157+
158+
.contact a {
159+
color: inherit;
160+
padding: 0 var(--space-1);
161+
}
162+
163+
/* Tag Line */
164+
.tagline {
165+
margin-top: var(--space-2);
166+
text-align: center;
167+
line-height: 1.35;
168+
text-wrap: balance; /* nicer line breaks on supporting browsers */
169+
}
170+
171+
.tagline .lead {
172+
display: inline-block;
173+
font-size: clamp(1.125rem, 1.2rem + 1vw, 1.75rem);
174+
font-weight: 700;
175+
letter-spacing: -0.01em;
176+
/* Subtle gradient text with readable fallback */
177+
color: var(--clr-fg);
178+
background: linear-gradient(
179+
90deg,
180+
var(--clr-vapor-1),
181+
var(--clr-vapor-2),
182+
var(--clr-accent)
183+
);
184+
-webkit-background-clip: text;
185+
background-clip: text;
186+
color: transparent;
187+
}
188+
189+
@media (prefers-contrast: more) {
190+
.tagline .lead {
191+
/* Ensure strong contrast if user requests it */
192+
background: none;
193+
color: var(--clr-fg);
194+
text-decoration: underline;
195+
text-decoration-thickness: 0.08em;
196+
text-underline-offset: 0.18em;
197+
}
198+
}
199+
200+
.tagline .subtitle {
201+
display: inline-block;
202+
margin-top: var(--space-1);
203+
font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
204+
color: var(--clr-muted);
205+
letter-spacing: 0.01em;
206+
opacity: 0.9;
207+
}
208+
209+
@media (prefers-reduced-motion: no-preference) {
210+
.tagline .lead {
211+
animation: rise-in 600ms ease-out both;
212+
}
213+
.tagline .subtitle {
214+
animation: fade-in 700ms 120ms ease-out both;
215+
}
216+
@keyframes rise-in {
217+
from {
218+
transform: translateY(6px);
219+
opacity: 0;
220+
}
221+
to {
222+
transform: translateY(0);
223+
opacity: 1;
224+
}
225+
}
226+
@keyframes fade-in {
227+
from {
228+
opacity: 0;
229+
}
230+
to {
231+
opacity: 1;
232+
}
233+
}
234+
}

0 commit comments

Comments
 (0)