[Page] Home - Initial Complete Design

[vnphanquang]

Context

This issue tracks the progress of the first design and its implementation for the home page of sveltevietnam.dev

Development

• [x] Setup new design tokens
• [x] Implement the Intro section (header)
  • [x] static parts
  • [ ] rotating animation for shapes - leave for https://github.com/sveltevietnam/sveltevietnam.dev/issues/67
  • [ ] parallax scrolling for shapes - leave for https://github.com/sveltevietnam/sveltevietnam.dev/issues/67
  • [ ] parallax scrolling for cards - leave for https://github.com/sveltevietnam/sveltevietnam.dev/issues/67
• [x] Implement Community section
  • [x] rotating animation for shapes
  • [ ] parallax scrolling for shapes - leave for https://github.com/sveltevietnam/sveltevietnam.dev/issues/67
• [x] Implement Events section
  • [x] Implement new EventCard component
• [x] Implement Jobs section
  • [x] Implement new JobCard component
• [x] Implement Impact section
• [x] Implement Sponsor section
• [x] Add IntersectionObserver and intro transition for each section / element
• [x] Implement a splash screen (2 version, same content, different animation, appearing randomly)
• [x] Implement the new header

Carousel

The Impact (aka Projects) section design requires a horizontal sliding view. We could simply implement an overflow-scrolling horizontal list for this, but the UX is not very great. Similarly, the Intro section design for mobile requires a carousel.

Overall, I'm against carousel because of the complexity and the performance penalty it introduces. We have noted this for designers to avoid using such pattern in other pages. But for home page, maybe we should still do it.

Let's should look into a lightweight, performant carousel library to achieve this.

• Embla: good docs, first-party support for svelte with an action-based strategy (always a plus). 6.2kB Gzipped for the embla-carousel-svelte package
• svelte-carousel: component-based, not a fan of this, but its bundlesize is only 813B gzipped, pretty good.
• siema: lightweight (3kB gzipped), framework-agnostic, but author has stopped working on it.
• splidejs: component-based, svelte integration first party. 14.8kB gzipped

[vnphanquang]

@trongtran-t97 remember to track your progress here too. Thanks

[vnphanquang]

This issue has been running for too long. I'll wrap up the UI implementation, and leave animation for a follow-up issue