Skip to content

๐Ÿ”€ :: (#36) ๋„๊ตฌ ์Šคํƒ์„ ์ปฌ๋Ÿฌ ์  + ํ…์ŠคํŠธ ์Šคํƒ€์ผ๋กœ ๋ณ€๊ฒฝ #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Xixn2 merged 2 commits into from
Jul 26, 2026
Merged

๐Ÿ”€ :: (#36) ๋„๊ตฌ ์Šคํƒ์„ ์ปฌ๋Ÿฌ ์  + ํ…์ŠคํŠธ ์Šคํƒ€์ผ๋กœ ๋ณ€๊ฒฝ #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a0733b
๐ŸŽจ (style) #36 :: ๋„๊ตฌ ์Šคํƒ ์นฉ์„ ์ปฌ๋Ÿฌ ์  + ํ…์ŠคํŠธ ์Šคํƒ€์ผ๋กœ ๋ณ€๊ฒฝ
Xixn2 Jul 26, 2026
0457fb5
๐ŸŽจ (style) #36 :: ์Šคํƒ ํ•ญ๋ชฉ๋ณ„ ์  ์ƒ‰์ƒ ์ˆœํ™˜ ๋ฐ ๊ฐ„๊ฒฉ ์กฐ์ •
Xixn2 Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 23 additions & 15 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,29 +224,37 @@ body {
.cap-caret {
animation: caretBlink 1.1s steps(1) infinite;
}
/* Tool stack reads as a plain list: a coloured dot per item, no chrome.
`--dot` is set per item so the colours cycle. */
.cap-chip {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.03em;
color: color-mix(in oklab, var(--acc) 45%, #e8e8ec);
background: color-mix(in oklab, var(--acc) 12%, rgba(255, 255, 255, 0.02));
border: 1px solid color-mix(in oklab, var(--acc) 20%, transparent);
border-radius: 8px;
padding: 6px 12px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 15px;
letter-spacing: -0.005em;
color: #a9a9b2;
background: none;
border: none;
padding: 0;
opacity: 0;
transition: background 0.25s, border-color 0.25s;
transition: color 0.2s;
}
.cap-chip::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dot, var(--acc));
flex: none;
}
.cap-chip:hover {
border-color: color-mix(in oklab, var(--acc) 45%, transparent);
background: color-mix(in oklab, var(--acc) 18%, rgba(255, 255, 255, 0.02));
color: #ededef;
}

/* Mobile shows chips at 1:1 (no scene scaling), so nudge them up to a
comfortable reading size. */
@media (max-width: 767px) {
.cap-chip {
font-size: 12.5px;
padding: 7px 13px;
font-size: 14px;
}
}

Expand Down
25 changes: 19 additions & 6 deletions components/sections/CapabilitiesScene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ const ACCENTS = [

// 7 timeline stages (type โ†’ letters โ†’ sub โ†’ lines โ†’ cards โ†’ rows โ†’ chips)
// at ~5 wheel notches each, plus the sticky 100vh.
/** Dot colours for the tool stack, cycled per item. */
const DOT_COLORS = ["#6366F1", "#22D3EE", "#FBBF24", "#34D399"] as const;

const SCENE_LENGTH_VH = 440;
const TILT = 10;
/** How far a single card must have dealt in (0โ†’1) before the lens works on it. */
Expand Down Expand Up @@ -470,9 +473,14 @@ export default function CapabilitiesScene() {
</li>
))}
</ul>
<ul className="mt-6 flex flex-wrap gap-2">
{group.tools.map((tool) => (
<li key={tool} data-chip="" className="cap-chip">
<ul className="mt-6 flex flex-wrap gap-x-6 gap-y-3">
{group.tools.map((tool, ti) => (
<li
key={tool}
data-chip=""
className="cap-chip"
style={{ ["--dot" as string]: DOT_COLORS[ti % DOT_COLORS.length] }}
>
{tool}
</li>
))}
Expand Down Expand Up @@ -727,9 +735,14 @@ export default function CapabilitiesScene() {
</div>
))}

<div style={{ display: "flex", gap: 10, marginTop: 30, flexWrap: "wrap" }}>
{group.tools.map((tool) => (
<span key={tool} data-chip="" className="cap-chip">
<div style={{ display: "flex", gap: "12px 24px", marginTop: 30, flexWrap: "wrap" }}>
{group.tools.map((tool, ti) => (
<span
key={tool}
data-chip=""
className="cap-chip"
style={{ ["--dot" as string]: DOT_COLORS[ti % DOT_COLORS.length] }}
>
{tool}
</span>
))}
Expand Down
Loading