Sergii Mokryk

Videograph portfolio website

Creative mockup of Sergii Mokryk project design

Intro

This website is a protfolio for Videograph from Ukraine - Sergii Mokryk.

Creative layout of several pages design

Design

In the process of creating a logo for Sergii, I came up with an idea to design this website with Old Hollywood style vibe. So I developed the design system to add such feeling to the project, which included, colors, fonts, sahdows and other effects.

Hero section has a video background in that same Old Hollywood visual style.

Page with all works is represented as an accordion in which 4 categories of services which Sergii provides as videographer are: Filming, Editing, Color Grading and Sound Design. By hovering or tapping on one of those categories - that category is expanded and old movie style text highlight is shown.

Design of the page where service categories are displayed

”About Me” page is rather minimal, shortly describing who Sergii is and what he does.

About me page design

All works under each category is designed as a carousel which imitates the camera projection and each of the videos are presented as a old movie film frame.

”Hire Me” page includes email to Sergii and liks to his social media, as well as a contact form to contact Sergii directly from the website.

Design of a contact and works presentation pages

Summary

The website is simple and minimal as the client wanted, but designed in original style and stands out among others in this niche. Despite this website being video content heavy it’s got a perfect 100 scores on the Google Lighthouse.

Optimizations

Accessibility

It is important to recognize that certain clients may not give priority to accessibility when developing their websites. However, it is imperative to keep in mind that the internet is a space that should be accessible to all. As a web developer, I make certain to prioritize accessibility in all my projects. This involves incorporating basic but vital approaches to make your project accessible for everyone on the web!

Performance

In the realm of web development, the loading speed of a website is a pivotal factor that determines the quality of user experience. While it may not always be the topmost priority, it is a best practice to optimize the website's speed during the development process. As a developer, I adhere to a set of guidelines that aid in achieving rapid loading speeds for every project undertaken.

SEO

Search engine optimization (SEO) is a critical aspect of web development that can significantly impact a website's success. As a developer, I take responsibility for the initial setup of SEO and making sure the website is ready for further ongoing SEO. While the process of achieving good SEO results, such as indexing on the top of search results, can take time, my expertise enables me to establish a solid foundation for the website's future success.

Responsiveness

In the today's world, more than 53%(and growing) of web users worldwide access the web through mobile devices. In light of this, it is important for every website to be mobile-friendly and responsive. To this end, I adhere to the mobile-first approach in the development process, ensuring that websites are designed and developed to perform smoothly on all devices and screen sizes.

Long story short - my goal is to deliver you a website which has this performance scores on Google Lighthouse: Google lighthouse 100 scores on every measured indicator

Do you wanna develop something for web?

Hire Me

Project's Tech Stack

html logo
css logo
typeScript logo
tailwindCSS logo
astro logo
reactJS logo
git logo
gitHub logo
npm logo
eSLint logo
prettier logo
vercel logo
figma logo
keystatic logo
zod logo