<div class="card">
	<img class="avatar" src="../images/car-2012-Ferry_PaulGlover-2012-08-20-60x60.jpg" alt="Profile Photo" />
	<div class="name">Paul Glover</div>
	<div class="title">Front-End Developer</div>
	<div class="bio">Passionate about designing modern and user-friendly interfaces. Code + design enthusiast.</div>
	<div class="contact">
		<div><i class="fas fa-envelope"></i> 3dpaul@gmail.com</div>
		<div><i class="fas fa-phone"></i> 1.250.802.2575</div>
	</div>
	<button class="btn" id="followBtn" onclick="window.location='../Modal-About-01.html'">Learn More</button>
</div>

JavaScript:

const btn = document.getElementById("followBtn");
btn.addEventListener("click", () => {
	btn.classList.add("clicked");
	btn.textContent = "Followed";
	setTimeout(() => {
		btn.classList.remove("clicked");
	}, 400);
});

CSS:

body {
	background: #0f172a;
	font-family: "Segoe UI", sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

.card {
	background: #1e293b;
	border-radius: 20px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	padding: 2rem;
	width: 320px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	color: #f1f5f9;
}

.card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 1rem;
	border: 4px solid #3b82f6;
	transition: transform 0.3s ease;
}

.card:hover .avatar {
	transform: scale(1.05);
}

.name {
	font-size: 1.6rem;
	font-weight: bold;
	color: #f8fafc;
}

.title {
	color: #cbd5e1;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}

.bio {
	font-size: 0.9rem;
	color: #94a3b8;
	margin-bottom: 1rem;
}

.contact {
	font-size: 0.85rem;
	color: #cbd5e1;
	margin-bottom: 1rem;
}

.social-icons {
	margin: 1rem 0;
}

.social-icons a {
	color: #94a3b8;
	margin: 0 10px;
	font-size: 1.2rem;
	transition: color 0.3s;
}

.social-icons a:hover {
	color: #3b82f6;
}

.btn {
	background: #3b82f6;
	color: white;
	border: none;
	padding: 0.6rem 1.2rem;
	border-radius: 9999px;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.3s, transform 0.3s;
	position: relative;
	overflow: hidden;
}

.btn:hover {
	background: #2563eb;
	transform: scale(1.05);
}

.btn.clicked {
	animation: pop 0.4s ease;
	background-color: #10b981 !important;
}

@keyframes pop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}