One of my favorite small pieces of the site is this GIPHY Stickers Embed that I hacked around with. It pulls randomly from the 470 uploads on my GIPHY Channel. Everything can be dragged around, resized, and will stick to whatever it's stuck to.
My mantra while designing most of this was "be tastefully obnoxious". My last site was closer to obnoxious on the spectrum, and became really bogged down with some ridiculous code that I hacked together. This one still has hover effects attached to almost everything, but runs a lot smoother (I think!) and causes 75% fewer epileptic episodes.
The site uses Bergen Mono for all typography.
The projects tab is serious business with structure – it is home to my work. The feed tab is a lot more freeform – it is home to my play & has a lot more photo/videography, sketches, & 3d work.
The about page, which can be opened from the nav anywhere on the site or by visiting chrs.cblls.com/who-tf-is-chris-cubellis, is also filled with fun hovers from head to toe & finishes off with a custom guestbook tied to a Google Sheet.
The code for the above transition was one of the trickiest pieces to get right. It started out as an in-page transition, loading two separate feeds of almost-entirely-videos that slowed the site down immensely (even with the hidden feed not actually loading).
I landed on navigating to a separate page with exit & entrance transition parameters appended to the URL– if you look closely during the transition, you'll see the address bar change from chrs.cblls.com to chrs.cblls.com/feed?transition=home to chrs.cblls.com/feed. And vice versa. Not the most elegant thing, but it works.
For the feed page, hovering over any thumbnail flips thru a preview of that post's contents.
Emoji-organized feed filters.
Post pages are made up of a bunch of different modals that can be dragged around at will in my CMS. There's carousels, full width & contained images & videos, two-ups, three-ups, pull quotes, section titles, & more.
Whose to say whether the locked case studies will ever be finished? Doesn't matter anymore, because I made this fun Fatality screen if you guess wrong. That being said, the correct password is a Harry Potter reference.
Ideally no one sees this, but if they do...
I've never actually been able to figure out how GIPHY gets GIFs to play in the share images, but if I ever do, these are waiting at the ready.
Template for lite & dark mockups
Extra collateral, for...all of the invoicing...that I do...
The entire backend cms is also themed to match the frontend.
I've used a few CMS's in my days as an amateur front-end developer, and Kirby is by far my favorite and is what I've used for my last few sites. It's a php-based cms that provides a nice backend to whatever front-end you want to dream up. I designed & coded everything seen here from scratch (with help), but Kirby is what ties everything together.
Code! Kirby's structure breaks everything out into folders. Pages are built from templates, and templates are composed of snippets. All of my code is mostly written with scss, jquery, & php/html. Somewhere a real developer is shaking their head at my laymans explanation.
The site isn't actually done, and probably never will be. But here's all 234 commits to date.
I extended the theme to desktop on my PC, with these custom rainmeter skins. That's holistic design for ya, and other buzzwords.
Ok, that's all! Thanks for reading this far! I hope you have fun exploring around the site. If you came to this post directly, here's a few other places to get started:
1) Projects – design work
2) Feed – photos, video, 3d, & more
3) GIPHY App case study