A collection of my recent work showcasing my frontend development
skills
My World Clock App
A responsive world clock application built with vanilla JavaScript
that displays real-time information across multiple global time zones
simultaneously. The app features automatic location
detection using the browser's Geolocation API and provides a
searchable dropdown of major cities organised by continent.
Key Features
Automatic location detection using Geolocation API
Searchable dropdown with cities organised by continent
Real-time updates every second with smooth transitions
Displays both 12-hour and 24-hour time formats
Fully responsive design across all devices
Technical Highlights
DOM Manipulation: Dynamic updates
without page reloads
Event Handling: Change listeners for
interactive city selection
Time Libraries: Moment.js and Moment
Timezone for accurate conversions
Semantic HTML: Organized select elements
with optgroup tags
A clean, modern weather application built entirely with
vanilla JavaScript that provides real-time weather data and
multi-day forecasts using the OpenWeatherMap API. The app
features automatic location detection, global city search, and
displays comprehensive weather metrics including temperature,
humidity, wind speed, and descriptive conditions.
An AI-powered recipe generator that transforms user-provided
ingredients into complete, healthy, budget-friendly recipes
using the SheCodes AI API. This application demonstrates
advanced API integration by sending ingredient lists to an AI
model and parsing the structured response to display
comprehensive recipe information, including ingredients,
instructions, cooking time, and serving suggestions.
Key Features
AI-generated recipes based on available ingredients
Smart prompt engineering for healthy, budget-friendly
meals
Complete recipe display with instructions and cooking
times
Typewriter effect for engaging content reveal
Input validation and loading states
Technical Highlights
AI Integration: SheCodes AI API with
proper authentication
Prompt Engineering: Crafted prompts for
consistent outputs
String Parsing: Processes AI-generated
text for displays
Form Handling: User input validation and
submission management
HTML5CSS3JavaScript ES6SheCodes AI APIAxios/Fetch APIAPI AuthenticationGit/GitHubNetlify
A creative writing application that leverages artificial
intelligence to generate unique, romantic poems based on
user-provided topics and themes. Built with the SheCodes AI
API, this project demonstrates proficiency in AI integration,
prompt engineering, and creating engaging user experiences
with an elegant typewriter effect that reveals poetry line by
line.
Key Features
AI-powered poetry generation using SheCodes AI API
Custom topic input for personalized poems
Romantic verse specialization
Typewriter animation for dramatic reveal
Clean, minimalist interface focused on content
Technical Highlights
Prompt Engineering: Crafted prompts for
poetic, consistent output
Animation: JavaScript-based typewriter
effect with timing control
Async Operations: Promise handling for
API responses
UI/UX: Engaging visual feedback during
generation
HTML5CSS3JavaScript ES6SheCodes AI APIAxios/Fetch APIAPI AuthenticationGit/GitHubNetlify
An intelligent command-line travel planning assistant built in
Python that creates personalized trip itineraries by combining
real-time weather data with AI-generated recommendations. This
project demonstrates advanced Python programming concepts
including object-oriented design, API integration, and
terminal-based UI enhancement using the Rich library for
beautiful, colourful output.
Key Features
Interactive command-line interface for travel planning
Dual API integration: OpenWeather + AI generation
Weather-aware itinerary generation
Rich library for colourful terminal output
Supports custom trip duration and provides estimated cost
Technical Highlights
Object-Oriented Programming: Classes for
organizing data and logic
API Integration: RESTful API calls with
error handling
Data Structures: Dictionaries and lists
for travel information
JSON Processing: Parsing API responses
Rich Library: Styled console output with
colours and formatting
Note: This is an interactive Jupyter Notebook on Google Colab. Run it directly in your browser!
A fully responsive, accessible, and SEO-optimized travel website
showcasing Cancun, Mexico and the wider Riviera Maya region. Built
entirely with vanilla HTML and CSS as part of the SheCodes Responsive
Add-on course, this project demonstrates production-ready code with a
strong focus on mobile-first design, web accessibility, and Lighthouse
performance - achieving perfect scores of 100/100 for Performance,
Accessibility, and SEO on desktop.
Key Features
Fully responsive mobile-first design supporting 320px through 1600px+
Interactive embedded Google Maps and YouTube video content
Photo gallery showcasing Cancun destinations, food, and culture
WCAG 2.1 AA accessibility compliance with skip links and ARIA labels
PWA-ready with a web app manifest for installability
SEO structured data via JSON-LD Schema.org markup
Technical Highlights
CSS Grid & Flexbox: Card component system using
grid-template-rows: auto 1fr auto for consistent alignment
CSS Custom Properties: Centralized design tokens for
colour, spacing, and typography across all breakpoints
Performance: DNS prefetch, preconnect, lazy loading,
fetchpriority hints, and async image decoding
Semantic HTML5: Proper use of
<header>, <main>,
<section>, <nav>, and
<footer>
A weather application rebuilt from scratch using React and Vite — marking
the transition from vanilla JavaScript into modern component-based
development. This project demonstrates core React skills including
component architecture, hooks for state and side effects, and API
integration, using the SheCodes Weather API to deliver real-time weather
data with a fast, optimised Vite build pipeline.
Key Features
Real-time weather data via the SheCodes Weather API
Component-based architecture separating search, display, and
forecast concerns
City search for any location worldwide
Current conditions including temperature, humidity, and wind speed
Fully responsive layout across mobile and desktop
Technical Highlights
React 18: Functional components with
useState and useEffect hooks
Vite: Fast development server with Hot Module
Replacement (HMR) and optimised production builds
API Integration: Axios/Fetch for SheCodes Weather App
calls with async/await and error handling
Component Thinking: First project applying React's
reusable, self-contained component model
ESLint: Configured linting for consistent,
maintainable code quality
A fast, modern dictionary web app built with React 18 and Vite that goes
beyond a basic word lookup tool. Search any word to receive instant
definitions grouped by part of speech, a custom-built pronunciation audio
player, example sentences, related photography sourced from the Pexels
API, and a curated random word on load. Built as part of the SheCodes
React Add-on course, this project showcases advanced component
architecture, triple API integration, and a rigorous performance
optimisation journey that improved the mobile Lighthouse score from 51
to 82.
Key Features
Word search with input validation, clear button, and a random
default word on load
Definitions grouped by part of speech with example sentences
Custom-built pronunciation audio player with play/pause and
progress bar
Related Pexels photo grid with skeleton loading state and
photographer attribution
Full error handling for API failures, timeouts, and invalid input
WCAG-compliant accessibility: semantic HTML, ARIA labels, keyboard
navigation, and screen reader support
Technical Highlights
Triple API Integration: SheCodes Dictionary API,
DictionaryAPI.dev (pronunciation audio), and Pexels (photography)
Component Architecture: 9 single-responsibility
components including AudioPlayer, DefinitionList, PhotoGrid, and
ErrorMessage
Performance Optimisation: Lighthouse mobile score
improved from 51 → 82 through 12+ targeted fixes including
Bootstrap removal, image sizing, preconnect hints, and GPU-composited
animations
Design System: CSS Custom Properties design token
approach for colours, spacing, and typography — consistent by default
PropTypes: Runtime type checking for robust,
maintainable component contracts
