Frontend Mentor - Sunnyside agency landing page solution

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links

• Live on GitHub Pages

Showcase

Desktop preview

Mobile ligthouse stats

Mode: Navigation (Default)

Built with

• Astro - Static Site Generator
• Tailwind - For styles

Areas that could be improved

• Accesibility & semantics

• Make it pixel-perfect and color-perfect

• Improve button's pressable area on mobile

• Disable scrolling when menu opened

• Avoid using px media queries and use consistent breakpoints

• Better responsive transitions and in-between states

• Avoid layout shifts when doing transitions

• Fix layout shifts

• Increase vertical padding on two-column layouts

• Astro tailwind formatting on string class concatenation

• Avoid tailwind custom values like tracking-[0.25em]

• Better SVG accesibility

• Lazy load images and use responsive properties in a better way

• Support really small screens

• Better import statements

• Better TailWind color naming conventions

• Better navbar layout reusability

• Improve image quality

• Run rests when zooming-in

• Cross-browser testing

• Run this stuff on lighthouse

Acknowledgments

• Help from Web.dev: https://web.dev/
• Help from W3Schools: https://www.w3schools.com/graphics/svg_polygon.asp
• Help from MDN: https://developer.mozilla.org/en-US/
• Tons of help from StackOverflow: https://stackoverflow.com/
• Kevin Powell's YouTube Channel: https://www.youtube.com/@KevinPowell helped me a lot
• Kevin Powell's Responsive Design Article: https://www.freecodecamp.org/news/taking-the-ri:ght-approach-to-responsive-web-design/
• Adam Wathan's YouTube Channel: https://www.youtube.com/@AdamWathan
• Previous project: https://github.com/pedroalonsoms/insure-landing-page
• RGB to HSL color conversion: https://www.rapidtables.com/convert/color/rgb-to-hsl.html
• How to Scale SVG: https://css-tricks.com/scale-svg/
• SVGOMG - SVGO's Missing GUI: https://jakearchibald.github.io/svgomg/
• Stack Exchange: https://webmasters.stackexchange.com/
• Image Color Picker: https://imagecolorpicker.com/en
• WebP converter by TinyIMG: https://tiny-img.com/webp/
• CompressPNG: https://compresspng.com/
• TinyPNG: https://tinypng.com/
• Optimizilla Image Compressor: https://imagecompressor.com/
• W3 ORG: https://www.w3.org/
• Deque University: https://dequeuniversity.com/