When starting my portfolio, I wanted to step out of my comfort zone and embrace the outcomes of trying new techniques. And over 12 concepts, over 100 art-boards and perseverance with Webflow, this is the result.
As part of embracing the unexpected I wanted to try designing something that uses elements or concepts that wouldn't be appropriate in a client project. This included exploring jacked scrolling, scroll indicators without the word "scroll" and using an SVG animation cursor instead of CTA buttons.
I set the goal to break out of my comfort zone, learn something new and create something that reflects my attention to detail. This is why I designed and built it myself. With knowledge of HTML, CSS and JS from my studies. I began to use my designs as a template to learn how to build in Webflow.
When designing the layout and general style - I kept interactivity and potential SVG animations in consideration. Motion and illustration is something I enjoy and believe enhances the experience of any interface. So I made sure that It was a prominent part of the final result.
Continuing on from the desire to use animated interactions. I wanted to continue to express my interest in motion by applying an animated vector graphic created in Adobe After Effects and exported as an SVG animation. This element is applied to the cursor when you hover over a case-study title and image on the home page.