Websites for Fellow Artists

As someone who still considers themselves an artist, and worked for a long while as an actor, I know how important (and stressful) it is to have your own website. Often you have to learn a website-builder like Squarespace and pay a lot of money or hire someone to create that website for you on Squarespace and then pay even more money for that. I knew my friends might be in the same predicament: not able to pay for the month-to-month hosting yet wanting something personal. Well with my newly acquired skills in React and CSS Frameworks I was ready to help out some of my friends who were in need of a rebrand. While I was able to make a few at the time (back in late 2020) this is the site I’ve kept up with the most and am most proud of. This is my dear (and wildly talented) friend Mary Mondlock who commissioned me to start this website and keep it updated over the years.

I’ve given this site a fresh coat of paint recently, and going back it’s weird to see all the… quirky choices I made when I first started off. However I’ve righted those initial quirks over time and I think this site really shines.

Here Are a Few of the Highlights

The Home Parallax

Easy one of my favorite parts about the website. Although this was created using Materialize CSS’s built in components, over time I’ve been able to learn a lot more about what goes into a Parallax. Thinking about the z-index property and building a 3D design for a layout is something I’ve wanted to dive into a lot more, in fact I’ve even taken up learning three.js for this exact reason.

It’s bold, it’s stylish, and Mary has such incredible headshots that I couldn’t pass up showing them off in this manner. If I were to redesign this website using a different foundation of code, I would absolutely try to get more control of the parallax, especially because trying to wrestle with a CSS Framework to make sure a portrait image won’t get blown out of proportion when given a landscape image is not worth the hassle, especially when trying to design for mobile devices.

The Video Gallery

This is hands down my favorite thing I made for this app. This is how I felt I could set myself apart from SquareSpace. By using the useState hook I was able to change between different data (in this case, urls to place inside of iFrames) so that you didn’t have these large boxes of thumbnails taking up space or slowing down the load time of the app. Plus, to update the videos in case newer and better videos are released, you only need to change the url variable’s content and the thumbnail image! Amazing. I have since learned that there is react-player which does help in creating an iFrame automatically by detecting a YouTube link or whatever other links you provide, however this was a big step in my realizing the power of JSX specifically.

What I Would Do Differently

So I’ve already mentioned to Mary that I’ve grown a lot as a developer since creating this initial site and that I’d probably change some major things around if I had the compensation to go wild with new technology. Here are just a few of the things I’d most likely implement if I could start from scratch:

As I mentioned earlier: Create the parallax from scratch

Implement JAMStack build

Using Next.js has changed me as a developer, mainly because I can see an app like this and say to myself: Well what if I built the layout entirely and the client could update the app without having to send everything my way?