Multi-language Responsive Landing made with SCSS, Tailwind, TS, Vite

PROJECT OVERVIEW: This project was created using HTML, SCSS, Tailwind CSS, Typescript, and Vite as the build tool.

MAIN FOCUS: I aimed to write easily understandable HTML, SCSS, and Typescript code, adhering to best practices. Additionally, it served as a refresher project for me to reacquaint myself with Tailwind CSS.

PERSONAL CHALLENGE: I incorporated two extra features to challenge myself: a navbar that fades out on scroll and multi-language (English, Spanish, Japanese) toggle functionality.

Overall Thoughts: While I still enjoy working with Tailwind, my improved proficiency in CSS/SCSS has made me find the latter more intuitive. Nevertheless, Tailwind remains a fantastic tool.

WHAT I LEARNED: I gained a deeper appreciation for Vite's utility. With minimal configuration, I seamlessly integrated SCSS, Tailwind, and Typescript. I also encountered a bug related to Vite's use of absolute paths for images, necessitating post-deployment adjustments to file paths in the background-image: url() properties.

STRUGGLED WITH: Creating the translation-data.js file posed a challenge. Initially, I used IDs for all elements, but later realized it would be more effective to work with data- attributes.

FINAL THOUGHTS: I grappled with the decision of whether to proceed methodically to minimize refactoring or to work swiftly to build out the project and then dedicate more time to refactoring. It's a consideration for enhancing my speed and efficiency.

Thank you for visiting my site. Until next time.

~Juan