Taste

Developing taste in design — recognizing what works and why.

Good/bad decision making + experiences (struggles) + introspection builds judgement.
Applied judgement becomes wisdom.
Wisdom applied over long durations of time becomes taste (gut).

Nucleo Flag Icons for React

Landing.love

A sophisticated image expansion animation using CSS scale() and translate() functions with viewport calculations. The animation uses ease-in-out-quart easing for 400ms and is origin-aware.

The Math Behind It

The scaling calculation handles images of different aspect ratios by fitting them within the viewport with proper margins:

Calculate scale factors: First, calculate the necessary scale factor to fit the image within the window's inner dimensions given a margin of 0.95.
Choose minimum scale: Select the minimum scale so it doesn't exceed either the horizontal or vertical boundaries of the viewport.

const margin = 0.95;
const scaleX = (window.innerWidth * margin) / rect.width;
const scaleY = (window.innerHeight * margin) / rect.height;

// Choosing the lowest so that it doesn't exceed the viewport
// It scales until it hits either x or y axis edge of viewport
const scale = Math.min(scaleX, scaleY);

setTransform(
  `translate(${translateX}px, ${translateY}px) scale(${scale})`
);

Origami Archive