This website was developed for a security company using Astro, and I thoroughly enjoyed the process. It allowed me to explore the framework’s documentation in depth.
The client initally requested a single-page site with some key details of their services. Later, a contact page with a Netlify-integrated form was added.
I experimented with Tailwind CSS and added SASS to streamline the design process. This was my first experience with Tailwind, and I found it invaluable for quickly structuring pages and allowing for more focus on functionality. SASS is a scripting language that I am very familiar with and enjoy the organised structure of its indented syntax.
Throughout this project, I implemented layouts, components and frontmatter to enhance functionality. Layout and component files minimized code duplication by encapsulating the head, navigation, and footer. In addition, a card component was used to effectively produce the ‘services’ data objects.
This site was built with speed and efficiency as top priorities, achieving 100% in performance, accessibility, best practices and SEO on Google’s PageSpeed Insights. SEO was managed using frontmatter in the head component by including fields for descriptions, social images, and canonical URLs on each page. Accessibility was addressed with aria-labels, tab indexing, and a ‘skip to content’ button. The Web Accessibility Evaluation Tool was used to ensure any errors relating to this were properly resolved.