Project: Liamtra

Role: Senior Frontend Developer and UX Designer

Technologies Used: React.js, Vite, JavaScript (ES6), HTML5, CSS3, Bootstrap 5,
SASS/LESS, and Vercel for deployment.
Design Approach:
For Liamtra, a travel and service platform, my design approach was centered around
enhancing user engagement and accessibility across a diverse user base, including
travelers, service providers, and locals.
User-Centered and Contextual Design: Defined tailored user flows for different
personas (travelers vs. service providers) and structured the interface to guide each user
segment effectively to their goals, such as booking accommodations, finding local
experiences, or managing service listings.
Visual Hierarchy and Consistent Branding: Used a clean, vibrant design with a balance
of white space and accent colors to highlight key calls to action. This created a visually
engaging yet professional experience aligning with the brand's identity.
Mobile-First Design: Employed a mobile-first strategy with modular UI components to
ensure a seamless experience on smaller screens, enhancing accessibility on-the-go for
users exploring travel options.
Responsiveness:
The site’s responsiveness was achieved using flexible grids and media queries to
maintain usability across desktops, tablets, and mobile devices. This approach ensured
high engagement on any screen size, especially given that users frequently accessed the
platform from mobile devices while traveling.
Challenges and Solutions:
A major challenge involved optimizing the UI for a high volume of service listings and
travel packages, which led to load time delays. To mitigate this, I implemented lazy
loading, optimized image sizes, and minimized code bloat with asynchronous loading
practices. Additionally, I faced challenges in making dynamic components load
consistently across various browser types. I addressed this by thorough cross-browser
testing and utilizing standardized libraries to ensure stable performance.
Outcome and Impact:
The platform received positive feedback for its ease of use and mobile accessibility, with
an increase in both service provider sign-ups and user engagement. This contributed to
overall user retention, as more visitors completed bookings and explored services across
multiple devices.
Project: LiangTuang Technologies
Technologies Used: React.js, Vite, TypeScript, HTML5, CSS3, Bootstrap 5, SASS/LESS, JavaScript
(ES6), and Vercel for deployment.
Design Approach:
For LiangTuang, a technology solutions website, my approach focused on creating a
professional, modern interface that showcased their services and technological offerings
effectively. Key strategies included:
 Service-Centric User Experience: Designed the layout to guide users through
LiangTuang’s service offerings and case studies, with distinct sections for
solutions, technology stacks, and client success stories, supporting clear and
efficient navigation.
 Modular Component Design: Created a modular, component-based structure in
React, making it easy to update or scale specific sections without affecting the
entire site’s design or functionality.
 Brand Consistency and Visual Hierarchy: Used a cohesive color palette,
consistent typography, and visual cues that align with the LiangTuang brand,
emphasizing calls-to-action and essential information, improving user focus and
interaction.
Responsiveness:
Ensuring responsive design was critical, given the diverse user base likely accessing the site on
different devices. I leveraged Bootstrap’s responsive grid system and media queries to build a
seamless experience across desktops, tablets, and mobile devices, ensuring functionality and
ease of use on all screen sizes.
Challenges and Solutions:
A significant challenge involved optimizing complex animations and interactive elements for
smooth performance across various devices. I addressed this by selectively using lightweight
libraries, optimizing image sizes, and reducing animation complexity for mobile devices to
ensure high performance without sacrificing visual appeal. Another challenge was achieving
consistent performance across browsers; extensive cross-browser testing and implementing
polyfills where necessary ensured compatibility.
Outcome and Impact:
The redesign resulted in a professional, user-friendly website that effectively communicated
LiangTuang’s value propositions, contributing to higher visitor engagement and improved client
inquiries. The responsive, accessible design received positive feedback from stakeholders,
highlighting its impact on usability and brand perception.

2
Project: Sigi Renner Friseure
Role: Frontend Developer and UX Designer (Pages and Header Design)
Technologies Used: React.js, HTML5, CSS3, JavaScript (ES6), Bootstrap 5, and SASS/LESS.
Design Approach:
In developing the header and select pages for Sigi Renner Friseure, a hair salon website,
I focused on creating a welcoming, visually appealing layout that reflects the salon's
modern aesthetic and professional brand.
 Intuitive Header Design: Designed a clean, functional header that serves as a
navigational anchor for the website. This included implementing a sticky header
for easy access to key sections, even as users scroll.
 Minimalist, Client-Friendly UI: Emphasized a minimalist layout with large, clear
typography and engaging visuals to highlight services, pricing, and appointment
booking, ensuring an elegant and easy-to-navigate user experience.
 Consistency with Brand Identity: Used a soft color palette and stylized fonts to
align with the salon’s image, creating a cohesive look that reinforces brand
recognition.
Responsiveness:
I ensured the header and pages I worked on were fully responsive, optimizing them for
seamless viewing across desktops, tablets, and mobile devices. The header adapts to
different screen sizes with dropdown and collapsible elements for mobile devices,
providing a smooth, user-friendly experience regardless of device.
Challenges and Solutions:
A challenge arose in maintaining performance with high-quality images that showcase
the salon's work. I optimized these images to balance quality and load speed, ensuring
the site remains fast while retaining visual appeal. Additionally, I implemented browser
compatibility testing to address inconsistencies in the header layout across different
devices and browsers.
Outcome and Impact:
The refined header and pages contributed to a polished, easy-to-navigate experience
that supports the salon’s branding and enhances user engagement. This improved ease
of access to essential information like service details and booking options, fostering a
more positive user experience.

3
Project: FutureTech Conference Summary
Design Approach: The FutureTech Conference summary page required a clean, user-focused
design to showcase event information clearly and make registration intuitive. My design
approach involved:
 Content-Driven UX Design: Organized the layout to highlight event details, agenda, and
speaker information, supporting users in finding essential information quickly. I also
used clear calls-to-action for ticket purchasing, ensuring an easy, engaging user journey.
 Modular Component Structure: Developed reusable React components, particularly for
repetitive sections like speaker bios and schedule entries. This modularity made it easier
to maintain consistency and simplify updates across the page.
 Color Contrast and Accessibility: Ensured WCAG-compliant color contrasts and
accessible design elements, such as keyboard navigation, to make the page usable for all
audiences, including those with visual or motor impairments.
Responsiveness: To cater to users on multiple devices, I employed a mobile-first approach,
optimizing the layout to maintain readability and usability across all screen sizes. Bootstrap’s
responsive grid system and custom media queries ensured a fluid, adaptable interface. I added
custom CSS for certain layout elements to achieve uniform behavior on mobile and tablet
devices, enhancing the user experience on all screen types.
Challenges and Solutions: This project presented several unique challenges:
1. Handling High Traffic During Registration Windows: With a high volume of users
anticipated during peak registration times, there was a need for a fast, optimized user
interface. I addressed this by implementing image lazy loading and asynchronous data
loading, allowing critical content to load first and reducing initial load times.
2. Cross-Browser Consistency: Certain design elements appeared inconsistently across
browsers, particularly with CSS animations in older versions of Safari. I tackled this by
implementing fallback styles and testing across different devices to ensure consistent
appearance and functionality.
3. Dynamic Schedule Updates: The schedule and speaker lineup required frequent
updates, so I created a structure where content could be dynamically loaded, allowing
for smooth and continuous updates without impacting user experience. I integrated
components that could render updated data without needing a full page reload.
Outcome and Impact:
The project successfully provided a streamlined and accessible event page that facilitated high user
engagement, especially during registration peaks. Positive user feedback highlighted the ease of
navigation, accessibility features, and overall user experience. The modular design also enabled quick
updates, helping the client easily adjust information on the schedule and speakers leading up to the
event. This project not only enhanced the event’s user engagement but also demonstrated effective
design and technical problem-solving that contributed to the project’s overall success.

4
Project: India Energy Week Event Page
Role: Senior UX Engineer and Frontend Developer
Technologies Used: React.js, TypeScript, HTML5, CSS3, Bootstrap 5, JavaScript (ES6), Responsive Web
Design, LESS/SASS, Vercel for deployment.
Design Approach:
For the India Energy Week event page, the focus was on delivering an engaging, informative layout that
could scale to accommodate the extensive content. My approach included:
 Information Hierarchy and Content Prioritization: The structure was designed to highlight key
sections—event overview, agenda, speakers, and sponsors—allowing users to quickly navigate
and find relevant information. I used visual hierarchy principles to emphasize calls-to-action and
important updates.
 Reusable Component Design: Built modular React components, especially for speaker profiles,
session details, and sponsor sections, to simplify updates and maintain consistency. This
approach also allowed seamless integration of additional event details without rework.
 Enhanced Accessibility: Designed with accessibility in mind by following WCAG guidelines,
ensuring screen reader compatibility, keyboard navigation, and appropriate color contrast. I
tested these features to confirm accessibility for users with disabilities.
Responsiveness: A mobile-first responsive design approach ensured that content adapted fluidly across
device types. Leveraging Bootstrap’s grid system and custom media queries, I optimized the event page
to function and display well on all screen sizes, enhancing the mobile experience for users accessing
event information on the go.
Challenges and Solutions:
The project presented several challenges, which I addressed as follows:
1. High Data Volume and Performance Optimization: The event page contained a significant
amount of data, including multiple sections for sponsors, speakers, and sessions. To improve
load times, I implemented lazy loading for images and used conditional rendering for
components to only load visible content. This approach reduced the initial page load time and
improved performance during peak traffic periods.
2. Frequent Content Updates: With a dynamic schedule and changing lineup, the content required
regular updates. I developed reusable, editable components to support dynamic data loading,
enabling quick updates without disrupting the user experience. This design also allowed the
event organizers to add last-minute changes effortlessly.
3. Cross-Browser Consistency: Ensuring that animations and layout elements worked consistently
across various browsers, including Internet Explorer, was challenging. I conducted extensive
cross-browser testing and utilized polyfills for unsupported features to achieve a uniform
experience.
Outcome and Impact: The finalized event page received positive feedback for its user-friendly
navigation, responsive design, and accessibility. The modular component structure enabled efficient
content management, allowing updates without a full redesign. This project was instrumental in driving
higher engagement for India Energy Week, providing attendees with a seamless, optimized experience
for accessing event information on any device.

5
Project: Gemini Website Clone
Technologies Used: React.js, Vite, TypeScript, HTML5, CSS3, Tailwind CSS, JavaScript (ES6), and Vercel
for deployment.
Design Approach:
The goal of this Gemini clone project was to faithfully replicate the Gemini website, capturing its
clean, user-friendly design while ensuring technical fidelity and responsiveness. My approach
involved:
 Pixel-Perfect Design Replication: I carefully mirrored the layout, typography, and visual
elements to maintain consistency with the Gemini brand. This included adhering to specific
spacing, color schemes, and interactive elements to provide an authentic Gemini experience.
 Component-Based Architecture: Leveraged React’s component-based design to break down
each UI element into reusable components, streamlining the code and making it easy to
manage and update.
 Responsive and Adaptive Design: Used Tailwind CSS and custom media queries to create a
mobile-first responsive design. The layout was optimized for seamless transitions and a
smooth experience on various screen sizes, ensuring functionality and visual consistency on
mobile, tablet, and desktop devices.
Responsiveness: A primary goal was creating a fully responsive clone that maintained usability and
aesthetics on all device types. I used Tailwind CSS for streamlined responsive design implementation,
allowing for custom breakpoints that tailored the layout to Gemini’s aesthetic on mobile and desktop.
Challenges and Solutions:
1. Performance Optimization with Vite: Since this was a high-fidelity clone, performance was a
critical consideration. Vite was chosen to improve build speed and minimize bundle size. I also
optimized image loading and component rendering to avoid performance bottlenecks.
2. Matching Gemini’s Animation and Transitions: Replicating Gemini’s subtle animations and
transitions required precision. Using CSS animations and JavaScript where necessary, I fine-
tuned the effects to achieve a smooth user experience that aligned with the original design’s
intent.
3. Maintaining Code Scalability: To ensure the project could scale or be easily modified, I focused
on a clean, modular code structure. This involved following best practices for component
reusability and code organization, making future adjustments simpler.
4. Cross-Browser Compatibility: Achieving uniform behavior across different browsers, especially
for animations and advanced CSS, was challenging. I implemented extensive cross-browser
testing and adjustments to ensure the clone’s consistency.
Outcome and Impact:
This project demonstrated my capability to recreate complex, high-quality user interfaces with
attention to detail and performance optimization. The Gemini clone is not only visually faithful but
also highly responsive, providing an intuitive user experience across devices. This project reinforced
my skills in UX design replication, responsive development, and efficient deployment, all of which
contribute to my expertise as a UX engineer.

6
Project: To-Do Application Clone
Technologies Used: React.js, Vite, TypeScript, HTML5, CSS3, JavaScript (ES6), Tailwind CSS, and Vercel
for deployment.
Design Approach: The objective of this project was to develop a functional and visually appealing
clone of a classic to-do application, focusing on usability and user experience. My design approach
included:
 User-Centric Design: Prioritized a clean, intuitive interface that allows users to add, edit,
delete, and categorize tasks easily. I designed with the end-user in mind, ensuring that
interactions were straightforward and actions were immediately clear.
 Component-Based Architecture: Utilized React’s component-based structure to build reusable
components for the task list, input forms, and buttons, enhancing maintainability and
scalability of the codebase.
 Color and Typography: Implemented a soothing color palette and readable typography to
create a calming environment for users as they manage their tasks, ensuring the app is visually
pleasant and easy to read.
Responsiveness: To ensure the application functions well on various devices, I adopted a mobile-first
responsive design strategy. Using Tailwind CSS allowed for rapid development of responsive layouts
with utility classes, ensuring that the application was accessible and visually appealing on both mobile
and desktop devices. The design adapted seamlessly across different screen sizes, maintaining
usability without compromising aesthetics.
Challenges and Solutions:
1. State Management: Managing the state of the to-do list (adding, removing, and editing tasks)
posed initial challenges, particularly as the complexity of interactions grew. I implemented
React's useState and useEffect hooks effectively to manage local state changes and reflect
updates dynamically without unnecessary re-renders.
2. Performance Optimization: As the number of tasks increased, performance became a concern.
I optimized rendering by using React's memoization techniques (React.memo) to prevent
unnecessary re-renders of components that didn’t change, thus improving performance.
3. Cross-Browser Compatibility: Ensuring the app worked consistently across various browsers
required thorough testing. I resolved minor inconsistencies in CSS and JavaScript behavior by
using browser-specific prefixes where necessary and verifying the app’s functionality across
Chrome, Firefox, and Safari.
4. User Feedback and Error Handling: Providing immediate feedback on user actions (such as
adding or deleting tasks) was crucial. I implemented toast notifications to inform users of
successful actions or errors (like empty task submissions), enhancing the overall user
experience.
Outcome and Impact: The completed to-do application clone is functional, visually appealing, and user-friendly.
It provides an intuitive interface for users to manage their tasks effectively. Positive feedback highlighted the
ease of use and responsive design, showcasing my ability to create accessible applications that enhance user
productivity. This project strengthened my skills in responsive design, user experience optimization, and
component-based development, aligning well with the expectations for a Senior UX Engineer role.

7
  Project: Annual Retreat Website
Technologies Used: React.js, Vite, TypeScript, HTML5, CSS3, JavaScript (ES6), Tailwind CSS, and Vercel
for deployment.
Step-by-Step Development Process:
1. Project Setup:
 Initial Configuration: I began by setting up a new React application using Vite. Vite was chosen for its speed and
modern development capabilities. I initialized the project with TypeScript to enhance type safety and facilitate
easier debugging.
 Folder Structure: The project was organized into components, styles, and utilities, which promoted code clarity and
maintainability.
2. Design Approach:
 User-Centric Design: My focus was to create an intuitive and engaging experience for users attending the annual
retreat. I prioritized features such as event information display, registration forms, and passcode validation.
 Wireframing: Created wireframes using design tools (like Figma) to outline the layout and user flow. This helped in
visualizing the user journey from landing on the page to completing registration.
3. Development:
 Component Development: I structured the application with reusable components:
o EventSummary: Displays key details about the retreat, including dates, location, and agenda.

o RegistrationForm: Captures user information and includes a passcode input field for access control.

o PasscodeValidation: Handles the logic for validating the entered passcode before allowing access to event
details.
 State Management: Utilized React's useState and useEffect hooks to manage form state and validation feedback,
ensuring real-time updates based on user input.
4. Styling and Responsiveness:
 Responsive Design: Adopted a mobile-first approach using Tailwind CSS to ensure that the website is fully
responsive. Key features included:
o Flexbox and Grid Layouts: Employed Flexbox and CSS Grid for creating responsive layouts that adapt
seamlessly to different screen sizes.
o Utility Classes: Utilized Tailwind’s utility classes for rapid styling and layout adjustments, ensuring a
consistent look and feel across devices.
5. Testing and Optimization:
 Cross-Browser Testing: Conducted extensive testing on multiple browsers (Chrome, Firefox, Safari) to ensure
compatibility and consistent performance.
 Performance Optimization: Implemented lazy loading for images and asynchronous data fetching to enhance
loading speed, particularly for users on slower connections.
Challenges Faced:
1. Passcode Validation: Implementing the passcode validation required careful handling of user input. I created a
robust validation logic to check the entered passcode against predefined values, providing users with immediate
feedback if the passcode was incorrect.
2. User Feedback Mechanisms: Ensuring users received timely feedback after submitting the registration form was
critical. I implemented toast notifications to confirm successful registrations or highlight errors in real-time,
enhancing the user experience.

8
 3. Responsive Design Challenges: Maintaining a consistent and visually appealing design across all devices was a
challenge. I iteratively tested the site on various screen sizes, adjusting CSS classes and layouts to ensure optimal
display.
4. Dynamic Data Handling: Fetching and displaying dynamic data related to the retreat (like schedules or guest
speakers) required careful management. I used asynchronous calls to retrieve data and implemented loading states
to improve user experience while waiting for data.
Outcome and Impact:
 The completed annual retreat website provides an engaging and user-friendly interface for attendees. Users can
easily navigate the event details, register, and access information securely through the passcode validation feature.
Feedback from testing highlighted the intuitive design and the seamless registration process.
 This project reinforced my ability to deliver high-quality UX solutions while effectively addressing technical
challenges. It enhanced my skills in responsive design, state management, and user authentication, aligning well
with the expectations for a Senior UX Engineer role at Microsoft .

 Project: Event Summary Website

Role: UX Engineer and Frontend Developer
Technologies Used: React.js, Vite, TypeScript, HTML5, CSS3, JavaScript (ES6), Tailwind CSS, and
Vercel for deployment.
Step-by-Step Development Process:
1. Project Setup:
 Initial Configuration: I started by creating a new React application using Vite. Vite was selected
for its fast development environment and efficient build process. The project was initialized with
TypeScript to leverage type safety for better code maintainability.
 Folder Structure: Organized the project into separate directories for components, pages, styles,
and utilities, promoting modularity and easier navigation throughout the development process.
2. Design Approach:
 User-Centric Design: My primary focus was on creating a visually appealing and user-friendly
interface that provides comprehensive information about the event. I aimed to ensure that
users can easily navigate through event details, registration, and additional resources.
 Wireframing: Created wireframes using Figma to outline the layout and essential components,
including the event overview, schedule, speakers, and registration sections. This helped in
visualizing the user flow and interaction points.
3. Development:
 Component Development: Built the application using reusable React components:
o EventOverview: Displays key details such as event title, date, location, and a brief
description.
o Schedule: Lists the event agenda, showcasing sessions and speakers with collapsible
panels for easy navigation.

9
 o RegistrationForm: Captures user information and handles registration for the event.
 State Management: Utilized React's useState and useEffect hooks to manage the application
state, particularly for form data and schedule display, ensuring real-time updates based on user
interactions.
4. Styling and Responsiveness:
 Responsive Design: Adopted a mobile-first approach using Tailwind CSS for styling. Key features
included:
o Fluid Layouts: Employed CSS Flexbox and Grid systems to create a responsive layout
that adapts seamlessly to various screen sizes, ensuring an optimal user experience on
mobile devices, tablets, and desktops.
o Utility Classes: Utilized Tailwind’s utility-first CSS classes for efficient styling and rapid
development, allowing for consistent design and easy adjustments.
5. Testing and Optimization:
 Cross-Browser Testing: Conducted extensive testing on multiple browsers (Chrome, Firefox,
Safari) to ensure consistent functionality and appearance across different environments.
 Performance Optimization: Implemented techniques such as lazy loading and code-splitting to
enhance loading times, especially for users accessing the site with limited bandwidth.
Challenges Faced:
1. Complex Schedule Management: Creating a dynamic and interactive schedule that allows users
to view detailed session information posed challenges. I addressed this by implementing a
collapsible structure for session details, ensuring users could easily navigate without feeling
overwhelmed.
2. User Feedback Mechanisms: Providing immediate feedback to users after registration was
crucial. I implemented toast notifications to inform users of successful registrations or highlight
errors, enhancing user satisfaction and engagement.
3. Responsive Design Adjustments: Ensuring a consistent user experience across devices required
continuous testing and iterations. I made several adjustments to styles and layouts based on
user feedback and device testing.
4. Integration of External APIs: If applicable, fetching data related to event schedules or speakers
from external APIs required careful handling to ensure data integrity and responsiveness. I
implemented asynchronous API calls and managed loading states to provide a smooth user
experience.
Outcome and Impact:
 The completed event website provides an engaging, informative, and user-friendly experience
for attendees. Users can easily navigate event details, register, and access resources efficiently.
Feedback from user testing highlighted the intuitive design and the effectiveness of the
registration process.
 This project reinforced my ability to deliver high-quality UX solutions while effectively
addressing technical challenges. It enhanced my skills in responsive design, state management,

10
 and user interaction, aligning well with the expectations for a Senior UX Engineer role at
Microsoft.

11