Process
Low Fidelity Sketch
To kick off creating a website for Van Gogh as part of a university assignment, I started by sketching a layout in Concepts. In my sketch, I labeled orange for text, blue for images, pink for margins, and purple for the initial desktop viewport. The header and footer were replicated across all pages for navigation and structure. For each page dedicated to a JavaScript library, I placed a sizable section for it below the header for a uniform structure.
High Fidelity Mockup
After my sketch, I used Figma to create my mockup. My ideas started to come together as the vision for how text and images would meld together became visible.
Web Development
Next, I began writing code for the website. I started by building the paint program using the P5JS library. I had prior experience using P5JS for creating generative art, so I was able to work with ChatGPT build what I envisioned. The resulting program provides a similar painterly style as Van Gogh with just the control of the cursor.
Then, I built the image gallery using lightGallery. I picked specific features from lightGallery to enrich the experience while not burdening the user with options. Provided are the zoom and caption functions, which allows the user to see the detail and learn more about a particular painting. The caption text is derived from the alternative text, providing an accessible user experience.
Finally, I used TimelineJS to showcase a history of Vincent Van Gogh's life in presentable slides. Embeded in the HTML file linking the JavaScript library is a JSON file formatted for TimelineJS that features the notable events that shaped Van Gogh to be the gifted artist he is known for.
Reflection
Creating a website for Vincent Van Gogh was an exciting challenge as I wanted to explore the vast world of JavaScript libraries available to create a uniform but enticing experience. Working with each library had their own obstacles that I was able to overcome with prior experience and the help of artificial intelligence provided by ChatGPT. My website for Vincent Van Gogh is available online, check it out!