portfolio
eCommerce Website (React, Tailwind, NodeJS, SQL)
A bubble tea kitty café eCommerce website built with React with Vite, Tailwind, MySQL, and Node. Features include responsive layout; product listings, shopping cart, and checkout process; and user account functionality with authentication. The site is integrated with a database and an AI-powered chatbot offers personalized drink recommendations.
PlotPalette Website (Python Flask, JavaScript, HTML/CSS)
The PlotPalette prototype website was built for my MSc Computer Science dissertation to enable writers to (1) outline stories with storyboard, (2) generate images of story scenes and consistent character art, and (3) generate plot ideas. Image and text generation were implemented using OpenAI’s GPT-4 and DALL·E 3 APIs and the website was built with Flask, Python, JavaScript, and HTML/CSS. The user study demonstrated that the website’s core features are useful for addressing writer’s block and providing inspiration.
Ecommerce Product Page (HTML/CSS, Vanilla JS)
Code | Website | Design by Frontend Mentor
Product page featuring lightbox product gallery and cart functionality implemented with HTML, CSS, and JavaScript based on UI designs from Frontend Mentor. Enables user to add and remove items to/from cart and view cart. Also includes side navigation menu for mobile view.
Data Component using CSS Grid and SASS | HTML & CSS
Code | Website | Design by Frontend Mentor
Age Calculator App (HTML, CSS, and JavaScript)
Code | Website | Design by Frontend Mentor
Responsive age calculator built to practice DOM manipulation. Displays age in years, months, and days after user inputs birth date and validates all inputs.
3 column preview card component using CSS Flexbox | HTML & CSS
Code | Website | Project Details | Design by Frontend Mentor
Tarot Card Reader (HTML5/CSS3, Tailwind 4, JS)
An interactive tarot card reader website built with HTML5, CSS3, Tailwind CSS 4, and JavaScript, featuring card flip animations and a responsive layout for mobile, tablet, and desktop. Users will receive a past, present, and future tarot reading when they select on three tarot cards. Card art was generated using DALL·E with custom AI prompts.
Dolce Joy UI App Design | UI/UX Design
Order Summary Card using CSS Grid | HTML & CSS
Code | Website | Project Details | Design by Frontend Mentor