Modern, responsive portfolio showcasing web development projects with comprehensive form validation, smooth animations, and dark/light theme switching.
- Responsive Layout: Works on desktop, tablet, and mobile
- Theme Toggle: Dark/light mode with localStorage persistence
- Smooth Animations: Scroll-triggered fade-ins, hover effects, shake animations
- Expandable Projects: Click to reveal project details with rotating arrows
- Real-time Validation: Inline error messages below invalid fields
- Email Format Check: Regex validation for proper email structure
- Smart Errors: Red borders highlight issues, errors clear as you type
- Loading States: Spinner shows "Sending message..." during submission
- Success/Error Messages: Animated confirmations with fade and slide effects
- Retry Mechanism: Button to retry failed submissions
- HTML5: Semantic structure with proper accessibility
- CSS3: Flexbox, animations, transitions, keyframes
- JavaScript ES6+: Form validation, scroll animations, theme persistence
- LocalStorage: Saves theme preference across sessions
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Clone the repository:
git clone https://github.com/ibrahimAlobaid0/assignment-3.git
cd assignment-3-
Open the website:
- Double-click
index.htmlOR - Use VS Code "Live Server" extension
- Double-click
-
Test features:
- Toggle dark/light theme
- Submit contact form to see validation
- Try invalid inputs to see error handling
- Scroll to see fade-in animations
- show and hide sections
- filtering
- Content: Edit sections in
index.html - Styling: Modify colors and animations in
style.css - Projects: Add new
.projectdivs
Chrome, Firefox, Safari, Edge + mobile browsers
- Semantic HTML5 elements
- Proper label associations
- Alt text on images
- Keyboard navigation
- High contrast in both themes
Immediate visual feedback
Clear error messages
Loading indicators
Error recovery options
Smooth animations
Persistent preferences
Responsive Design: Mobile-first Flexbox layout optimized for all devices Dark/Light Theme: Persistent theme toggle using localStorage Project Filtering: Dynamic filtering by skill level (beginner/intermediate/advanced) and category (web/mobile/backend) Smart Sorting: Sort projects by date or alphabetically Section Toggles: Collapsible content sections with animated arrow indicators Form Validation: Comprehensive email validation with inline error messages and loading states Scroll Animations: Smooth fade-in effects powered by IntersectionObserver Session Timer: Real-time tracking of visitor time on site User System: Login functionality with personalized greetings
Lighthouse Score: 99/100
AI tools assisted with code organization, validation patterns, and documentation. Core design and functionality remain original work.
AI served as a development assistant, enhancing code quality and documentation while the original concept, design decisions and core functionality remained my work. See ai-usage-report.md for detailed AI use documentation