https://github.com/hyperb1iss/hyperbliss.tech

Nerd City
https://github.com/hyperb1iss/hyperbliss.tech

creative-coding framer-motion frontend nextjs nextjs16 pandacss portfolio portfolio-website react seo typescript web

Last synced: 3 months ago
JSON representation

Nerd City

• Host: GitHub
• URL: https://github.com/hyperb1iss/hyperbliss.tech
• Owner: hyperb1iss
• License: other
• Created: 2024-09-22T22:56:00.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2026-04-05T04:49:49.000Z (3 months ago)
• Last Synced: 2026-04-05T06:29:05.654Z (3 months ago)
• Topics: creative-coding, framer-motion, frontend, nextjs, nextjs16, pandacss, portfolio, portfolio-website, react, seo, typescript, web
• Language: TypeScript
• Homepage: https://hyperbliss.tech
• Size: 12.1 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🌠 𝓱 𝔂 𝓹 𝓮 𝓻 𝓫 𝟏 𝓲 𝓼 𝓼 ✨ ⎊ ⨳ ✵ ⊹



[![Netlify](https://img.shields.io/badge/NETLIFY-DEPLOYED-8a2be2?style=for-the-badge&logo=netlify&logoColor=white)](https://app.netlify.com/sites/hyperb1iss/deploys)

[![TypeScript](https://img.shields.io/badge/TYPESCRIPT-6.0-a259ff?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

[![Next.js](https://img.shields.io/badge/NEXT.JS-16.2-b967ff?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/)

[![React](https://img.shields.io/badge/REACT-19.2-ff75d8?style=for-the-badge&logo=react&logoColor=white)](https://react.dev/)

[![Panda CSS](https://img.shields.io/badge/PANDA-CSS-ff57e8?style=for-the-badge&logo=css3&logoColor=white)](https://panda-css.com/)

[![License](https://img.shields.io/badge/LICENSE-CC_BY--NC--SA-00fff0?style=for-the-badge)](http://creativecommons.org/licenses/by-nc-sa/4.0/)



Welcome to the source code of [hyperbliss.tech](https://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.

## 🌌 What's Inside

- 🌠 **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

## 🛠️ Stack

| 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                                                    |

## 🚀 Quick Start

```bash

git clone https://github.com/hyperb1iss/hyperbliss.tech.git

cd hyperbliss.tech

pnpm install

pnpm dev

```

Open [http://localhost:3000](http://localhost:3000) and watch the particles

dance.

## 🧪 Scripts

| 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                     |

## 🏗️ Project Structure

```

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

```

## 🌠 CyberScape

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.

## 📝 Content

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.

## 🎨 Color Palette

```

Cosmic Purple   #a259ff    Primary brand

Neon Pink       #ff75d8    Accent energy

Digital Cyan    #00fff0    Tech highlight

Void Black      #0a0a14    Background depth

```

## 📜 License

[Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-nc-sa/4.0/)

---



Created by [Stefanie Jane 🌠](https://hyperbliss.tech)

If you find this interesting,

[check out my other projects](https://github.com/hyperb1iss) or

[sponsor my work](https://github.com/sponsors/hyperb1iss).