<!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>

</a>

</animate>

</path>

</animate>

</set>

</path>

</animate>

</path>

</animate>

</path>

</g>

</svg>

George Brook

</h1>

</a>

<p>

I’m a front-end developer who enjoys building fast, accessible websites with clean, well-structured code. I care about good CSS, thoughtful UI, and making things work smoothly for users and developers alike. I like working with design systems, improving team standards, and exploring how tools like AI can support front-end work.

</p>

<br>

<p>

Most recent personal public project:

https://devtools-ecru.vercel.app

</a>

</p>

</div>

<h2>

Education

</h2>

<p>

Bachelor of Science (Physics, Upper Second Class Honours)

</strong>

<br>

University of Bath — 2012

</p>

<p>

<em>

Dissertation: Investigating Noise and Underwater Acoustics in the Deep Sea. Built MATLAB algorithms to analyze signal data.

</em>

</p>

</section>

<h2>

Professional Experience

</h2>

<h3>

Catch Digital (London, UK – Remote)

</h3>

<p>

Senior Front-End Developer

</strong>

· March 2022 – May 2025

</p>

<ul>

<li>

Designed and implemented modular front-end systems across enterprise-scale websites.

</li>

<li>

Spearheaded the adoption of atomic design principles and scalable component libraries using Storybook and modern CSS architecture (BEM).

</li>

<li>

Optimized page performance across 20+ websites, reducing load times through code splitting and performance-first tooling.

</li>

<li>

Modernized build pipelines with Webpack, GitHub Actions, and CI/CD workflows, improving developer efficiency.

</li>

<li>

Led the integration of headless CMS platforms and third-party APIs, including secure authentication flows with JWT.

</li>

<li>

Built reusable React components for e-commerce tools like shopping carts and dynamic product filters.

</li>

<li>

Mentored junior developers on JavaScript best practices and accessibility standards.

</li>

<li>

Regularly led client demos and translated complex technical solutions into business-aligned outcomes.

</li>

</ul>

<p>

Notable Projects/Clients:

</strong>

</p>

<p>

<em>

My Business Stream (Scottish Water), IOP, Norton Abrasives, Edrington Digital Platform, SES, IAB UK, TTTech Auto, Framestore, Ashmore Group

</em>

</p>

<em>

<small>

Reason for Leaving:

</strong>

Company restructure and merger.

</small>

<h3>

Zoocha Ltd (Hertford, UK – Remote)

</h3>

<p>

Mid → Senior Front-End Developer

</strong>

· March 2014 – February 2022

</p>

<ul>

<li>

Delivered front-end solutions for high-traffic websites, including public sector and finance projects.

</li>

<li>

Led compliance efforts for accessibility (AAA/WCAG) and legal standards.

</li>

<li>

Developed prototypes and MVPs using the latest front-end stacks.

</li>

<li>

Advocated for and implemented atomic design systems and reusable UI components.

</li>

<li>

Coached team members on writing scalable, maintainable code using modern HTML, CSS, and JavaScript standards.

</li>

</ul>

<p>

Notable Projects/Clients:

</strong>

</p>

<p>

<em>

Greater London Authority, TalkLondon, Ofsted Reports, FCA, Falmouth University, Visit Britain, Visit Jersey, Ofsted Parent View

</em>

</p>

<em>

<small>

Reason for Leaving:

</strong>

Transition to UK-only office model while based in South Africa.

</small>

</em>

</section>

<em>

<h2>

Technical Proficiency

</h2>

<ul>

<li>

Languages & Frameworks

</strong>

<br>

React, Next.js, Vue.js, Svelte, TypeScript, JavaScript (ES6+), HTML5, CSS3, SASS, Tailwind CSS, jQuery, Twig

</li>

<li>

Component & UI Development

</strong>

<br>

Storybook, Atomic Design, BEM methodology, Accessible UI (WCAG 2.1/2.2), Semantic HTML

</li>

<li>

Testing & Quality Assurance

</strong>

<br>

Jest, React Testing Library, Playwright, Pa11y, Lighthouse, ESLint, Stylelint, Prettier

</li>

<li>

Build & Automation Tools

</strong>

<br>

npm, Yarn, Webpack, Vite, Gulp, Grunt, Lint-Staged

</li>

<li>

Version Control & Collaboration

</strong>

<br>

Git, GitHub, Bitbucket, Azure DevOps, Jira, Confluence, Agile/Scrum, Code Reviews, Mentorship

</li>

<li>

CMS & Platforms

</strong>

<br>

Drupal, WordPress, Prismic

</li>

<li>

DevOps & Backend

</strong>

<br>

PHP, PHPStan, Composer, MySQL, Docker, DDEV, Linux, NGINX, Jenkins, AWS (Amplify, EC2, S3), Acquia Cloud, Pantheon, DigitalOcean, Vercel

</li>

<li>

Analytics & Monitoring

</strong>

<br>

Google Analytics, Sentry

</li>

</ul>

</section>

<h2>

More About Me

</h2>

<p>

When I’m not coding, I enjoy endurance running, competitive and recreational tennis, and perfecting my homemade lasagne recipe. I am also passionate about art and music, and love exploring new creative outlets.

</p>

<ul>

<li>

Codepen

</a>

</li>

<li>

Github

</a>

</li>

<li>

Artwork Portfolio

</a>

</li>

<li>

Music

</a>

</li>

<li>

Drupal Profile

</a>

</li>

<li>

</a>

</li>

</ul>

</section>

<p>

Thank you for visiting my site. I look forward to connecting!

</p>

</footer>

</em>

</header>

</main>

<em>

</em>

</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