All portfolio projects are copyright to their respective owners. My contribution is partly detailed below.
I’ve been collaborating with the talented designer Andrew Smith for years on his portfolio, with each iteration giving us both the chance to push ourselves in design, animation, and code.
- Completely custom WordPress theme using VueJS on the front-end, decoupled from the CMS by using the REST API.
- Achieved 60 fps animation with subtle parallax scrolling effects.
- Lazy loaded images and assets throughout to improve the first meaningful paint time in the browser.
Google Lighthouse Scores
Performance: 83 out of 100
Accessibility: 100 out of 100
Best Practices: 93 out of 100
SEO: 100 out of 100
Here’s a quick demo that demonstrates a simple, more accessible, approach.
Built out a refresh of my friend Andrew’s portfolio. Now fully responsive, faster, stronger. More productive.
Following up on last year’s presentation to developers on the benefits and capabilities of CSS3 in our work I was asked to provide similar info to one of the company’s creative teams. Participants included art directors and copywriters and although this team in particular did more interactive work than some of the others in the company they were still pretty unsure of how we developers produce our work (magic!).
The goals of this slide deck were to help everyone understand some of the technical aspects of CSS design, as well as offer some tools that could help them experiment with code on their own, become more efficient in certain processes, and take their learning further.
Hopefully others will find this useful in some capacity. If you do use it for training others, learn something new or have a suggestion I’d love to hear it, so please leave a comment.
Designing with CSS in Mind
Screenshots from a demo app that uses the in-browser camera access available in iOS6.