Visual Identity

Theme & Font

Example palette (Cyberdream — substitute your own):

teasr Demo Template

Terminal demos are recorded with a consistent template using whatever recorder you prefer (this portfolio uses teasr):

[output]
dir = "./showcase"
formats = [{ output_type = "gif" }, { output_type = "png" }]

[[scenes]]
type = "terminal"
name = "demo"
theme = "dracula"
cols = 100
rows = 24
frame_duration = 80

[[scenes.interactions]]
type = "type"
text = "export PS1='> '"
hidden = true

[[scenes.interactions]]
type = "key"
key = "enter"
hidden = true

[[scenes.interactions]]
type = "wait"
duration = 500
hidden = true

# Demo commands go here
[[scenes.interactions]]
type = "type"
text = "<command>"
speed = 50

[[scenes.interactions]]
type = "key"
key = "enter"

[[scenes.interactions]]
type = "wait"
duration = 2000

teasr Demo Capture

teasr automates demo capture with teasr.toml config:

• Scene types: web (Chrome DevTools), terminal (PTY→SVG→PNG), screen (xcap)
• Output formats: png, gif
• Standard output dir: showcase/ (default: ./teasr-output)
• Naming: demo.png, demo.gif, demo-<feature>.png
• CI integration: invoke your recorder via a reusable action (this portfolio uses urmzd/teasr/.github/actions/teasr@main)

Asset Directory Convention

showcase/ directory: demo.png or demo.gif (hero, 80% width), demo-<feature>.png (feature captures), example_results/ (gallery, 30% width each).

Demo Priority

teasr (automated) > manual screenshots

Branding Consistency

Your chosen theme + font applied consistently across (example: Cyberdream + MonaspiceNe):

• Terminal demos (teasr)
• GitHub Actions branding (icon + color)
• github-metrics SVGs