Article Preview Component

A component that shows an article preview, with different share modals that differ considerably enough for different screen sizes, challenge by Frontend Mentor.

Previews

Preview image #1

Preview image of project Article Preview Component

Preview image #2

Preview image of project Article Preview Component

The challenge

Users should be able to:

View the optimal layout for the component depending on their device’s screen size
See the social media share links when they click the share icon, different for each screen size

What I learned

I learned the over-convoluted way to show different elements on different screen sizes. (Duplicate the elements and use v-if to show/hide them based on screen sizes.)
Astro Islands (enable interactivity only when needed, for the case of the author display)

Useful resources

Bubble Text CSS - CSS for the bubble text for the share view on desktop.