Fylo dark theme landing page

What are you most proud of, and what would you do differently next time?

• I managed to create my own design system using of SCSS. That system comprises a lot of utility classes that replicates TailwindCSS' system. Also, I have watched Kevin Powell's videos for a long time now and the way I use tokens to abstract the different aspects and variables of the system was inspired from him.

• I also learned how to integrate a few PostCSS plugins to Vite's build process such as @fullhuman/postcss-purgecss, postcss-sort-media-queries and autoprefixer so that the final CSS is the most minimum as possible and to also support the vendor prefixes.

• What would I do differently?

I am not really sure. Perhaps, when dealing with SVG backgrounds next time, I may explore a different way of doing it by combining the clip-path and position properties. Also, I will gradually extend and refactor the design system in place as I go more projects.

What challenges did you encounter, and how did you overcome them?

I will only list a few challenges that stood out the most to me:

• Curvy backgrounds: I had to use Adobe XD to get the full content of the curvy backgrounds' SVGs. Otherwise, if I directly copied the SVG code to the HTML, I would only get a subset of the full SVG. I do not know what might be the cause of this anomaly.
• Missing viewBox property for the Social Media icons: The absence of the viewBox property on the icons' SVGs can lead the drawing being hidden despite the width and height of the SVG being set.
• PostCSS setup with Vite: For my case, Vite only started to take into account the configured PostCSS plugins once the PostCSS configurations were put inside its own separate config file postcss.config.js.
• PostCSS effects only for build process: I also wanted the PostCSS plugins to take effect only in the production branch because I didn't want the transformations processes to slow down even more the SCSS pre-processing that is already pretty heavy during development. To achieve that, I just commented the PostCSS plugins configuration in the main while keeping them untouched on the production. That way, only the build process has to take care of all the pre-processing and transformations stuffs that are necessary to the final bundle.

What specific areas of your project would you like help with?

I just want to know whether people who tackle those challenges aim for a pixel-perfect solution or not, and if so, I want to know what tools do they leverage for that.