Design of Veranda Custom Homes website, built with Astro, SCSS and is deployed as a fully static site.
Astro Components
Astro Components are the building blocks of an Astro website. They allow you to create reusable pieces
of UI that can be composed together to build complex layouts and functionality. They are component agnostic
and could be built using any framework (React, Vue, Svelte, etc.) or no framework at all.
We use plain Astro components and React components to build various parts of the website.
Scoped styles are used within the components to ensure that styles do not leak out and affect other parts of the website.
View the Astro Components Documentation Page
Astro Content Collections
Astro Content Collections are the primary way to manage, query and ensure type-safety for content in an Astro project.
We use markdown files to provide the content.
View the Astro Content Collections Documentation Page
Astro Images
Astro Image/Picture Components are used to display responsive modern format images on websites. They optimized the image
to image to reduce file size, improve performance, add lazy loading and reduce cumulative layout shift.
View the Astro Image/Picture Components Documentation Page
SCSS Tokens
SCSS Tokens in one file are used to customize the design (colors, fonts, etc.) of the website. This allows for easy updates to the design system
by changing the values in a single location.
