Principles

This site is a product. The product has a user — me. And like any product, it has principles it's built on. Here's a list of those principles and the decisions that follow from them.

Read this as an explanation, as a reference, or just as a cross-section of how I think about the things I build.

I didn't make a business card. I didn't make a portfolio site. I made a product.

That means it has a build (BUILD 3cd8687 in the footer, clickable through to the commit on GitHub), a backlog, releases, a user, and a success metric. The metric isn't visitors and isn't conversion — it's how accurately the site reflects how I think and work. When the site stops being accurate, I fix it.

That means product rules apply: every decision needs justification. No «because everyone does it», no «because it looks nice».

The build hash in the footer isn't decoration or flexing. It's the same idea as the version under iPhone's About screen or the serial number on the back of a Braun calculator. Click it — you see exactly what changed in this release. The site doesn't hide its history.

Visual language. Beige paper background, black headings, monospaced caps labels, no decoration. A direct nod to the industrial aesthetic of Braun — the ET66 calculator, the SK4 record player, the T1000 radio. One accent colour, clear grid, hierarchy through size and weight rather than ornamentation.

Typography. IBM Plex — open source, released by IBM Design in 2017. Three things converge here: IBM's heritage as one of the main schools of 20th-century corporate modernism (Eliot Noyes, Paul Rand, the Eameses), an open licence (use it without budget concerns), and one of the best Cyrillic glyph sets in open source. Plex Sans for body, Plex Mono for caps labels. Mono in caps is terminal aesthetic — git log, README; the reader instantly reads «this is a technical document, not a marketing landing page».

Colour. The orange accent isn't a brand colour — it's a state indicator. Same semantics as iPhone's mute switch, Hacker News's #FF6600, the orange power button on the Braun ET33. Lineage: industrial safety-orange → Braun → tech startups → this site. Orange = attention, utility, state — not «brand colour». It shows up in exactly four places: the primary CTA («Message me on Telegram»), the active language in the switcher («EN» underlined), the indicator of the current workplace (the dot next to «Yandex Uzbekistan»), and the active theme in the dropdown. One semantics everywhere: «this is what's active right now».

CTA hierarchy. Two buttons next to each other — «Message me on Telegram» (filled orange) and «How I can help» (outline). Same size, different colour. Hierarchy through saturation, not size. If you've got one minute, you tap the orange one. If you've got ten, you tap the outline. The decision is yours, not mine.

Content. Numbers instead of adjectives, with breakdowns. The metrics block reads: 10 yrs in tech, 3 markets, 5,831 followers, 4 own ventures. Each number unfolds into a second line of context: 10 yrs — EdTech · E-com · FinTech; 3 markets — RU · UZ · KG; 5,831 — 1,139 on Telegram, 4,564 on LinkedIn, 128 on YouTube; 4 ventures — since 2009 · 1 sold. A number without context is an empty signal. A number plus breakdown is a verifiable claim. Nobody should take my word for it; every number is checkable against its source.

Same approach in the career section. Not «scaled an e-grocery», but Orders: 400 → 10,000 per day in 3 years, Revenue: ×2 YoY with positive EBITDA, CSAT: 4.2 → 4.5. Not «worked in EdTech», but Activated 7M+ users. Where there are no numbers, the line is just Contract role (Apple Russia, 2018–2019). Contract work doesn't have 7-year KPIs; stretching them into the format would be dishonest.

In «Own ventures» — statuses without repackaging: Launched → no PMF → paused, Launched → stabilized → sold to employees, Launched → 3 kiosks → closed. Four ventures, one sold, the rest closed or paused. That IS startup statistics; pretending otherwise would deceive the reader.

Bilingual mirroring. RU and EN are two versions, not one translation. Yandex Uslugi on the RU side becomes Yandex Services on EN — because in Uzbekistan the service was called Услуги, and an English-speaking audience reads «services» immediately. «Своё дело» → Ventures, «Чем могу помочь» → How I can help, «наст. вр.» → present. Thousand separators follow the locale: 5 831 ↔ 5,831, 1 139 ↔ 1,139. 82 600 просмотров ↔ 82,600 views. Translation is the import of meaning, not the substitution of words.

Accessibility. Four themes: light, dark, auto (matches system setting), and high-contrast. The last is for people with low vision, dyslexia, light sensitivity, and also for reading outside in bright sun. Rare on a personal site; non-negotiable for me. The theme dropdown opens with one click on the sun/moon icon; the active theme is highlighted with an orange border — state semantics again, nothing new.

Navigation. On scroll, a column 01–07 appears on the right — section numbers. The current one is highlighted, the rest are muted. Not a sticky menu, not a TOC — just a marker, like a page number in a book. No labels, no icons, no animated «back to top». The ↑ arrow lives in the bottom right, shows up when needed, scrolls without delay. In Rams's vocabulary, this is as little design as possible.

The /uses page is its own product with its own logic. In the uses.tech tradition — public «what I use» lists kept by developers and designers since the early 2010s. But I reframed the genre to fit my principles.

The key difference: not a TOP-10, not «best of 2026», not a «what to buy» shopping list. It's a cross-section of what I actually have switched on every day. Page tagline: «Only the stuff that actually gets switched on — no shelf of forgotten gadgets».

Structure. Two sections — Hardware and Software. A local nav (only two items, no main menu), a «← Home» button to get back. No anchored numbering column on the right — not needed here, two sections, both visible.

Cards. Every card is strictly the same format: product photo on a light backdrop, category label in caps-mono (Laptop, Monitor, Keyboard, Mouse, Phone, Earphones, Headphones, Powerbank, Charger, Health, Game console), model name, 2–3 sentences on why this specifically. Not specs (you can find those on the manufacturer's page), but context: «Wireless HyperSpeed mouse, 20K DPI, shape I've been using for years. Charges weekly; two side buttons mapped to tab navigation». User experience, not specification.

Grouping. Hardware — COMPUTE (laptop, monitor, keyboard), MOUSE, MOBILE, AUDIO, POWER, HEALTH & PLAY. Groups aren't «shop categories» — they're use scenarios. POWER is about travel: the power bank and the charging station sit together because they solve a related problem. HEALTH & PLAY is about not-work.

Software. Price tags instead of descriptions: $5 / mo, FREE, $10 / mo, $100 / mo, PAY-AS-YOU-GO. Price is the main filter for software choice. Hiding the cost in the card means hiding the context.

Affiliate links. /uses has affiliate links on Dashlane, SetApp, Airalo, and Claude Max. Under each is a CTA — «6 months premium →», «$3 off →». Above the whole section, in plain text: «Services I use regularly. Paid ones — discounted via my link, if you sign up: a small bonus for both of us». The promo code (SEMYON5076 for Airalo) is visible in the description body.

It's a position: if a link is affiliate, I say so honestly — and I share the bonus with the reader. Hidden UTM-partner links without disclosure are dishonest practice. A disclosed affiliate link with a real discount is win-win with nothing hidden. This extends the honest principle from Rams's list into a new, specific monetization context.

The site is built with Claude Code.

This lands on Rams's first principle literally: a new technological possibility applied in service of function. Before 2024, a site like this required either personal frontend-engineering skills or hiring a designer and a developer. Today — assembled in an evening or two, without loss of quality.

Important: AI doesn't substitute for the decision here, it executes it. The philosophy and principles were formulated before the first component was written. If I'd asked Claude «build me a personal site» without a brief, I'd have gotten something averagely decent. Instead I gave references (Rams, Braun, IBM Plex, Hacker News), values (privacy, accessibility, transparency), and tone (numbers instead of adjectives) — and the tool performed from a score.

This is the right use of new technology, Rams-style. The same way he used new plastics and electronic components at Braun — not to look futuristic, but because they made the product better.

The site doesn't wear a «Made with AI» badge. The innovation is hidden in the process, the result is functional. How exactly the site is built is written here — but as an engineering note, not marketing.

The site keeps updating. If something looks broken, reads oddly, or just feels inaccurate — let me know. The «Found a typo?» link in the footer opens a direct channel. The repo is open; if you want to file an issue or a PR — welcome.

The site isn't a final artefact. It's a snapshot of how I think today. A year from now it might look different. Build cc8781e will switch to the next one — and the change will be visible in the commit. That's normal and right.

→ s.morgunov.tech