Overview
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.
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.
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:
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.
Although a lot of changes were made to the initial design, it served as a good starting point for the implementation.