Section 00 · HeroStatus · Booting

Heller,Manuel.

zvoove · Full StackJogge di Balla · VPBasel-Region · CH

Awwwards-inspired craft portfoliobooting …

Section 01 · About

Full-stack developer with an artist's eye.

Code, photo, design: same craft, different surface.

01 / 04IdentityMMXXVI
The interesting stuff happens exactly in-between.

I'm Manuel, full-stack developer at zvoove Switzerland AG since November 2021. PHP and Vue at work, cameras and Photoshop after hours, and everything in between that lives where code meets image. I don't buy the split between 'technical' and 'creative'; the interesting stuff happens exactly in-between.

02 / 04Minecraft · 2014Novartis EFZ · 2017–2021zvoove · 2021—
I want to understand how all of this works under the hood.

Programming came to me through gaming. I set up my own Minecraft modpack server and started writing Mining Turtles in Lua. That was the moment I realised: I want to understand how all of this works under the hood.

My apprenticeship was IT-systems engineer (Betriebsinformatiker EFZ) at Novartis. I actually wanted to be a developer, but Novartis only offered the systems-engineer track, and you don't pass on a Novartis apprenticeship. Four years of servers, networks, support: solid foundation, but by the end it was clear: I'm applying as a developer. With zvoove since 2021, working on the main product zvoove Core, various API/interface tools, and Cypress E2E tests.

Portrait photo Manuel Heller, Full-Stack Developer Basel
St. Moritz · MMXXV
Plate Nº 03

Currently

working on
this very site
learning
React 19 · R3F 9 · WebGPU shaders
shooting
wildlife in Costa Rica & Thailand
driving
Audi S5 B8.5 (tuning project)
chasing
the zvoove ping-pong champion title
AI-generated websites all look the same today because most people hand the creativity to the AI.

AI is like a brush: a tool that doesn't make the art on its own. It's only as good as the plan and the prompt you give it, and it needs someone with taste, creativity, and a clear picture of where this is going. AI-generated websites all look the same today because most people hand the creativity to the AI.

I run a deeply set-up AI workflow: custom agents, hooks, skills, multi-stage prompts, clear convention files. I've taken two complex web apps from zero to production-ready that way (one is the Jogge di Balla platform, the other is this very site). The combination of that workflow depth and the visual sense from photo and design is what ends up making the difference between yet another generic landing page and something you actually remember.

What drives me? Curiosity, honestly.

I get excited about almost everything, and I'm convinced: in the AI era especially you have to stay on it more than ever. Stop learning and you're twelve months away from being left behind. Picking up new skills just feels like fun to me. For me that's not pressure, it's the default mode.

Off the screen

When the screen is off.

Snapshot 2026

  • Camera

    shooting · Sony α7 IV · wildlife

  • Audi S5

    driving · B8.5 · tuning project

  • Jogge di Balla

    co-running · club · vice-president

  • Snow

    carving · ski/snowboard · winter season

  • Depth

    diving · certified

  • Ping-pong

    chasing · zvoove champion title

Section 02 · Skills

What I bring to the table.

Size carries weight. No years, no labels.

Hero Skill

AI Workflow & Vibecoding

Custom agents, hooks, skills, multi-stage prompts. AI isn't the tool I use — it's the thing I use to create tools.

Daily Driver · Production

  • PHP
  • Vue
  • MariaDB · MySQL
  • HTML · CSS · web-design eye

Production · Operations

  • Yii
  • Docker
  • Vite
  • GitLab
  • Cypress
  • OpenAPI · Swagger
  • nginx · Linux server admin

Vibecoded Stack

What I build with the AI workflow, not casually without.

  • TypeScriptvibecoded
  • Reactvibecoded
  • Next.jsvibecoded
  • tRPCvibecoded
  • Drizzle ORMvibecoded
  • shadcn/uivibecoded
  • GSAPvibecoded
  • Three.js · R3F · Drei · Postprocessingvibecoded
  • Lenisvibecoded
  • next-intlvibecoded
  • zustand · Statevibecoded
  • GLSL · WebGL shadersvibecoded
  • Biome · Lint & Formatvibecoded
  • Playwright · E2E + Axe + Visualvibecoded
  • Sharp · Asset Pipelinevibecoded

In the toolbox

I know it. I don't use it daily.

  • Java
  • Python
  • PowerShell
  • Bash
  • Git
  • Tailwind CSS
  • Lightroom
  • Photoshop
  • DaVinci Resolve

Craft · Eye

  • Photography
  • Video editing
  • Graphic design
  • Live Web Fluid Simulations
  • Shader experiments

Section 03 · Work

Two projects. Both vibecoded.

No portfolio gallery, no stack buffet. Two serious web apps from zero to live.

From club chaos to a custom platform.

Joggediballa Homepage Mobile
Joggediballa · Mobile · Live
All clubs fight the same mess: Excel sheets, static websites, file/info sharing, isolated tools. For Jogge di Balla I cleaned that up: a custom-built platform that covers everything from member management to a Twitch overlay. Vibecoded, self-hosted, over-engineered.

What is Jogge di Balla?

Founded
2022.08.05 in Brislach
Active members
9
Sponsors managed
68+
Events / year
4–8
Instagram reach
1067+ followers · ~100k views / 30 days

Idea during Covid: four friends, nothing was happening, so we threw oddball events for ourselves. That turned into an actual club with public event classics like Schlag den Kassier, Silvester 2.0, Harassenlauf, and the popular Lotto-Party.

My role: vice-president, web developer, club photographer, cameraman, social-media manager. Because I had the skill set and I'm enough of a perfectionist to give the club not just a face but a custom, self-hosted web app of its own.

Stack note

  • React 19 · Vite·Frontend & Build
  • TypeScript·Language (fullstack)
  • tRPC·API layer
  • Drizzle ORM · MySQL·Database
  • Tailwind · shadcn/ui·Styling & components
Admin dashboard with permissions card and member list
Admin Dashboard · Daily Driver

Highlight 01 · Technical depth

The admin dashboard

Invisible to visitors, the heart of the site. Every thread comes together here.

  • Dynamic permission system

    Granular rights (edit_events, manage_sponsors, edit_shotcounter, …) assignable per card per role, no code changes needed. Backend checks every tRPC call through a custom requirePermission() middleware.

  • Attendance tracking with statistics

    Per-event attendance lists, data flows straight into a graphical view. Helps with overview and a bit of internal competition.

  • Sponsor lifecycle

    Sponsors managed inside the system. Status (active / expired / new) computed automatically, with finance and address management for our Kassier.

Twitch overlay during stream with live score and club design
Schlag-den-Kassier · Live stream

Highlight 02 · Most visible feature

Schlag den Kassier live overlay

Custom Twitch overlay integrated directly into the platform. Instead of expensive external services: just built it myself.

  • Hidden URL as browser source

    OBS embeds /overlay/sdk, a control panel at /overlay/sdk/control drives the score live.

  • Realtime without page reloads

    tRPC polling syncs the overlay in the stream instantly. Golden shimmer effect for winners, automatic 'mathematically eliminated' calculation.

  • Reach: honestly small

    ~15–20 concurrent viewers, ~100 total. The tooling is solidly built anyway, and reusable.

Public layer 1
Statistics · Members & seasons
Public layer 2
Sponsor management · CRM-light
Public layer 3
Sign-up form · mobile

Lessons Learned

Manual testing cost me a lot of time back then. Today I'd set the project up from day one with automated tests and AI tooling, kill bugs at the source, and put the focus entirely on shipping.

Live in the wildjoggediballa.chopens in a new tab

Section 05 · Photography

Section 05 · Photography

Through the Lens.

Wildlife and cars are my two worlds. The first I chase solo through the jungles of Costa Rica or Thailand, the second usually find me closer to home. What connects them: patience, light, and that one moment that justifies the whole day.

SONY α7 IV · 24–600mm · since 2023

Pelican in flight over the Pacific, Costa Rica
MANUEL ANTONIO · 2024 · WILDLIFE01 / 5

Standstill at 30 km/h.

Sometimes the most interesting frame isn't the one with the highest shutter speed. It's the one with the light that only sits there for five minutes.

Koenigsegg hypercar under a hotel arch at dusk
ST. MORITZ · 2025 · AUTO02 / 5
Freighters under a dramatic cloud formation on the horizon
COSTA RICA · 2024 · SEASCAPE03 / 5
Lone tree at the edge of a lake, reflection in the water, Costa Rica
LAKE ARENAL · 2024 · LANDSCAPE04 / 5

Patience as composition.

Lake Arenal: an hour and a half waiting for the wind to drop and finally smooth the water. The reflection makes the picture, not the tree.

Crocodile with a butterfly on its snout, Costa Rica
TÁRCOLES · 2024 · WILDLIFE05 / 5

Section 06 · Playground

Section 06 · Playground

Where the fluid sim gets to play.

Two shader experiments, both anchored to the ink-and-print narrative. Pure craft demonstration, no product context.

Section 07 · Contact

Let's talk.

Request, question, idea, or just a hello, the inbox is open.

A few words upfront

I usually reply within one or two days. For recruiters and club-world enquiries: please mention briefly where you're coming from, it saves the second email.

Direct channels

GitHub is only semi-active, not a 100-repo polished-facade account.

All fields required