About Me Page

Overview A personal portfolio page that showcases my journey, goals, and reflections as a front-end developer. This page follows semantic HTML structure and accessibility best practices.

File Structure

Features Semantic HTML Structure- Proper use of <main>, <section>, <h1-3>, <p>, and <ul> elements Accessibility Compliance- WCAG guidelines followed with proper heading hierarchy and ARIA attributes Responsive Design - Desktop-first approach that adapts to tablet and mobile devices Personal Content- Reflective sections sharing my development journey

Sections & Data Test IDs

Main Container | test-about-page | Wraps the entire about page content Bio Section | test-about-bio | Personal introduction and background Goals Section | test-about-goals | Objectives in the front-end development program Confidence Section | test-about-confidence | Areas where I'm building skills and confidence Future Note Section | test-about-future-note | Reflective message to my future self Extra Thoughts Section | test-about-extra | Additional insights and motivations

Contact Us Page

Overview A responsive contact form with client-side validation, accessibility features, and user-friendly feedback. Built with semantic HTML and vanilla JavaScript.

File Structure -Form Validation- Real-time and submit-time validation

• Accessibility- WCAG compliant with proper labels and ARIA attributes
• Responsive Design - Works on all device sizes
• User Feedback- Clear error and success messages
• No Dependencies - Pure HTML, CSS, and JavaScript

Form Fields & Data Test IDs | Full Name | text | | test-contact-name | Non-empty | | Email | email | | test-contact-email | Valid format | | Subject | text | | test-contact-subject | Non-empty | | Message | textarea | | test-contact-message | Min. 10 characters | | Submit Button | button | - | test-contact-submit | - | Error Messages | - | - | test-contact-error-<field> | - | Success Message | - | - | test-contact-success | - |

Validation Rules

Full Name

• Required field
• Cannot be empty or only whitespace

Email

• Required field
• Must match email format (name@domain.com)

Subject

• Required field
• Cannot be empty or only whitespace

Message

• Required field
• Minimum 10 characters
• Cannot be empty or only whitespace