Back to Software Engineering projects
CRASH Card Builder
Hero cards for a hackerspace blog, without hand written CSS
- Role
- Designer and developer
- Tools
- HTML, CSS, JavaScript, WordPress
- Company
- CRASH Space LA
- Year
- 2026
The CRASH Space blog uses hand written HTML blocks for its hero cards and call to action cards, such as the download card for CrashSlicer. Every new card meant copying and editing a block of CSS by hand.
The Card Builder replaces that. It is a single self contained page with a control panel on the left and a live preview on the right. Pick a studio theme, layout, density, background pattern and entrance animation, then copy either the card markup alone or a full block with the whole card kit inlined, ready for a WordPress Custom HTML block.
It has no dependencies, no build step and no network calls. The export reads the stylesheet out of the live page, so the copied card can never drift from what the preview showed.
Media
Controls on the left, the live card and its markup on the right
