Ridha Fatima
Final Project – Dynamic and Accessible Web Design

Project Overview
This project is a multi-page personal portfolio website that I designed and developed using HTML, CSS, and JavaScript. The goal of the site is to present my technical and professional background in a clean, organized, and interactive way while following accessibility and web design best practices. I approached this project as both a final assignment and a real portfolio site that could be used for internships and job applications.

The website is fully responsive and works across different screen sizes. I focused on keeping the layout structured and easy to navigate while still adding interactive features that demonstrate my coding skills.

Pages Included
- index.html: Launch page with an introduction and navigation
- about.html: Background, focus areas, and testing checklist
- work.html: Projects, interactive timeline, and animated skills section
- contact.html: Contact form with validation and safe client-side handling

Design and Layout
The layout uses semantic HTML along with CSS Grid and Flexbox to create a responsive structure. The design uses a consistent color palette, gradients, shadows, and hover effects to keep the site visually engaging without being cluttered. Spacing and layout choices were made to keep content readable and organized.

Accessibility
Accessibility was a priority throughout the site. The website includes keyboard navigation, visible focus states, a skip-to-content link, proper labels for form elements, and support for reduced motion preferences. Interactive elements such as menus, modals, and timelines are usable with both mouse and keyboard input.

Interactivity
JavaScript is used to add interactivity across the site, including:
- An interactive project modal that opens on click or keyboard input
- A timeline section with scroll-based reveal animations and filters
- Animated skill bars that load when visible
- A contact form with validation and live feedback
- A copy-email feature with a confirmation toast

Security Considerations
Basic client-side security practices were followed. User input is sanitized before being displayed, a demo CSRF token is used in the contact form, and a Content Security Policy meta tag is included. No unsafe functions such as eval() are used.

Testing and Deployment
The site was tested on different screen sizes and modern browsers. Navigation, forms, and interactive elements were tested using both mouse and keyboard input to ensure usability and accessibility.

How to Run the Website
1. Unzip the project folder.
2. Open index.html in a web browser.
3. Use the navigation menu to explore all pages.

Files Included
index.html
about.html
work.html
contact.html
styles.css
script.js
ridha.jpeg
Ridha_Fatima_Resume.pdf
README.txt