Dresden, DE · TYPO3 · Frontend

Eliseo Malo

Frontend developer. Currently trying to make CSS behave.

TYPO3 CMS Certified Integrator verified · my.typo3.org/u/eliseo

Years frontend: 6
Primary stack: TYPO3
Studied: Computer Science
Certified: TYPO3 Integrator

cat ./README.md

Hey, I am Eliseo, a frontend developer and certified TYPO3 integrator from Dresden.

What this site is

This is just a playground. If you found this site, we probably met at a conference or ran into each other in the TYPO3 community.

It is where I build the things I am interested in and want to get better at. In the future I also want to use it to share the experience and knowledge I have collected over the last years.

There are easter eggs. Some are obvious, some are not. Explore the page and have fun. Open the settings panel, or press ⌘K.

When I learn something worth keeping, it usually shows up here first.

Off the keyboard

Tennis and salsa. Live music and festivals. Finding new hobbies.

Things to play with

this page is the demo

3D shift

Pointer-driven rotation plus a sheen that follows the cursor. Card content sits on its own Z plane, so the parallax is real rather than a background trick.

Dynamic type

Every dimension on this site is in rem. Moving the scale rebuilds the whole composition, not only the paragraph size.

100%

Phosphor

One colour token drives the CSS, the CRT glow and the WebGL uniforms. Switching it recolours the shaders and the syntax highlighting at once.

The background

A displaced grid, a dust field and two wireframe solids sharing one colour uniform. It reads your scroll position and glitches when you change page.

1.0×

More knobs behind the sliders icon in the dock, or press ⌘K and type help.

Real state, persisted to localStorage and applied before the first paint. Break it as much as you like.

Accessibility settings — contrast, readable font, text spacing, calm mode — are behind the Accessibility button in the top right.

Font size 100%

Everything is sized from one fluid scale, so this rebuilds the whole composition — not just the paragraphs.

Spacing 1.00×

Multiplies every step of the spacing scale at once — gaps, padding, gutters. Left is dense, right is airy.

Line height 1.65

Body copy and headings both follow, headings a little tighter.

Anaglyph 3D |·········

Red and cyan channels split apart, like a misconverged tube or a pair of paper 3D glasses. The offset is relative to type size, so headings fringe hardest.

Background motion 1.0×

At 0 the render loop stops entirely — no GPU work.

CRT tube |||||||···

Glow, vignette and scanline density on one dial — they were two sliders that each did almost nothing alone.

3D shift on cards 7°

Maximum pointer rotation. 0° switches it off.

Screen

Light mode keeps the phosphor below — same hue, darker accent, so it still clears AA on paper.

Phosphor

Warm by default. Green is the classic, if you want it.

Effects

WebGL background
Boot log on reload
Spawn a pixel critter

The boot log plays on the next full reload, not on this switch.

Curious?

This panel is showing you about half of what it has. The other half is behind a switch, a cheat code and a few things you would have to click three times to find.

Or find it the intended way: ↑↑↓↓←→←→BA, or five taps on ~/display.conf up there.

Eliseo MaloEliseo Malo

#What this site is

#Off the keyboard

3D shift

Dynamic type

Phosphor

The background

Eliseo Malo

What this site is

Off the keyboard