DEV Community

loading...
Cover image for ArtistJodi.com

ArtistJodi.com

jameswallis profile image James Wallis Originally published at wallis.dev Updated on ・2 min read

Jodi Phillips, known as ArtistJodi, specialises in Resin and Acrylic art. Having worked as an artist for over 20 years, she has experience showcasing her art across Europe, Japan, Egypt, America, Singapore and extensively throughout the UK. After focussing on acrylic art for many years, in 2018 Jodi began a new adventure using resin to create pieces of art. With resin, Jodi is able to create art ranging from splashbacks to personalised snowboards. I was commissioned by Jodi to create an online platform that she can use to share her art with the world. Originally completed in 2018, I've been maintaining it ever since. Most recently, I added a video background to the home page to showcase Jodi's move into the virtual art world with TheVECentre.


The original homepage

Task

Being a creative, Jodi had already designed the website layout and visuals before commissioning me. I took the designs and modified them to improve the user experience whilst keeping the important focus on her art. In addition, Jodi made it clear that she wanted the website to be fast and to be optimised for search engines (SEO). After I was given the comprehensive page designs, I set about planning and developing the website - making small artistic changes to the original design while maintaining clear communication with Jodi.


The commissions page for artistjodi.com

Technical Details

artistjodi.com was built using Next.js, a React.js framework that enables functionality such as serverside and static rendering websites. Out of the box, Next.js is incredibly fast. However, in the initial iteration of the website, the number of images used caused the website to become slow. A plugin called next-optimized-images compresses and resizes every image for different screen sizes - massively decreasing the size of each page. Another plugin, next-seo is used to manage the SEO focussed parts such as page titles and descriptions. Reactstrap (Bootstrap 4 for React.js) is used to aid the responsive nature of the website and styled-jsx for other CSS styling. Font Awesome supplies any icons that are not individually crafted by Jodi herself.


Scrolling through the homepage

The source code for artistjodi.com is available on GitHub.

Visit artistjodi.com

Discussion (0)

Forem Open with the Forem app