Thejohneke is a simple and performant portfolio site for a cinematographer and content creator designed to showcase his work in an engaging and visually appealing manner, offering high-quality video displays, interactive previews, and customizable project presentations.
The website is built using modern web technologies to ensure high performance, responsiveness, and ease of maintenance. Key technologies include:
With Cloudinary, all video content is efficiently compressed and streamed, ensuring fast load times and high-quality playback across all devices. Cloudinary's adaptive bit-rate streaming and on-the-fly transformation capabilities optimize video delivery, maintaining a balance between performance and quality.
The website is fully responsive, ensuring seamless functionality and visual appeal on devices of all sizes, from desktops to smartphones. The design adjusts fluidly to different screen resolutions and orientations, providing an optimal viewing experience.
responsive screens of thejoheke.com site - via [responsively.app]
Each project has a highly-compressed video that allows potential clients and collaborators to easily view highlights of the project without having to play the main video.
project showcase
Each project page includes an embedded YouTube video player, allowing visitors to watch the full project video without leaving the site. Since Sanity does not come with a built-in YouTube embed, I had to create one using the Iframe element. Here's what the widget looks like on Sanity:
Custom Sanity youtube widget
Here's the GitHub Gist if you'll love to see the implementation.
Building this project required planning and several iterations. I started by surveying ideas and curating design inspirations from Dribbble to outline the structure and navigation flow of the site. Next, I used Figma to design the UI interface.
Figma design of thejohneke.com site
Although a lot of changes were made to the initial design, it served as a good starting point for the implementation.
