With no other agenda beyond that, I’ll turn this into an “about this website” and show off some of the features I’m particularly proud of on the new site.
Inline Form
Since the Get In Touch form appears on every page in the footer, I wanted something unique rather than the typical square-grid-based forms that are everywhere. I decided to go with an inline, paragraph-style of form that’s more conversational.
The result mirrors something similar to what I’d expect in a face-to-face conversation. No one’s ever walked up to me and said “Name, Fred; Interested in: Hi, I’m interested in a new site.”
This may look simple, but from a technical perspective it was actually quite a challenge. Form input boxes don’t wrap onto new lines, so I had to find a workaround that let me do so. After implementing that workaround, I had to build in extra functionality that’s sort of built into normal grid-based forms. I built a demo you can play around with without sending me a bunch of emails through my footer (please don’t, unless you want a website ;-D):
Device Previews
Everything we developers build these days is responsive, so I wanted to show my sites at various device screen widths, with functionality that allowed users to scroll on the virtualized device screen. The animations between device types was actually a lot easier than I had anticipated
But, the scrolling logic was a bit more difficult…
I ended up with what I call a bunch of “scroll holes” on the site, where as the user scrolls down the page, their cursor suddenly gets trapped scrolling on one of the virtual screens instead of the Aquamarine site itself. They’d need to scroll all the way to the end of that virtual screen in order to continue, or move the cursor around to dodge the virtual screens on the way down.
I’ve encountered this on a lot of sites with Google Maps integrated into them, where I’m happily scrolling down and then am suddenly zooming in and out of the map instead and downward progress is impossible until I move my mouse to the side of a map, if the developer even gave me enough room to do so.
I built a bunch of logic around scrolling, with timers, debouncing, throttling, and other tricks to create a smoother but performant experience. You’re welcome.
Vertical Scroll Slider
This one’s pretty simple, but I wanted a scrollable area where I could show logos of companies I’ve done sites for.
Nothing groundbreaking, but it was sure fun to piece together.
I hope you enjoy these features and the rest you can find here on the new site!
-h