Web development

Destination Shanghai is a fully custom-built WordPress website created to serve as a dynamic travel guide for visitors interested in exploring Shanghai. Designed and developed collaboratively, the project leverages a custom theme architecture to deliver modularity, performance, and full design flexibility.

My Role in the Project:

• Collaborated on theme development using PHP and WordPress template hierarchy
• Implemented front-end layout and styling using semantic HTML5 and CSS3
• Integrated JavaScript for interactivity (e.g., smooth scrolling, responsive navigation)
• Ensured cross-browser responsiveness and accessibility compliance

Key Features:

• Custom WordPress Theme: No third-party templates used—designed and coded from scratch to match exact UI/UX requirements.
• Attractions Directory: Modular layout showcasing Shanghai’s highlights (e.g., The Bund, Yu Garden, Disneyland), each with imagery and dynamic “Read More” links.
• Media Integration: Video highlights and visitor testimonials add authenticity and engagement.
• Scalable Design: Easily extendable structure for additional destinations or localized content.

Technical Stack:

• WordPress (PHP templating)
• HTML5, CSS3, JavaScript (vanilla)
• Responsive grid system and reusable component blocks

PokeHub is an interactive web application that functions as a modern Pokédex, combining real-time data from the PokeAPI with a playful, user-friendly interface. The app enables users to browse, filter, and interact with Pokémon in an engaging, responsive environment.

My Role:
Led interface design—responsible for layout, component structure, visual hierarchy, and UX flow. Focused on accessibility, thematic consistency, and optimizing user interaction across screen sizes.

Core Features:

• Live Data Integration: All Pokémon data (images, types, abilities) is fetched dynamically from the PokeAPI, ensuring up-to-date and extensible content.
• Interactive UI: Users can explore Pokémon via filterable tabs (All, Caught, Free), view detailed modals for each Pokémon, and mark them as caught or released.
• Visual Design:
  • Color Scheme: Vibrant blue, light blue, and white echo the playful Pokémon aesthetic.
  • Typography: Irish Grover for headings/buttons and Inria Sans for content—striking a balance between fun and clarity.
• Accessibility: Designed with keyboard-friendly navigation, semantic HTML, and clear visual feedback for all interactions.

Technical Stack:

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• API: PokeAPI for Pokémon metadata and imagery
• UI Design: Figma prototypes, component library, and mobile-first layout strategy

This project is a fully responsive, front-end web application simulating a modern food ordering platform. Designed with a mobile-first approach, it emphasizes intuitive user interactions, clean UI patterns, and accessibility best practices.

Key Features:

• Responsive Layout: Fully adaptable design across mobile, tablet, and desktop using CSS Flexbox and Grid.
• Product Interface: Categorized menu with visually distinct sections (e.g., burgers, pizza, desserts), pricing, and interactive icons (favorites, cart).
• Navigation & Accessibility: Sticky nav bar with skip links for keyboard navigation, ensuring usability across devices and input methods.
• UI Components: Interactive icons for user actions (e.g., profile, favorites), hover effects, and consistent visual hierarchy.
• Design-to-Code Workflow: Translated a custom Figma design into production-ready HTML/CSS with pixel accuracy.

Tech Stack:

• HTML5, CSS3 (with custom utility classes), vanilla JavaScript
• Design source: Figma prototype (custom-built UI layout)

As part of a collaborative team project in our college program, we undertook a comprehensive rebranding and website development initiative for SkyMap Aviation, a distinguished flight training institution in Canada. Our objective was to modernize their digital presence and enhance user experience (UX) through strategic design and development.​

Our Approach Included:

Brand Identity Development:

We crafted a new logo that encapsulates SkyMap Aviation’s mission and values, ensuring it resonates with their target audience.​

User Experience (UX) Design:

Through the creation of mood boards and user personas, we gained insights into user needs and preferences, which informed the design of wireframes and prototypes. This process allowed us to structure the website intuitively, enhancing navigation and accessibility.​

Website Development:

Utilizing WordPress and Elementor, we developed a responsive and visually appealing website. The platform’s flexibility enabled us to implement custom designs and functionalities that align with SkyMap Aviation’s brand identity and cater to user needs effectively.​

Key Features of the Website:

• Responsive Design: Ensured optimal viewing experiences across various devices, including desktops, tablets, and smartphones.​

• Intuitive Navigation: Structured the site to allow users to find information effortlessly, enhancing overall usability.​

• Engaging Visuals: Incorporated high-quality images and graphics that reflect the dynamic nature of aviation training.​

• Clear Calls to Action: Designed elements that guide users towards desired actions, such as enrolling in courses or contacting the institution for more information.​

This project not only refined SkyMap Aviation’s brand image but also significantly improved their online user engagement through thoughtful design and development.