CHAPTER FOUR

The project had two main objectives: to strengthen brand recognition and to transform the website into a functional channel for inquiries. The key was not simply to create an attractive showcase, but to design a clear user journey: view the portfolio → see the team’s professionalism and the quality of their projects → submit an inquiry.

I was responsible for front-end development of the website and admin panel, architectural design, and some UX solutions. My work included designing the structure of the SPA application, organizing the layers, defining the logic of cards and transitions between entities, implementing the video player’s behavior, creating CTA scenarios, and developing the admin panel for future content management.

Hero block on main page

Architecture

The project was built as a Vue SPA using an FSD architecture. I deliberately kept the data layer simple: the main challenge lay not in the CRUD logic, but in the media workflows, UX transitions, and ensuring the content displayed consistently.

• app / pages / widgets / features / entities / shared;
• A single API module for projects, authors, and galleries;
• All types are defined separately;
• Local data transformations—within view components;
• Partial lazy loading of routes;
• The vendor is moved to a separate chunk.

UX

The UX structure was based on a simple flow: the user browses the work and then proceeds to the contact page. That’s why I designed not just a set of pages, but a system of navigation between categories, projects, authors, and commercial offers.

User path:

• Visit the website to view our services or projects
• Go to the service page or view a case study directly
• Browse our portfolio or meet our team
• Choose your preferred way to contact us: submit a request on the website or contact us directly

I didn’t limit the CTA to a single “Submit Request” button on every screen. Instead, the product featured several levels of contact: a request modal in key contexts, a separate sales proposal flow, and a soft onboarding process via email, phone, and Telegram. This allowed us to guide users toward making contact without pressure and gave them the freedom to choose based on their decision-making stage.

Custom video player

Video was a key component of the product, so a ready-made npm player didn’t fully meet our needs. We needed a consistent visual and behavioral style for the site: custom controls, a branded cover display, a clean full-screen mode, predictable loading, and different interaction scenarios depending on the page context.

Video player

I created a unified video player that was used on both project pages and author pages. Differences between scenarios were managed through properties and modes: sources, cover art, autoplay on hover, full-screen behavior, control functionality, and metadata loading. This approach allowed me to avoid spreading the behavior across several separate players and instead keep the core logic in one place.

On the project page, the player served as the main medium for the case study: users watched the video and the behind-the-scenes footage in the usual way. On the creator’s page, the approach was different: the focus was on providing a quick introduction to the showreel, hover autoplay, and easier content scanning. In essence, the player here was not just a UI component, but an integral part of the site’s product logic.

Performance

• Layout shifts (CLS): Fixed the 16:9 aspect ratio and loading via the cover.
• Unnecessary video loading: I used `preload=“metadata”` to avoid loading heavy content in advance
• Repeated requests during navigation: Added an in-memory cache and sessionStorage with TTL for lists and entities.
• Media replay: Used the Cache API for player covers.
• A busy dev environment with media: I set up a proxy for the API and CDN via the Vite dev server.
• Bundle: Added partial lazy loading of routes and a separate vendor chunk.

Scaling

The result was not just a promotional website, but a practical tool for the team to present itself to clients. With its structure—featuring service areas, projects, creators, and a commercial offering—the site helps not only showcase individual projects but also convey a more comprehensive picture of the production company: what the team does, the caliber of their work, and how to get in touch with them.

Author page hero

According to the team, after the launch, the site became easy to use for working with clients, and the number of orders increased significantly. The internal outcome of the project is also significant. In addition to the client-facing part, I developed an admin panel for adding projects and authors. This transformed the site from a one-off showcase into a maintainable content management system: the team gained a foundation that can be further developed without constant code changes.

What I would improve right now

After release, I would have restructured several solutions in a more explicit and systematic way. First and foremost, I would have removed some of the “magic” from the timings within the media logic and converted the player’s behavior into a more transparent state model. Where scenarios differed across pages, it would now be better to use explicit component modes rather than a set of vague flags.

Looking at the bigger picture, this project taught me an important lesson: in content-driven media products, the main challenge often lies not in the data itself, but in the media workflows, UX transitions, and the sense of stability in the interface. These are precisely the areas I would focus on even more systematically in the next iteration.