← Back to Projects

INSTVNCE

A developer's log — not a publication, a terminal

The Concept

INSTVNCE is built around one idea: every post is an instance — a deployed unit of thought. You write it, you fire it, you can terminate it. The interface reflects that. It's not a polished publication — it's an active terminal window into how I think, build, and decide.

Most dev blogs look like Medium. This one looks like a monitoring dashboard. The aesthetic is neopunk terminal: CRT scanline overlays, holographic post cards with chamfered corners, neon green on cosmic black, monospace everywhere. It's not decoration — it's a philosophy. The medium should feel like the work.

Design System

1. Neopunk Terminal Aesthetic

Built from scratch in SCSS — no component libraries, no design frameworks. Animated CRT scanlines, clip-path chamfered cards, multi-layer holographic backgrounds, and golden-ratio bottom accent lines that expand on hover. Every visual decision is a deliberate choice, not a default.

2. The Architect Voice

Posts are ACTIVE_LOG instances. The input prompt says AIM. Delete says TERMINATE. The tone is not content marketing — it's raw operational log. The blog format is designed for the things you actually think about while building: reasoning behind choices, things that broke and what they revealed, mental models, tools worth preserving.

3. Full Ownership

Self-hosted, no CMS, no platform risk. Every instance is owned. The backend is a clean Express API connected to MongoDB — posts are stored, retrieved, and terminated entirely under your control.

Technical Details

Design System Custom SCSS — CRT scanlines, chamfered clip-path cards, holographic multi-layer backgrounds, golden-ratio accent lines. No external UI libraries.
3D Elements Three.js via @react-three/fiber and @react-three/drei — metallic holographic { } braces rendered in WebGL with Float hover animation, point lighting, and environment mapping.
Post Model Each post is an "instance" — created, deployed, and terminable. Stored in MongoDB with full CRUD via Express API. Full Markdown support with syntax-highlighted code blocks via react-markdown and rehype-highlight.
Frontend React + Vite SPA with React Router v6. Multi-page routing: feed, post detail, and about. Component-driven architecture with TopNav, SyntaxModal, and Braces3D.
Typography Omnium (Adobe Fonts) — monospace-forward, chosen to reinforce the terminal aesthetic throughout.

Project Type

Personal Developer Blog — Full-Stack

Tech Stack

Frontend: React, Vite, SCSS, React Router v6
3D: Three.js, @react-three/fiber, drei
Markdown: react-markdown, rehype-highlight
Backend: Node.js, Express
Database: MongoDB
Typography: Omnium (Adobe Fonts)

Role

Solo — Full-Stack Engineer & Designer

Aesthetic

Neopunk terminal • CRT scanlines • Holographic cards • Chamfered clip-paths • Monospace-first