Revamping the Portfolio Website: www.JenniferHaggerty.com
In 2024 I went to Universal Studios with my friend for the Halloween Horror Nights. It was a fabulous time! We got dressed up in our Gothic finery and explored the haunted houses while the scare actors tried in vain to jump scare me – the trick is to get something mundane and alter it a little but just enough that my brain tries to “fix” the proportions but cannot. Seen often in my own photography, this will get me spooked almost every time.
I share this memory because the t-shirt I got to commemorate our trip inspired the design for my website, www.jenniferhaggerty.com!
The Reference
You can see where I used Coolors.co to generate a color palette and using the hierarchy of the text within the design to define my header and paragraph fonts and elements.
The Animation
Inspired by the video games I used to play on the GIANT black floppy disks of the 80’s and 90’s; there was a game where the plot was to solve the murder or survive the murder house – I was 9 or 10 when I played it so I only have a few frames to go off of. These games had a distinct blood oozing animation to them that I wished to recreate. Using inspirations such as “lava lamps”, and “venom”, and “liquid drip”, I was able to reverse engineer the black globs of ooze you see currently on the website. Over time I will tweak that ooze to reflect the vision in my mind as my memory recovers more details along with my research.
I LOVE the giant blue skull shooting lazers on the refernce and wanted that same energy reflected somewhere in the site and thus the navbar icons hold a hover animation that unlocks that egg of joy for me :D
The kanji element is a touch more difficult to incorporate. It’s the vertical orientation on English words that creates obscene kerning issues that I cannot stomach. While there are vertical elements baked into the css and at the ready by using the className “.h6”, I haven’t found the best use for this element just yet. I did bring back the kanji, used on lists, though at present there aren’t any lists on the site.
To check out these elements and variations yourself simply open the inspector tool and change or add the elements to see the work!
Questions, comments, concerns?
Email me or leave a comment below!