httpjpg.com ✦

A brutalist design portfolio monorepo

Modern web portfolio built with Next.js, Storyblok CMS, and Panda CSS. Showcasing projects, art, and development work through a unique design language.

View Live · Report Bug · Request Feature

---

✦ About

My personal portfolio and creative space built as a modern monorepo. Showcasing projects, design work, and experiments through a brutalist aesthetic with custom components and a headless CMS.

Built with Next.js, Panda CSS, and Storyblok. Type-safe, tested, and documented.

---

What Makes It Special

Brutalist Design Language Impact typography, monochrome palette, ASCII decorations (✦, ･ﾟ⋆, 🎀), and a custom cursor that adds personality without sacrificing clarity.

Modular Component System Every UI element is reusable, documented in Storybook, and built with design tokens for consistency across the entire site.

Content-Driven Powered by Storyblok CMS with live preview, making it easy to update projects and content without touching code.

---

What's Inside

apps/
  web/              → Portfolio website
  storybook/        → Component showcase
  docs/             → Documentation

packages/
  ui/               → Component library
  tokens/           → Design system
  storyblok-api/    → CMS API client
  storyblok-ui/     → CMS components
  storyblok-sync/   → CMS sync scripts
  storyblok-utils/  → CMS utilities
  storyblok-richtext/ → Rich text renderer
  analytics/        → Google Analytics
  consent/          → Cookie consent
  observability/    → Sentry & Datadog
  security/         → Arcjet protection
  env/              → Environment config
  typescript/       → TS configs
  now-playing/      → Spotify widget
  feature-flags/    → Feature toggles

A Turborepo monorepo with shared packages for UI components, design tokens, and CMS utilities.

---

Quick Start

# Install dependencies
pnpm install

# Start development
pnpm dev

# Open http://localhost:3000

Requirements: Node.js 20+, pnpm 9+

For CMS integration, add your Storyblok token to .env.local (see .env.example).

---

Development

pnpm dev              # Start all apps
pnpm build            # Build everything
pnpm test             # Run tests
pnpm lint             # Check code quality

Each package can be developed independently in watch mode.

---

Contributing

Pull requests welcome! For major changes, open an issue first.

1. Fork the repo
2. Create your branch (git checkout -b feature/cool-thing)
3. Commit changes (git commit -m 'Add cool thing')
4. Push (git push origin feature/cool-thing)
5. Open a PR

---

License

MIT License - see LICENSE for details.

---

*ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚

Domenik Töfflinger · @dmnktoe
Instagram · @icon.icon.iconn