CycleSam-Site/src/pages/about.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import { Image } from 'astro:assets';

import AboutImage from '../images/about/about.jpg';

const title = 'CycleSam | About';
const description = 'About CycleSam';
const permalink = `${Astro.site.href}about`;
---

<BaseLayout title={title} description={description} permalink={permalink} current="about">
  <div class="container">
    <h1>About Me</h1>
    <figure class="about-image">
      <Image src={AboutImage} alt="Photograph of myself with a bright orange fixie bicycle" width="300" />
    </figure>
    <p>You may know me as previously being @MCRCycleSam on Twitter when I lived in Manchester and campaigned alongside local groups for changes to our streets to make them more walking and cycling friendly.</p>
    <p>I named the <a href="https://beeactive.tfgm.com/terminology-explained/">Sparrow Crossing</a>.</p>
    <p>Now exiled to Lancashire, I am to continue the campaigning up here, although things are starting from a much less advanced starting point up here.</p>
    <p>I am a software developer by trade. You can use the social links on this site to find my content relating to that.</p>
  </div>
</BaseLayout>

<style>
  .about-image {
    float: right;
    margin: 0em -7em 2em 2em;
    max-width: 300px;
  }

  .about-image img {
    border-radius: 8px;
    margin-bottom: 1.5em;
  }

  @media (max-width: 1020px) {
    .about-image {
      float: none;
      margin: 0 auto 2em;
    }
  }
</style>