Neon Sign Dev
Nocturnal developer portfolio inspired by neon signage on exposed brick -- Orbitron display, Exo 2 body, Share Tech Mono labels, dark OKLCH brick-wall backdrop with four-color neon zoning (cyan/magenta/amber/green), irregular gas-tube flicker animations, cursor-following ambient glow, tube-line section connectors, CSS equalizer bars, and an OPEN sign contact CTA. Zero photography -- all visuals CSS-constructed.
Apply this design skill
Read the SKILL.md at https://joincommons.cc/api/items/neon-sign-dev and apply its design language to my project
Designed by humans. Applied by agents.
Design Language
All colors use OKLCH. The palette splits into two layers: dark structural tones (brick/background) and four neon accent colors (one per section). ### Structural (dark) | Token | Value | Usage | |---|---|---| | `--bg` | `oklch(0.12 0.01 30)` | Page background -- warm near-black | | `--brick-a` | `oklch(0.15 0.02 30)` | Primary brick face | | `--brick-b` | `oklch(0.13 0.01 25)` | Alternating brick face | | `--text-bright` | `oklch(0.90 0 0)` | Primary body text | | `--text-mid` | `oklch(0.70 0.01 30)` | Secondary text, descriptions | | `--text-dim` | `oklch(0.55 0.01 30)` | Tertiary text, metadata, footer | ### Neon accents | Token | Value | Section | Hue | |---|---|---|---| | `--neon-cyan` | `oklch(0.75 0.20 195)` | Projects, hero name, nav default | 195 | | `--neon-magenta` | `oklch(0.65 0.25 340)` | About, tagline | 340 | | `--neon-amber` | `oklch(0.80 0.15 80)` | Music, DJ name | 80 | | `--neon-green` | `oklch(0.70 0.20 145)` | Contact, "OPEN" sign | 145 | ### Mortar / separator `oklch(0.10 0.005 30 / 0.6)` -- used in brick pattern mortar lines. ### Neon glow formula (3-layer text-shadow) For any neon color `C` at its OKLCH value: ``` text-shadow: 0 0 4px oklch(C / 0.9), /* tight inner */ 0 0 14px oklch(C / 0.5), /* mid spread */ 0 0 40px oklch(C / 0.3); /* wide ambient */ ``` Hero name uses a 4-layer variant adding `0 0 80px oklch(C / 0.2)`. ### Card surface `oklch(0.14 0.01 30 / 0.85)` -- slightly lighter than background, translucent for depth. ### Selection color `oklch(0.75 0.20 195 / 0.3)` background with `--text-bright` foreground. ---
Agent instructions (SKILL.md)(advanced)
Design Skill
Routes a neon-sign-on-brick-wall visual system into a single-page portfolio for creative developers, DJ-coders, and digital artists. Four content sections each glow in their own neon color (cyan projects, magenta about, amber music, green contact), connected by vertical tube-line dividers. All visuals are CSS-constructed -- zero photography. The cursor casts a radial ambient glow that shifts color per section.
Reviews
Related styles