A Profile Card Assignment

A responsive, accessible profile card component built with semantic HTML, CSS, and vanilla JavaScript that meets all assignment requirements.

-- Core Requirements Profile card root container with data-testid="test-profile-card" Name with data-testid="test-user-name" Short biography with data-testid="test-user-bio" Current time in milliseconds with data-testid="test-user-time" Avatar image with data-testid="test-user-avatar" Social links list with data-testid="test-user-social-links" Individual social links with data-testid="test-user-social-network Hobbies list with data-testid="test-user-hobbies" Dislikes list with data-testid="test-user-dislikes"

--- HTML & Semantics Semantic HTML tags (<article>, <header>, <nav>, <section>, <figure>) Proper heading hierarchy Accessible images with alt text Keyboard-focusable interactive elements

-- Responsive Design Desktop-first approach Tablet and mobile breakpoints Flexible layout that adapts to content changes Works on all screen sizes (mobile, tablet, desktop)