cover image of John eke


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.

Technical Details

The website is built using modern web technologies to ensure high performance, responsiveness, and ease of maintenance. Key technologies include:

  • Sanity Headless CMS: Content Management
  • Next.js: Frontend Framework
  • Cloudinary/YouTube: Video storage and preview
  • Design Tools: Figma
  • Hosting: Vercel
  • Analytics: Google Analytics

Features and Functionality

Optimized Video Compression with Cloudinary

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.

Responsive Design

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.

Preview screenshot of thejohneke hero section showing a mobile, tablet and desktop screens
responsive screens of thejoheke.com site - via [responsively.app]

Quick Preview Project Video

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 screenshot
project showcase

YouTube Embed

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 YouTube component
Custom Sanity youtube widget

Here's the GitHub Gist if you'll love to see the implementation.

Development Process

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
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.