Miroset.
A premium country resort in Sochi — and a landing the founder edits without a developer.
Full cycle, one person: design, build, deploy and a hosting rescue.
runs the site via the admin
A resort-and-business village-hotel on the Matsesta slope, in Santorini style — sold to owners, companies and investors from one landing.
Read the full story
MIROSET is a developer and operator of managed premium country ecosystems. The first location is a resort-and-business village-hotel in Sochi, on the Matsesta slope, in Santorini style. The landing has to attract three audiences: future owners of income residences, companies looking for corporate retreats, and partners and investors. I did the full cycle alone: product design, layout, development, deploy and infrastructure support.
This is not a “drew it and handed it over” project. It combines a design system, my own implementation, a product decision — editable without a developer — and crisis management when the site and the founder’s data had to be saved.
Domains: miroset.ru is the main one, миросеть.рф redirects to it.
One page. Three audiences.
Owners, companies and investors each find their scenario — on one calm, photo-led page.
OS “ОСЬ” · Partners · Participation · Contacts
The site must change without a developer.
Three audiences, one landing
Content is data
Live, editable, resilient
Read the full story
The brief. A landing for a premium country resort in Sochi that speaks to owners, companies and investors at once. The key requirement: the site must be editable without a developer. Texts, photos, video, blocks, colours, fonts and logos are changed by the founder.
The approach. A data-driven landing: all content lives in content.json and PHP renders the page from it. On top, an admin panel for every field, media, blocks and theme. Underneath, one warm design system: neutral palette, a single gold accent, one font.
The outcome. miroset.ru answers HTTP 200 with valid SSL and works fully. The founder edits the whole site via the admin, with zero requests to the developer for content edits. When the hosting was lost, the site came back with no data loss: 100% restored.
Video, scenarios, an app — at 390 px.
All site blocks
- Hero — video background.
- Stay scenarios — Own / Visit / Gather your team / Create.
- Sochi location — video background.
- Product line — gallery carousel.
- OS “ОСЬ” — the management app.
- Partners — logos.
- Participation — Google Forms.
- Contacts — how to reach the team.
Warm neutrals. One gold accent.
A full redesign to the new brand guide in one pass — so the photos of the place carry the colour.
One font — Manrope with Cyrillic — replaces Georgia and Inter. SemiBold headings; only eyebrows in caps.
The full system
The main part of the work: a full redesign to the new brand guide in one pass — palette, a single font, one card system and one rule for the call to action.
Palette. A warm neutral base: background #F8F5F0, cards #FFFDFC, headings #574D44, text #6B635B, lines #DED5CA, decor #E8DED1, photo overlay #4E443C at ~66%.
The gold button rule. A 105° gradient from #D9A03A to #C17D22 with dark brown text #493D32, darkening on hover. One dominant gold button per screen; the rest are light or outline.
Typography. A single font, Manrope with Cyrillic, replacing Georgia and Inter. H1 64–72 px, section headings 42–52 px, body 17–19 px. Dense SemiBold headings and minimal caps: only eyebrows are uppercase.
Cards. One neutral card system: a colour photo on top, never under the text; gold icons, thin borders, radii 18–24 px. The “acid” green gradients were removed. Heavy shadows were removed too: one soft shadow, 0 10px 35px rgba(74,60,45,.08), is kept, and most cards just have a thin border.
Text on photos. On photos and video: a warm brown overlay #4E443C at about 66% and white text #F8F5F0.
Editable without a developer.
The requirement became the architecture: content.json holds everything, PHP renders it, and /admin edits content — never the layout.
- 01Visual editorEvery heading, text, button and link.
- 02Photo and video uploadStraight into any media field.
- 03Media libraryReuse any file uploaded before.
- 04Logo changeSwapped like any other image.
- 05Block managementShow, hide, duplicate, reorder.
- 06Theme editorButton colours and fonts, no CSS.
"theme": {
"button_from": "#D9A03A",
"button_to": "#C17D22",
"font_heading": "Manrope",
"font_body": "Manrope"
},
"layout": [
{ "block": "scenarios", "on": true },
{ "block": "location", "on": true },
{ "block": "spaces", "on": true },
{ "block": "axis", "on": true },
…
]Theme and block order are just data — the template never changes.
Why data, not layout
The landing is data-driven. All content sits in content.json and PHP renders the page from it, so edits only ever touch content, never the layout. That one rule is what lets the founder change texts, media, colours and the order of blocks without breaking the design.
The theme editor writes the button gradient and fonts; block management writes the layout list. The page template never changes, so the founder cannot break the design by editing it.
Small calls that protect the founder.
On-brand AI visuals
No photos yet — so backgrounds were generated.
Mistake-tolerant fields
A video in an image field still plays.
Edits never lost
Saves deep-merge, even from a stale tab.
Gold wordmark with the white background keyed out · “∞” loop cut for the favicon.
Read the full story
- AI-generated backgrounds. The founder had no visuals yet, so the hero, location and final backgrounds were generated on-brand with AI.
- Logo and favicon from the wordmark. Removed the white background from the gold logo with ImageMagick (min-channel key). Cut the “∞” loop out of the wordmark for the favicon and exported it in the required sizes.
- Tolerance to content-manager mistakes. If a video is uploaded into an “image” field, the site still plays it as <video>. Image, video and logo fields get an upload button and the media library.
- Protection of edits. Rewrote the admin save mechanism: saving from a stale tab no longer wipes fields, because the save now deep-merges instead of overwriting. Before that, edits were being lost — the main pain of the project.
One redesign, then targeted edits.
Partners: logos instead of icons — one of the edits.
The seven edits
- Put photos back in cards
- Hid extra blocks
- Partner logos instead of icons
- A large eyebrow “First location”
- Air under headings
- The final block
- The favicon
Then the founder refined texts and uploaded media via the admin — proof that the “editable without a developer” goal was met.
The site went down. Nothing was lost.
The hosting expired: a 403, and every uploaded file locked with the account.
Step by step
- Diagnose — checked DNS, HTTP and FTP to find what exactly had failed.
- Move to a new server — moved the site and set DNS records (A/AAAA).
- Domains and certificates — set the redirect миросеть.рф → miroset.ru and issued Let’s Encrypt certificates for both domains.
- Restore the content — restored everything from the old server: video, photos, gallery, logos and texts. The founder didn’t have to re-upload anything.
A non-obvious gotcha. The nginx HTTP → HTTPS redirect was swallowing the Let’s Encrypt acme check, so the domain couldn’t get a certificate. Found and fixed.
Live, editable, resilient.
- 200Fully workingmiroset.ru, valid SSL.
- 0The founder owns itNo developer requests for content.
- 100%No data lossSurvived losing its hosting.
Stack
Participation formats cover all three audiences: owners, companies and communities, partners and investors.
- PHP, data-driven from JSON
- HTML / CSS, custom design system, no frameworks
- Vanilla JS: carousels, menu
- ImageMagick
- Managed hosting + ISPmanager
- Let’s Encrypt
- FTPS deploy
- AI image generation
Thank you.
A site your team edits itself — designed, built and kept alive.
