<!DOCTYPE html>

<head>

<title>

George Brook – Front-end Developer | CV & Portfolio

</title>

</head>

<body>

</canvas>

</animate>

</path>

</animate>

</path>

</svg>

</button>

</animate>

</animate>

</animate>

</set>

</set>

</set>

</path>

</animate>

</animate>

</animate>

</set>

</set>

</set>

</path>

</animate>

</animate>

</animate>

</set>

</set>

</path>

</g>

</animateMotion>

</path>

</svg>

</label>

<main>

<h1>

</animate>

</path>

</animate>

</set>

</path>

</animate>

</path>

</animate>

</path>

</g>

</svg>

George Brook

</h1>

<p>

I'm a Front-End Developer with over 10 years of experience building responsive, accessible, and high-performance web interfaces. I have a strong passion for structured, reusable components and maintainable front-end architecture. In my free time, I enjoy playing tennis.

</p>

</div>

</header>

<h2>

Education

</h2>

<p>

Bachelor of Science (Physics, 2:1)

</strong>

<br>

University of Bath — 2012

</p>

<p>

A Levels

</strong>

<br>

Wymondham High School — 2008

</p>

<p>

Certifications

</strong>

<br>

Acquia Certified Drupal Front End Specialist (Drupal 8 & 9)

</p>

</section>

<h2>

Professional Experience

</h2>

<h3>

Company: Catch Digital (London, UK, remote)

</h3>

<p>

Senior Front-End Developer

</strong>

· March 2022 – May 2025

</p>

<p>

Clients:

</strong>

IOP, TTTech Auto, Framestore, Ashmore Group, Countryside Ski & Climb, My Business Stream, Norton Abrasives, Highland Park Whisky, Wyoming Whiskey, SES, IAB UK, Edrington Distilleries, The Macallan

</p>

<ul>

<li>

Built modular front-end systems for enterprise-scale sites using atomic design and Storybook.

</li>

<li>

Optimised performance across several websites using code splitting and CI/CD.

</li>

<li>

Led JWT-secured integrations with headless CMS's and REST API's.

</li>

<li>

Developed reusable e-commerce components and workflows.

</li>

<li>

Mentored junior developers and led accessibility compliance efforts.

</li>

<li>

Developed large webforms and user journeys for complex applications to large organisations.

</li>

</ul>

<p>

Key Projects:

</strong>

</p>

<p>

<em>

My Business Stream Portal

</em>

– React-based self-service portal with JWT auth and modular components.

</p>

<p>

<em>

The Macallan Global Website

</em>

– Front-end support for scalable Drupal/Next.js JSON API build.

</p>

<p>

Reason for Leaving:

</strong>

Company restructure / merger.

</p>

<h3>

Company: Zoocha Ltd (Hertford, UK and remote)

</h3>

<p>

Mid/Senior Front-End Developer

</strong>

· March 2014 – May 2022

</p>

<p>

Clients:

</strong>

Greater London Authority, Ofsted, FCA, Falmouth University, Visit Britain, BFBS, Royal Marsden, Visit Jersey, National Forest, Topdeck Travel

</p>

<ul>

<li>

Accessible front-end development (WCAG AAA) for public/financial sites.

</li>

<li>

Led prototyping efforts using modern JS/CSS stacks.

</li>

<li>

Advocated for modular UIs and component-driven workflows.

</li>

<li>

Mentored devs and championed performance tooling.

</li>

</ul>

<p>

Reason for Leaving:

</strong>

Company returned to UK-only office model; remained in SA.

</p>

</section>

<h2>

Fun Stuff

</h2>

<ul>

<li>

Chrome Devtools built in VueJS/Nuxt

</a>

</li>

<li>

React/NextJS Realtime DB with QR code to chat on same Wifi

</a>

</li>

<li>

CSS Seamless Animated Text

</a>

</li>

<li>

CSS Digital Countdown

</a>

</li>

<li>

Leaflet Map Clustering

</a>

</li>

<li>

Parallax Stars with JavaScript

</a>

</li>

<li>

JavaScript Diamond Pattern

</a>

</li>

</ul>

</section>

<h2>

Technical Proficiency

</h2>

<ul>

<li>

Front-End:

</strong>

React, Next.js, TypeScript, JS (ES6+), VueJS, HTML, CSS, SASS, Twig

</li>

<li>

Workflow:

</strong>

Webpack, Git, CI/CD, GitHub Actions, Agile, Atomic Design

</li>

<li>

Platforms:

</strong>

Drupal, Headless CMS, REST/JSON APIs

</li>

<li>

Accessibility:

</strong>

WCAG 2.1/2.2, BEM, Semantic HTML

</li>

<li>

DevOps:

</strong>

Docker, DDEV, Linux, NGINX, PHP, MySQL

</li>

</ul>

</section>

<h2>

More About Me

</h2>

<p>

When I’m not coding, I enjoy running long distances, playing tennis (both competitively and for fun), and perfecting my homemade lasagne recipe. Here are some other links.

</p>

<ul>

<li>

Artwork

</a>

</li>

<li>

Music

</a>

</li>

<li>

Drupal

</a>

</li>

<li>

</a>

</li>

</ul>

</section>

<p>

</p>

</footer>

</main>

</body>

</html>

element.style {

}

:root {

--bg-color:#f6f6f6;

--text-color:#000000;

--link-color:#006a60;

--link-hover-bg:#8df3d0;

--link-hover-color:#000000;

--border-color:#d9d9d9;

--content-bg:#ffffff;

--transition-duration:1s;

}

theme.css

[data-theme="dark"] {

--bg-color:#121212;

--text-color:#ffffff;

--link-color:#6aefff;

--link-hover-bg:#404040;

--link-hover-color:#ffffff;

--border-color:#4a4a4a;

--content-bg:#1b1b1b;

}

dark-mode.css

html, body {

line-height:1.5;

overflow-x:hidden;

-ms-overflow-style:none;

scrollbar-width:none;

transition:background-color var(--transition-duration) ease-in-out, color var(--transition-duration) ease-in-out;

}

base.css

body {

font-family:"Roboto", sans-serif;

font-optical-sizing:auto;

font-weight:300;

font-style:normal;

font-size:20px;

background-color:var(--content-bg);

width:90%;

margin:0 auto;

color:var(--text-color);

}

global.css

header {

display:flex;

justify-content:flex-start;

align-items:center;

gap:20px;

margin-bottom:30px;

}

layout.css

header img {

width:100px;

height:100px;

border-radius:50%;

}

layout.css

.name {

position:relative;

line-height:1;

font-size:22px;

margin:0;

letter-spacing:2px;

font-style:normal;

display:flex;

flex-direction:column;

gap:10px;

}

typography.css

.name span {

display:inline-block;

margin-bottom:10px;

}

typography.css

.name small {

display:flex;

flex-direction:row;

gap:6px;

align-items:center;

font-size:12px;

}

typography.css

.name svg {

width:20px;

height:20px;

}

typography.css

.content {

padding:30px 0;

background-color:var(--content-bg);

transition:background-color var(--transition-duration) ease-in-out;

}

content.css

h1, h2, h3, h4, h5, h6 {

font-weight:400;

font-style:normal;

}

typography.css

h3 {

margin-bottom:0;

margin-top:30px;

font-style:italic;

}

typography.css

h4 {

margin:0;

}

typography.css

small {

font-size:15px;

}

typography.css

a {

position:relative;

color:var(--link-color);

transition:all var(--transition-duration) ease-in-out;

}

links.css

a:hover {

color:var(--link-hover-color);

background-color:var(--link-hover-bg);

}

links.css

a:focus {

color:#000000;

outline:none;

}

links.css

a:active {

color:#171717;

}

links.css

a:visited {

color:var(--text-color);

}

links.css

li {

margin-bottom:7px;

}

lists.css

footer ul {

padding:0;

}

footer.css

footer ul li {

display:inline-block;

}

footer.css

footer a {

padding:10px;

display:flex;

align-items:center;

justify-content:center;

}

footer.css

.footer svg {

width:33px;

height:33px;

}

footer.css

.sr-only {

border:0 !important;

clip:rect(1px, 1px, 1px, 1px) !important;

-webkit-clip-path:inset(50%) !important;

clip-path:inset(50%) !important;

height:1px !important;

margin:-1px !important;

overflow:hidden !important;

padding:0 !important;

position:absolute !important;

width:1px !important;

white-space:nowrap !important;

}

accessibility.css

.theme-toggle {

position:fixed;

bottom:20px;

right:20px;

background:var(--content-bg);

color:var(--text-color);

border-radius:50%;

width:50px;

height:50px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

transition:all var(--transition-duration) ease-in-out;

z-index:1000;

border:1px solid var(--border-color);

}

theme.css

.theme-toggle:hover {

transform:scale(1.1);

}

theme.css

.theme-toggle .moon-icon {

width:25px;

height:25px;

}

theme.css

.theme-toggle .sun-icon {

width:20px;

height:20px;

}

theme.css

.theme-toggle .moon-icon, .theme-toggle .sun-icon {

transition:opacity var(--transition-duration) ease-in-out;

}

theme.css

.profile-image {

transition:opacity var(--transition-duration) ease-in-out;

}

theme.css

@media (min-width: 1200px) body {

width:1200px;

margin:0 auto;

background-color:var(--bg-color);

}

responsive.css

@media (min-width: 1200px) header {

display:flex;

justify-content:flex-start;

flex-direction:row;

gap:26px;

align-items:center;

}

responsive.css

@media (min-width: 1200px) header img {

width:150px;

height:150px;

}

responsive.css

@media (min-width: 1200px) .name {

font-size:45px;

}

responsive.css

@media (min-width: 1200px) .name small {

font-size:18px;

}

responsive.css

@media (min-width: 1200px) .content {

padding:55px 50px;

border-top-width:0;

border-bottom-width:0;

}

responsive.css

position

margin

border

padding

2043×21