ARCHIVE
The logo of William Pei
HomeArchive

\\DRAEKIEN UI open_in_new

@Designed@Built@Deployed@Installed
Adobe XDReact, Theme-UIChromaticnpm install draekien-ui (obsolete)
I created this styled UI library as a way to familiarise myself with front-end technologies that are being used at my workplace. Creating this library has also allowed me to explore the CI/CD pipeline offered by GitHub via Actions, for instance automatic storybook deployment, and package publishing. I went for a super clean asthetic to allow the library to be used in a wide range of situations.
A mock up of a browser window.
Slide 1 of 4
An example website made using Draekien UI
The datepicker input component in the Draekien UI Storybook
The card component in the Draekien UI Storybook
The button component in the Draekien UI Storybook
An example website made using Draekien UI
The datepicker input component in the Draekien UI Storybook
The card component in the Draekien UI Storybook
The button component in the Draekien UI Storybook
An example website made using Draekien UI
The datepicker input component in the Draekien UI Storybook
The card component in the Draekien UI Storybook
The button component in the Draekien UI Storybook

\\JIGGLE PUDDING open_in_new

@Designed@Photographed@Built@Deployed
Adobe XDNikon D750Next JSVercel
Jiggle Pudding wanted a very simple website to showcase the different flavours available, where they could be found, and how they could be contacted.I used the colours from the provided logo as the colour palette of the website, took some photos of the product, ate some delicious Purin, and put together the design.
A mock up of a browser window.
Slide 1 of 2
The landing page of Jiggle Pudding
The menu of Jiggle Pudding
The landing page of Jiggle Pudding
The menu of Jiggle Pudding
The landing page of Jiggle Pudding
The menu of Jiggle Pudding

\\BOOK MQ open_in_new

@Designed@Illustrated@Built@Deployed
FigmaunDrawReact, Express, MongoHeroku
Macquarie University Advanced Web Development final end of course group project. We were instructed to create an MVP for a website that allowed user registration and user interactions.I was responsible for the creation of the designs as well as the backend API using Express JS. I also assisted heavily in the creation of the frontend application and setup of our MongoDB.
A mock up of a browser window.
Slide 1 of 5
The landing page of Book MQ
The marketing page for Book MQ that explains how Book MQ works
The login page for Book MQ
The events page of Book MQ where you would see events created by other users
The profile page of Book MQ where you can view your own events
The landing page of Book MQ
The marketing page for Book MQ that explains how Book MQ works
The login page for Book MQ
The events page of Book MQ where you would see events created by other users
The profile page of Book MQ where you can view your own events
The landing page of Book MQ
The marketing page for Book MQ that explains how Book MQ works
The login page for Book MQ
The events page of Book MQ where you would see events created by other users
The profile page of Book MQ where you can view your own events