These projects showcase my passion for creating beautiful and functional digital experiences. I specialise in building responsive, user-friendly sites using modern web technologies such as Next.js, React, Astro and Tailwind. I'm constantly expanding my skillset to deliver custom solutions.

  1. desktop view of Pluto Power

    Pluto Power

    • Won the Tech Zero x Kraken Hackathon in July 2024 with a project that encourages neighbours to share and expand solar capacity, resulting in a £20,000 prize and mentorship from Octopus Energy.
    • Currently building an open-source product in Next.js, integrating a Mapbox community map and the Google Solar API.
  2. desktop view of Take Back Water

    Take Back Water

    • Employed as a contractor within a team of developers.
    • Worked on accessibility and performance, reaching a score of 100 across all categories on Lighthouse.
    • Developed and tested new React components with Storybook and SASS.
    • Upgraded the SEO of the site with meta tags.
    • Improved my Git workflow and team-working skills.
  3. desktop view of London Brutalist Map

    London Brutalist Map

    • Improved developer and user experience by rebuilding my previous HTML project in React.
    • Deployed a multi-page site with React Router for navigation and offers various ways to engage with the data, including custom markers for enhanced interactivity.
    • Used a mixture of Tailwind CSS and SASS, to create a consistent and accessible design.
    • Responded to user feedback by adding a custom marker to handle hover events.
  4. desktop view of Fare Free London

    Fare Free London

    • Freelance project for a public transport campaign.
    • Used Next.js and Headless Wordpress to build a fast, secure and easy to update site.
    • Debugged an issue with the security of the signup form, moving requests to the server-side through an API route to Airtable.
    • Improved Lighthouse performance score from 67 to 96 by using Next/Image for image optimisation and dynamic imports for lazy loading.
    • Responded to public user feedback in Github Issues.
  5. desktop view of Right to the City

    Right to the City

    • Freelance project for a festival in London.
    • Implemented a custom Tailwind utility for variable font settings.
    • Built a sign up form using Material Design principles, linked it to an Airtable spreadsheet. This involved debugging the JSON data using Postman.
    • Added a back to top button to improve navigation on the site.
  6. desktop view of Vital Signs

    Vital Signs

    • Freelance project for a group of NHS workers.
    • Used dummy content for testing, addressing issues like image errors and font loading by referring to the Next.js docs.
    • Used Advanced Custom Fields to create a PDF uploader in the Wordpress editor.
    • Created a guide for the client to help them edit site content easily.
    • Used Wordpress webhooks connected to Vercel Deploy Hooks to trigger a site rebuild when posts are created, updated or deleted.
  7. desktop view of Daily Challenges

    Daily Challenges

    • Learnt to use local storage to store visited sites for a day at a time.
    • Responded to user feedback by changing the colour scheme and adding CSS animations for visual interest.
    • Added an introduction screen to improve usability.
    • Used Google Lighthouse to improve the speed and accessibility of the site, achieving a score of 100 across all categories to improve user experience.
  8. desktop view of Typespotting

    Typespotting

    • Used a mind map of existing typography games to come up with the idea for the project (Where's Wally but for Cooper Black).
    • Created SVG graphics using Adobe Illustrator and optimised images with an Image Optimiser app, ensuring the game was responsive and fast.
    • Planned complex JavaScript functions with pseudocode to manage game logic.
  9. desktop view of London Frontend Jobs

    London Frontend Jobs

    • Explored React and Tailwind for rapid prototyping.
    • Used an NPM package to add confetti when all of the sites have been opened.
    • Added animations with Framer Motion.
  10. desktop view of Deployment Dashboard

    Deployment Dashboard

    • A learning project for a new Python framework, FastHTML.
    • Used Tailwind via CDN to build a working prototype.
    • Made extensive use of the FastHTML Docs and Discord to understand features such as a built-in SQLite database.
  11. desktop view of Knowledge Wiki

    Knowledge Wiki

    • Used Astro and Starlight to build a fast and sustainable documentation site.
    • Applied Python scripts to edit existing Markdown files and extract collections of .webloc files to new Markdown files.
    • Prioritised an accesible format for my knowledge, which I have already shared with peers and those seeking to learn more about new technologies.

Technologies I use: