01Project overview
ostohlo.com is the studio’s own site, and it is on this list for the same reason as the others: it was designed, built and is maintained the way we build for clients. Pages live in a database and are rendered by our own engine; templates stay in files; the interface is a design system written from scratch rather than a theme bought somewhere.
It is also a working product, not a business card. There are free tools that need no sign-up, a project estimator, a three-level partner programme with its own dashboard, and a blog that fills itself from our platform in three languages.
02Why a studio site is hard
A studio site has no owner who complains. It is written between client projects, and every shortcut in it survives for years: a language that fell behind, a page nobody dares to edit because it is hand-written HTML, a gallery of work that stopped matching the work.
We had exactly that history. The site started as static files, and the first migration into a database showed the cost of it: comparing visible text said everything matched, while hundreds of pages had quietly lost their stylesheet bundle. Since then the rule here is that a change is proven by a measurement, not by the page looking right.
03Project goals
- content in a database and templates in files, so a text change does not require a developer;
- three languages that never diverge: a key added to one is added to all three in the same task;
- a design system of our own — motion, WebGL scenes and typography that belong to this brand;
- tools that are genuinely useful and genuinely free, with nothing stored server-side;
- a partner programme with real numbers in a dashboard, not a promise on a landing page;
- measurable quality: layout down to 320 px, clean structured data, no broken links.
04The engine: pages in a database
Every page — a service, a case study, an article, a legal text — is a row: path, language, title, description, body, structured data, publication flags. One entry point renders it with a template chosen by kind, and the shared header and footer come from files that a generator writes, so the chrome of three hundred pages changes in one place.
The subtlety is on the file system, not in the code: the web server hands out any file that exists on disk and only then falls through to the application. Putting a file with an old page’s name into the public directory would quietly switch that page off from the database — which is exactly the kind of failure that leaves no error anywhere.
05Three languages, English at the root
English lives at the root, Russian under /ru/, Ukrainian under /uk/. Which language sits at the root is written down in exactly one place in the code, and the front end knows the same fact from one constant — a check compares them, because two answers to that question is how half-translated sites are born.
Interface strings are a dictionary with per-language bundles, and the rule is absolute: a key added to one language is added to all three in the same task. A missing key does not raise an error, it shows the wrong language to a reader — the most expensive kind of silence.
06A design system of our own
The current interface is the fourth generation of this site, and it is written from scratch: tokens, typography, components, motion and a set of WebGL scenes that sit behind the hero blocks. Sources live in one place and are compiled into hashed bundles; editing the compiled file by hand would simply be lost at the next build, so there is nothing to argue about.
Motion is always on here — no reduced-motion gate — which is a deliberate decision of the owner, and it comes with a duty: everything must still be readable and reachable at 320 px, and every appearance animation must actually finish. Both are checked by a probe that scrolls the page twice and waits for the reveal, because a block that never appears is invisible to a screenshot taken too early.
07Free tools that store nothing
Seven small tools: a password generator and a leak check, a QR generator, a UTM builder, a slug maker, a character counter and a phone checker. No sign-up, no account, and — the part that matters — no server-side storage. What a tool remembers, it remembers in the visitor’s own browser, and only the settings, never the content.
The leak check is the clearest example: it never sends the password. Only a short prefix of its hash leaves the browser, and the answer is assembled locally, which is the difference between a useful tool and a beautifully designed way to collect passwords.
08Partner programme with a real dashboard
Three levels of referrals: a partner earns on the clients they bring, on the partners those clients bring, and on the level below that. The dashboard shows what actually happened — clicks by campaign, registrations, accruals — and it is reachable by a link with a token rather than by a password nobody would remember.
The token is removed from the address before the first request goes out, the requests carry no credentials and no referrer, and the demo mode never touches the server. A partner cabinet is a place where money is shown; it should not be the place where a link leaks the account.
09A blog that fills itself
Articles arrive from Astrina — our own platform — through a signed endpoint: one material, three language versions, each landing in its own language tree with reciprocal alternates. Images are pulled in and stored locally rather than hot-linked, and the blog index card for that article is written in the same pass.
Automation like this is where quiet damage happens, so the intake normalises what it receives: internal links are rewritten to the language of the article, and links left as raw markdown are turned into real ones. The rule is simple — a reader of the Russian version must never be sent to the English page by a link that merely looks fine in the source.
10SEO, GEO and the machine readers
Every page carries one title, one description, a canonical address, reciprocal alternates for all three languages plus a default, Open Graph and structured data — and all of it is printed from one place, because pages that are responsible for their own meta tags are pages that forget them.
For machine readers there is a summary file that lists the sections, the products and the languages, assembled from the database rather than written by hand: the hand-written one had claimed the wrong number of products for months. Sitemaps — pages and images — are rebuilt nightly, and anything that changed is announced to the search engines the same run.
11Forms, mail and the outside world
The brief form is the only place on the site where money begins, so it is the most guarded one: a method allow-list, a honeypot, per-address and global rate limits, size checks on every field, and an attachment that is accepted by its real content type rather than by its name. The request is written to the database before anything is sent, because a lost letter must not mean a lost client.
Everything the site sends outward — mail, notifications, external calls — goes through a proxy and fails closed if that proxy is down. The server’s own address does not reach third parties, and letters are sent from a mailbox that the domain’s records actually authorise.
12Technology stack
- PHP 8.4 and MariaDB: pages in the database, templates in files, one entry point;
- a design system of our own — tokens, components, motion, WebGL scenes, compiled into hashed bundles;
- three languages with per-language dictionary bundles and a parity check;
- free tools written in the browser, with nothing stored server-side;
- a partner engine with three referral levels and a token-based dashboard;
- a signed intake for articles from Astrina, our own analytics, our own ad network in the blog only.
13The result
A site where a text change is an edit in a panel, not a deployment; where three languages stay level because the rule is enforced in the same task; where the work section is generated from one registry, so adding a case cannot leave half the site claiming an old count.
And a site that is measured like a client project: every published address answered, internal links with no redirects or errors, one title and one description per page, images declared in their own sitemap, and layout checked down to 320 px across all three languages.
14Takeaways
Doing your own site to the standard you sell is uncomfortable, and that is the point: every shortcut you would have taken here is one you might take for a client. Ours taught us three things. Put the content where the people who write it can reach it. Make the languages a rule, not an intention — anything else drifts within a month. Prove changes with measurements: this site once passed a visual comparison while hundreds of its pages had lost their styles.
If you want a site that is a product rather than a brochure — with tools, a dashboard, several languages and an interface that belongs to you — that is exactly what we do.
