Portfolio: Ampersandrew 2019

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.

Quick facts:

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

Posted on September 30, 2019November 28, 2022 by Joel

Accessible Tooltips without JavaScript

Tooltips. You would think these were the hardest problem in web design based on the number of javascript-dependent solutions put out there. Look at a library like html5tooltips.js, do we really need to add 637 lines of javascript to provide a little supplemental info in our interfaces?

Here’s a quick demo that demonstrates a simple, more accessible, approach.

See the Pen Tooltips without JavaScript by Joel Sunman (@damofknowledge) on CodePen.

Posted on September 26, 2015June 19, 2016 by Joel

Ampersandrew 2015

Built out a refresh of my friend Andrew’s portfolio. Now fully responsive, faster, stronger. More productive.

Posted on June 26, 2015August 31, 2015 by Joel

CSS for Designers

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

Posted on April 28, 2014April 22, 2015 by Joel