Skip to Content

Anthony Yiu

I'm a passionate Front-End Developer

I craft beautiful, responsive web experiences with modern technologies. Specialising in React, TypeScript, and creating pixel-perfect user interfaces that bring ideas to life.

const developer: Developer = {
name: "Anthony Yiu",
role: "Front-End Developer",
experience: "5+ years",
passion: "Creating amazing UX",
currentFocus: ["Next.js", "TypeScript"],
hobbies: ["coding", "swimming", "coffee", "travelling"],
};

About Me

Hello! I'm a front-end web developer passionate about blending design with technology to create accessible and user-friendly products. Currently, I'm proud to work at Shelter, a leading charity dedicated to fighting for housing justice across England and Scotland. I collaborate closely with UX, QA, product, and content specialists to develop and deliver solutions that truly prioritise the needs of users, based on thorough research. Shelter is an inclusive organisation, which perfectly aligns with my core value of always supporting vulnerable people and those in need. Working at Shelter has taught me so much about making our web products more accessible.

I also contributed to the development of our design system. We follow Brad Frost's Atomic Design Methodology, building everything from tiny tokens to comprehensive smart components. To deepen my expertise, I also attended Brad Frost's Advanced Design System workshop.

Additionally, I am a Contentful Certified Professional, with specialised skills in integrating Contentful CMS into websites and optimising content creation workflows. I'm excited to be working on integrating Contentful with my personal blog, as it's fantastic to harness a headless CMS for my own project.

I love exploring new technologies and keeping up with the latest market trends. Recently, I've been diving into the new features of Next.js. I also have a keen interest in animation libraries like GSAP and Anime.js.

I love swimming, and I also play the violin, but my recent interest is in astronomy, trying to understand how our galaxy and the whole universe work. Stargazing is just amazing! 🌠

Skills

Web Development Languages

  • HTML5
  • CSS3
  • JavaScript
  • TypeScript
  • GraphQL
  • SQL

Libraries & Frameworks

  • React
  • Next.js
  • Gatsby
  • Node.js
  • Tailwind CSS
  • Styled Components
  • Bootstrap
  • jQuery

Tools & Platforms

  • Git
  • Github
  • Netlify
  • Vercel
  • Contentful
  • Sanity
  • Storybook
  • Miro
  • Jira
  • Adobe CC (ID, PS, AI)

Experience

  • Front-End Web Developer @ Shelter

    2024 - Present

    Worked closely with UX designers and cross-functional teams to enhance the user journey through accessible, user-focused components. Contributed to the design system and refactored components in a new TypeScript and NX-based monorepo. Introduced a Contentful Taxonomy to help classify over 1,500 entries. Ensured WCAG 2.1 compliance and cross-browser compatibility through testing and refactoring. Collaborated with the Data & Insights team to track user behaviour via GA4, supporting a Power BI dashboard for survey performance analysis.

    • React
    • Gatsby
    • TypeScript
    • Styled Components
    • Contentful
    • Storybook
    • Netlify
  • Freelance Front-End Developer / Graphic Designer

    2022 - 2024

    Built tailored commercial websites for local businesses using Next.js to develop full-stack applications with features like SEO optimisation, server-side rendering, and OAuth integration, delivering effective solutions that met specific client needs.

    • Next.js
    • Tailwind CSS
    • shadcn UI
    • Vercel
  • Information Technology Officer I @ CityU Hong Kong

    2013 - 2021

    Developed a recruitment platform for the Research Volunteer Scheme, helping over twenty students connect with suitable professors since 2021. Revamped the College website with a responsive design and built dynamic sections like News and Events, supported by back-end content management tools to boost engagement. Improved data processing by converting hardcoded HTML lists to XML, streamlining updates and enhancing accuracy.

    • ASP.NET
    • C#
    • MSSQL
    • Bootstrap
    • jQuery

Projects

  • MathZap

    This is a game I created to help my child learn addition when he was 4 years old. It features a simple design with two difficulty levels: easy and hard. The player’s task is to determine whether each given equation is true or false.

    • Next.js
    • Tailwind CSS
    • TypeScript
    • shadcn UI
  • AI Prompts Repo

    The site showcases and stores AI Prompts for effectively generating results from ChatGPT and other similar AI-powered tools. The user login is provided by OAuth using NextAuth.js. All prompts are created by users and stored at MongoDB, which is connected via an API empowered by Next.js App Router.

    • Next.js
    • Tailwind CSS
    • TypeScript
    • MongoDB
    • OAuth
  • CLASS, CityU Hong Kong

    The College of Liberal Arts and Social Sciences (CLASS) is one of the ten Colleges/Schools of the City University of Hong Kong (CityU). Using jQuery, ASP.NET and C# and following the house rules, I transformed CLASS website with a responsive design and added several dynamic sections to keep the pubilc posted on the latest updates about the College.

    • ASP.NET
    • C#
    • MSSQL
    • Bootstrap
    • jQuery
  • Buppy Word Game

    This project was created as an experiment to determine whether I could build something using only vanilla JavaScript. It was an enjoyable opportunity to explore the fundamentals of web development without relying on any frameworks.It was a project I created to see if I could build something using vanilla JavaScript. It was fun to explore how web development bascially works without using any framework.

    • JavaScript
    • HTML
    • CSS
  • Anthony Yiu's Portfolio Site (v1)

    This was the very first portfolio website I created. However, I believe there is always room for improvement, which is why I developed the current version you are viewing. A new "Blog" section will be added soon.

    • Next.js
    • Tailwind CSS
    • TypeScript
    • Vercel

Contact

I'm currently open to freelance or full-time positions. Feel free to contact me via the following channels.