# 202251360-zainabalmusailem-assignment4

## Overview
This project is a polished personal portfolio web application built as the final course assignment. It presents Zainab Almusailem's profile, featured work, technical workflow, and interactive front-end features in a single responsive site.

The portfolio combines:
- Semantic HTML structure
- Responsive CSS layout and design system
- JavaScript DOM interactivity
- Local storage for saved user preferences
- Public API integration with graceful error handling
- Form validation and accessible feedback

## Live Features
- Personalized visitor greeting based on time of day
- Theme toggle with saved preference
- Visitor name storage using `localStorage`
- Live weather data for Dhahran using Open-Meteo
- Visit timer that updates every second
- Dynamic project filtering, sorting, and search
- Contact form validation with inline messages
- Copy-email interaction for quick contact sharing

## Project Structure
```text
202251360-zainabalmusailem-assignment4/
|-- README.md
|-- index.html
|-- css/
|   `-- styles.css
|-- js/
|   `-- script.js
|-- assets/
|   `-- images/
|-- docs/
|   |-- ai-usage-report.md
|   `-- technical-documentation.md
|-- presentation/
|   `-- README.md
`-- .gitignore
```

## Running Locally
1. Clone or download the repository.
2. Open `index.html` directly in a browser, or run a local server:

```bash
python3 -m http.server 8000
```

Then visit `http://localhost:8000`.

## Deployment
Recommended hosting options:
- GitHub Pages
- Netlify
- Vercel

Deployment status for this local workspace is not completed automatically. Add the public URL here after publishing:

`Live Site: <your deployed link>`

## Documentation
- Technical notes: `docs/technical-documentation.md`
- AI usage report: `docs/ai-usage-report.md`
- Presentation artifacts checklist: `presentation/README.md`

## Submission Notes
- The repository content has been updated to match the final-assignment scope and branding.
- The only remaining manual deliverables are public deployment, exported slides, and the recorded demo video.