Profile Card

A responsive profile card built with HTML, CSS, and vanilla JavaScript.

A multi-page mini project with a home profile view, an about page, and a contact form. Includes animated icons, social links, and interactive UI details.

Live demo: jvchi-profile-card.netlify.app

Tech stack

Frontend: HTML, CSS, JavaScript
UI: Lordicon, Font Awesome, Lottie

Features

• Profile card with avatar, bio, hobbies, and dislikes
• Animated Lordicon icons on hover and interaction
• Follow button and social link group
• Separate about and contact pages
• data-testid attributes for automated testing

Prerequisites

• A static file server or any hosting that serves plain HTML

No build step is required.

Getting started

git clone https://github.com/jvchi/profile-card.git
cd profile-card
npm install

Serve the project locally with any static server, for example:

npx serve .

Open the URL shown in the terminal and navigate to index.html.

Note

The project uses Lordicon and Font Awesome from CDNs. An internet connection is required for icons and fonts to load.

Project structure

index.html             # profile card home page
style.css              # shared styles
script.js              # follow button and time display logic
about/
  about.html           # about page
form/
  form.html            # contact form
  form.css
src/
  lottie.json          # animation data