Intro/Motivation

Tech Stack

I chose to use Astro as the JavaScript framework, its focus on good web fundamentals and design focus made it the most logical choice. With Astro I used Tailwind for my CSS aand Svelte for core UI elements. I felt that these matched the efficiency and content focus of Astro. I also stayed with the astro default of Sharp for image processing.

I have used Markdown to enable better content formatting for my projects and github for version control.

Architecture Design

• Folder Structure src/ with components layouts pages content and styles

• Content management Astro content collections with schemas for projects and dynamic routing

• Core components Header, footer, baselayout, themetoggle, and secondary

• Pages Home, Projects, about, content

Design

The primary focus of my design decision making has been ensuring that content is easy to engage with while meeting Accesibility standards. To these ends I have attempted to adhere to the Web Content Accesibility Guidelines (WCAG) especially with regards to colour choices and contrast levels of content to the background.

Website width has been kept narrow for desktop viewers to allow consistent experience between different screen sizes. Content also automatically adjusts for mobile devices and the top navigation menu switches to a more appropriate burger menu.

I have also implemented light and dark themes to accommodate user preferences. Tailwind variables have been established so that when a selection is made content switches theming automatically. I have also implemented detection of device defaults so minimal user setting is required.

Hosting and Optimisation

• Deployment Github

• Custom Domain Cloudflare based custom domain, DNS configuration, CNAME

• SEO Auto generate sitemap-index and robots.text

• Analytics Cloudflare web Analytics

• Formspree Use with env and honeypot variable