Shirley Chauffeurs

Shirley Chauffeurs is a family-run business known for its exceptional service and meticulous attention to detail. The business takes great pride in ensuring its role in the customer’s special day is as perfect as possible.

I was commissioned to build an online presence that would reflect their professional standards and build trust in their expertise.

Experience

My Role
- Branding, Visual design, User experience
- Rapid Prototyping
- Full development
- Prepare visual assets and populate content
- Publish Astro site to Netlify and maintain updates
Tools
- Visual Studio Code
- Adobe Photoshop, Lightroom, Illustrator
- npm, git, github
- Netlify
Development
- Astro, MDX Content management
- Typescript, Alpine.js and vanilla js
- Motion (JS Animation library)
- Tailwind, Utopia, CSS, PostCSS

Performance

The live site performs well and adopts a variety of best practice methods to remain optimized. The site is built in Astro, a performant SSG. It deploys to Netlify via a linked repository on GitHub and makes use of Netlify’s serverless form handling.

The Chrome Lighthouse results are excellent.

Site optimisation was a key focus during development, and the effort has produced some excellent Lighthouse results

Call to action — 100% achieved in 3 out of 4 categories
Google Chrome Lighthouse

UX/UI

The site is presented in a light or dark theme based on the users device preference. This can also be switched with the header icon which visually toggles from sun to moon. All of the colours in the site are defined via CSS variables and are overwritten when the attribute data-theme=dark is present in the root <html> tag.

@layer base {
  :root {
      --surface-10: 0deg 0% 100%; /* #FFFFFF */
      --surface: 180deg 0% 98.4%; /* #FBFBFB */
      --surface--10: 80deg 10% 95%; /* #F7F8F8 */
      --surface--20: 80deg 5% 92%; /* #EBECEA */
      --surface--100: 209deg 61% 10%; /* #0A1A29 */
      
      ...

      /* Semantic Tailwind variables */
      --color-surface-raised: var(--surface-10);
      --color-surface: var(--surface);
      --color-surface-sunken: var(--surface--10);
      --color-surface-sunk: var(--surface--20);
      --color-surface-bedrock: var(--surface--100);
  }

  /* Alpine will set data-theme value based on (prefers-color-scheme: dark) */
  :root[data-theme='dark'] {
      --surface-10: 240deg 12% 20%; /* #2D2D39 */
      --surface: 240deg 13% 14%; /* #1F1F28 */
      --surface--10: 240deg 13% 10%; /* #16161D */
      --surface--20: 240deg 13% 8%; /* #121217 */
      --surface--100: 240deg 13% 6%; /* #0D0D11 */
      ...
  }
}

These semantic variables are then referenced in tailwind.config.cjs, and the human-friendly naming keeps the file readable.

The resultant Tailwind class would be bg-surface-sunken or bg-surface. This design system ensures consistency when adding new elements, and any edits to the colour values will cascade throughout the CSS.

surface: {
    raised: 'hsl(var(--color-surface-raised) / <alpha-value>)',
    DEFAULT: 'hsl(var(--color-surface) / <alpha-value>)',
    sunken: 'hsl(var(--color-surface-sunken) / <alpha-value>)',
    sunk: 'hsl(var(--color-surface-sunk) / <alpha-value>)',
    bedrock: 'hsl(var(--color-surface-bedrock) / <alpha-value>)',
    overlay: 'hsl(var(--color-surface-overlay) / <alpha-value>)',
},

Screens

Tap any image to view in more detail. Pinch or mouse scroll to zoom in.

Light and dark themes are available. A user’s system preference is detected using vanilla JS, and then managed with Alpine.js and local storage.

Dark mode

UX

Sample customer quote — Relevant testimonals are sorted to the front of the list using key words, and then limited to five. Selected words are highlighted with a svg underline to add emphasis and make the recommendataion appear more personable.

---
id: 1
title: 'Pleasurable and *utterly* professional'
referee: 'Adele and Rich'
tags:
    - 'Gordon'
---

Just a quick note to say what a fantastic job your driver and Gordon did for us on our wedding...

A custom helper function parses titles that have been wrapped with asterisks for emphasis. This function wraps *utterly* with the Underlined component and applies an absolutely positioned SVG, thereby simplifying the MDX files.

// Helper function to parse underlined titles
export function parseTitle(title) {
    return title.split(/(\*[^*]+\*)/).map((part, index) => 
        part.startsWith('*') && part.endsWith('*')
            ? { type: 'emphasized', content: part.slice(1, -1), key: index }
            : { type: 'regular', content: part, key: index }
    );
}

Learning points

This was a freelance project that I delivered independently. It was a good introduction to Netlify’s automated deployments and expanded my knowledge of Astro. User preferences and themes are now managed using local storage rather than cookies.

A lot of attention was given to site optimization, and the effort has produced some excellent Lighthouse scores.

Scope for improvement

All of the site’s colours are set with HSL variables and made available as Tailwind classes. This allows for precise control, but it results in a significantly large base CSS file. It also requires an extensive tailwind.config.cjs file, which can be challenging to maintain. The next phase would be to explore Tailwind CSS v4.0 to take advantage of its improved handling of CSS variables.

Final thoughts

The site is live and can be viewed at Shirley Chauffeurs.