🎴 Interactive Business Card

A modern, responsive business card component with 3D flip animation and AMOLED dark theme. Built with pure HTML, CSS, and JavaScript.

🚀 Live Demo

View Live Card ✨

✨ Features

• 🔄 3D Flip Animation - Click/tap anywhere to flip between front and back
• 📱 Mobile Optimized - Perfect touch interactions and responsive design
• 🌚 AMOLED Dark Theme - Pure black background with pulse glow effects
• 🔗 Social Integration - GitHub, LinkedIn, and Email links with hover tooltips
• ⚡ Tech Stack Display - Interactive icons showcasing technical skills
• 🎵 Audio Feedback - Subtle flip sound effects
• ♿ Accessible - Keyboard navigation and screen reader friendly
• 📐 Responsive - Adapts from mobile (320px) to desktop (500px+)

🛠️ Technologies Used

• HTML5 - Semantic structure and accessibility
• CSS3 - Advanced animations, flexbox, and grid layouts
• Vanilla JavaScript - Touch/click handling and interactive features
• Font Awesome - Social media and technology icons
• Web Audio API - Sound effects

🎨 Design Highlights

• Single Border Glow - Elegant white border with pulsing animation
• Professional Layout - Profile image on left, information on right
• Mobile-First - Touch-optimized interactions and proper scaling
• Performance Optimized - Hardware acceleration and smooth 60fps animations

📁 Project Structure

SCT_WD_1/
├── index.html          # Main HTML structure
├── style.css           # AMOLED styling and responsive design
├── script.js           # Interactive functionality
├── pfp.png            # Profile picture (replace with your own)
└── README.md          # This file

⚙️ Customization

📝 Personal Information

Edit the following in index.html:

• Name and title
• Location
• Social media links
• About text
• Tech stack icons

🎨 Colors & Styling

Modify CSS variables in style.css:

:root {
	--bg-primary: #000000; /* Background color */
	--border-color: rgba(255, 255, 255, 0.2); /* Border color */
	--text-primary: #ffffff; /* Text color */
	/* ... more variables */
}

📐 Card Dimensions

Adjust card size in style.css:

.business-card {
	width: 500px; /* Card width */
	height: 300px; /* Card height */
}

📱 Mobile Features

• Touch-optimized tap-to-flip interaction
• iOS Safari compatible with specific fixes
• Haptic feedback on supported devices
• Prevents zoom and scroll interference
• Mobile tooltips for social links

🌟 Browser Support

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Made by Gaurav Singh

Feel free to fork, customize, and use for your own Portfolio card!