New
DaylightPortfolios
Street Code
NewA loud, brutalist one-page developer portfolio: hard black edges, hand-drawn scribbles, a scrolling slogan marquee and a background-free portrait against the dark. Every word lives in one content file; swap the palette and the copy and it is someone else's site.
artbloomUpdated Sep 18, 2026
app/street-code/layout.tsx
import type { Metadata } from "next"
import { SiteFooter } from "./components/site-footer"
import { SiteHeader } from "./components/site-header"
import { brand, hero } from "./data/content"
import "./street-code.css"
export const metadata: Metadata = {
title: `${brand.name} (${brand.tag}) — ${brand.role}`,
description: hero.lede,
}
/**
* The template shell.
*
* A nested layout, so it renders no `<html>` or `<body>` — the app's root layout
* owns those. `.scSite` is the single wrapper every rule in `street-code.css`
* hangs off, which is what keeps this sheet from touching anything else in the
* app. The grain overlay is a `::before` on this wrapper, so it too is contained.
*
* The `<noscript>` block matters: scroll reveals and the drawn-in doodles start
* hidden in CSS so they cannot flash in before hydration, which means without
* JavaScript they would never appear. This turns them on for that reader and
* stops the marquee, rather than showing an empty, half-drawn page.
*/
export default function StreetCodeLayout({ children }: { children: React.ReactNode }) {
return (
<div className="scSite">
<noscript>
<style
dangerouslySetInnerHTML={{
__html:
".scReveal{opacity:1;transform:none}.scMarqueeTrack{animation:none}.scDraw path{stroke-dashoffset:0}",
}}
/>
</noscript>
<SiteHeader />
<main>{children}</main>
<SiteFooter />
</div>
)
}app/street-code/street-code.css
/*
* street-code — a dark, loud, spray-paint developer portfolio.
*
* Nothing here can leak. Every class carries an `sc` prefix and every bare-element
* rule is scoped under `.scSite`, so the whole sheet is inert outside its own
* wrapper. A template that ships `.hero` or `.card` into a consumer's globals is a
* collision waiting to happen; a prefix plus one wrapper makes that impossible.
*
* The theme is carried by three things, in order of importance:
* 1. The hand-drawn marker doodles (see components/doodles.tsx) — the crown, the
* loop around a word, the underlines that draw themselves in.
* 2. One electric green accent, used like spray paint and almost nowhere else.
* 3. Heavy, oversized, tight-tracked display type in caps.
* Everything below serves those three. The palette and the display scale are at
* the top; nothing further down hard-codes a value that is a variable up here.
*/
.scSite {
/* Palette — near-black, off-white, and one acid green. Pink is the rare second marker. */
--bg: #0a0a0a;
--bg-lift: #141414;
--bg-card: #161616;
--ink: #f2f2ef;
--ink-dim: rgba(242, 242, 239, 0.66);
--ink-faint: rgba(242, 242, 239, 0.4);
--line: rgba(242, 242, 239, 0.14);
--line-strong: rgba(242, 242, 239, 0.9);
--accent: #39ff14;
--accent-soft: #4ade80;
--marker: #ff2d78;
/* Display scale. Viewport units make the headline monumental on desktop and
still legible on a phone; the clamp stops it doing either badly. */
--display: clamp(3.4rem, 15vw, 12rem);
--heading: clamp(1.9rem, 4.6vw, 3.6rem);
--body: clamp(1rem, 1.1vw, 1.15rem);
--gutter: clamp(1.25rem, 4.5vw, 5.5rem);
--section: clamp(4.5rem, 11vh, 9rem);
--measure: 40rem;
/* Heavy grotesque for display; Impact/Arial Black give the sprayed-stencil weight.
Body and labels ride the app's loaded fonts so the template needs none of its own. */
--font-display: "Helvetica Neue", "Arial Narrow", "Arial Black", Impact, sans-serif;
--font-body: var(--font-inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif);
--font-mono: var(--font-jetbrains, ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace);
position: relative;
min-height: 100vh;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--body);
line-height: 1.6;
isolation: isolate;
overflow-x: hidden;
}
.scSite *,
.scSite *::before,
.scSite *::after { box-sizing: border-box; }
/*
* The grain. A tiled SVG turbulence sits over the whole page at low opacity in
* overlay blend — it is what stops the flat black reading as a plain dark theme
* and gives it the texture of a photographed wall. Fixed, so it does not scroll,
* and `pointer-events: none` so it never eats a click.
*/
.scSite::before {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.5;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Everything the page renders sits above the grain. */
.scSite > * { position: relative; z-index: 2; }
/*
* `:where()` contributes no specificity, so this reset never beats a later class
* rule — a green button will not inherit a link colour, for instance.
*/
.scSite :where(a) { color: inherit; text-decoration: none; }
.scSite :where(button, input, textarea, select) { font: inherit; color: inherit; }
.scSite :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.scSite ::selection { background: var(--accent); color: #000; }
.scSite :focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
/* --------------------------------------------------------------- primitives */
.scWrap {
width: 100%;
max-width: 84rem;
margin: 0 auto;
padding-inline: var(--gutter);
}
.scSection { padding-block: var(--section); }
/* Wide-tracked micro-label, marked with a green tick. Used for every eyebrow. */
.scLabel {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent);
}
.scLabel::before {
content: "";
width: 1.6rem;
height: 2px;
background: var(--accent);
}
.scLede {
max-width: var(--measure);
margin: 0;
font-size: clamp(1.1rem, 1.7vw, 1.5rem);
line-height: 1.5;
color: var(--ink-dim);
text-wrap: pretty;
}
/* Big section headings. Heavy, tight, and set in caps like a stencil. */
.scHeading {
position: relative;
margin: 0;
max-width: 20ch;
font-family: var(--font-display);
font-size: var(--heading);
font-weight: 900;
line-height: 0.98;
letter-spacing: -0.02em;
text-transform: uppercase;
text-wrap: balance;
}
.scSectionHead { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.scSectionHead .scLabel { margin-bottom: 1.25rem; }
/* ------------------------------------------------------------------ buttons */
/*
* Street-poster buttons: a heavy border and a hard offset shadow, no blur. On
* hover the whole button lunges into its own shadow, so it reads as pressed —
* kinetic, not decorative.
*/
.scBtn {
--shadow: var(--accent);
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.6rem;
border: 2px solid var(--ink);
background: transparent;
color: var(--ink);
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 5px 5px 0 var(--shadow);
transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease,
color 0.2s ease;
}
.scBtn:hover {
transform: translate(3px, 3px);
box-shadow: 2px 2px 0 var(--shadow);
}
.scBtn:active {
transform: translate(5px, 5px);
box-shadow: 0 0 0 var(--shadow);
}
.scBtnSolid {
background: var(--accent);
border-color: var(--accent);
color: #000;
--shadow: var(--ink);
}
.scBtnSolid:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.scBtnBig {
padding: 1.15rem 2.2rem;
font-size: 0.95rem;
}
.scBtnArrow {
display: inline-block;
transition: transform 0.2s ease;
}
.scBtn:hover .scBtnArrow { transform: translateX(4px); }
/* ------------------------------------------------------------------- header */
.scHeader {
position: sticky;
top: 0;
z-index: 40;
background: color-mix(in oklab, var(--bg) 84%, transparent);
backdrop-filter: blur(12px) saturate(130%);
border-bottom: 2px solid var(--ink);
}
.scHeaderRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
height: 4.25rem;
}
.scBrand {
display: inline-flex;
align-items: baseline;
gap: 0.7rem;
}
/* The tag, sprayed green with a marker underline scored beneath it. */
.scBrandTag {
position: relative;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--accent);
text-transform: uppercase;
}
.scBrandTag::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: -2px;
height: 3px;
background: var(--accent);
transform: skewX(-12deg);
}
.scBrandHandle {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--ink-faint);
}
.scNav {
display: none;
align-items: center;
gap: 1.9rem;
}
.scNavLink {
position: relative;
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-dim);
transition: color 0.2s ease;
}
.scNavLink:hover { color: var(--ink); }
/* The marker underline grows from the left on hover. */
.scNavLink::after {
content: "";
position: absolute;
left: 0;
bottom: -0.4rem;
width: 100%;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.scNavLink:hover::after { transform: scaleX(1); }
.scNavCta {
padding: 0.5rem 1rem;
border: 2px solid var(--accent);
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
transition: background-color 0.2s ease, color 0.2s ease;
}
.scNavCta:hover { background: var(--accent); color: #000; }
/* Mobile menu: a native <details>. No state, works without hydration. */
.scMenu { position: relative; }
.scMenuSummary {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 2.75rem;
height: 2.5rem;
padding: 0 0.6rem;
border: 2px solid var(--ink);
cursor: pointer;
list-style: none;
}
.scMenuSummary::-webkit-details-marker { display: none; }
.scMenuBar { display: block; height: 2px; background: var(--ink); }
.scMenu[open] .scMenuSummary { border-color: var(--accent); }
.scMenu[open] .scMenuBar { background: var(--accent); }
.scMenuPanel {
position: absolute;
right: 0;
top: calc(100% + 0.7rem);
z-index: 50;
display: grid;
gap: 0.25rem;
min-width: 12rem;
padding: 0.6rem;
border: 2px solid var(--ink);
background: var(--bg-lift);
box-shadow: 6px 6px 0 var(--accent);
}
.scMenuLink {
padding: 0.65rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-dim);
}
.scMenuLink:hover { background: rgba(242, 242, 239, 0.06); color: var(--ink); }
.scMenuLinkCta { color: var(--accent); }
@media (min-width: 56rem) {
.scNav { display: flex; }
.scMenu { display: none; }
.scHeaderRow { height: 5rem; }
}
/* --------------------------------------------------------------------- hero */
.scHero {
display: grid;
gap: clamp(2.5rem, 6vw, 4rem);
padding-top: clamp(2.5rem, 7vh, 5rem);
padding-bottom: clamp(2.5rem, 6vh, 4rem);
align-items: center;
}
/* A soft green haze behind the hero, so the portrait does not float on flat black. */
.scHero::before {
content: "";
position: absolute;
top: -10%;
right: -5%;
width: 42rem;
height: 42rem;
max-width: 90vw;
z-index: -1;
border-radius: 50%;
background: radial-gradient(circle, rgba(57, 255, 20, 0.16), transparent 62%);
filter: blur(30px);
pointer-events: none;
}
.scHeroCopy {
display: grid;
gap: clamp(1.5rem, 3vw, 2.25rem);
align-content: start;
}
.scKicker {
margin: 0;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
/*
* The headline. One hard word per line, transformed taller than it is wide for
* the condensed, spray-stencil look — `scaleY` rather than a variable font so no
* webfont is needed. `overflow: visible` lets the crown and loop spill out.
*/
.scDisplay {
position: relative;
margin: 0;
font-family: var(--font-display);
font-size: var(--display);
font-weight: 900;
line-height: 0.82;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.scDisplayWord {
display: block;
transform: scaleY(1.14);
transform-origin: left top;
}
/* The circled word is the one the eye lands on — green, with a marker loop. */
.scDisplayWordMark {
position: relative;
display: inline-block;
color: var(--accent);
}
/* The crown, sprayed above the first line and tilted like a hand drew it. */
.scCrown {
position: absolute;
top: clamp(-2.6rem, -6vw, -4.2rem);
left: -0.4rem;
width: clamp(3.6rem, 9vw, 6.5rem);
height: auto;
color: var(--accent);
transform: rotate(-8deg);
overflow: visible;
}
/* The loop around the circled word, sized past the glyphs so it reads as a ring. */
.scWordLoop {
position: absolute;
top: 50%;
left: 50%;
width: 128%;
height: 176%;
transform: translate(-50%, -50%) rotate(-3deg);
color: var(--marker);
overflow: visible;
pointer-events: none;
}
.scHeroActions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
align-items: center;
}
/* Stats row — mono labels under heavy green numbers, split by hairlines. */
.scHeroStats {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 4vw, 3rem);
margin: 0.5rem 0 0;
padding-top: 1.75rem;
border-top: 2px solid var(--line);
}
.scStat { display: grid; gap: 0.15rem; }
.scStatValue {
font-family: var(--font-display);
font-size: clamp(1.9rem, 4vw, 2.9rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
color: var(--accent);
}
.scStatLabel {
margin: 0;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* ------------------------------------------------------------ hero portrait */
.scPortrait {
position: relative;
justify-self: center;
width: min(100%, 30rem);
}
/*
* The frame is tilted a couple of degrees, bordered heavy, and throws a hard
* green shadow — a poster stapled to a wall, not a headshot. The portrait's own
* black background blends into the card, so only the figure shows.
*/
.scPortraitFrame {
position: relative;
border: 3px solid var(--ink);
background: #000;
box-shadow: 12px 12px 0 var(--accent);
transform: rotate(-2deg);
overflow: visible;
}
.scPortraitImg {
display: block;
width: 100%;
height: auto;
filter: grayscale(1) contrast(1.15);
mix-blend-mode: lighten;
}
/* A scribbled corner bracket, top-left, overhanging the frame. */
.scPortraitCorner {
position: absolute;
top: -1.5rem;
left: -1.5rem;
width: 5rem;
height: 5rem;
color: var(--accent);
transform: rotate(-6deg);
}
/* A spark near the shoulder. */
.scPortraitSpark {
position: absolute;
right: -1.2rem;
top: 22%;
width: 2.5rem;
height: 2.5rem;
color: var(--marker);
}
/* The "yeah, that's me" note, hand-scrawled and arrowed at the portrait. */
.scPortraitNote {
position: absolute;
right: -0.5rem;
bottom: -3.5rem;
display: flex;
align-items: flex-start;
gap: 0.25rem;
transform: rotate(-4deg);
}
.scPortraitNoteText {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--ink);
}
.scPortraitArrow {
width: 3.25rem;
height: 3rem;
color: var(--accent);
transform: rotate(6deg) scaleX(-1);
}
@media (min-width: 60rem) {
.scHero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.scPortrait { justify-self: end; }
}
/* ------------------------------------------------------------------ marquee */
/*
* The spray-paint ticker. Alternating filled and outlined words give it the
* layered-poster look; a green diamond sits between each. The track is doubled in
* the component and shifted -50%, so the loop is seamless.
*/
.scMarquee {
border-block: 3px solid var(--ink);
background: var(--bg-lift);
padding-block: 1.1rem;
overflow: hidden;
}
.scMarqueeTrack {
display: flex;
width: max-content;
animation: scMarquee 26s linear infinite;
}
.scMarqueeItem {
display: inline-flex;
align-items: center;
gap: 2.5rem;
padding-right: 2.5rem;
font-family: var(--font-display);
font-size: clamp(1.4rem, 3.4vw, 2.4rem);
font-weight: 900;
letter-spacing: 0.01em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink);
}
/* Every other phrase is outlined instead of filled — depth without a second colour. */
.scMarqueeItem:nth-child(even) {
color: transparent;
-webkit-text-stroke: 1.5px var(--ink);
}
/* The diamond separator. */
.scMarqueeItem::after {
content: "";
width: 0.7rem;
height: 0.7rem;
background: var(--accent);
transform: rotate(45deg);
flex-shrink: 0;
}
@keyframes scMarquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* -------------------------------------------------------------------- about */
.scAbout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.scAboutHead { display: grid; gap: 1.25rem; align-content: start; }
/* The marker underline under the about heading draws in when it scrolls up. */
.scHeadingRule {
display: block;
width: clamp(9rem, 22vw, 15rem);
height: auto;
margin-top: 0.6rem;
color: var(--accent);
overflow: visible;
}
.scAboutBody { display: grid; gap: 1.4rem; }
.scAboutBody p {
margin: 0;
max-width: var(--measure);
font-size: clamp(1.05rem, 1.4vw, 1.28rem);
line-height: 1.6;
color: var(--ink-dim);
text-wrap: pretty;
}
/* The opener carries the voice; make it read louder than the rest. */
.scAboutBody p:first-child {
color: var(--ink);
font-size: clamp(1.2rem, 1.9vw, 1.6rem);
line-height: 1.45;
}
.scAboutSign {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.02em;
color: var(--accent);
text-transform: uppercase;
}
@media (min-width: 60rem) {
.scAbout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}
/* ----------------------------------------------------------------- projects */
.scCards {
display: grid;
gap: clamp(1.5rem, 3vw, 2.25rem);
}
/*
* Each project is a street poster: heavy ink border, hard green offset shadow,
* lifted background. On hover it jumps up-left into a bigger pink shadow — the
* one place the second marker colour earns its keep.
*/
.scCard {
display: grid;
gap: 1.1rem;
align-content: start;
padding: clamp(1.5rem, 3vw, 2.25rem);
border: 3px solid var(--ink);
background: var(--bg-card);
box-shadow: 8px 8px 0 var(--accent);
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.scCard:hover,
.scCard:focus-within {
transform: translate(-4px, -4px);
box-shadow: 14px 14px 0 var(--marker);
}
.scCardTop {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.scCardIndex {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 900;
line-height: 0.8;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 2px var(--accent);
}
.scCardYear {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.1em;
color: var(--ink-faint);
}
.scCardTitle {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.scCardBlurb {
margin: 0;
color: var(--ink-dim);
line-height: 1.55;
text-wrap: pretty;
}
.scTags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.scTag {
padding: 0.3rem 0.7rem;
border: 1.5px solid var(--line-strong);
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
}
.scCardLink {
display: inline-flex;
align-items: center;
gap: 0.5rem;
justify-self: start;
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease;
}
.scCardLink:hover { border-color: var(--accent); }
.scCardLink:hover .scBtnArrow { transform: translate(2px, -2px); }
@media (min-width: 48rem) {
.scCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------------- skills */
.scSkills {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.scSkillGroup {
display: grid;
gap: 1.1rem;
align-content: start;
padding-top: 1.5rem;
border-top: 3px solid var(--ink);
}
.scSkillTitle {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
font-weight: 900;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.scSkillSpark {
width: 1.15rem;
height: 1.15rem;
color: var(--accent);
flex-shrink: 0;
}
.scSkillList { display: grid; gap: 0.7rem; }
.scSkillItem {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 1.02rem;
color: var(--ink-dim);
}
/* A green spray-tick before each skill. */
.scSkillItem::before {
content: "";
width: 0.85rem;
height: 2px;
background: var(--accent);
flex-shrink: 0;
}
@media (min-width: 52rem) {
.scSkills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------------ contact */
.scContactSection { padding-bottom: clamp(3rem, 8vw, 6rem); }
.scContact {
display: grid;
gap: 1.75rem;
justify-items: start;
}
.scContactHeading {
position: relative;
margin: 0;
max-width: 18ch;
font-family: var(--font-display);
font-size: clamp(2.4rem, 7vw, 5.5rem);
font-weight: 900;
line-height: 0.94;
letter-spacing: -0.03em;
text-transform: uppercase;
text-wrap: balance;
}
.scContactRule { width: clamp(12rem, 32vw, 22rem); }
.scSocials {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 0.75rem;
}
.scSocial {
display: grid;
gap: 0.2rem;
padding: 0.9rem 1.2rem;
border: 2px solid var(--line);
transition: border-color 0.2s ease, transform 0.16s ease;
}
.scSocial:hover { border-color: var(--accent); transform: translateY(-3px); }
.scSocialLabel {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
.scSocialHandle { font-weight: 600; color: var(--ink); }
/* ------------------------------------------------------------------- footer */
.scFooter {
position: relative;
border-top: 3px solid var(--ink);
padding-top: clamp(3rem, 7vw, 4.5rem);
overflow: hidden;
}
.scFooterTop {
display: grid;
gap: 2.5rem;
padding-bottom: 2.5rem;
}
.scFooterBlurb {
margin: 0;
max-width: 34rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-dim);
text-wrap: pretty;
}
.scFooterNav {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.75rem;
align-content: start;
}
.scFooterLink {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-dim);
transition: color 0.2s ease;
}
.scFooterLink:hover { color: var(--accent); }
.scFooterBottom {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2rem;
justify-content: space-between;
padding-block: 1.6rem;
border-top: 2px solid var(--line);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-faint);
}
.scFooterBottom a { transition: color 0.2s ease; }
.scFooterBottom a:hover { color: var(--accent); }
/*
* The closing tag, sized to run off both edges and get clipped by the footer —
* a name sprayed bigger than its wall. Outlined, not filled, so it stays a
* backdrop and never fights the copy above it.
*/
.scFooterTag {
margin: 0;
font-family: var(--font-display);
font-size: clamp(6rem, 34vw, 30rem);
font-weight: 900;
line-height: 0.72;
letter-spacing: -0.04em;
text-align: center;
color: transparent;
-webkit-text-stroke: 2px rgba(57, 255, 20, 0.28);
white-space: nowrap;
user-select: none;
}
@media (min-width: 52rem) {
.scFooterTop { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; }
}
/* ------------------------------------------------------------- scroll reveal */
/*
* Reveal on scroll, driven by the one IntersectionObserver in components/reveal.tsx
* that flips `data-shown`. The hidden state lives here, not in JS, so nothing
* flashes in before the observer attaches.
*/
.scReveal {
opacity: 0;
transform: translate3d(0, 1.5rem, 0);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--sc-delay, 0ms);
}
.scReveal[data-shown="true"] {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ---------------------------------------------------------- drawn-in doodles */
/*
* The marker draw-in. Every stroked path in a `.scDraw` mark uses `pathLength={1}`,
* so setting the dash array and offset to 1 hides the whole line, and animating
* the offset to 0 "draws" it. Two triggers:
* - `.scDrawNow` fires on load, after a beat — for the hero marks, which are on
* screen before any scroll.
* - Inside a reveal, the draw waits for `data-shown` — so a heading's underline
* paints itself exactly as the block arrives.
*/
.scDraw path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
/* The lighter second underline pass hangs back so the two strokes land in sequence. */
.scDraw .scUnderlineSecond { transition-delay: 0.15s; }
@keyframes scDrawIn {
to { stroke-dashoffset: 0; }
}
.scDrawNow path {
animation: scDrawIn 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.scCrown.scDrawNow path { animation-delay: 0.15s; }
.scWordLoop.scDrawNow path { animation-delay: 0.5s; }
.scPortraitArrow.scDrawNow path { animation-delay: 0.8s; }
/* A reveal-triggered mark draws with a transition instead of the load animation. */
.scReveal[data-shown="true"] .scDraw path {
transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
transition-delay: 0.2s;
stroke-dashoffset: 0;
}
/* ------------------------------------------------------- reduced motion */
/*
* Under reduced-motion everything is simply present: reveals visible with no
* transform, doodles fully drawn with no animation, and the marquee stopped —
* it scrolls on overflow instead, so its phrases stay reachable.
*/
@media (prefers-reduced-motion: reduce) {
.scReveal,
.scReveal[data-shown="true"] {
opacity: 1;
transform: none;
transition: none;
}
.scDraw path,
.scDrawNow path,
.scReveal[data-shown="true"] .scDraw path {
stroke-dashoffset: 0;
animation: none;
transition: none;
}
.scMarquee { overflow-x: auto; }
.scMarqueeTrack { animation: none; }
.scSite *,
.scSite *::before,
.scSite *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}app/street-code/page.tsx
import { Reveal } from "./components/reveal"
import { Ticker } from "./components/ticker"
import {
Arrow,
CircleLoop,
CornerScribble,
Crown,
Spark,
Underline,
} from "./components/doodles"
import { about, brand, contact, hero, projects, skills } from "./data/content"
/**
* The street-code portfolio: one long scroll.
*
* The order is the pitch — a shout, proof it's earned, the story behind it, the
* kit, then the ask. Every string comes from `data/content.ts`; the only things
* hard-coded in JSX are the graffiti marks, and those are the point.
*
* `scDraw` + `scDrawNow` on a doodle draws its stroke in on load; a doodle inside
* a `<Reveal>` draws when that block scrolls into view instead.
*/
export default function StreetCodeHome() {
return (
<>
{/* ------------------------------------------------------------ hero */}
<section className="scWrap scHero">
<div className="scHeroCopy">
<p className="scKicker">{hero.kicker}</p>
<h1 className="scDisplay">
{/* The crown sits over the first line, sprayed on. */}
<Crown className="scCrown scDraw scDrawNow" />
{hero.headline.map((word) => {
const circled = word === hero.circled
return (
<span
key={word}
className={circled ? "scDisplayWord scDisplayWordMark" : "scDisplayWord"}
>
{word}
{circled && <CircleLoop className="scWordLoop scDraw scDrawNow" />}
</span>
)
})}
</h1>
<p className="scLede">{hero.lede}</p>
<div className="scHeroActions">
<a className="scBtn scBtnSolid" href={hero.primary.href}>
{hero.primary.label}
<span className="scBtnArrow" aria-hidden="true">
→
</span>
</a>
<a className="scBtn" href={hero.secondary.href}>
{hero.secondary.label}
</a>
</div>
<dl className="scHeroStats">
{hero.stats.map((stat) => (
<div key={stat.label} className="scStat">
<dt className="scStatValue">{stat.value}</dt>
<dd className="scStatLabel">{stat.label}</dd>
</div>
))}
</dl>
</div>
{/* The B&W portrait, with the green marker doodles layered over it. */}
<div className="scPortrait">
<div className="scPortraitFrame">
{/* eslint-disable-next-line @next/next/no-img-element -- static asset, no optimization needed */}
<img
className="scPortraitImg"
src={hero.portrait.src}
alt={hero.portrait.alt}
width={1024}
height={1024}
/>
<CornerScribble className="scPortraitCorner" />
<Spark className="scPortraitSpark" />
</div>
<div className="scPortraitNote">
<span className="scPortraitNoteText">{hero.portraitNote}</span>
<Arrow className="scPortraitArrow scDraw scDrawNow" />
</div>
</div>
</section>
<Ticker />
{/* ----------------------------------------------------------- about */}
<section id="about" className="scSection">
<div className="scWrap">
<Reveal className="scAbout">
<div className="scAboutHead">
<p className="scLabel">{about.label}</p>
<h2 className="scHeading">
{about.heading}
<Underline className="scHeadingRule scDraw" />
</h2>
</div>
<div className="scAboutBody">
{about.body.map((paragraph) => (
<p key={paragraph}>{paragraph}</p>
))}
<p className="scAboutSign">{about.signature}</p>
</div>
</Reveal>
</div>
</section>
{/* ------------------------------------------------------------ work */}
<section id="work" className="scSection">
<div className="scWrap">
<Reveal className="scSectionHead">
<p className="scLabel">{projects.label}</p>
<h2 className="scHeading">{projects.heading}</h2>
</Reveal>
<div className="scCards">
{projects.items.map((project, index) => (
<Reveal key={project.index} className="scCard" delay={index * 80}>
<div className="scCardTop">
<span className="scCardIndex">{project.index}</span>
<span className="scCardYear">{project.year}</span>
</div>
<h3 className="scCardTitle">{project.title}</h3>
<p className="scCardBlurb">{project.blurb}</p>
<ul className="scTags">
{project.tags.map((tag) => (
<li key={tag} className="scTag">
{tag}
</li>
))}
</ul>
<a
className="scCardLink"
href={project.link.href}
target="_blank"
rel="noreferrer"
>
{project.link.label}
<span className="scBtnArrow" aria-hidden="true">
↗
</span>
</a>
</Reveal>
))}
</div>
</div>
</section>
{/* ---------------------------------------------------------- skills */}
<section id="skills" className="scSection">
<div className="scWrap">
<Reveal className="scSectionHead">
<p className="scLabel">{skills.label}</p>
<h2 className="scHeading">{skills.heading}</h2>
</Reveal>
<div className="scSkills">
{skills.groups.map((group, index) => (
<Reveal key={group.title} className="scSkillGroup" delay={index * 80}>
<h3 className="scSkillTitle">
<Spark className="scSkillSpark" />
{group.title}
</h3>
<ul className="scSkillList">
{group.items.map((item) => (
<li key={item} className="scSkillItem">
{item}
</li>
))}
</ul>
</Reveal>
))}
</div>
</div>
</section>
{/* --------------------------------------------------------- contact */}
<section id="contact" className="scSection scContactSection">
<div className="scWrap">
<Reveal className="scContact">
<p className="scLabel">{contact.label}</p>
<h2 className="scContactHeading">
{contact.heading}
<Underline className="scHeadingRule scContactRule scDraw" />
</h2>
<p className="scLede">{contact.lede}</p>
<a className="scBtn scBtnSolid scBtnBig" href={`mailto:${brand.email}`}>
{contact.emailLabel}
<span className="scBtnArrow" aria-hidden="true">
→
</span>
</a>
<ul className="scSocials">
{contact.socials.map((social) => (
<li key={social.label}>
<a className="scSocial" href={social.href} target="_blank" rel="noreferrer">
<span className="scSocialLabel">{social.label}</span>
<span className="scSocialHandle">{social.handle}</span>
</a>
</li>
))}
</ul>
</Reveal>
</div>
</section>
</>
)
}app/street-code/data/content.ts
/**
* Everything the street-code portfolio says, in one file.
*
* The page and its components hold no copy of their own — they read from here.
* Re-voicing the whole site for a different developer is one file to edit and no
* JSX to touch. Swap the palette in `street-code.css`, swap the words here, drop
* in a new portrait at `/street-code/portrait.png`, and it is someone else's site.
*
* The demo persona is a Brooklyn street-artist-turned-developer, because the
* template's whole reason for existing is attitude and this is a voice that can
* carry it. Replace it with yours.
*/
/** Where the template is mounted. The brand mark links here; nav uses in-page hashes. */
export const BASE = "/street-code"
export const brand = {
/** The tag. Sprayed big in the header and footer — keep it short and loud. */
tag: "RIOT",
name: "Marcus Vega",
handle: "@riot.codes",
role: "Full-stack dev & creative technologist",
city: "Brooklyn, NY",
email: "hey@riot.codes",
year: 2026,
} as const
/** In-page anchors — this is one long scroll, so nav jumps rather than routes. */
export const nav = [
{ label: "Work", href: "#work" },
{ label: "About", href: "#about" },
{ label: "Skills", href: "#skills" },
{ label: "Contact", href: "#contact" },
] as const
/**
* The hero. `headline` is set one word per line at display size — three short,
* hard words read best, and the line breaks are the composition. `circled` names
* the word that gets the hand-drawn scribble loop around it.
*/
export const hero = {
kicker: "Freelance dev for hire — Brooklyn, since '14",
headline: ["IDEAS", "INTO", "CODE"] as const,
circled: "CODE",
lede:
"I build loud, fast, unmistakable web things for brands that refuse to blend in. Ten years turning half-baked 2am ideas into production code that actually ships.",
primary: { label: "See the work", href: "#work" },
secondary: { label: "Start something", href: "#contact" },
portrait: {
src: `${BASE}/portrait.png`,
alt: "Marcus Vega — hood up, shades on, against a black wall",
},
/** The scribbled note pinned to the portrait. */
portraitNote: "yeah, that's me",
stats: [
{ value: "10+", label: "years shipping" },
{ value: "60+", label: "projects live" },
{ value: "3k", label: "github stars" },
] as const,
} as const
/**
* The strip that scrolls under the hero. Short, punchy, no punctuation — half
* slogans, half skills, all attitude. Rendered twice so the loop never jumps.
*/
export const marquee = [
"IDEAS INTO CODE",
"SHIP IT LOUD",
"NO ROUNDED CORNERS",
"TYPESCRIPT ALL DAY",
"MADE IN BROOKLYN",
"STAY DANGEROUS",
] as const
export const about = {
label: "Who's asking",
heading: "I write code like it's on a wall — bold, fast, and impossible to ignore.",
body: [
"Started tagging HTML in a Bushwick basement in 2014 and never really stopped. Somewhere between the spray cans and the standups I worked out that shipping software is the same game as painting a wall: show up, commit to the line, and don't second-guess it halfway through.",
"These days I run point on front-of-stack builds — design systems, WebGL toys, audio experiments, the occasional Rust CLI when I'm feeling feral. I care about type that hits, motion that actually means something, and code the next person can read without cursing my name.",
"No agencies, no middlemen, no “it depends.” You bring the idea. I bring the paint.",
] as const,
signature: "— RIOT",
} as const
export const projects = {
label: "Selected work",
heading: "Four things I shipped and would ship again",
items: [
{
index: "01",
title: "HALFTONE",
blurb:
"A design-token pipeline that syncs Figma variables to CSS, Swift, and Kotlin on every merge. Runs the design system at two YC-backed startups.",
tags: ["TypeScript", "Figma API", "Turborepo"],
year: "2025",
link: { label: "Source", href: "https://github.com/riotcodes/halftone" },
},
{
index: "02",
title: "RIOT.FM",
blurb:
"A browser drum machine and step sequencer built on raw Web Audio — no samples, no backend. Forty thousand beats made and counting.",
tags: ["Web Audio", "React", "Canvas"],
year: "2024",
link: { label: "Live demo", href: "https://riot.fm" },
},
{
index: "03",
title: "DEADLINE",
blurb:
"A terminal-first release tool that turns messy git history into a changelog you'd actually publish. Three thousand stars, one long weekend.",
tags: ["Rust", "CLI", "Git"],
year: "2023",
link: { label: "Source", href: "https://github.com/riotcodes/deadline" },
},
{
index: "04",
title: "CONCRETE",
blurb:
"A brutalist React component library. Heavy borders, hard offset shadows, zero rounded corners, and WCAG-clean straight out of the box.",
tags: ["React", "CSS", "a11y"],
year: "2025",
link: { label: "Docs", href: "https://concrete.riot.codes" },
},
] as const,
} as const
export const skills = {
label: "The kit",
heading: "What's in the bag",
groups: [
{
title: "Front of stack",
items: ["React", "Next.js", "TypeScript", "WebGL / Three", "Motion"],
},
{
title: "Back of stack",
items: ["Node", "Postgres", "Rust", "Redis", "Edge functions"],
},
{
title: "The craft",
items: ["Design systems", "Creative coding", "Accessibility", "Performance", "Type"],
},
] as const,
} as const
export const contact = {
label: "Say something",
heading: "Got something that shouldn't look like everything else?",
lede:
"Freelance slots open for Q3. Tell me what you're building — I reply within a day, usually a lot less.",
emailLabel: "Hit the line",
socials: [
{ label: "GitHub", handle: "github.com/riotcodes", href: "https://github.com/riotcodes" },
{ label: "Twitter / X", handle: "@riotcodes", href: "https://x.com/riotcodes" },
{ label: "Read.cv", handle: "read.cv/riot", href: "https://read.cv/riot" },
] as const,
} as const
export const footer = {
blurb:
"RIOT is the working name of Marcus Vega, a full-stack developer and creative technologist in Brooklyn. This is a demo of the street-code portfolio template — every word on it lives in one file.",
} as constapp/street-code/components/site-header.tsx
"use client"
import { useRef } from "react"
import { BASE, brand, nav } from "../data/content"
/**
* The header — a sprayed tag, the handle, and the nav.
*
* This is a one-page scroll, so the nav points at in-page anchors (`#work`) and
* there is no active-route logic to run. The only reason it is a client component
* is the mobile menu: it is a native `<details>`, and a tap on a link inside it
* should close it before the page scrolls. One ref, one handler, no state.
*/
export function SiteHeader() {
const menu = useRef<HTMLDetailsElement>(null)
const closeMenu = () => {
if (menu.current) menu.current.open = false
}
return (
<header className="scHeader">
<div className="scWrap scHeaderRow">
<a className="scBrand" href={BASE || "/"}>
<span className="scBrandTag">{brand.tag}</span>
<span className="scBrandHandle">{brand.handle}</span>
</a>
<nav className="scNav" aria-label="Primary">
{nav.map((link) => (
<a key={link.href} href={link.href} className="scNavLink">
{link.label}
</a>
))}
<a href="#contact" className="scNavCta">
Hire me
</a>
</nav>
<details className="scMenu" ref={menu}>
<summary className="scMenuSummary" aria-label="Menu">
<span className="scMenuBar" aria-hidden="true" />
<span className="scMenuBar" aria-hidden="true" />
<span className="scMenuBar" aria-hidden="true" />
</summary>
<nav className="scMenuPanel" aria-label="Primary">
{nav.map((link) => (
<a key={link.href} href={link.href} className="scMenuLink" onClick={closeMenu}>
{link.label}
</a>
))}
<a href="#contact" className="scMenuLink scMenuLinkCta" onClick={closeMenu}>
Hire me
</a>
</nav>
</details>
</div>
</header>
)
}app/street-code/components/site-footer.tsx
import { brand, footer, nav } from "../data/content"
/**
* The footer, closing on the oversized tag that is meant to be clipped by the
* page edge — the way a name runs off the end of a wall. Server component; there
* is nothing here to hydrate.
*/
export function SiteFooter() {
return (
<footer className="scFooter">
<div className="scWrap">
<div className="scFooterTop">
<p className="scFooterBlurb">{footer.blurb}</p>
<nav className="scFooterNav" aria-label="Footer">
{nav.map((link) => (
<a key={link.href} href={link.href} className="scFooterLink">
{link.label}
</a>
))}
<a href={`mailto:${brand.email}`} className="scFooterLink">
Email
</a>
</nav>
</div>
<div className="scFooterBottom">
<span>
© {brand.year} {brand.name} — {brand.city}
</span>
<a href={`mailto:${brand.email}`}>{brand.email}</a>
</div>
</div>
{/* Runs full-bleed and off both edges. The clip is the effect. */}
<p className="scFooterTag" aria-hidden="true">
{brand.tag}
</p>
</footer>
)
}app/street-code/components/reveal.tsx
"use client"
import { useEffect, useRef, useState } from "react"
type RevealProps = {
children: React.ReactNode
/** Merged after `scReveal`, so this is where the layout class goes. */
className?: string
/** Stagger, in milliseconds. Feeds `--sc-delay` in the stylesheet. */
delay?: number
}
/**
* Fades and lifts its children in when they first scroll into view.
*
* It renders a plain `<div>` and merges `className`, so the revealed element *is*
* the layout element — `<Reveal className="scCard">` is a grid child, not a
* wrapper that breaks the grid. Modelled on the monolith-launch Reveal, with the
* same three deliberate choices:
*
* - The observer disconnects on first intersection. Re-hiding content the
* reader has already passed is motion for its own sake, and a long page keeps
* zero observers alive by the time you reach the footer.
* - The hidden state lives in CSS, not here, so nothing flashes in before
* hydration and `prefers-reduced-motion` can switch it all off.
* - If `IntersectionObserver` is missing, the content shows immediately.
* Failing open is the only acceptable direction for a fade-in.
*
* `data-shown` also drives the marker doodles inside a revealed block: their
* stroke draws in on the same flip (see `.scReveal[data-shown="true"]` in the
* stylesheet).
*/
export function Reveal({ children, className, delay = 0 }: RevealProps) {
const ref = useRef<HTMLDivElement>(null)
const [shown, setShown] = useState(false)
useEffect(() => {
const node = ref.current
if (!node || shown) return
if (typeof IntersectionObserver === "undefined") {
setShown(true)
return
}
const observer = new IntersectionObserver(
(entries) => {
if (!entries.some((entry) => entry.isIntersecting)) return
setShown(true)
observer.disconnect()
},
/* Held back from the bottom edge so it reads as a reveal, not a pop. */
{ rootMargin: "0px 0px -10% 0px", threshold: 0.05 },
)
observer.observe(node)
return () => observer.disconnect()
}, [shown])
return (
<div
ref={ref}
className={className ? `scReveal ${className}` : "scReveal"}
data-shown={shown ? "true" : "false"}
style={delay ? ({ "--sc-delay": `${delay}ms` } as React.CSSProperties) : undefined}
>
{children}
</div>
)
}app/street-code/components/ticker.tsx
import { marquee } from "../data/content"
/**
* The spray-paint marquee under the hero.
*
* The list is rendered twice because `@keyframes scMarquee` translates the track
* by exactly -50% — with one copy the loop would jump at the seam. The second
* copy is `aria-hidden`, so a screen reader hears each phrase once, not twice.
*
* A `prefers-reduced-motion` rule in the stylesheet stops the animation and lets
* the row scroll on overflow instead, so the phrases are still all reachable.
*/
export function Ticker() {
return (
<div className="scMarquee" aria-label="What I'm about">
<div className="scMarqueeTrack">
{marquee.map((line) => (
<span key={line} className="scMarqueeItem">
{line}
</span>
))}
{marquee.map((line) => (
<span key={`echo-${line}`} className="scMarqueeItem" aria-hidden="true">
{line}
</span>
))}
</div>
</div>
)
}app/street-code/components/doodles.tsx
/**
* Hand-drawn graffiti marks, in inline SVG.
*
* These are the whole theme. A dark page with a green button is a dark page with
* a green button; the crown over the headline, the marker loop around a word and
* the scribbled underline are what make it read as street art. So they are drawn
* by hand here rather than pulled from an icon set — every path is a little
* irregular on purpose, because a perfect circle looks like a border, not paint.
*
* Each mark is presentational and `aria-hidden`, takes a `className` for
* placement, and paints in `currentColor` so the accent colour is set by CSS.
*
* The line-drawing marks (`Underline`, `CircleLoop`) use `pathLength={1}` so the
* stylesheet can animate the stroke on a 0..1 scale without knowing the real path
* length. The CSS draws them in when a `data-shown` ancestor flips, or immediately
* when they carry `scDrawNow`.
*/
type MarkProps = {
className?: string
}
/** The Basquiat crown. Goes above and to the side of the headline. */
export function Crown({ className }: MarkProps) {
return (
<svg
className={className}
viewBox="0 0 120 80"
fill="none"
stroke="currentColor"
strokeWidth={7}
strokeLinejoin="round"
strokeLinecap="round"
aria-hidden="true"
focusable="false"
>
<path pathLength={1} d="M8 68 L16 20 L40 50 L60 12 L80 50 L104 20 L112 68 Z" />
{/* Jewels — three quick dabs across the band. */}
<path pathLength={1} d="M34 60 L36 60" />
<path pathLength={1} d="M60 58 L62 58" />
<path pathLength={1} d="M86 60 L88 60" />
</svg>
)
}
/** A loose marker loop, meant to circle a single word. Draws in. */
export function CircleLoop({ className }: MarkProps) {
return (
<svg
className={className}
viewBox="0 0 320 140"
fill="none"
stroke="currentColor"
strokeWidth={6}
strokeLinecap="round"
aria-hidden="true"
focusable="false"
>
{/* Overshoots past the start, the way a hand does — never a clean join. */}
<path
pathLength={1}
d="M228 18 C120 -8 30 20 20 68 C12 108 96 128 178 126 C268 124 320 96 306 58 C296 30 232 16 150 20"
/>
</svg>
)
}
/** A double-stroke marker underline. The hero and section headings sit on it. */
export function Underline({ className }: MarkProps) {
return (
<svg
className={className}
viewBox="0 0 340 36"
fill="none"
stroke="currentColor"
strokeLinecap="round"
aria-hidden="true"
focusable="false"
>
{/* Heavy first pass. */}
<path pathLength={1} strokeWidth={9} d="M8 18 C90 8 210 8 332 16" />
{/* A lighter second pass, offset — the classic marker double-take. */}
<path
pathLength={1}
strokeWidth={4}
d="M14 27 C120 22 220 24 320 25"
className="scUnderlineSecond"
/>
</svg>
)
}
/** A curved arrow with a marker head. Points from a scribbled note to its target. */
export function Arrow({ className }: MarkProps) {
return (
<svg
className={className}
viewBox="0 0 130 120"
fill="none"
stroke="currentColor"
strokeWidth={6}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<path pathLength={1} d="M18 12 C70 18 108 44 100 96" />
{/* Arrowhead. */}
<path pathLength={1} d="M78 82 L100 100 L118 74" />
</svg>
)
}
/** A four-point spark / star burst. A quick accent near numbers and CTAs. */
export function Spark({ className }: MarkProps) {
return (
<svg
className={className}
viewBox="0 0 60 60"
fill="currentColor"
aria-hidden="true"
focusable="false"
>
<path d="M30 0 C33 20 40 27 60 30 C40 33 33 40 30 60 C27 40 20 33 0 30 C20 27 27 20 30 0 Z" />
</svg>
)
}
/** A scribbled bracket, like a hand-drawn corner mark. Frames the portrait. */
export function CornerScribble({ className }: MarkProps) {
return (
<svg
className={className}
viewBox="0 0 100 100"
fill="none"
stroke="currentColor"
strokeWidth={6}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
focusable="false"
>
<path d="M6 40 C4 22 10 8 30 6 C46 5 58 9 70 8" />
<path d="M12 34 C11 24 16 16 28 15" opacity={0.55} />
</svg>
)
}More like this
New
GraphitePortfolios
New
Paper PortfolioPortfolios
New
Monolith LaunchLanding Pages
New
Cinematic SupercarLanding Pages
New
Snap ToggleDraggable
New
Toast StackStagger
New
Detent SliderDraggable