Portfolio Review
Client: Creative Circus
Design & Vanilla HTML/CSS Development
Tech
- SCSS
- Homemade CSS grid system
- Javascript
- GSAP
Summary
- Basically a list of all the students who are available to hire. But fun.
- Images of the students animate on hover, giving them the opportunity to show their creativity and personality
- Sorting function so visitors can see just the type of student they want
- Each student gets their portfolio link, and a Calendly link to schedule an interview.
- I just discovered CSS grid when this project was started, so I designed it to use that. As you can see, it’s pretty css-grid-y.
Strategy and Concept
When the weirdest school in the country needs a website to show off its weird creative graduates, you answer the call with a funky, colorful, animated website that lets those students be creative.
Quirkiness, codified
When you hover over a student’s image, some javascript magic fetches and swaps in their other images one at a time, in a quick slideshow. Some students just submitted a few professional headshots, others got really weird with it, and took it as an opportunity to tell a story.
I could have told them to make a gif, but some of the copywriters couldn’t figure out how to do it, and this saves a lot of load time.
Sorting
Recruiters and people looking to hire graduates need to filter by skill set, so the options at the top of the page will show and hide students by program and graduation status.
But of course, since it’s a one-page site, that filtering is done dynamically with javascript.
Note: The real site is no longer available, so this is a clone of the site that I’m hosting on my server.