Introduction
Imagine an interactive 3D profile card that tracks your face movements and reacts in real-time—this is the essence of the 3D AR Profile Card. Created by P-R. Lopez, a senior developer with expertise in JavaScript, React, and Firebase, this card combines cutting-edge face detection technology with a sleek, premium design featuring dynamic glow effects, rich gradients, and a sophisticated layout. It’s perfect for engaging users on a personal level.
In this tutorial, we’ll build this interactive profile card using HTML, CSS, and JavaScript with TensorFlow's FaceMesh for real-time face detection. This component is ideal for professional portfolios or applications requiring a memorable, interactive experience. For those interested in more interactive projects, don’t miss Gladiators Battle—a thrilling gladiator card game inspired by ancient Rome, which combines immersive strategy and visually stunning design.
Let’s dive into creating this profile card!
Step 1: Setting Up the HTML Structure
Our profile card will include a webcam feed for face detection, user information, and social media icons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D AR Profile Card with Face Detection</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- Video for webcam stream -->
<video id="webcam" autoplay playsinline></video>
<!-- Profile card with user information -->
<div class="profile-card">
<div class="profile-avatar"></div>
<h2 class="profile-name">P-R. LOPEZ</h2>
<p class="profile-title">Senior Developer</p>
<div class="profile-info">
<p><i class="fas fa-map-marker-alt"></i><strong> Location:</strong> France</p>
<p><i class="fas fa-briefcase"></i><strong> Experience:</strong> 5+ years</p>
<p><i class="fas fa-code"></i><strong> Skills:</strong> JavaScript, React, Java, Firebase</p>
</div>
<div class="profile-links">
<p><i class="fas fa-globe"></i> <strong>Discover:</strong> <a href="https://gladiatorsbattle.com" target="_blank">Gladiators Battle</a></p>
</div>
<div class="profile-icons">
<a href="https://github.com/HanGPIErr" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/pierre-romain-lopez/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://x.com/GladiatorsBT" target="_blank"><i class="fab fa-twitter"></i></a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>
<script src="script.js"></script>
</body>
</html>
Key HTML Elements
Webcam Video: Captures real-time video for face detection.
Profile Card: Contains profile information, including name, location, experience, skills, and links to Gladiators Battle and social media.
Social Icons: Link to GitHub, LinkedIn, and Twitter (or X), providing a fully interactive and connected profile.
Step 2: Styling the Profile Card with CSS
The CSS brings the 3D and AR effects to life, with gradients, glowing shadows, and animations for an eye-catching experience.
Body and Background
The body uses a radial gradient to create a soft, dark background that complements the card’s glowing effects.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: radial-gradient(circle at center, #2d2d2d, #1b1b1b);
overflow: hidden;
font-family: 'Arial', sans-serif;
}
/* Webcam */
#webcam {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: -1;
}
Profile Card Design
The profile card itself uses gradient backgrounds, 3D transformations, and shadow effects to stand out.
.profile-card {
position: relative;
width: 370px;
padding: 35px;
border-radius: 25px;
background: linear-gradient(145deg, #3d3d3d, #2a2a2a);
box-shadow:
0 15px 25px rgba(0, 0, 0, 0.6),
0 0 25px rgba(255, 215, 0, 0.3),
inset 0 0 15px rgba(255, 255, 255, 0.1);
transform-style: preserve-3d;
transform: perspective(1000px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
z-index: 1;
}
.profile-card:hover {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.7),
0 0 50px rgba(255, 215, 0, 0.7),
inset 0 0 15px rgba(255, 255, 255, 0.2);
transform: scale(1.03);
}
Avatar and Text Styling
The avatar and text are styled to match the premium aesthetic of the card, with glowing and bold effects.
.profile-avatar {
width: 130px;
height: 130px;
background: url('avatar.jpg') center/cover;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4), 0px 0px 30px rgba(255, 215, 0, 0.5);
transform: translateZ(70px);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.profile-name {
font-size: 30px;
text-align: center;
color: #ffffff;
margin-top: 20px;
transform: translateZ(50px);
background: linear-gradient(45deg, #ffd700, #ffa500, #ff4500);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
}
Step 3: Face Detection with TensorFlow FaceMesh
The JavaScript code uses TensorFlow’s FaceMesh model to detect faces and dynamically set the profile image. This cutting-edge approach gives the card an AR feel.
Webcam and Face Detection Setup
The setupCameraAndModel function initializes the webcam feed and loads the FaceMesh model to begin face tracking.
const video = document.getElementById('webcam');
const profileAvatar = document.querySelector('.profile-avatar');
async function setupCameraAndModel() {
const model = await facemesh.load();
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: 640, height: 480 }
});
video.srcObject = stream;
video.addEventListener('loadeddata', () => {
detectFaceAndCapture(model, stream);
});
}
Face Detection and Avatar Update
The detectFaceAndCapture function captures a photo when a face is detected and sets it as the profile avatar’s background.
async function detectFaceAndCapture(model, stream) {
const predictions = await model.estimateFaces(video);
if (predictions.length > 0) {
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageDataUrl = canvas.toDataURL('image/png');
profileAvatar.style.backgroundImage = `url(${imageDataUrl})`;
stream.getTracks().forEach(track => track.stop());
video.style.display = 'none';
} else {
requestAnimationFrame(() => detectFaceAndCapture(model, stream));
}
}
// Initialize camera and model
setupCameraAndModel();
This method provides a unique touch to the profile card by dynamically setting the profile picture in real-time, utilizing AR technology.
Conclusion
Creating an interactive 3D AR Profile Card with real-time face detection brings a modern, premium feel to any personal or professional website. This tutorial combined CSS for 3D effects and JavaScript for dynamic face detection using TensorFlow, demonstrating a powerful approach to enhancing user interaction. If you’re interested in more innovative, immersive projects, don’t miss Gladiators Battle—an exciting gladiator card game that merges historical themes with strategic gameplay. Discover more at GladiatorsBattle.com.
🔹 Discover More:
Explore Gladiators Battle: Step into a world of ancient warriors and epic battles at https://gladiatorsbattle.com.
GitHub: Check out code examples and projects at https://github.com/HanGPIErr.
LinkedIn: Follow updates at https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter: Stay connected on X at https://x.com/GladiatorsBT.
This article is your gateway to building visually stunning and interactive web elements. Join us as we continue exploring ways to merge advanced technology with intuitive, high-quality design.
Top comments (0)