ENDA

Creative codingdone visualfor real
business impact

// udvalgt arbejde

Fra drøm til handling

Produkter taget fra idé til noget folk betaler for — bygget, sendt live og i drift.

  1. Klokly — enkel tidsregistrering, på forsiden af din marketinghjemmeside / Landing page
    Billedet viser noget fra Kloklys.app online siden
    Klokly logo .svg file

    Registrér tid. Ikke mennesker.

    Case 01 · Live

    Klokly — tidsregistrering gentænkt gennem enkelhed

    En enkel tidsregistreringsapp, der gør det naturligt at holde styr på, hvor tiden bliver brugt. I stedet for tunge projektstyringsværktøjer gør Klokly én ting: Giver dig en timeroplevelse, der føles hurtig, enkel og nærværende.

    • React / Next.js
    • TypeScript
    • Realtime Sync
    • Playwright
    • Supabase (database + auth)
    • User Management
    • Stripe payment
    • Marketing landing page

    Start og stop tiden på dine opgaver, se status live, og del overblikket med resten af teamet i realtid. Bygget på moderne webteknologi med et roligt, redaktionelt design. Grundlægger af www.klokly.app, Lars Sohl

  2. larssohl.dk wordpress forsiden lavet DIY style med vibe coding
    web forsiden af www.larssohl.dk
    web forsiden af www.larssohl.dk
    web forsiden af www.larssohl.dk
    web forsiden af www.larssohl.dk
    web forsiden af www.larssohl.dk
    web forsiden af www.larssohl.dk
    web forsiden af www.larssohl.dk

    Case 02 · Live

    WordPress bygget fra bunden

    Jeg har selv designet og udviklet WordPress-temaet til larssohl.dk fra bunden. Siden fungerer både som portfolio, digital legeplads og teknisk showcase og er bygget langt ud over et traditionelt WordPress-site.

    • Custom animations & transitions
    • Custom WordPress plugins
    • Custom WordPress Theme
    • Custom WordPress Backend
    • Dynamic content management
    • Backend-controlled slideshow
    • Backend-controlled text & CTA content
    • Dynamic gallery
    • Interactive UI components
    • Custom contact form
    • Embedded JavaScript game
    • Responsive
    • PWA development

    Indhold og funktioner styres fra en specialtilpasset backend, bl.a. slideshow, tekster, CTA’er, gallerier og arkiver. Sitet indeholder desuden interaktive elementer, skjulte funktioner, et lille indbygget spil, dynamisk indhold og forskellige eksperimenter med AI, 3D, animation og webteknologi. Projektet er et eksempel på, hvordan WordPress kan bruges som et fleksibelt framework frem for blot et CMS med et standardtema. Enen mand på projektet: Lars Sohl

  3. Monster builder front page. Big slime splash

    Case 03 · Live

    Monster Builder

    Monster Builder er et interaktivt browserbaseret eksperiment, hvor brugeren gennem en futuristisk “biometric reading” bliver ført ind i processen med at skabe et personligt monster. Interfacet bruger et laboratorie-/sci-fi-inspireret visuelt sprog med begreber som Landmarks, Biometric Reading og DNA Lock, hvilket får oplevelsen til at føles som en blanding af monster-generator, biometrisk scanning og digitalt eksperiment.

    • CSS3
    • JavaScript
    • Interaktiv state-baseret brugerflade
    • Dynamisk manipulation
    • Biometrisk
    • www.vercel.com

    Spillet er designet som en kort, direkte weboplevelse, hvor brugerens input bliver en del af selve fiktionen frem for blot at være traditionel UI-navigation.

  4. Word Drop landingpage — PWA til WordPress
    Word drop pwa screen - login and UI screen

    Case 04 · Live

    Word Drop — dramatiske tekstoverlays, sendt direkte fra din telefon

    Et WordPress-plugin og en tilhørende PWA, der lader dig sende store, animerede tekstoverlays live på din hjemmeside — direkte fra telefonens hjemmeskærm, uden behov for en computer

    • WordPress Plugin
    • PWA
    • PIN-login
    • 5 Animation Effects
    • 5 Display Fonts
    • Real-time Overlay
    • No-code Interface

    Ingen login til WordPress og ingen navigation rundt i browseren. Du åbner appen fra hjemmeskærmen, skriver et ord eller en kort sætning, vælger en skrifttype og en af fem effekter (fade-in, gradient-flow, pixel-assemble, glitch eller draw-stroke) og trykker på “Post”. Teksten vises øjeblikkeligt på den live hjemmeside — enten med en fade-out efter 4–6 sekunder eller indtil den fjernes. Udviklet i samarbejde med Claude (Anthropic). Koncept: Lars Sohl

  5. Bane Status PWA landing page
    to mobiltelefoner med app interfacet
    Screenshot af amager motocross hjemmeside, bane leder feltet vises for stoerret.webp
    Screenshot af amager motocross hjemmeside

    Case 05 · Live

    Bane Status — status på banen i realtid, direkte fra mobilen

    Et WordPress-plugin og en tilhørende PWA, udviklet så motocrossbanens ansvarlige kan ændre banens status — åben eller lukket — fra mobilen på få sekunder. Ændringen vises live på klubbens hjemmeside.

    • WordPress Plugin
    • PWA PIN-login
    • Glassmorphism
    • UI Live-widget (30 sek. polling)
    • Service Worker
    • Offline Shell
    • WordPress Admin Integration

    Ingen login til WordPress og ingen computer nødvendig. En baneansvarlig åbner appen fra sin hjemmeskærm, indtaster en 4-cifret PIN-kode og sætter banen til åben eller lukket med mulighed for at tilføje en kort besked. Widget'en på hjemmesiden opdateres live uden genindlæsning af siden. Sikkerheden håndteres med signerede sessionstokens og bcrypt-hash'ede PIN-koder. Udviklet til Amager MX (www.amck.dk ny hjemmeside påvej), en motocrossklub på Amager Fælled. Idé og udvikling: Lars Sohl

  6. Neon Breach online 80th arcade game

    Case 06 · Live

    Neon Breach — Synthwave Invasion. Mobil spil

    Et synthwave-inspireret arcade-shooter bygget fra bunden til browseren. Et lille, hurtigt og kompromisløst spil med neon, fjender, bosser og en god portion 80'er-arcade-stemning — designet til at fungere både på computer og mobil.

    • HTML / CSS / JavaScript
    • Canvas API
    • JavaScript Game Loop
    • Web Audio
    • Responsive input
    • Claude Code

    Neon Breach er bygget direkte til browseren med HTML, CSS og JavaScript som grundlag for både spillet og brugerfladen. Selve spilgrafikken og animationerne renderes løbende med Canvas API, mens en JavaScript-baseret game loop driver spillets real-time mekanikker som bevægelse, fjender, projektiler, collision detection og scoring. Lydsiden er håndteret med Web Audio API for at give feedback og understøtte den klassiske arcade-fornemmelse. Kontrollerne er responsive og tilpasset forskellige platforme, med keyboard controls på desktop og touch- og tilt-baseret styring på mobile enheder. Spillet har desuden en backend til håndtering af high scores, som gemmes og vises i en Hall of Fame, så der opstår et ekstra konkurrenceelement og en grund til at vende tilbage. Udviklingen er gennemført med Claude Code som en del af en AI-assisteret udviklingsproces, hvor AI bruges som en aktiv del af både programmering og iteration.

  7. 80th Acade cosmic retro tunnel game by Lars Sohl, The UI of gameplay
    80th Acade cosmic retro tunnel game by Lars Sohl, how to play the game instruktions
    80th Acade cosmic retro tunnel game by Lars Sohl, The UI of gameplay, You Did It

    Case 07 · Live

    80' Acade Game - Cosmic Tunnel v3.1.0

    Et lille mobiloptimeret browser-spil bygget fra bunden med fokus på gameplay, stemning og en oplevelse, der fungerer lige så godt på en telefon som på en computer.

    • HTML / CSS / JavaScript
    • Phaser
    • Three.js
    • Canvas API
    • Vite
    • Webpack
    • Parcel
    • Node.js
    • Vercel

    ** Idéen Nogle gange er den bedste måde at lære ny teknologi på ganske enkelt at bygge noget, man selv har lyst til at bruge. Cosmic Tunnel startede som netop sådan en idé: Et lille spil med et futuristisk univers, hvor spilleren skal finde vej gennem en kosmisk tunnel og forsøge at komme hele vejen igennem. Det skulle ikke være endnu et endless runner-spil, der bare fortsætter for evigt. Der skulle være en begyndelse, en udfordring og et mål. Det er den slags projekt, KodeKid godt kan lide: ikke nødvendigvis fordi verden har brug for endnu et spil, men fordi det er en god måde at undersøge, hvad der er muligt med moderne webteknologi. Spil gratis [Cosmic Tunnel v3.1.0](game.larssohl.dk)

  8. image showning a text Automatiq the robot
    image showning a text Automatiq app has 6 triggers
    Automatiq app logo of a robot

    Automatiq

    Case 08 · Live

    Automatiq — Intelligent SMS automatisering

    Seks måder at sende en SMS på — en tidsplan, et tryk, en indgående besked, et ubesvaret opkald, ankomst til et sted eller tilslutning af en oplader — alt sammen samlet gennem én enkelt sendesti på en telefon uden nogen konto bagved og uden en server at kontakte. Bygget til mig selv, åbent og transparent, fordi alt i Play Store ville have et abonnement for at gøre det dårligere.

    • Kotlin
    • Jetpack Compose
    • Material 3
    • Hilt
    • Room
    • WorkManager
    • Gemini API

    ##Seks udløsere: - Planlagt — fast tidspunkt, valgte ugedage, hver N. uge, valgfri udløbsdato - Manuel — tryk på makroen i listen eller brug en widget på hjemmeskærmen - Autosvar — en indgående SMS matcher en valgfri afsender og/eller et nøgleord - Lokation — når du ankommer til eller forlader et geofenced område - Ubesvaret opkald — et opkald ringer ud eller bliver afvist - Enhedsstatus — opladeren, en valgt Bluetooth-enhed eller et Wi-Fi-netværk forbindes eller afbrydes **Rolle: Personligt projekt · Design og udvikling · Open source, sideloaded · 2026**

  9. Screenshot of UI of the web app order flow site. Created by Lars Sohl

    Case 09 · Live

    Fra e-mailkaos til en skræddersyet label-produktionsapp

    Labelproduktion lyder simpelt. Lige indtil nogen skal bruge et tilbud på en ny label, og informationen kommer i fem forskellige e-mails, to PDF-filer, en håndfuld vedhæftninger og en besked med teksten: “Jeg tror, det hele burde være der nu.”

    • Next.js 14 / React
    • Supabase PostgreSQL
    • Supabase Storage
    • Resend transactional email
    • Vercel
    • Custom Admin Dashboard
    • Customer Accounts & Order History
    • Danish / English

    Kunderne kan oprette en komplet produktionsbrief, vælge brand og tekniske specifikationer, uploade artwork og produktionsfiler og gennemgå det hele, inden ordren sendes. Systemet sender automatisk en bekræftelse og giver kunden et kort tidsvindue til at redigere ordren, inden den bliver videresendt til [Brandsurface](https://brandsurface.dk/).

  10. UI of Mr. Blender Render interface. How I built a private render farm for Blender using PCs, Macs and Tauri 2.0

    Case 10 · Live

    Mr. Blender Render

    ## En privat renderfarm til Blender 3D En desktopapplikation, jeg har bygget for at omdanne de computere, der allerede findes i hjemmet eller studiet, til en privat Blender-renderfarm.

    • Tauri 2.0
    • Windows Applikation
    • MacOS Applikation
    • GPU rendering
    • Node Render

    I stedet for at rendere en animation på én enkelt maskine fordeler Mr. Blender Render frames på tværs af flere PC'er og Macs, så deres GPU'er kan arbejde på det samme renderjob samtidig. Én maskine fungerer som hovedcontroller. De andre computere kører lette Nodes, som henter ledige frames, renderer dem og rapporterer deres status tilbage til hovedapplikationen. Resultatet er en enkel privat renderfarm uden behov for en cloud-baseret renderingstjeneste. # Gratis download kommer snart

  11. Auto work folder maker
    Automatic creation of workbooks in the structure you want—the image shows the UI and ease of use
    Automatic creation of workbooks in the structure you want—the image shows the UI and ease of use

    Case 11 · Live

    Et enkelt klik, og mappestrukturen er allerede på plads

    En Chrome-udvidelse, der opretter den komplette jobmappe med de korrekte navne, så snart et nyt job starter — så mappestrukturen ikke længere er noget, man skal huske på.

    • Chrome Extension
    • Custom Naming
    • Templates
    • Local & Network
    • Drive Support

    Struktureret, navngivet og klar — i det øjeblik et nyt projekt starter. Ingen skabelon, man skal huske, ingen mappe oprettet på den »hurtige« måde, der viser sig at være forkert seks måneder senere. **SAMME STRUKTUR, HVER ENESTE GANG** **Kontakt mig gerne, hvis du gerne vil have Chrome-udvidelsen.**