ArtistJodi.com
Tags: showdev, javascript, react, nextjs
Published: 2021-02-08 20:04:19

---
description: "The portfolio website for ArtistJodi. I developed artistjodi.com in 2018 and have been maintaining it ever since."
---
<!--- https://personal-website-jqs1eh70v.vercel.app/portfolio/artistjodi --->

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](https://thevecentre.com).

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/52wt6nktz76xdyibxtjk.png">
  <figcaption>The original homepage</figcaption>
</figure>

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

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/lamz7mrcj80oersvzdq1.png">
  <figcaption>The commissions page for artistjodi.com</figcaption>
</figure>

##Technical Details
artistjodi.com was built using [Next.js](https://nextjs.org), 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](https://github.com/cyrilwanner/next-optimized-images) compresses and resizes every image for different screen sizes - massively decreasing the size of each page. Another plugin, [next-seo](https://github.com/garmeeh/next-seo) is used to manage the SEO focussed parts such as page titles and descriptions. [Reactstrap (Bootstrap 4 for React.js)](https://reactstrap.github.io) is used to aid the responsive nature of the website and [styled-jsx](https://github.com/vercel/styled-jsx) for other CSS styling. [Font Awesome](https://fontawesome.com) supplies any icons that are not individually crafted by Jodi herself.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/scawzesho1nehq9dc3zf.gif">
  <figcaption>Scrolling through the homepage</figcaption>
</figure>


[The source code for artistjodi.com is available on GitHub.](https://github.com/james-wallis/jodiphillips.com)

[Visit artistjodi.com](https://artistjodi.com)