A statically generated portfolio website built with Next.js, showcasing cinematography and photography through a custom expanding video gallery and a dynamic justified image gallery.
Check the website's live demo hosted on Vercel
This a cinematography and stills photography portfolio website
- It has a custom made react expanding video gallery component that when clicked expands into a video details element with player and detailed information about the project. It was built from scratch in React inspired by the Gridder Javascript plugin
- For the stils portolio section, it has a justified image gallery that expands into a lightbox with image captions using the React Photo Album library
- Fully optimized for performance scoring 100% in every Lighthouse metric on the home page / expanding video gallery
- The website is fully responsive, accessible, and fully optimized for SEO with meta tags, structured data, Opengraph images, sitemaps, etc
This app uses the following libraries and features:
- Full type safety with TypeScript and Zod
- Static site generation using Next.js 15 and React 19
- Styled with Tailwind CSS
- Justified Image gallery using React Photo Album and Yet Another React Lightbox
- Video player using ReactPlayer
- Static Image optimization using Next Export Optimize Images and Sharp
- SEO sitemaps automatically generated with next-sitemap
- Schema.org JSON-LD automatically generated with react-schemaorg and schema-dts
- Icons using react-icons
- Testing using React Testing Library and Vitest
- Custom Keyboard shortcuts using React Hotkeys Hook
- Menu and buttons created with shadcn/ui
- Better commits using commitlint, Commitizen, Husky and lint-staged
- Strict Content Security Policy (CSP)
- Fully accessible with ARIA and WCAG
Next.js is not fully developed as a static site generator. As such there where quite a few challenges to overcome shortcomings and bugs in Next.js functionallity:
- Next/Image optimization does not work out of the box for static sites. This was solved using Next Export Optimize Images and Sharp libraries in conjunction to generate optimized images at build time
- Next.js has a great system to programatically generate OpenGraph images but it doesn't work out of the box for static sites. This was solved by creating custom route files for every OpenGraph image in the project with a hint I found while searching GitHub issues on the subject
- Creating the expandind video gallery from scratch was quite challenging and is still a work in progress. I wrote the code for the gallery to be quite extensible as I plan to release it as an NPM package in the future but as such, it took longer to figure out.
- I decided to create a more consistent Git Commit workflow and it took quite a lot of figuring out to get the settings right for using git hooks with Husky to trigger several actions before a commit such as linting, TypeScript checking, Prettier formatting with lint-staged as well as formatting and linting the commit messages themselves using commitlint and Commitizen. I finally reached a great workflow and configuration for these that I am sure to use in other projects.
- Tests were written using React Testing Library and Vitest but it took a lot of figuring out in order to effectively mock Next.js Next/Image and Next/Font components. In the end I came up with some very powerful mocking functions for both instances that can be used for several other projects to come.
Here are a few basic features and considerations that this app:
- The website currently uses static data stored within the source code but it's fully ready to retrieve that data from a database or api with the change of only a few lines of code. In the future it could have a lightweight CMS such as Payload CMS to manage the content and make it easier to update the website.
- There is further room for performance optimization in the Stills photo gallery section and it needs to though and exploration of the underlying library to see if there are any performance improvements that can be made.
This is a React port of my own cinematography website that was initially created using Wordpress and had a similar look, feel and functionality.
Some features such as environment variable type checking, pragramatic url patterns as well as custom server actions for content (which is static) are over-engineered and not necessary for such a simple website.
The reason for that is that I have used this project as a playground to test different development patterns, tooling and workflows and to learn more about React and Next.js.
To install and run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/theorib/theoribeiro.com-next
- Navigate to the project directory:
cd your-folder-name - Install dependencies:
pnpm install
To start the development server, run:
pnpm dev