Practice / website development / 2026
Yurevich FitHow I built a coach’s website
Personal coaching needed to come across through structure, imagery and interaction. I trace the development of Dmitry Yurevich’s website, from the first concepts to animation, the mobile version and migration to his hosting.
Try the project’s mechanics: frame scrolling, a card deck, dimensional folders and video reviews. The decisions, mistakes and verification sit alongside each example.
Explore the live studies- Brief
- Personal coaching → a clear website
- Work
- Structure / image / motion / code
- Sources
- Real source material + generative scenes
- Project status
- Site published; acceptance checks continue
01 / CONCEPT
From content to character
The site already had a history. Its new form needed to preserve that history and make the person, method and formats easier to understand.
Understand what is already there
Dmitry had a working website with his biography, programmes, client stories and video testimonials. I began by reviewing that material and the visitor’s journey. I needed to understand what someone could learn about the trainer, how they compared the available formats and where they went after deciding to get in touch.
The content provided a foundation for the new version. Long descriptions made services difficult to compare, while the initial consultation link led to an external questionnaire. During one early review, the opening photograph did not appear. I recorded this as an observation from that particular check; I did not establish its cause or frequency at that stage.
The brief gradually became a straightforward sequence: recognise your situation, understand Dmitry’s approach, see evidence of his experience, choose a format and begin a conversation. This sequence determined the pages and actions needed for the first release. A course shop, client account and CRM were outside its scope.
Three concepts defined the range
I first prepared three visual directions. “Strength and system” used graphite, large white typography and a green accent. “Personal practice” offered a light editorial layout and a quieter character. “Personal strategy” used deep green and an expansive composition around the photograph.
We chose the first direction. It informed the initial prototype; a further working version followed with a refined brief and a more detailed structure. I kept the previous implementation separately so that we could compare changes and recover a useful solution.
The raster concepts helped us discuss hierarchy and atmosphere. When translating them into code, I assembled the copy, actions and responsive behaviour afresh. Decorative lettering introduced by generation did not become approved factual content, and incidental image details did not define how the interface behaved.
STUDY 01 / CONCEPTS
Three directions in one gallery
Three directions for comparing composition, character and emphasis.
These early generative concepts helped establish a direction. The final website was built separately.
The offer gained a centre
FORM 12 became the main product in the new structure: twelve weeks of personal coaching. The home page needed to explain its purpose and help visitors relate the programme to their own lives. Its scope, stages and detailed answers received a separate page.
The other coaching formats also received their own pages. On the home page, they remained options for particular situations. We explained the relationship between FORM 12 and CONTROL separately so that continuing the work would not appear to be another unrelated offer.
The primary action leads directly to Dmitry’s Telegram. A detailed questionnaire can follow the introduction, once someone understands who they are talking to and what the conversation is about. The website does not require a form before that first exchange.
02 / MOTION
Motion acquires a purpose
One gesture introduces the coach. Another scene assembles the programme emblem. Each animation has its own scenario and controls.
The opening became a gesture of introduction
I wanted to convey a personal invitation to work together. The opening scene shows Dmitry turning towards the visitor and extending his hand. On desktop, scrolling controls the movement: visitors move through a short sequence and arrive at the final composition with the offer and its buttons.
The name, description and actions remain real HTML elements above the scene. They can be read, selected and used independently of the image. Phones receive a separate static composition, designed for a narrow screen, without downloading the desktop frame sequence.
People who have enabled reduced motion receive a static version. A fallback image remains available if scene preparation fails. These states became part of the opening alongside its main animated sequence.
Movement needed its own selection process
We compared several generated videos for the scene, including Kling and Seedance outputs. A convincing first frame was not enough to assess the turn, gaze or outstretched hand. One rejected version had incorrect hand anatomy; in another, Dmitry appeared to turn on a platform, and the eyes needed attention.
We eventually selected the second Seedance version. Local processing then separated the person from the surroundings, evened out the background and slightly increased the contrast. The original video and earlier attempts were preserved. This processing adjusted the presentation of the selected source; it did not generate a new face or new movement.
The animated scene and documentary material serve different purposes. The trainer’s turn is a visual scene created for the website. Client results, competition photographs and video testimonials are used as real source material; the plausibility of a generated image cannot replace their provenance.
STUDY 02 / FRAME SCROLL
Scrolling selects the frame
Try the slider and scroll mode. Move forwards or backwards; captions appear as separate HTML layers above the image.
Ready to get
back in shape?
your form.I’m Dmitry Yurevich. Your coach.
Uses the original 193 frames packed into 13 files. The study is isolated inside this article: it does not lock the whole site or require loading before you can read.
FORM 12 acquired an assembly sequence
For FORM 12, I looked for a distinct expression of a system and its sequence. Early versions showed a sculptural mark with a camera moving around it. Some close passes cropped the emblem; other films changed its elements or introduced unwanted lettering. Those results called for a revised scenario.
We returned to storyboarding. Rather than continuing to generate videos, we divided the action into states: a closed module, opening panels, the frame, the F and 1/2 elements, locking pieces and the completed mark. We later refined the ending separately, choosing a centred frontal composition instead of an off-centre object.
The selected video became the programme page’s introduction. It unfolds once and holds its final state. Visitors can pause or replay it; playback pauses outside the visible area and when the tab is hidden. Errors and reduced-motion settings lead to a static final image. The heading and offer sit below the film in their own readable composition.
The visual language moved into the interface
The mechanical theme continued in the frames around FORM 12 sections. We first examined several card directions, then chose a metal frame with cut corners. Ordinary HTML copy, real photographs and a clear hierarchy remained inside it.
Practical constraints soon appeared. A frame had to accommodate different amounts of text, photographs needed to show faces without cropping them, and a week number had to stay clear of the person. We separated the image and explanation areas, adjusted spacing and restored the photographs’ natural proportions.
A separate error appeared in Safari: the metal edges were missing even though the asset loaded. We removed a forced layer transform and expanded the frame styling into explicit CSS properties. We then checked it in Safari itself. Having the correct file in the build proved to be only one condition for the intended result.
STUDY 03 / PLAY ONCE
Assembly, pause, final emblem
The film unfolds once and holds its final frame. Replaying is a separate, deliberate action.
This is the FORM 12 film installed on the website. The study preserves its aspect ratio and controls and pauses playback outside the viewport.
A continuous background needed a shared structure
Graphite, green lighting and a field of dots were intended to connect the long page. When individual sections drew their own backgrounds, visible joins appeared: gradients stopped abruptly, dots met container edges, and an image looked like a separate rectangular insert.
I moved the atmospheric layers into a shared full-width wrapper. Local opaque fills were removed where they interrupted continuity, while image and video edges were matched to the background. We dropped grainy noise in favour of ordered dots and quieter lighting.
The cards retained their translucent surfaces. The page background, card surface and image became separate layers with different purposes. This made it possible to adjust transitions without treating every section independently of its neighbours.
03 / INTERACTION
An interface you can try
The deck, horizontal strip, folders and circular videos serve different purposes. These working local studies follow the original project’s mechanics.
STUDY 04 / DECK + FLIP
Choose a situation, then turn it over
Cards exchange positions in depth. The chosen card has a reverse side, keeping the detail connected to the choice already made.
I want to get back in shape
«Training used to be part of my life. I want to feel in shape again.»
Choose a situation. Turn the card or swipe sideways.
Switching, flipping and dragging are distinct. A swipe cannot accidentally open the reverse. Buttons and keyboard controls provide alternative paths.
STUDY 05 / NATIVE SCROLL + DEPTH
Stages on a horizontal strip
Explore five stages by dragging, a horizontal gesture or keyboard. Each card’s position determines its rotation, scale and opacity.
Assessment
Starting point, constraints and goal.
Setting up
Finding a workable rhythm for training and nutrition.
The main work
Following the plan, tracking changes and adjusting.
Refinement
Addressing what is holding progress back.
Making it last
Preparing a routine that can continue.
Drag the row. The nearest card comes forward; its neighbours recede.
The movement uses native scroll snap. Vertical gestures still scroll the page; depth sits above ordinary navigation.
Resource folders became a small object-based interface
The resources section received dimensional folders with layers of paper. They had perspective, an active central position and support for mouse, drag and keyboard controls. This interaction allowed us to consider the library as a distinct part of the website rather than an incidental list of links.
During development, the structure grew to four folders: Training, Nutrition, Articles and Knowledge. Selecting the central folder opens its corresponding page. Returning preserves the selection, allowing visitors to continue where they left off.
There are no finished resources to publish at this stage. The pages say “Coming soon”. Designing a library and having its contents ready are different states, and the interface needs to represent them honestly.
STUDY 06 / CSS OBJECTS
A folder made of layers
The front, back and paper sheets move separately. Choose a folder, then select it in the centre.
A side folder moves to the centre. Press the centre folder to look inside.
HTML and CSS create the volume through perspective, transparency, transforms and layer order. Inside is an honest Coming soon state; going back preserves the chosen folder.
Real stories needed careful presentation
We transferred videos and source material from the previous website. The hosting provider’s browser verification obstructed ordinary downloads of some files; once server access was available, we could collect the material and a complete archive. We also used the supplied sports photographs and television studio images.
The ATHLETE section gained historical competition stories with real categories, periods and results. They were not presented as outcomes of the new FORM 12 programme. Photographs on Dmitry’s page supported the account of his practice; studio images alone did not justify inventing a programme title, date or new expert status.
Cropping received particular attention. Original photographs remained available to view in full. Video stories regained their natural proportions: the viewing window adapts to the material so that visitors do not lose part of an image merely to make every card the same shape.
The complete story needed shortening
As material accumulated, the home page began repeating its own arguments. Method, adaptation, oversight and responsibility were explained in several places. Following feedback, we consolidated six method cards into three, made the five working phases more compact and combined closely related sections.
We moved the introduction to Dmitry and an early example from his practice ahead of the programme offer. The detailed account remained on the FORM 12 page. At one tested desktop size, the home page’s height fell from 21 740 to 17 446 pixels, approximately 20%. This measures page length in a particular configuration; it does not establish an increase in conversion.
I also refined the action labels. “Discuss my situation” leads to a conversation, while “Learn more about FORM 12” leads to the programme details. Different visitor decisions gained distinct and predictable next steps.
Mobile needed its own decisions
Some compositions had to be rebuilt for phones. Tall ATHLETE cards broke the story into excessively long sections, while an inset photograph left unnecessary margins. We extended the photo to the edges, placed the name and discipline over a shaded area and arranged results in compact rows. The story itself now determines the card’s height.
Round video testimonial previews kept the section’s character, but expand during playback into a window matching the original proportions. Cases with portrait video use portrait windows. This allowed the original frame to remain visible without severe cropping at the sides. In this article’s interactive study, I keep the circular shape and enlarge only its diameter.
The bottom navigation, background beneath it, safe spacing and white programme button also received separate adjustments. Safari checks at narrow sizes helped reveal specific errors. They do not replace testing every physical phone with its browser bars and connection quality.
STUDY 07 / RESPONSIVE CARD
Photo and text in one composition
A narrow screen changes the content arrangement. Switch the card’s width to see the image, name and results stay connected.
Fitness bikini · masters 40+
Victoria 43 years old
- 1st place
- Ryazan · masters 40+ · 2025
- 1st place
- WABBA · masters 40+ · 2025
- 4th place
- WFF Russia · masters 40+ · 2026
A story from Dmitry’s earlier coaching practice, not an outcome of the new programme.
The photograph and name form one block. The complete original is one press away.
The study uses original material from a sporting history. It demonstrates composition and adaptation; the historical result does not belong to the new FORM 12 programme.
STUDY 08 / CIRCULAR VIDEO
The circle grows during playback
Press a circle to enlarge it and play the review. Press again to pause and restore its previous size.
Client review 01
Client review 03
Client review 04
These are real local video reviews. Only the selected video plays; starting another stops the previous one. The ring shows actual progress and pausing restores the compact state.
STUDY 09 / SCROLL REVEAL
Reveals establish a sequence
A small offset and stagger make a group readable in sequence. The animation starts as the block enters view and can be replayed.
The visitor’s situation
How coaching works
Real histories
The next action
The sequence starts on entering the viewport. Reduced motion reveals the content immediately.
Demonstrates the site’s IntersectionObserver and staggered-delay principle. Essential information never depends on animation; reduced motion shows everything immediately.
04 / REFINEMENT
States sit behind the motion
Preparation, loading, readiness, cancellation and failure shape the experience as much as the animation itself.
Preparing
Logo and actual loading progress
Ready
The scene receives control
Skip
Final frame without waiting
Reduced motion
An accessible static opening
Animation was optimised through delivery and memory
The desktop scene consists of 193 frames. Individual requests and image preparation initially competed with the rest of the loading process. We packed the frames into 13 files without further compressing the images themselves, preserving the original bytes of every image.
We also limited concurrent downloads, decoding and the number of prepared frames held in memory. The sequence prepares the neighbouring images it needs, releases resources on cancellation and accounts for a hidden tab. Fonts were checked separately too; converting the handwritten Caveat font to WOFF2 reduced its file size while preserving the outlines and metrics that were checked.
This work has specific, verifiable results: fewer requests, a bounded set of decoded images and preserved frames. I do not attribute a measured FPS improvement or real-user performance figures to it; the project record contains no such field measurements.
Loading became a scenario in its own right
We introduced a loading screen with the logo, real progress and a “Skip loading” button while the scene prepares. Scrolling remains locked during preparation. It opens automatically when loading finishes; skipping goes straight to the final composition and releases the page.
After publication, a brief flash appeared: the browser first showed the static server-rendered opening, then the main script replaced it with the animated version and opened the loader. The cause lay between the initial HTML paint and the application starting.
We moved the fix into the page’s early loading stage. A small logo layer appears before the main application, and its button works before the large script has arrived. If someone has already skipped, the later application startup does not bring loading back. Without JavaScript, the server-rendered text remains available. We checked this transition in WebKit with the script deliberately delayed and with separate cancellation scenarios.
Desktop screens have height too
On another laptop, the lower part of the opening did not fit: the explanation and introduction link beneath Dmitry’s name disappeared. Checking width alone had been insufficient. The large typography occupied too much vertical space.
After reproducing the error, we bounded text size and spacing by both window width and height. We preserved the complete opening: name, role, offer and actions. Several wide and low configurations were checked, including common laptop sizes.
This episode changed the checking sequence itself. For a composition with a pinned scene, I now examine available height alongside layout width: whether the final line fits, buttons remain accessible and the meaningful end of the block stays visible.
05 / RELEASE
Publication continues the project
The new version moved to Dmitry’s hosting. Preserving the earlier material, links and analytics needed a plan of its own.
Migration meant preserving earlier work
We initially used a separate Cloudflare version for discussion. The main website was then placed on Dmitry’s existing hosting with its original domain. Before switching, we preserved a full WordPress archive and database; the previous installation was moved outside the public directory and kept for rollback and access to historical resources.
The existing analytics counters and ownership verifications were retained. We separately checked page-view reception, old links, advertising parameters and redirects. The new pages received server-rendered HTML, canonical URLs, a sitemap of ready routes and a page returning a real 404 status. Release files were verified by hashes; internal reports and backups were excluded from publication.
A conversation with the advertising specialist clarified responsibilities. His earlier work had primarily concerned paid search advertising. Retaining an old counter does not mean that the new website’s actions have already become correct advertising conversions. Goals for the revised journey require their own configuration and checks.
A successful server response still needs reading
After migration, external checks sometimes received Browser verification pages and 429 responses. In some cases, the server returned 200 but the body contained a browser verification page. Looking only at the status could incorrectly count that request as a successful visit to the website.
We separated the check into several questions: what an ordinary browser receives, what an external tool receives and whether a genuine search crawler can read the content. A request about false positives and limited audit access was sent to hosting support. Disabling protection completely was not necessary to obtain a favourable report.
According to the material gathered, the website is published and its routes and media have been checked, but sitemap reading in both search consoles and the new advertising goals have not been finally confirmed. I retain that boundary when describing the outcome. The project does not yet have confirmed figures for growth in enquiries, search traffic or sales.
What I took from this work
My concept developed through successive checks: from composition and copy to movement, from movement to loading, and from local review to the live domain. AI helped write code, explore imagery, investigate errors and carry out repeatable operations. Defining the task, selecting results and deciding what belonged in the project remained my responsibility.
Working with separate versions and source files proved particularly useful. I can return to a concept, compare a rejected film with the selected one, trace a card’s changes and identify the fix that resolved a particular error. That history preserves the reasoning behind further decisions.
For the next project, I will again begin with content, the primary action and verified source material. I will then connect the visual form to how it actually works: how the scene loads, what happens on cancellation, what remains visible on a narrow screen and how the previous version is preserved. Dmitry’s website shows the published version; this account records the process through which it was built.
Your project
Start with what a person needs to understand
Structure, an expressive interaction and verification belong to the same project. For a website or an interactive presentation of your practice, start with the content, material and the visitor’s main action.