Hey everyone,
I recently completed a frontend challenge to build a Profile Card using only plain HTML, CSS, and JavaScript — no frameworks allowed.
The requirements were quite strict. I had to include specific data-testid attributes on every key element so the automated tests could verify everything easily. The card needed to show a name, bio, avatar, live epoch time in milliseconds, social links, hobbies, and dislikes.
I focused on making it responsive: it stacks cleanly on mobile and switches to a side-by-side layout with the avatar on the left on larger screens using CSS Grid.
Accessibility was important to me too — I added meaningful alt text, made sure all links are keyboard navigable, and used aria-live for the updating time.
The live time was implemented with Date.now() and refreshes every 600ms. After finishing the card, I wrote Playwright tests to automatically check all the requirements, and they all passed.
Live Demo: https://profile-intelligence-service-beige.vercel.app/
GitHub: https://github.com/victorion0/profile-card
It was a good exercise in paying attention to details and writing testable, accessible code with just the basics.
Would love to hear your thoughts or suggestions!
