A responsive Profile Card built with HTML, CSS, and Vanilla JavaScript for HNG 12 Stage 0.
This project displays essential profile details dynamically, ensuring a clean and visually appealing UI.
✅ Responsive design
✅ Displays profile picture, full name, job title, short bio, current location, and social links
✅ Dynamically updates UTC time every second
✅ Uses data-testid attributes for easy testing
To meet the task requirements, the Profile Card includes:
| Feature | Description | data-testid Attribute |
|---|---|---|
| Profile Picture | Displays a user profile image | profilePicture |
| Full Name | Shows the user's full name | fullName |
| Job Title | Displays the user's job title | jobTitle |
| Short Bio | A brief bio (50-100 words) | shortBio |
| Current Location | Shows city and country | currentLocation |
| Email Address | Clickable email link | emailAddress |
| Social Links | Links to LinkedIn, GitHub, etc. | socialLinks |
| Current Time in UTC | Updates dynamically | currentTimeUTC |
- HTML – Structure
- CSS – Styling and responsiveness
- JavaScript – Dynamic content updates for current time in UTC