https://github.com/fatuma65/profile-card

The profile card to display personal or professional information.
https://github.com/fatuma65/profile-card

css3 hnginternship html5 javascript

Last synced: 3 months ago
JSON representation

The profile card to display personal or professional information.

• Host: GitHub
• URL: https://github.com/fatuma65/profile-card
• Owner: fatuma65
• Created: 2025-01-29T15:08:54.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-01-29T21:38:58.000Z (4 months ago)
• Last Synced: 2025-01-29T22:29:11.980Z (4 months ago)
• Topics: css3, hnginternship, html5, javascript
• Language: HTML
• Homepage: https://namalefatuma-profilecard.netlify.app
• Size: 485 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Profile Card Project - HNG Internship Stage 0

![Profile-card](./images/Profile-Page-HNG-Internship-01-30-2025_12_27_AM.png)

This project is part of the HNG Internship Stage 0, designed to test and showcase my skills in HTML, CSS, and Vanilla JavaScript. The goal is to create a responsive and visually appealing profile card that includes specific elements with data-testid attributes for easy testing.

## Overview 

The profile card is a simple effective way to display personal or professional information. It includes the following elements:

- Profile Picture

- Full Name

- Job Title

- Short Bio

- Current Location

- Email Address

- Social Links

- Current Time in UTC

Each element is marked with a data-testid attribute for easy testing.

## Features

- Responsive Design: The profile card is designed to look great on all screen sizes.

- Dynamic UTC Time: The current time in UTC is displayed and updates dynamically.

- Clean UI/UX: The card follows a clean and modern design approach.

- Testable Elements: All required elements include data-testid attributes for easy testing.

## Technologies Used

HTML - For structuring the profile card.

CSS -  For styling and making the card responsive.

JavaScript - For dynamically updating the UTC time.

## How to setup the project

1. Clone the repository

```bash

git clone https://github.com/fatuma65/profile-card.git

```

2. Open the project

Open the index.html file to view the card

3. Modify the content

Update the index.html file with your personal details and change the profile picture.

4. Run the application locally

Use live server to view the changes in your browser.