bfreeds / bemappy.xyz Goto Github PK

To improve the UX, start with the header with a white background. When the alignment between the hero image and the header is scrolled into view, animate a linear gradient on the hero background (to accommodate the color gradient in the picture) & animate the hero image with filter: blur(1px) to keep clarity of the text and logo in the header.

This should be managed state in the web app (hasHeroScrolled). Once the user scrolls once, the animation should be done and the hero and header should be linked for the remainder of the user experience. Don't want them to be able to be scrolled apart, just once.

The current globe in the logo was from an ObservableHQ notebook, SVG pulled with SVG Crowbar.

This logo was more of a proof of concept for me, but before publishing I would feel better with the custom logo created.

The routing setup in pages/blog/_id.vue and page/blog/index.vue are not working properly. If you are already on the blog homepage, then click an article link, the route is created. However, if you try to go directly to bemappy.xyz/blog/1, that route and page is not already created.