← All work

Website

Shawn Taylor

A personal site that puts a friend's IT support work history and skills in one place for people hiring.

Visit the live site ↗

Kind
Website
For
A job search
Built with
HTML, CSS, JavaScript
The Experience section of Shawn Taylor's site: a role card with its dates, a promotion badge, a row of tool tags and a list of what the work involved
The brief

A friend's personal site, redone for his job search. It had to put his experience, projects and skills where someone deciding whether to hire him can find them.

What I built

A single page with sections for About, Experience, Projects, Skills, Education, Interests and Contact. It's plain HTML, CSS and JavaScript in one file, with no framework and no build step.

The opening screen and Contact carry his phone number and email, so they aren't pictured. The pictures are the real design, but his employers, schools, cities and grades are swapped for generic labels. The real ones are on the live site.

The top of the page

What a reader sees once they scroll past his name.

The top of Shawn Taylor's site below the opening screen: the navigation bar with Download CV and a theme switch, the About paragraph and the start of Experience
  1. A bar that stays put. The navigation stays fixed at the top and underlines the section you're reading.
  2. Light and dark. The page starts in whichever theme the visitor's system uses, and remembers a choice once they make one. The theme is set before anything draws, so a dark-mode visitor never gets a flash of white first.
  3. Back to the top. A round button appears once the opening screen is mostly scrolled past.
Experience

His work history.

The Experience section of Shawn Taylor's site: a role card with its dates, a promotion badge, a row of tool tags and a list of what the work involved
  1. The tools used in that job. The same tags, with the same icons, as the Skills section further down.
Projects

Work done outside the job.

The Projects section of Shawn Taylor's site: a home lab card with a status tag, tool tags and two lines on what it runs
  1. The same card as a role, with the project's name in place of the company.
  2. Two shades of background. Sections alternate between white and a pale grey.
Skills

His skills, sorted into groups.

The Skills section of Shawn Taylor's site in the light theme: skills sorted into labelled groups of tags with icons
  1. Headings that draw in. The line under each section heading grows in as the section scrolls into view, and the content fades up. For visitors whose system asks for less motion, it all just sits in place.
The dark theme

The same section after the theme switch.

The same Skills section in the dark theme, with the light logo and a sun on the theme switch
  1. The logo changes with the theme. It's drawn as two vector files, one for each, and the browser tab icon follows the system theme.
  2. The switch shows where it goes: a moon in the light theme, a sun in the dark one.
  3. Lighter grey text. Dark mode has its own shade for the muted text, so the grey lines stay readable.
Education
The Education section of Shawn Taylor's site: two cards with the credential, dates and coursework
The parts you don't see

On a phone the links fold into a full-screen menu. Opening it moves focus to the close button, Escape closes it, and focus goes back to the menu button. The icon library loads from a public CDN with an integrity hash, so the browser refuses it if the file was ever changed.

How it went

He sent it out with the résumé and cover letter I wrote for him, and got several interviews afterwards.

Have something in mind?

A few sentences about the problem is enough to start.

contact@JordanAdair.ca
Open in email