Frontend Development
I build frontends that feel good to use. Not just visually — structurally.
Fast initial loads, smooth interactions, layouts that hold together at every
breakpoint, accessible to keyboard and screen reader users, and code that the
next developer can read without needing a guide. The browser is an unforgiving
runtime and a beautiful one. I know how it works and I use that knowledge to
build interfaces that perform as well as they look.
I have shipped frontends across the full spectrum — static HTML and CSS sites
with hand-crafted animations, React and Next.js applications with complex state
and server-side data fetching, progressive web apps with offline support, and
motion-rich portfolios with scroll-driven GSAP sequences. The approach changes
based on what the project needs. The standard does not.
What's included
HTML5 and semantic markup
Proper semantic structure — not a soup of <div> tags. Heading hierarchies
that make sense, landmark regions, meaningful element choices, ARIA attributes
where native semantics fall short. Markup that works without CSS, which means
it works everywhere CSS might fail or be overridden — screen readers, print
stylesheets, RSS parsers, search engine crawlers.
CSS architecture and responsive design
Mobile-first layouts built with CSS Grid and Flexbox. Fluid typography, custom
properties, logical properties, and spacing systems that scale consistently
without magic numbers scattered everywhere. No framework required for clean,
maintainable CSS — but Bootstrap and Tailwind when they genuinely accelerate
delivery without creating a maintenance burden.
JavaScript (ES6+)
Modern JavaScript written without a framework when a framework is not needed.
DOM manipulation, event delegation, Fetch API and async/await, modules,
destructuring, optional chaining, Promises, local and session storage,
Intersection Observer for scroll-based behaviour, ResizeObserver, Web Workers
for heavy computation off the main thread. I know the platform — not just
the abstractions on top of it.
React.js and component architecture
Functional components, hooks — useState, useEffect, useRef, useCallback,
useMemo, useContext, useReducer. Custom hooks that encapsulate and reuse
logic cleanly. Component design that is easy to test, easy to extend, and
easy to replace. Props typed with TypeScript. State management with React
Context, Zustand, or Redux depending on what the scale demands. React Query
or SWR for server state — keeping remote data and UI state properly separated.
Next.js and modern web architecture
App Router and Pages Router — I have worked in both. Server components,
client components, and knowing which is which. Static generation, server-side
rendering, incremental static regeneration, and edge rendering — the right
strategy chosen for the right page, not applied uniformly because it was
the default. Next.js Image for automatic optimisation. Next.js Font for
zero-layout-shift font loading. API routes for lightweight backend needs
that do not warrant a separate service.
TypeScript
End-to-end typing — component props, API response shapes, form values, event
handlers. Union types, generics, utility types, discriminated unions for
exhaustive state modelling. TypeScript as a design tool: writing the types
first forces clarity about what the data actually looks like before any
implementation begins.
GSAP animations and motion design
Scroll-driven animations with ScrollTrigger. Timeline sequences. Stagger
effects. Text animations. SVG morphing. All of it compositor-thread-friendly,
all of it tested on low-end hardware. I have shipped motion-rich interfaces
in production — including a portfolio with complex GSAP sequences that still
passes Core Web Vitals — and I know exactly where animation hurts performance
and how to prevent it. Motion that communicates, not motion that distracts.
Progressive web apps
Service Workers for offline fallback and background sync. Web App Manifest
for installability. Cache strategies — cache-first, network-first, stale-
while-revalidate — chosen based on how frequently the content changes and how
much it matters if it is stale. Push notifications. I have shipped a real-time
PWA to production — Lost & Found — with Firebase Realtime Database, offline
fallback, and native-style install behaviour.
Accessibility
WCAG 2.1 AA as a floor, not a ceiling. Focus management, keyboard navigation,
skip links, visible focus indicators, colour contrast ratios verified
programmatically, form labels associated correctly, error messages that are
useful and screen-reader-accessible, modal and drawer patterns that trap focus
correctly and restore it on close. I have shipped WCAG-aligned interfaces in
production. Accessibility is built in from the first line of markup — not
audited at the end and patched.
Performance
Lighthouse audits as a routine part of development, not a final check before
launch. Code splitting, lazy loading, dynamic imports, image optimisation,
font loading strategy, render-blocking resource elimination, preloading and
prefetching critical resources, bundle analysis and dead code elimination.
Core Web Vitals — LCP, INP, CLS — treated as acceptance criteria. I have
implemented frontend rendering optimisations that produced measurable
improvements in page performance and conversion on live production surfaces.
GitHub API and third-party integrations
Live data from public APIs integrated into static or server-rendered frontends.
GitHub Stats API, REST and GraphQL APIs, OAuth flows, webhook receivers. I
built live GitHub integration into my own portfolio and know how to handle
rate limiting, loading states, and error boundaries gracefully.
Cross-browser and cross-device testing
Chrome, Firefox, Safari, Edge — and the mobile versions of each. Real device
testing for touch behaviour, viewport sizing, and safe area insets on notched
phones. Baseline progressive enhancement so the core experience works
everywhere, even when advanced features do not.
Deliverables
Clean, commented, version-controlled code on GitHub. A component library
structured so your team can extend it. Build configuration ready for CI/CD
deployment. Lighthouse report before handoff. Documentation covering
architecture decisions, environment setup, and deployment steps. A frontend
you can hand to another developer without an explanation session.
Good fit if you need
A React or Next.js frontend built with TypeScript and real architecture. A
static website with motion and personality. A PWA that works offline and
installs like a native app. A performance overhaul that moves your Core Web
Vitals scores. A frontend that is accessible out of the box, not retrofitted.
A landing page that loads in under a second and converts. A design system
implemented in React components that match the Figma file exactly.
Not a fit if you need
A WordPress theme or Shopify template customisation. A no-code page builder
implementation. If a template genuinely solves your problem, I will tell you
rather than overbuild it.