Section 00 · HeroStatus · Booting

Heller,Manuel.

Jogge di Balla · VPBasel · CHCV ansehen

Developer · Photographer · Visual Tinkerer

Section 01 · About

Full-Stack Developer, der auch gern hinter der Kamera steht.

Tagsüber PHP und Vue, abends Lightroom und Shader.

01 / 04IdentityMMXXVI
Kamera, Photoshop, Shader: alles, was zwischen Code und Bild Spass macht.

Ich bin Manuel aus der Region Basel. Im Job tief drin in PHP und Vue, daneben mit Kamera, Photoshop und allem, was zwischen Code und Bild Spass macht.

Seit November 2021 arbeite ich bei zvoove Switzerland AG an Fachanwendungen für Personaldienstleister. Ich gestalte und entwickle Vue-Oberflächen für komplexe Abläufe, baue PHP-Endpunkte und betreue Schnittstellen und Datenabgleiche.

Daneben verantworte ich eine Cypress-Suite mit rund 30 umfangreichen Release-Tests: von den Tests selbst über die Ausführung bis zur Fehleranalyse. Die Migration zu Playwright läuft.

02 / 04Minecraft · 2014Novartis EFZ · 2016–2020zvoove · 2021–
Ich will verstehen, wie das alles unter der Haube läuft.

Programmieren kam bei mir über Gaming. Ich habe einen eigenen Minecraft-Modpack-Server aufgesetzt und Mining-Turtles in Lua programmiert. Da wollte ich wissen, wie das alles unter der Haube läuft.

Von 2016 bis 2020 habe ich bei Novartis die Lehre als Betriebsinformatiker EFZ gemacht. Server, Netzwerke und Support haben mir eine breite Grundlage gegeben. Nach dem Zivildienst bin ich in die Anwendungsentwicklung gewechselt.

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

Currently

baue
an dieser Seite und joggediballa.ch
experimentiere mit
Codex · Claude Code
fotografiere
Wildlife und Autos
fahre
Audi S5 B8.5 (Tuning-Projekt)
jage
den zvoove Ping-Pong-Champion-Titel
Die AI tippt schneller. Das letzte Wort bleibt bei mir.

Ich arbeite viel mit Codex und Claude Code: eigene Skills, Agents, MCP-Anbindungen. Die Idee, der Geschmack und das letzte Wort bleiben bei mir, die AI tippt einfach schneller. Was rauskommt, wird angeschaut, getestet und oft nochmal umgebaut.

Die Vereinsplattform und dieses Portfolio sind so entstanden. React und TypeScript kenne ich aus diesen Projekten, Design, Umfang und Betrieb liegen bei mir.

Neugier. Und ein Verein, der das Ergebnis wirklich benutzt.

Neugier. Ich probiere gern neue Tools aus, feile an kleinen visuellen Details und will wissen, wie etwas funktioniert. Wenn der Verein das Ergebnis dann wirklich benutzt, umso besser.

Off the screen

Wenn der Bildschirm aus ist.

Snapshot 2026

  • Camera

    shooting · Sony α7 IV · Wildlife

  • Audi S5

    driving · B8.5 · Tuning-Projekt

  • Jogge di Balla

    co-running · Verein · Vizepräsident

  • Snow

    carving · Ski/Snowboard · Wintersaison

  • Dive

    diving · certified

  • Ping-Pong

    chasing · zvoove-Champion-Titel

Section 02 · Skills

Meine Schwerpunkte.

Was ich im Job mache, und was ich nebenbei gelernt habe.

Main Stack

PHP · Vue · SQL

UIs für komplexe Fachprozesse, APIs dahinter, und Release-Tests, damit nichts kaputtgeht.

Daily Driver

  • PHP · Yii
  • Vue.js
  • MariaDB · MySQL
  • JavaScript · HTML · CSS

APIs & Testing

  • REST · OpenAPI
  • Cypress
  • Playwright
  • SQL
  • Code-Reviews

Side Projects

Gelernt beim Bauen eigener Projekte. Läuft in Produktion, ist aber nicht mein Job-Stack.

  • TypeScript · ReactAI-assisted
  • Next.jsAI-assisted
  • tRPC · Drizzle ORMAI-assisted
  • WebGL · GLSLAI-assisted
  • GSAP · Three.jsAI-assisted

Tooling & Ops

Codex und Claude Code mit eigenen Skills, Agents und MCP-Anbindungen; Linux und nginx für selbst betriebene Projekte.

  • Git · GitLab
  • Docker
  • Linux · nginx
  • Codex · Claude Code
  • Skills · Agents · MCP

Design & Media

  • Fotografie
  • Webdesign
  • Videoschnitt
  • Lightroom · Photoshop
  • DaVinci Resolve

Section 03 · Work

Zwei Projekte, beide live.

Diese Seite und die Plattform unseres Vereins. Konzept, Design, Code und Hosting: alles von mir, Claude Code im Terminal.

Die Hero-Section von manuelheller.dev in fünf Streifen, je einer pro Theme

manuelheller.dev · hero

MMXXVIKonzept · Design · Entwicklung · Hosting

Diese Seite(Toon Fluid)

Aufgabe
Ein Portfolio, das vorführt, was ich kann. Live, im Browser.
Mein Beitrag
Alles. Inklusive Shader-Debugging um ein Uhr nachts.
Ergebnis
Diese Seite. Wenn sie ruckelt, sag mir, auf welchem Gerät.

Die Tinte wird interaktiv auf der GPU berechnet. Qualitätsstufen passen den Rechenaufwand an das Gerät an.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • GSAP · ScrollTrigger
  • Lenis
  • React Three Fiber
  • WebGL · GLSL
  • next-intl
  • Zustand
Du bist schon hier
Sourceöffnet in neuem Tab

Weitere Projekte auf GitHub

Tools, Research und mein Claude-Code-Setup.

Shot-Counter

Party-Scoreboard · Desktop-App

Live-Scoreboard für Teams mit QR-Join über das lokale Netzwerk und synchronisierten Spielständen. Als Electron-App für Windows und Linux umgesetzt.

  • Vue.js
  • Express
  • SQLite
  • SSE
  • Electron
Repo & Download

Fly Connectome Sim

Connectome Sim · WIP

Ich simuliere das veröffentlichte Connectome einer Fruchtfliege. Python drumherum, C++ im Rechenkern, jeder Lauf reproduzierbar geloggt.

  • Python
  • C++
  • MaleCNS
Repo & Docs

Mercurius

Quant Research · Archived

Python-Forschungsprojekt für Handelsstrategien mit reproduzierbaren Backtests und festen Prüfkriterien. Drei Hypothesen verworfen, ohne echtes Kapital einzusetzen.

  • Python
  • Alpaca
  • SQLite
  • Backtesting
Repo & Docs

claude-code-kit

Skills & Tooling für Claude Code

Meine Skills, Agents und Workflows für Claude Code, inklusive dem Projekt-Review-Workflow. Wird laufend gepflegt.

  • Claude Code
  • Skills
  • Agents
  • MCP
Repo & Docs

Aus einer Vereinsidee wurde eine Plattform.

Joggediballa-Homepage in der mobilen Ansicht
Joggediballa · Mobile · Live
Für Jogge di Balla habe ich über mehrere Monate eine eigene Vereins- und Eventplattform aufgebaut. Sie verbindet den Webauftritt mit interner Verwaltung und Werkzeugen für Veranstaltungen. Ich entwickle sie weiter und betreibe sie selbst.

Mein Beitrag

Verein
Jogge di Balla
Meine Rolle
Mitgründer · Vizepräsident
Entwicklung
Konzept bis Betrieb
Nutzung
Vereinsalltag und Events

Die Idee entstand zur Coronazeit: vier Freunde, wenig los, also haben wir eigene ausgefallene Events gemacht. Daraus wurde im August 2022 Jogge di Balla, mit Veranstaltungen wie Schlag den Kassier, Silvester 2.0, Harassenlauf und Lotto-Party.

Als Mitgründer und Vizepräsident kümmere ich mich um Events, Fotos und Videos. Und weil ich gern selbst baue, bekam der Verein seine eigene Plattform: von Gestaltung und Entwicklung bis zum Betrieb liegt sie bei mir. Mitglieder und Gönner verwalten, Anwesenheiten auswerten, Bestellungen an Küche und Bar schicken: Das läuft heute alles darüber.

Stack Notes

  • React · Vite·Frontend & Build
  • TypeScript·Sprache (Fullstack)
  • tRPC·API-Layer
  • Drizzle ORM · MySQL·Datenbank
  • Tailwind CSS · shadcn/ui·Styling & Komponenten
Admin-Dashboard mit Berechtigungs-Card und Mitgliederliste
Admin-Dashboard · Daily Driver

Highlight 01 · Verwaltung und Events

Verwaltung, Kasse und Stream in einer App

Mitgliederverwaltung und Eventbetrieb laufen über dieselbe Plattform, mit denselben Rollen.

  • Berechtigungen und Mitglieder

    Dynamische Rollenrechte, Gönnermitgliedschaften mit Zahlungsstatus und Anwesenheitsauswertungen bilden den Vereinsalltag ab.

  • Bestell- und Kassensystem

    Preise kommen vom Server, nie vom Client. Bestellungen frieren ihre Artikeldaten ein, damit eine Preisänderung keine alte Rechnung verändert.

  • Medien und Veranstaltungen

    Bildverarbeitung und eine moderierte Live-Diashow ergänzen Eventverwaltung, Statistiken und Streaming-Werkzeuge.

Twitch-Overlay im Stream mit Live-Score und Vereinsdesign
Schlag-den-Kassier · Live-Stream

Highlight 02 · Live-Veranstaltung

«Schlag den Kassier» im Stream

Ein Beispiel aus den Eventwerkzeugen: Das Overlay bringt Spielstände und Vereinsdesign in den Live-Stream.

  • Control Panel im Browser

    Ein separates Control-Panel steuert die Anzeige, die als Browser-Quelle in OBS eingebunden wird.

  • Synchronisierte Spielstände

    Das Overlay ruft die aktuellen Spielstände regelmässig ab und aktualisiert die Anzeige ohne Neuladen.

  • Rechnen fürs Publikum

    Siegeranzeige und die Berechnung, ab wann ein Vorsprung uneinholbar ist, damit die Moderation nicht im Kopf rechnen muss.

Statistik · Mitglieder & Saisons
Statistik · Mitglieder & Saisons
Gönnerverwaltung · CRM-Light
Gönnerverwaltung · CRM-Light
Anmeldeformular · Mobile
Anmeldeformular · Mobile

Was ich gelernt habe

Ein echter Verein ist der beste QA-Tester: jedes Event findet einen neuen Edge Case. Deshalb gibt es automatisierte Tests. Den Root-Server dahinter richte ich selbst ein und betreibe ihn auch.

Live im Einsatzjoggediballa.chöffnet in neuem Tab

Section 05 · Photography

Section 05 · Photography

Tiere und Autos. Beide halten nicht still.

Für die Tiere fliege ich allein nach Costa Rica oder Thailand und warte, die Autos stehen meistens näher. Beides braucht Geduld und das richtige Licht. Seit 2023 mit der Sony α7 IV.

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

Pelikan im Anflug über dem Pazifik, Costa Rica
MANUEL ANTONIO · 2024 · WILDLIFE01 / 5

Stillstand bei 30 km/h.

Die Verschlusszeit war egal. Das Licht unter dem Bogen gab es fünf Minuten lang, dann war es weg.

Koenigsegg-Hypercar unter einem Hotel-Bogen in der Abenddämmerung
ST. MORITZ · 2025 · AUTO02 / 5
Frachtschiffe vor einer dramatischen Wolkenformation am Horizont
COSTA RICA · 2024 · SEASCAPE03 / 5
Einsamer Baum am Ufer eines Sees, Spiegelung im Wasser, Costa Rica
LAKE ARENAL · 2024 · LANDSCAPE04 / 5

Anderthalb Stunden Windstille.

Lake Arenal: so lange gewartet, bis der Wind das Wasser endlich glatt liess. Der Baum ist nur der Vorwand für die Spiegelung.

Krokodil mit einem Schmetterling auf der Schnauze, Costa Rica
TÁRCOLES · 2024 · WILDLIFE05 / 5
Mehr Fotografiemanuelheller.myportfolio.com

Section 06 · Playground

Section 06 · Playground

Wo der Fluid-Sim spielen darf.

Zwei Shader-Experimente mit derselben Tinte wie im Hero. Hier darf man draufklicken, bis es ruckelt.

01 · INK DROP STUDIO

Ink Drop Studio

Leeres Blatt. Klick setzt Tinte in der aktuellen Spot-Farbe, die Slider drehen an der Physik, BOMB macht Chaos, FREEZE hält alles an.

02 · TYPE-AS-FLUID

Type-as-Fluid

Tipp ein Wort. Es wird gedruckt, dann von der Tinte verschluckt. Sanft.

Section 07 · Contact

Schreib mir.

Idee, Frage, Fototipp oder einfach Hallo: die Inbox ist offen.

Kurz vorab

Ich suche eine Vollzeitstelle in der Region Basel, im Aargau oder in Zürich. Am liebsten dort, wo Entwicklung und Design zusammen gedacht werden und Claude Code im Terminal normal ist.

Channels

E-Mail
manuelheller [at] bluewin.ch
GitHub
github.com/manu-brighter
LinkedIn
linkedin.com/in/manuel-heller
Fotos
manuelheller.myportfolio.com
CV
manuelheller.dev/cv

Alle Felder erforderlich

Landet als E-Mail bei mir und wird nach meiner Antwort gelöscht · Datenschutz