Anthony Yiu
I craft beautiful, responsive web experiences with modern technologies. Specialising in React, TypeScript, and creating pixel-perfect user interfaces that bring ideas to life.
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 - PresentWorked 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 - 2024Built 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 - 2021Developed 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.