Welcome to the source code of hyperbliss.tech, a cybernetic sanctuary crafted by Stefanie Jane. ๐ฎ๐ฉโ๐ปโก
This is home base: blog, projects, resume, and an interactive particle system called CyberScape that turns the header into a living, breathing neon dreamscape. A place for nerds, ADHD catgirls, and magical creatures.
- ๐ CyberScape: A custom Canvas2D particle system with 3D projections, wireframe shapes, glitch effects, and chromatic aberration, all reacting to your cursor
- ๐ Blog: Technical deep-dives on creative coding, terminal design, AI agent orchestration, and the demoscene
- ๐ง Projects: 24 open source projects across Rust, TypeScript, and Python
- ๐จ SilkCircuit aesthetic: Purple gradients, neon cyan accents, and plasma pink everywhere
| Layer | Tools |
|---|---|
| Framework | Next.js 16, React 19, TypeScript 6 |
| Styling | Panda CSS (zero-runtime CSS-in-JS) |
| Animation | Framer Motion, CyberScape (custom particle system) |
| Content | Markdown + gray-matter, read from content/ at build time |
| Testing | Vitest + Testing Library |
| Linting | Biome + Prettier (markdown/YAML only) |
| Deploy | Netlify |
git clone https://github.com/hyperb1iss/hyperbliss.tech.git
cd hyperbliss.tech
pnpm install
pnpm devOpen http://localhost:1337 and watch the particles dance.
| Command | What it does |
|---|---|
pnpm dev |
Start dev server |
pnpm build |
Production build (panda && next build) |
pnpm test |
Run tests |
pnpm lint |
Biome check + Prettier |
pnpm typecheck |
TypeScript type check |
pnpm analyze |
Bundle size analysis |
app/
(transition)/ Routes (home, about, blog, projects, resume)
components/ React components
cyberscape/ The particle system that makes the header glow
lib/ Content loading, metadata, utilities
content/
posts/ Blog posts (markdown)
projects/ Project pages (markdown)
pages/ Page configs (JSON)
config/ Site config
resume/ Resume (markdown)
tests/ Vitest tests
styled-system/ Panda CSS generated styles
The header isn't just a gradient. It's a custom particle system with roots in the 8-bit demoscene: gl-matrix for 3D math, Canvas2D for rendering, particles that drift and connect, wireframe shapes that rotate in space, glitch effects that fire at random, and chromatic aberration for that authentic CRT feel. The whole thing adapts to screen size and device capability, so it looks good everywhere without melting your phone.
Blog posts and project pages are markdown files in content/ with YAML
frontmatter. Page configs (home, about) are JSON. Everything is read from disk
at build time with gray-matter and rendered with react-markdown + remark-gfm. No
CMS, no database, no cloud dependency. Just files.
Cosmic Purple #a259ff Primary brand
Neon Pink #ff75d8 Accent energy
Digital Cyan #00fff0 Tech highlight
Void Black #0a0a14 Background depth
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
Created by Stefanie Jane ๐
If you find this interesting, check out my other projects or sponsor my work.