Artist Portfolio
This artist portfolio website is a rebuilt version of their previous site. It features a CMS built with Strapi for easy content management. This website gives the client more control and the new site boasts improved performance. Pages load 6 seconds faster than the old version, enhancing user experience and engagement.
Website
Stack
React
Next.js
Typescript
Node.js
Postgres
Strapi
Type
Contract
Intent of the Website
The client was looking for an update to their portfolio site that was slow and didn't allow them to make desired additions. The goal was to create a simple, fast, and easy to manage site that would allow them to showcase their work and make updates without needing a developer.
Technical Overview
Next.js was chosen because speed and SEO were very important to the client. The Next.js framework allowed for server-side rendering where applicable, but also came with many tools for optimizing images and other assets. Strapi was chosen as the CMS because it is well supported, easy to use, and allows for custom content types. The use of Postgres ensures reliable data storage and retrieval, and Cloudinary was used for cloud storage so that content persists between restarts and to leverage the Cloudinary CDN to increase photo loading speeds. The client's portfolio page speed improved from 6.8 seconds to 0.5 seconds, and its SEO score improved from 83 to 100 using Lighthouse, a significant improvement that enhances user experience and meets the client's needs. The new site is also more visually appealing and easier to navigate, making it a great showcase for the artist's work.
Challenges Faced
The main challenge was optimizing image loading and page speed to keep the website fast as the artist's portfolio grows. Migrating content to Strapi and integrating Cloudinary for image hosting required careful planning to ensure all assets were transferred and loaded efficiently without losing data. Improving on page speeds over the former site wasn't difficult as it was clearly having issues, but achieving a 0.5 second page load time and 1 second LCP on pages with 60+ images involved performance testing, image optimization, planning, and using Next.js features for SSR and static generation. Ensuring the client could easily update content without developer intervention was also a key challenge. The approach for designing the API endpoints involved stepping in the client's shoes and thinking about how they would want to interact with the site. This led to a simple, intuitive API that allows the client to easily manage their content without needing to understand the underlying technology.
Other Projects
Zuno: A Social Media Site
A social media platform designed to connect people and promote discussion. Features include user profiles with OAuth, posts, infinite nested comments, and a sleek X.com-inspired UI.
Terminal Chat
A messaging app built with React and Vite, featuring profanity filters and a terminal-inspired UI. Users can send messages, create groups, and manage their contacts.
Want to Collaborate?
I'm always interested in new opportunities and collaborations. Check me out at one of the links below, or drop me a message and let's discuss how we can work together!