Skip to content
Alex Hollyman
Preview the style guide in a palette

Components

The Astro components the pages are assembled from, each shown with real content.

Masthead

The name, the rule and the role. It opens the home page and is the only place the display size is used.

Alex Hollyman

Technical lead and software engineer

Designing, building and maintaining web systems since 2008, with full ownership of the software development lifecycle.

Code 
<Masthead name="Alex Hollyman" role="Technical lead and software engineer">
  <p>Designing, building and maintaining web systems since 2008.</p>
</Masthead>

Button

Solid for the one main action in a section, outline for anything secondary. With an href it renders a link, without one a button.

View LinkedIn profile Read the full history
Code 
<Button href="https://www.linkedin.com/in/albofish/">View LinkedIn profile</Button>
<Button href="/experience" variant="outline">Read the full history</Button>

Section heading

Experience

Agency and in-house roles since 2008.

Code 
<SectionHeading title="Experience">
  <p>Agency and in-house roles since 2008.</p>
</SectionHeading>

Role

One entry in the work history. Dates sit in a left column on wide screens and above the title on narrow ones.

  1. August 2020 to June 2024

    Development Lead

    Healthcare communications agency

    Created a complete multi-tenant eLearning platform from concept to completed product, with full responsibility for its development lifecycle and direction.

  2. February 2014 to August 2016

    Senior Web Developer

    Creative agency

Code 
<Role title="Development Lead" org="Healthcare communications agency" dates="August 2020 to June 2024">
  <p>…</p>
</Role>

Panel

A raised block for content that stands apart from the running text. A short rule in the mark colour sits on its top edge.

Enhanced DBS check

Held through Scouts.

Full UK driving licence

References are available on request.

Code 
<Panel>
  <h3>Enhanced DBS check</h3>
  <p>Held through Scouts.</p>
</Panel>

Tag list

  • Alpine.js
  • Vue
  • TypeScript
  • Three.js
  • Tailwind CSS
  • Livewire
Code 
<TagList label="Frontend" items={['Alpine.js', 'Vue', 'TypeScript', 'Three.js']} />

Skill group

Backend

  • PHP
  • Laravel
  • Filament
  • Node.js
  • MySQL

Infrastructure

  • AWS
  • Cloudflare Workers
  • nginx
  • Git
Code 
<SkillGroup title="Backend" items={['PHP', 'Laravel', 'Node.js']} />

Pull quote

I love the small details and rhythms of a well-designed interface and find a strange appreciation for nicely laid out code.

Personal statement
Code 
<PullQuote source="Personal statement">
  <p>…</p>
</PullQuote>