Beautify Website
Beauty Store is a vibrant, responsive e-commerce website concept designed to showcase and promote beauty products, influencers, and brand events. Built entirely with HTML, CSS, and vanilla JavaScript, the site emphasizes smooth user interactions, clean layouts, and mobile-friendly design.
Key features
- Sticky Navigation with Dropdowns: A modern navbar with smooth hover transitions and product category dropdowns.
Interactive Hero Banner: Large event banner with bold CTAs to direct users to shop or learn more.
Sliders with Custom Controls: Horizontally scrollable carousels for product launches, categories, and influencers, navigable with arrows.
Animated Promo Section: Uses JavaScript’s Intersection Observer for subtle slide-in animations on scroll.
Events Grid: A responsive grid layout highlighting upcoming brand events and workshops.
Custom JavaScript Carousel Logic: Manually coded slider functionality for seamless transitions between product cards.
Design goals
The project was created to mimic a real-world e-commerce experience while building custom UI elements without relying on frameworks. I focused on creating a smooth user journey, adding visual polish with transitions and hover states to enhance engagement.
What I Learnt
This project strengthened my front-end skills in layout structure, component styling, and scroll-based animations.
Oakline Properties
Oakline Properties is a clean, responsive real estate website designed to showcase homes in Georgia. I built it from scratch to demonstrate my front-end development skills using HTML, Tailwind CSS, and JavaScript. It includes rich UI sections such as hero sliders, featured property carousels, category cards, agent profiles, and more.
My role
I handled everything from concept to code, designing the layout, writing clean and maintainable HTML, styling with Tailwind, and adding dynamic interactions with JavaScript. I also tested responsiveness across screen sizes and ensured a consistent, polished user experience.
Tools and Technology
Figma, Github, VS Code, Netlify
Design and Development Process
I began with a simple wireframe layout in Figma, focusing on content hierarchy and mobile-first responsiveness. I used Tailwind CSS to rapidly prototype and refine the visual design, leveraging custom colors, fonts, and spacing tokens to match a real estate brand aesthetic.
I used JavaScript for interactive elements like the homepage slider and featured property carousel. The layout is fully responsive, adapting seamlessly across mobile, tablet, and desktop breakpoints.
Challenges and Areas for improvement
One challenge was building a dynamic horizontal slider that worked well across devices. I used JavaScript to calculate slide widths and translate values while keeping Tailwind’s responsive classes intact.
Another challenge was maintaining consistent spacing and alignment across complex sections like blog teasers and agent grids. I solved this by setting up consistent padding and grid utilities in Tailwind.
Future considerations
I would improve the responsiveness, especially for mobile and make it more dynamic in the future, with features like live listings and smarter search.
What I learnt
This project helped me sharpen my skills in layout design, responsive development, and component-based thinking with Tailwind. It also pushed me to think about design consistency and semantic HTML structure. In the future, I’d love to add a backend or CMS to handle live listings and client-side filters.
Rover P6 Parts Heuristic Evaluation and Re-design
A UX revamp that transforms the Rover P6 Parts website into a sleek, user-first experience where finding classic car components feels effortless.
This project assessed the usability and accessibility of a classic-car parts website and delivered a modernized redesign. The primary goal was to streamline navigation, refresh the visual style, and make the site fully inclusive for all users.
My role and tools used
As the sole UX researcher, information architect, and front-end developer, I usedNielsen Norman Group’s usability heuristics and WCAG accessibility standards to inform a GitHub-managed prototype, built with HTML, Tailwind CSS, and vanilla JavaScript.
Problem Statement, Research and Key Findings
The original site (http://www.roverp6parts.com) featured a cluttered homepage with duplicated menu items, category labels that looked clickable but weren’t, small low-quality images, no mobile-first layout, missing alt text on products, and several text/button contrasts falling below WCAG standards.
Heuristic evaluation revealed confusing navigation and wasted clicks on non-interactive elements. The visual design felt dated, with cramped layouts and minimal whitespace. An accessibility review also flagged absent image descriptions and low contrast ratios.
Design Solutions
I merged overlapping nav links into a single menu, moved secondary links to the footer, and converted each parts category into a clickable card leading to detailed lists. The look was refreshed with a larger hero image, consistent typography, and a cohesive color palette, all wrapped in generous whitespace. Accessibility fixes included WCAG-compliant contrasts, descriptive alt text for every image, and full keyboard/touch navigation.