alxv2016 / design-tokens

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Design Tokens

A landing page presenting what design tokens are and how it works with design systems to help designers and developers understand the values of using design tokens.

Demo

You can view the demo here: Design Tokens

Take aways

  1. Create a scroll trigger landing page in Angular
  2. Using GSAP animation the "Angular way" GSAP Angular Patterns
  3. Connect a project to a headless CMS directus
  4. Dynamically injecting content from a rest api
  5. Presenting Design Tokens key values

Libraries used

To keep it lean only a handful of external libraries were used

  1. GSAP - gsap
  2. Angular - angular

Dev and Build scripts

ng serve
ng build --prod

All images and assets/content are created by Alex Vong (me), this project was built with passion and was used as base of refreshing my angular dev knowledge and to share design & dev practical skills.

About


Languages

Language:HTML 41.5%Language:SCSS 33.7%Language:TypeScript 23.7%Language:JavaScript 1.1%Language:Shell 0.1%