All solutions

My Process

Built with

• Vite - development environment
• React - JS library
• GSAP - animation library
• Emotion - CSS-in-JS library
• Sass - CSS preprocessor
• PostCSS - CSS postprocessor
• Eslint - linter
• Prettier - code formatter

What I learned

• React Basics
• CSS-in-JS
• setting constants and mixins for applying styles
• ajax post request, error handling, loading animation
• form validate

Continued development

• CSS Interaction
• CSS Grid
• Svg icons, image
• GSAP animation
• Switch favicon between dark and light modes
• Displaying webfont using webfont loader
• Issue-driven development

Message

I feel like I have learned the basics of REACT by building this project.

But from here, how can I make it more practical and scalable?

Any input would be appreciated.

Thank you.

My process

Built with

• Vite - development environment
• Sass - CSS preprocessor
• PostCSS - CSS postprocessor
• Pug - HTML preprocessor
• Eslint - linter
• Prettier - code formatter

What I learned

• Interaction for linear-gradient
• new GSAP animation pattern
• Pug Structuring

Continued development

• Image compression flow using @squoosh/lib
• CSS Interaction
• BEM, CSS Structuring
• SASS Mixin
• GSAP Animation
• CSS Grid
• Svg icons
• Switch favicon between dark and light modes
• Displaying webfont using webfont loader
• Issue-driven development

Useful resources

• Overpass - I referred to the animation and interaction.

Message

Any suggestions on how I can improve are welcome!

Built with

• Vite - development environment
• Sass - CSS preprocessor
• PostCSS - CSS postprocessor
• Pug - HTML preprocessor
• Eslint - linter
• Prettier - code formatter

What I learned

• Image compression flow using @squoosh/lib
• CSS Interaction
• CSS Grid
• BEM, CSS Structuring
• SASS Mixin
• GSAP Animation
• Svg icons
• Switch favicon between dark and light modes
• Displaying webfont using webfont loader
• Issue-driven development

Message

Any suggestions on how I can improve are welcome!