jwright
03b0cf7c7f
build-and-deploy / build (push) Failing after 11m29s
Cinematic full-page backdrop: per-theme Bat-Computer board image, scroll-panned (S→E→SE→NE) via CSS scroll-driven animation behind a legibility scrim — replaces the grid/aura motif. - Accent retuned royal-blue → the board's cyan→magenta; headline runs a cyan→magenta electric sweep; gradient primary CTA + scroll-progress line. - Display face: self-hosted Chakra Petch (OFL) on hero + section titles. - Skill chips reworked as circuit-node chips (glowing via + gradient hover outline); frosted-glass cards with a cyan→magenta hover hairline; section eyebrows get a gradient tick. - Remove unused BackgroundGrid component + grid assets. All CSS-only / zero external requests / no inline JS — strict CSP and A+ security headers preserved.
95 lines
2.6 KiB
Plaintext
95 lines
2.6 KiB
Plaintext
---
|
|
import type { SkillGroup } from "../data/skills";
|
|
interface Props {
|
|
group: SkillGroup;
|
|
}
|
|
const { group } = Astro.props;
|
|
---
|
|
|
|
<article class="skill card" data-reveal>
|
|
<h3 class="skill__title">{group.title}</h3>
|
|
<p class="skill__blurb">{group.blurb}</p>
|
|
<ul class="skill__items">
|
|
{group.items.map((item) => (
|
|
<li class="chip"><span class="chip__node" aria-hidden="true"></span>{item}</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
|
|
<style>
|
|
.skill {
|
|
padding: var(--space-5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.skill__title {
|
|
font-size: var(--step-1);
|
|
}
|
|
.skill__title::before {
|
|
content: "# ";
|
|
color: var(--accent);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.skill__blurb {
|
|
color: var(--text-dim);
|
|
font-size: var(--step--1);
|
|
line-height: 1.5;
|
|
}
|
|
.skill__items {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: var(--space-2) 0 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Circuit-node chips — a glowing cyan→magenta node + mono label, wired to the
|
|
board palette. Gradient border via padding-box/border-box layering so the
|
|
radius survives. Lights to a full gradient outline + glow on hover. */
|
|
.chip {
|
|
--chip-grad: linear-gradient(100deg, var(--accent), var(--accent-2));
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.01em;
|
|
color: var(--text-dim);
|
|
padding: 0.3rem 0.62rem 0.3rem 0.55rem;
|
|
border-radius: 7px;
|
|
border: 1px solid var(--accent-line);
|
|
background: color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%);
|
|
transition: color 0.2s var(--ease), transform 0.2s var(--ease),
|
|
border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
|
|
background 0.2s var(--ease);
|
|
}
|
|
/* The node: a small cyan→magenta square that glows, like a lit via/pad. */
|
|
.chip__node {
|
|
flex: none;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 2px;
|
|
background: var(--chip-grad);
|
|
box-shadow: 0 0 7px var(--accent-glow);
|
|
}
|
|
.chip:hover {
|
|
color: var(--text);
|
|
transform: translateY(-1px);
|
|
border-color: transparent;
|
|
/* dark fill (padding-box) inside a live gradient border (border-box) */
|
|
background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
|
|
var(--chip-grad) border-box;
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 0 16px var(--accent-glow);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.chip {
|
|
transition: none;
|
|
}
|
|
.chip:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
</style>
|