Features Implemented:
Glassmorphism Design:
- Semi-transparent dark background with backdrop blur
- Soft borders and glowing hover effects
- Subtle shadows and rounded corners
Profile Card Elements:
- Circular profile image (using random user API)
- Full name and job title
- Short bio description
- Social media icons (LinkedIn, GitHub, Twitter, Instagram)
Dark/Light Mode Toggle:
- JavaScript-powered theme switching
- Smooth transitions between themes
- Saves preference to localStorage
- Respects system preference by default
Animated Background:
- Floating bubble animation to enhance glassmorphism effect
- Dynamically generated bubbles for variety
Responsive Design:
- Adapts to different screen sizes
- Mobile-friendly layout
Styling Details:
- Poppins font from Google Fonts
- Font Awesome icons
- Hover effects on all interactive elements
- Different hover colors for each social icon
The code is ready to copy and run in any modern browser. You can customize the profile image, name, job title, bio, and social links to match your personal information.
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
transition: background 0.5s ease;
padding: 20px;
}
body.light-mode {
background: linear-gradient(45deg, #f5f7fa, #c3cfe2, #e2e8f0);
}
/* Animated Background */
.bg-bubbles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
bottom: -160px;
animation: square 25s infinite;
transition-timing-function: linear;
border-radius: 2px;
}
@keyframes square {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
}
}
/* Generate bubbles at different positions */
.bg-bubbles li:nth-child(1) {
left: 10%;
width: 80px;
height: 80px;
animation-delay: 0s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 22s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 30s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 25s;
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 60px;
height: 60px;
animation-delay: 0s;
}
/* Profile Card */
.profile-card {
width: 100%;
max-width: 400px;
background: rgba(30, 30, 40, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
padding: 30px;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
color: #fff;
}
body.light-mode .profile-card {
background: rgba(255, 255, 255, 0.7);
color: #333;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.profile-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
/* Profile Image */
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto 20px;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.profile-img:hover {
transform: scale(1.05);
border-color: rgba(255, 255, 255, 0.4);
}
.profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Profile Info */
.profile-info h1 {
font-size: 28px;
font-weight: 600;
margin-bottom: 5px;
}
.profile-info h2 {
font-size: 18px;
font-weight: 400;
color: #aaa;
margin-bottom: 20px;
}
body.light-mode .profile-info h2 {
color: #666;
}
.profile-info p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 30px;
color: #ddd;
}
body.light-mode .profile-info p {
color: #555;
}
/* Social Icons */
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 20px;
transition: all 0.3s ease;
text-decoration: none;
}
body.light-mode .social-icons a {
background: rgba(0, 0, 0, 0.05);
color: #333;
}
.social-icons a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.social-icons a:nth-child(1):hover {
color: #0a66c2; /* LinkedIn */
}
.social-icons a:nth-child(2):hover {
color: #333; /* GitHub */
}
.social-icons a:nth-child(3):hover {
color: #1da1f2; /* Twitter */
}
.social-icons a:nth-child(4):hover {
color: #e1306c; /* Instagram */
}
/* Theme Toggle */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(30, 30, 40, 0.7);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 100;
}
body.light-mode .theme-toggle {
background: rgba(255, 255, 255, 0.7);
}
.theme-toggle:hover {
transform: scale(1.1);
}
.theme-toggle i {
font-size: 20px;
color: #fff;
transition: all 0.3s ease;
}
body.light-mode .theme-toggle i {
color: #333;
}
/* Responsive */
@media (max-width: 480px) {
.profile-card {
padding: 20px;
}
.profile-img {
width: 120px;
height: 120px;
}
.profile-info h1 {
font-size: 24px;
}
.profile-info h2 {
font-size: 16px;
}
.profile-info p {
font-size: 14px;
}
.social-icons a {
width: 40px;
height: 40px;
font-size: 18px;
}
}
// Theme Toggle Functionality
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
const icon = themeToggle.querySelector('i');
// Check for saved theme preference or use preferred color scheme
const savedTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
// Apply the saved theme
if (savedTheme === 'light') {
body.classList.add('light-mode');
icon.classList.replace('fa-moon', 'fa-sun');
}
// Toggle theme
themeToggle.addEventListener('click', () => {
body.classList.toggle('light-mode');
if (body.classList.contains('light-mode')) {
icon.classList.replace('fa-moon', 'fa-sun');
localStorage.setItem('theme', 'light');
} else {
icon.classList.replace('fa-sun', 'fa-moon');
localStorage.setItem('theme', 'dark');
}
});
// Animated background bubbles
document.addEventListener('DOMContentLoaded', function() {
const bubblesContainer = document.querySelector('.bg-bubbles');
// Create more bubbles for a richer effect
for (let i = 0; i < 5; i++) {
const bubble = document.createElement('li');
bubble.style.left = Math.random() * 100 + '%';
bubble.style.width = Math.random() * 60 + 20 + 'px';
bubble.style.height = bubble.style.width;
bubble.style.animationDelay = Math.random() * 20 + 's';
bubble.style.animationDuration = Math.random() * 20 + 10 + 's';
bubblesContainer.appendChild(bubble);
}
});
إرسال تعليق
Thank you
Learning robo team