Play

My portfolio turned into a pixel-art game: my house in a street of Tenerife, seen diagonally in the style of Habbo, where my character walks between the garden, the living room, the kitchen, the study, the bedroom, a Japanese-style bathroom and the garage. Every object with a violet ball bouncing over it opens a piece of the real content of the portfolio.

Goal. To make getting to know me a game for those who would rather explore than read a list, without leaving anyone out: the house is also a list of rooms and objects, it can be read whole without JavaScript and with a screen reader, and its content is always the same as the main site's.

What it does.

• 17 objects open the real content: the portrait introduces me, the bookshelf holds a book for every post with its title on the spine, the computer keeps the projects and the terminal running on its screen, the frames tell my career, the calendar my year on GitHub, the fridge what I like as magnets and the mailbox the recommendations. When a section is empty, its object disappears.
• A house that is lived in, full of my things: the 3D printer, nods without logos to my favourite video games, the map of the Canary Islands or a coffee maker that makes me a cup. Almost everything answers with a line, which I can change from the backoffice, switches on or can be used: I sit on the chair or the sofa, lie on the bed or bathe in the ofuro. A dog and seven cats wander about, sleep, greet each other, come up to me and ask to be petted.
• Seven moments of the day on the visitor's own clock: small hours, dawn, day, afternoon, sunset, dusk and night, worked out from the sun of Tenerife on their date. At dusk the windows, the street lamps and the screens light up.
• Tenerife all around: a Canarian front of whitewash and stone, a dragon tree, a red tajinaste, the Tenerife lizard in the sun and, across the lane, a banana plantation.
• The garage keeps my vehicles. I get into the car and the view from the driver's seat opens: the dashboard and, with the garage remote, the road with the Teide behind it. I also ride the motorcycle and the bicycle.
• Move with WASD or the arrow keys (AZERTY keyboards too), or with a click or a tap that finds the way; on phones and tablets there is a pad under the left thumb and a large E under the right one. Walls and furniture that hide the character turn nearly transparent, so he is always in sight.
• A wardrobe changes how the character looks, with a mirror that shows my pixel portrait, and a gear changes the language, hides every wall or turns off the one-key shortcuts. All of it is remembered in the browser only.

SEO. The same rules as the terminal: one page per language with its canonical, hreflang and structured data pointing to the person of the main portfolio. The panels come before the drawing in the HTML, so search engines read them whole.

Accessibility. You do not need to walk: every object is a link to its panel, which opens without JavaScript too, and the house can be gone through with the Tab key like a list. Panels are modal dialogs that give focus back when they close, a live region announces the room and the object nearby, windows are named switches, every button is at least 44 px and nothing requires dragging. The animals and everything that moves can be paused, and with reduced motion nobody walks.

Performance. It uses no game engine and no images: the server draws the house as SVG, without layout shifts. Every drawing is pixel art kept as data, with one path per colour and every colour a CSS variable, so the night and the wardrobe only change variables. Furniture and scenery are drawn only once, every drawing travels in one SVG file the browser caches, and motion is CSS.

Security and privacy. It can only read the public content and count the visits and the panels that are opened, anonymously and without cookies, and the browser never talks to the API. The content security policy uses a nonce per response and links only lead to my sites. Whatever is kept in the browser is checked against closed lists when it is read back.

Architecture and quality. Next.js with a hexagonal architecture in seven modules and 53 test files, in Spanish, English and Japanese. A test walks from the gate to every free tile and beside every piece of furniture, and a script compares the pixels of every pair of pieces so nothing overlaps without reason.

Status. Built; it will be published soon.