我把個人網站改造成一幢建築

My old site was a WordPress theme. It did the job, but it didn't feel like me. When I sat down to rebuild it, I asked myself one question: what should someone feel in the first three seconds?

The answer was simple: that they had walked into somewhere.

The idea: a building you can see inside

The homepage is now a menu and, below it, six rooms that fill the screen. The notebook is a library, Pixel Shorts is a studio, my projects live in a workshop, my security research sits in a SOC, the about page is my own room, and contact is a café.

Click a room and a pixel version of me walks over to it. If it's on another floor, he takes the elevator on the right. When he arrives, the screen dissolves into pixels and the page opens, with the same room as its header, so you really feel like you stepped inside.

It didn't start this way. The first version was a tall building, and the scrolling never ended. The second fit the building on one screen, but the text I put next to it made everything feel crowded. What survived is the simplest version: a menu, the rooms, a footer. Nothing else.

Small details I love

• Day and night. In dark mode the rooms are dim, and on your first visit the lights switch on one by one. Flip to light mode and the whole building turns to day in place, with sunlight pouring through the windows. The mascot waits in the room I'm probably in right now, based on the time in Bursa: the SOC in the afternoon, the studio in the evening, the library late at night.
• Rooms that are alive. The library lamp flickers, rain runs down the café window, the espresso machine steams, and the dots on the SOC's world map blink. Every effect is pinned to the illustration's own coordinates, so even when a room is cropped to fit your screen, the lamp glow stays on the lamp.
• The studio TV. It shows the poster of the latest Pixel Shorts episode. What comes next stays a surprise until it airs.
• Bugs on the SOC floor. Click them and they get squashed. A security person's site needed this.
• In a hurry? Click again while the mascot is walking and you go straight there. With reduced motion turned on, there's no animation at all.

Under the hood

• Astro, fully static. No database, no admin panel, no code running on the server. Posts are Markdown files.
• Tiny5 for headings. In most pixel fonts I tried, the "C" read like an "O". Tiny5 didn't, so I subset it down to the characters I actually use (4.6 KB).
• Two languages. Turkish at the root, English under /en/. Visitors from outside Turkey land on the English homepage; if they switch languages themselves, that choice is remembered.
• Friendly to AI. Add .md to the end of any page and you get a plain-text version. There's an llms.txt summary, and AI crawlers are welcome.
• Deploys. My own VPS behind Cloudflare. Every ten minutes the server checks the repo; if there's a new commit, or a Pixel Shorts episode whose time has come, it rebuilds the site and pings search engines through IndexNow.
• And a trap. Bots probing addresses like /wp-admin get a fake login page instead. Nobody gets banned; they just get mocked, and I keep a log.

The illustrations and AI

The mascot, the rooms and the walk cycle were generated with AI (gpt-image), then cleaned up and cut by hand. The concept, the interactions and the code are mine; I wrote the code together with Claude Code. I don't see a reason to hide that: this site is about software, security and AI in the first place.

What's next

Pixel Shorts starts on October 20th, and after that a new episode will land on the studio TV every day. The episodes are in Turkish, but every one has an English transcript on the site. The building may get new rooms, too. If you have an idea, drop by the café.

Originally published at iamcanturk.dev.