All projects

Client work · 2024 – present

hruska.army

A hub for a Twitch channel that looks like a stream, and a pixel-art page for a community Cobblemon server.

Visit the site

Up34 ms response

The hruska.army home page: the heading “Jeden hub pro veškeré Hruškoviny”, Follow on Twitch and Discord buttons and on the right a camera with a REC label, a drawn pear and a New viewer alert
Role
Design and development
Period
2024 – present
Status
Live
Technologies
6 technologies

The site has two faces. The main hub is for the stream's viewers, so it looks like a stream: a camera with a REC label, a “new viewer” alert, a hall of fame of quotes instead of a chat and a strip of the commands heard on stream. The Cobblemon server page is for players, so it is a pixel-art game with a moon, a town on the horizon and a Poké Ball that opens as you scroll. Each part has its own typeface and look; only the base is shared.

What is on the site

  • Live channel status. Whether the channel is live, what is being played and how many followers it has comes from Twitch through decapi.me, cached for 60 seconds so the API is not flooded. The Twitch player loads only after a click.
  • A hub of the stream's mini-games and tools (boss, bingo, slots, prize wheel, leaderboard), open forms and polls, and social links.
  • Minecraft server status. PHP asks the server directly over the Server List Ping protocol and caches the result for 30 seconds, so visits do not load the server. The page has the server address to copy and three steps to join.
  • A shop and a wiki in the same pixel look. The wiki is rendered into static HTML on deployment, because links from Discord point to .html.
  • Guides and small things. A drawn pear and a pixel “Cobble assistant” tell you where to look; clicking the pear starts a rain of emotes.

Under the hood

PHP 8.2 without a framework or a build step, animations in GSAP (ScrollTrigger, SplitText, ScrambleText, DrawSVG, MotionPath). All animations go through gsap.matchMedia and respect reduced motion; without JavaScript all content is visible. Deployment by a script that backs up the overwritten files and rolls back with one command, staging first.

5 screenshots

Built with

  • PHP 8.2
  • GSAP
  • JavaScript
  • CSS
  • Server List Ping
  • Twitch

Links

Keyboard shortcuts.

Keyboard shortcuts for this site. They stay quiet while you type into a form.

This site

?
This help
g
12-column grid, components and page metrics
t
The CV in terminal style
d
Appearance: system, light, dark, Linkin Park
Ctrl P
Print the CV instead of the website
Esc
Close the dialog or the grid

The blue dot after the name can be grabbed and thrown.

Linkin Park

l setlist lp
The setlist, songs by album
papercut
The page tears like paper
numb
The site goes numb for a few seconds
faint
The page faints and comes round
meteora
A meteor shower and a direct hit on the dot after the name
fromzero emily
The site fades down to zero and is reborn, with thanks to Emily Armstrong
concert koncert
Concert: the site runs through the colours of every album
castleofglass
The page turns to glass, cracks and shatters
iridescent
Headings and dots shimmer in rainbow colours
breakingthehabit
Whatever is on screen falls apart and snaps back
intheend
End credits, like at the cinema
victim morethevictim
The site breaks up in a glitch and stays distorted (until a reload, another word or Esc)
finalmasquerade
A masquerade mask over the whole site, the camera flies through an eye
lost
Off to the 404 page

Type the words anywhere outside the form; case and spaces do not matter. With reduced motion you get a short note instead.

On a phone, five taps on the blue dot after the name open the setlist.

lausman.dev

David Laušman.

Printable résumé

This page is not meant for paper. The résumé formatted for A4 is at:

cv.lausman.dev/en