I’m in the process of constructing my first ever personal photography portfolio. I have a somewhat complex idea of what I want it to look like and I’m wondering if there’s a possibility to make this happen in the web realm.
This image is a mockup representation of how I want the final layout to look. Think of three columns that have a gradient of all RGB colours going in between them. The idea for the RGB colors is that they’re sort of a zoomed out version of the photo catalog that is ordered based on the color value of every photo. When hovering/moving the cursor above a certain part of the gradient - a preview of the respective photograph that is assigned to that location is shown next to your cursor. i.e. I want to be able to upload content in CMS and that it gets automatically assigned a position in that gradient field.
I’d also like to be able to apply filters on top of that that will allow users to arrange photos based on projects, but still keep the gradient pattern.
Can any of you point me to a possible resolution for this or some resources/tutorials etc. that I can go through in order to build my expertise in this field and possibly come to a resolution myself? I have just completed a webflow course on awwwards.com and I’d consider my skillset advanced at best, but I have no idea how to do this.
I also understand that this idea might come with severe performance issues if all of the images are meant to have loaded before actually hovering over them. I’d also like to open a discussion in that realm too.