name: okafor-design
version: alpha
description: >
  A phosphor-CRT terminal portfolio rendered entirely as a monospace TTY
  session. The whole page is one bordered terminal window on near-black green-
  tinted carbon (`#0B0F0A`), driven by a single phosphor-green voltage
  (`#33FF66`) with an amber prompt accent (`#FFB000`) and dim sage comment text
  (`#5A6B5A`). Everything is JetBrains Mono / IBM Plex Mono, glowing via green
  and amber text-shadow. Fixed scanlines and a vignette overlay sell the CRT
  illusion; content is teletyped in by GSAP. No rounded corners, no shadows
  beyond glow — only hairline borders and a soft green box-glow on the frame.
colors:
  # Brand / voltage
  phosphor-green: '#33FF66'      # primary voltage — prompts, headings, output, frame border, glow
  amber: '#FFB000'              # secondary accent — user@host prompt, contact links, one chrome dot
  # Surface
  surface: '#0B0F0A'           # page + terminal body — near-black with green tint
  surface-titlebar: '#0d130c'  # terminal title-bar strip fill
  # Text
  sage-muted: '#5A6B5A'        # comments, metadata, dim shell prose, separators
  chrome-dot: '#5A6B5A'        # first (closed) window-control dot
  # Hairlines
  border-frame: 'rgba(51,255,102,0.40)'   # terminal outer frame border
  border-titlebar: 'rgba(51,255,102,0.30)'# title-bar bottom border
  border-dashed: 'rgba(51,255,102,0.15)'  # dashed section separators
  # Glow / overlay
  glow-green: 'rgba(51,255,102,0.5)'   # green text-shadow
  glow-amber: 'rgba(255,176,0,0.45)'   # amber text-shadow
  frame-glow: 'rgba(51,255,102,0.08)'  # outer box-shadow around the frame
  scanline: 'rgba(0,0,0,0.22)'         # repeating scanline band
  vignette-edge: 'rgba(0,0,0,0.7)'     # radial vignette edge darkening
typography:
  ascii-banner:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: clamp(9px, 13px)
    fontWeight: 400
    lineHeight: 1.15
  heading:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 16px
    fontWeight: 600
  body:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.625
  label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:                        # no radius anywhere — strictly square/CRT
  none: 0px
spacing:                        # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
components:
  frame:
    backgroundColor: '{colors.surface}'
    borderColor: '{colors.border-frame}'
    rounded: '{rounded.none}'
    elevation: '0 0 40px {colors.frame-glow}'
    maxWidth: '1040px'
  titlebar:
    backgroundColor: '{colors.surface-titlebar}'
    borderColor: '{colors.border-titlebar}'
    textColor: '{colors.sage-muted}'
    typography: '{typography.body}'
    padding: '10px 16px'
  prompt:
    textColor: '{colors.amber}'   # user@host
    accentColor: '{colors.phosphor-green}'  # command / path
    mutedColor: '{colors.sage-muted}'       # punctuation
    typography: '{typography.body}'
  cursor-block:
    backgroundColor: '{colors.phosphor-green}'
    elevation: '0 0 8px {colors.glow-green}'
    size: '0.6em x 1.1em'
    rounded: '{rounded.none}'
  contact-link:
    textColor: '{colors.amber}'
    decoration: 'underline rgba(255,176,0,0.6) on hover'
    typography: '{typography.body}'
  separator:
    borderColor: '{colors.border-dashed}'
    style: 'dashed top border'
motion:
  teletype: 'GSAP tween of char count, ease none, ~0.035s/char; types ASCII banner, role line, whoami command + output'
  cursor-blink: '@keyframes blink530 — opacity 1→0→1, 1.06s steps(1,end) infinite'
  section-reveal: 'ScrollTrigger top 78%, once; teletypes the command then staggers rows opacity 0→1 / y 6→0, 0.18s, stagger 0.12s, ease steps(2)'
icons:
  library: none (no icon font; window-control dots are bare squares)
  style: 'three 12px square spans as terminal traffic-light dots'
  color: '{colors.sage-muted} / {colors.phosphor-green} (40%) / {colors.amber} (60%)'

Devin Okafor — Developer Portfolio

okafor-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Okafor is a developer portfolio disguised as a live terminal session on a phosphor CRT. The entire page is a single bordered terminal window centered in a max-w-[1040px] column on a near-black, green-tinted carbon surface (#0B0F0A). One voltage carries the whole design: phosphor green #33FF66 for prompts, headings, output, the frame border, and the glow. An amber accent #FFB000 lights the devin@okafor user-host prompt and the contact links, while a dim sage #5A6B5A handles comments, metadata, and shell chatter. Type is exclusively monospace — JetBrains Mono for the shell body and IBM Plex Mono for headings and the ASCII-art name banner. The CRT illusion is built from two fixed full-viewport overlays: horizontal scanlines and a radial vignette with a heavy inset shadow. Text glows via green/amber text-shadow, a square block cursor blinks at a 1.06s CRT rhythm, and GSAP teletypes content in character by character on load and on scroll. Geometry is strictly square — zero border-radius anywhere — and depth comes only from hairline green borders and a soft green box-glow on the frame.

Colors

Brand / voltage. phosphor-green #33FF66 is the single dominant color: every prompt path, heading, command, command output, the terminal frame border, and the glow text-shadow. amber #FFB000 is the lone secondary accent, used for the devin@okafor user-host token, all three contact links, and the brightest window-control dot. Surface. surface #0B0F0A fills both the page and the terminal body; surface-titlebar #0d130c is a fractionally lighter strip for the title bar. Text. sage-muted #5A6B5A carries comments (#-prefixed lines), file metadata, ssh handshake prose, prompt punctuation, the footer, and labels. Hairlines. All borders are translucent green: border-frame rgba(51,255,102,0.40) around the window, border-titlebar rgba(...,0.30) under the title bar, and border-dashed rgba(...,0.15) for the dashed section dividers. Glow / overlay. Green and amber text-shadows (rgba(51,255,102,0.5), rgba(255,176,0,0.45)), a frame-glow rgba(51,255,102,0.08) box-shadow on the frame, repeating scanline rgba(0,0,0,0.22) bands, and a radial vignette-edge rgba(0,0,0,0.7) plus inset 0 0 180px 40px rgba(0,0,0,0.85).

Typography

Two monospace faces loaded from Google Fonts via a single @import: JetBrains Mono (400/500/700) for the shell body and labels (.font-jb), and IBM Plex Mono (400/600/700) for headings and the ASCII banner (.font-plex). Both are open-source, so no substitution is needed. Labels are uppercase with 0.25em tracking.

Token	Size	Weight	Line-height	Tracking	Usage
ascii-banner	9px → 13px	400	1.15	—	ASCII-art name banner (<pre>)
heading	16px	600	normal	—	# Devin Okafor, ## stack, ## experience
body	13px → 14px	400	1.625	—	shell prompts, commands, output, table rows
label	10px	400	normal	0.25em	uppercase chrome (tty1 · 80x24, footer)

Layout

Base unit 4px (Tailwind scale; observed steps 4/8/16/24/32/40). The page is a single centered column, max-w-[1040px], px-4 with py-8 sm:py-12. Inside is one bordered terminal "window": a title bar (three square control dots, a centered devin@okafor: ~ title, a right-aligned tty1 · 80x24 label) above a body padded px-5 py-6 sm:px-8 sm:py-8 with space-y-10 between sections. Each section is a shell interaction — a prompt line, then output — separated by dashed green rules. The projects section uses a min-w-[640px] table with border-spacing-y-1 inside a horizontal-scroll wrapper. A footer label sits below the frame. Two fixed full-viewport overlays (scanlines z-50, vignette z-49) sit above content; the content column is z-10. Whitespace is generous and vertical-rhythm driven, like real terminal output.

Elevation & Depth

No conventional shadows. Depth is entirely CRT-atmospheric: a soft green box-glow on the frame (shadow-[0_0_40px_rgba(51,255,102,0.08)]), green/amber text glow via text-shadow, fixed scanline bands, and a radial vignette with a heavy inset shadow (inset 0 0 180px 40px rgba(0,0,0,0.85)) that darkens the screen edges. Structure reads through hairline translucent-green borders rather than elevation.

Shapes

Strictly rectangular — there is no border-radius anywhere (rounded.none = 0). Window-control dots are tiny 12px squares, not circles. The block cursor is a hard 0.6em × 1.1em rectangle. This squareness is core to the CRT/TTY identity.

Components

• frame — terminal window: #0B0F0A body, rgba(51,255,102,0.40) border, no radius, 0 0 40px rgba(51,255,102,0.08) glow, max-w-[1040px].
• titlebar — #0d130c strip, bottom border rgba(51,255,102,0.30), sage text, px-4 py-2.5; centered title devin@okafor: ~, label tty1 · 80x24.
• window dots — three h-3 w-3 squares: sage #5A6B5A, green at 40%, amber at 60%.
• prompt — amber devin@okafor, sage : / :~$, green command and ~ path; body type.
• cursor-block — green square, 0 0 8px rgba(51,255,102,0.6) glow, blinks.
• contact-link — amber, hover underline underline-offset-4 with decoration-[#FFB000]/60; labels → mail / → github / → linked.
• separator — dashed top border rgba(51,255,102,0.15) between sections.
• project table — sage permissions/size/date columns, green glowing dir names (kube-drift/), sage #-comments; min-w-[640px], scroll wrapper.

Motion

GSAP + ScrollTrigger drive a teletype effect throughout. On load a timeline (delay 0.4) types the ASCII banner (1.4s), then the role line, then the whoami command and its output — each tween animates a character counter with ease: "none" (~0.035s/char). The block cursor blinks via @keyframes blink530 (opacity 1→0→1, 1.06s steps(1,end) infinite). Each lower section (proj/about/contact) is hidden then revealed by a ScrollTrigger at top 78% (once): it teletypes the command line, then staggers the rows in (opacity 0→1, y 6→0, 0.18s, stagger 0.12, ease steps(2)) for a stepped, terminal-print feel.

Iconography

No icon library. The only iconographic elements are the three square window-control "traffic light" dots (sage / 40%-green / 60%-amber) and the glowing block cursor. Arrow glyphs (→) and shell symbols (#, $, ~, &) are plain text characters in the monospace flow.

Do's and Don'ts

• Do keep everything monospace and keep the green/amber/sage roles strict: green = system voltage, amber = identity & links, sage = commentary.
• Do preserve the CRT overlays (scanlines + vignette + glow) — they are the identity, not decoration.
• Do keep all corners square and reveal content via teletype/stepped motion.
• Don't add rounded corners, drop shadows, or any non-mono typeface.
• Don't introduce a third hue or use bright white text; warmth comes only from amber, dimness only from sage.
• Don't smooth the animations — the stepped, char-by-char timing is the hallmark.

Known Gaps

• ASCII-banner size noted as a clamp range (text-[9px] mobile → sm:text-[13px]) rather than a single value.
• Body size is responsive (text-[13px] → sm:text-sm/14px); recorded as a range.
• Window-control dots use partial-opacity green/amber (/40, /60); described as percentages of the base voltages.
• Glow and overlay values are exact from the CSS; their perceived CRT intensity is the product of stacked scanline + vignette + text-shadow layers.