Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aminesayagh/lavish_resource

Last synced: 28 days ago
JSON representation

Host: GitHub
URL: https://github.com/aminesayagh/lavish_resource
Owner: aminesayagh
Created: 2022-07-19T15:57:58.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2022-07-19T17:06:58.000Z (over 2 years ago)
Last Synced: 2024-11-07T23:47:12.723Z (3 months ago)
Language: TypeScript
Size: 13.7 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        


  Hey there 



  Ressource Lavish v1 Project

  

    Packages

    Env: node.js

    Language: ts

    My best tool list

    Hosting: versel

    

      Next.js: full stack pwa framwork

      Gsap: animation framework

      Tailwind: css framework

      Yup, @hookform/resolvers: form validator

      Zapier: no code backend automatisation

    

  

  

  

    React Hooks

    

      useBreakPoint: generate breakpoint basing in width of page

      useContainerDimensions: return height and weight of a component by ref

      useGoToItemLink: scroll to section by id with change page option

      useI18n: auto generate lang file

      useProgress: generate progress of page loading

      useWindowDimension: return window dimension

    

    React Hooks gsap

    

      useArrayRef: ref multiple components to animate

      useGsapTimeline: generate timeline animation using a object options

      useIsomorphicLayoutEffect: return useEffect in next.js server side (ssr) and useLayoutEffect in client side

      useScrollToSection: animate scroll to id of page

      useSelector: create selector of sub selector of a ref react

      useStateRef: generate animation by state changements

    

  

  

  

    Scss functions

    All of this functions is based in tailwindcss and scss

    

      grid: gestion grid with responsity (show section 1: welcome images as exemple)

      flexMatrice: gestion flex with optimale padding (show section services)

      flex: gestion flex with responsivity

    

  

  

  

    Helpers

    

      

        classNameGestion: I find css JSX class naming and css module management in next.js difficult so I created an automation function.