Javier Reyes Personal Website

Fluid tabs

Fluid animation on hover and active states for tab components made with motion.dev.

A recreation of the iPhone 14 Pro's Dynamic Island using motion and based on the Emil's animation course.

A recreation of the Evervault card component, now supporting touch-device interactions and featuring both light and dark mode variants.

A customizable banner inspired by Nuno Maduro’s Laravel Essentials. Adjust it to your needs and export it as a PNG.

A recreation of this Card Parallax effect by Jhey.

Javier Reyes Javier Reyes

A recreation of the camera roll component from Marijana Pavlinić's website.

A recreation of the Card Overview component from Marijana Pavlinić's website.

A recreation of this accordion design.

What is this component?
Is an accordion component built with Vue 3 and Tailwind CSS. It only allows one item to be expanded at a time, and it can be recreated in any framework or library because relys on basic HTML, CSS, and JavaScript concepts.
How does it work?
The expansion uses the grid-template-rows to animate the height of the content and to style the parents elements we use the :has() pseudo-class.
Why use this approach?
Using grid-template-rows allows for smooth height transitions without needing to calculate heights in JavaScript. The :has() pseudo-class enables styling of parent elements based on the state of their children, making the component more maintainable and easier to read.
And the accessibility?
The component uses appropriate ARIA roles and properties to ensure it is accessible to all users. Each item has role="option" and aria-expanded attributes to indicate their state. Keyboard navigation is also supported, allowing users to navigate through the items using arrow keys and toggle expansion with Enter or Space keys.