|
|
|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dynamic Profile</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #1a1a2e, #16213e); |
| color: #fff; |
| overflow-x: hidden; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #ff6b6b, #4ecdc4); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .card { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 20px; |
| transition: all 0.4s ease; |
| } |
| |
| .card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); |
| } |
| |
| .progress-bar { |
| height: 8px; |
| border-radius: 4px; |
| background: rgba(255, 255, 255, 0.1); |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| border-radius: 4px; |
| background: linear-gradient(90deg, #ff6b6b, #4ecdc4); |
| animation: progress-animation 1.5s ease-out forwards; |
| transform-origin: left; |
| transform: scaleX(0); |
| } |
| |
| @keyframes progress-animation { |
| to { transform: scaleX(1); } |
| } |
| |
| .floating { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .blob { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(60px); |
| z-index: -1; |
| opacity: 0.5; |
| } |
| |
| .typewriter { |
| overflow: hidden; |
| border-right: 2px solid #4ecdc4; |
| white-space: nowrap; |
| margin: 0 auto; |
| animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite; |
| } |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: #4ecdc4 } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <div class="blob bg-purple-600" style="width: 300px; height: 300px; top: 20%; left: 10%;"></div> |
| <div class="blob bg-blue-500" style="width: 250px; height: 250px; bottom: 10%; right: 15%;"></div> |
| |
| |
| <header class="fixed top-0 left-0 w-full z-50 bg-opacity-10 bg-black backdrop-blur-lg border-b border-white/10"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="text-2xl font-bold"> |
| <span class="gradient-text">duongkum999</span> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="text-white hover:text-gray-300 transition">Home</a> |
| <a href="#about" class="text-white hover:text-gray-300 transition">About</a> |
| <a href="#skills" class="text-white hover:text-gray-300 transition">Skills</a> |
| <a href="#projects" class="text-white hover:text-gray-300 transition">Projects</a> |
| </nav> |
| <button class="md:hidden text-white text-2xl" id="menu-toggle"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-[#16213e] w-full"> |
| <div class="container mx-auto px-4 py-4 flex flex-col space-y-4"> |
| <a href="#home" class="text-white hover:text-gray-300 transition">Home</a> |
| <a href="#about" class="text-white hover:text-gray-300 transition">About</a> |
| <a href="#skills" class="text-white hover:text-gray-300 transition">Skills</a> |
| <a href="#projects" class="text-white hover:text-gray-300 transition">Projects</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="min-h-screen flex items-center justify-center pt-20"> |
| <div class="container mx-auto px-4 py-16 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 text-center md:text-left"> |
| <p class="text-gray-300 mb-4 tracking-wider">Hello, I'm</p> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6"> |
| <span class="gradient-text typewriter">Dun</span> |
| </h1> |
| <h2 class="text-2xl md:text-3xl text-gray-300 mb-8"> |
| <span id="typed-text" class="font-light"></span> |
| </h2> |
| <div class="flex flex-wrap gap-4 justify-center md:justify-start"> |
| <a href="#projects" class="px-8 py-3 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full text-white font-medium hover:opacity-90 transition transform hover:scale-105"> |
| My Work |
| </a> |
| </div> |
| <div class="mt-12 flex space-x-6 justify-center md:justify-start"> |
| <a href="#" class="text-2xl text-white hover:text-pink-500 transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="text-2xl text-white hover:text-pink-500 transition"> |
| <i class="fab fa-linkedin"></i> |
| </a> |
| <a href="#" class="text-2xl text-white hover:text-pink-500 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 relative"> |
| <div class="w-64 h-64 md:w-80 md:h-80 mx-auto relative"> |
| <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full opacity-20 animate-pulse"></div> |
| <img src="https://api.dicebear.com/6.x/avataaars/svg?seed=Alex&backgroundColor=b6e3f4" alt="Profile" class="absolute inset-10 w-44 h-44 md:w-60 md:h-60 mx-auto floating"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">About <span class="gradient-text">Me</span></h2> |
| <div class="w-24 h-1 bg-gradient-to-r from-pink-500 to-purple-600 mx-auto"></div> |
| </div> |
| <div class="flex flex-col md:flex-row items-center gap-10"> |
| <div class="md:w-1/2"> |
| <div class="card p-6 h-full"> |
| <h3 class="text-2xl font-semibold mb-4">Who am I?</h3> |
| <p class="text-gray-300 mb-4"> |
| I'm a passionate frontend developer with -1 years of experience creating beautiful and functional web applications. I specialize in modern JavaScript frameworks and have a keen eye for design. |
| </p> |
| <div class="grid grid-cols-2 gap-4 mt-6"> |
| <div> |
| <p class="text-gray-400 mb-1">Name:</p> |
| <p class="font-medium">Nguyễn Đăng DƯơng</p> |
| </div> |
| <div> |
| <p class="text-gray-400 mb-1">Email:</p> |
| <p class="font-medium">lab70018@gmail.com</p> |
| </div> |
| <div> |
| <p class="text-gray-400 mb-1">From:</p> |
| <p class="font-medium">Lạng Sơn, VN</p> |
| </div> |
| <div> |
| <p class="text-gray-400 mb-1">Experience:</p> |
| <p class="font-medium">-1 Years</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="grid grid-cols-2 gap-6"> |
| <div class="card p-6 text-center transform transition hover:scale-105"> |
| <div class="text-4xl text-pink-500 mb-4"> |
| <i class="fas fa-code"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2">Web Development</h4> |
| </div> |
| <div class="card p-6 text-center transform transition hover:scale-105"> |
| <div class="text-4xl text-blue-500 mb-4"> |
| <i class="fas fa-paint-brush"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2">UI/UX Design</h4> |
| </div> |
| <div class="card p-6 text-center transform transition hover:scale-105"> |
| <div class="text-4xl text-purple-500 mb-4"> |
| <i class="fas fa-mobile-alt"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2">Responsive Design</h4> |
| </div> |
| <div class="card p-6 text-center transform transition hover:scale-105"> |
| <div class="text-4xl text-green-500 mb-4"> |
| <i class="fas fa-rocket"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2">Performance</h4> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="skills" class="py-20 bg-black/20"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">My <span class="gradient-text">Skills</span></h2> |
| <div class="w-24 h-1 bg-gradient-to-r from-pink-500 to-purple-600 mx-auto"></div> |
| </div> |
| <div class="card p-8 max-w-3xl mx-auto"> |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">HTML/CSS</span> |
| <span>95%</span> |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: 95%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">JavaScript</span> |
| <span>90%</span> |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: 90%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">React</span> |
| <span>85%</span> |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: 85%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">Vue.js</span> |
| <span>80%</span> |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: 80%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">Node.js</span> |
| <span>75%</span> |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: 75%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="projects" class="py-20"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-4">My <span class="gradient-text">Projects</span></h2> |
| <div class="w-24 h-1 bg-gradient-to-r from-pink-500 to-purple-600 mx-auto"></div> |
| </div> |
| |
| <div class="flex justify-center mb-10"> |
| <div class="inline-flex bg-white/5 rounded-full p-1"> |
| <button class="project-filter px-6 py-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white" data-filter="all">All</button> |
| <button class="project-filter px-6 py-2 rounded-full text-white" data-filter="web">Web</button> |
| <button class="project-filter px-6 py-2 rounded-full text-white" data-filter="app">App</button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 project-container"> |
| <div class="card overflow-hidden project-item" data-category="web"> |
| <div class="relative h-64"> |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <i class="fas fa-globe text-6xl text-white/50"></i> |
| </div> |
| <div class="absolute inset-0 bg-black/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> |
| <div class="text-center p-4"> |
| <h4 class="text-xl font-semibold mb-2">E-commerce Website</h4> |
| <a href="#" class="px-4 py-2 bg-white text-purple-600 rounded-full font-medium hover:bg-opacity-90 transition">View</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card overflow-hidden project-item" data-category="app"> |
| <div class="relative h-64"> |
| <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-red-600"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <i class="fas fa-mobile-alt text-6xl text-white/50"></i> |
| </div> |
| <div class="absolute inset-0 bg-black/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> |
| <div class="text-center p-4"> |
| <h4 class="text-xl font-semibold mb-2">Fitness App</h4> |
| <a href="#" class="px-4 py-2 bg-white text-pink-600 rounded-full font-medium hover:bg-opacity-90 transition">View</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="card overflow-hidden project-item" data-category="web"> |
| <div class="relative h-64"> |
| <div class="absolute inset-0 bg-gradient-to-br from-green-500 to-teal-600"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <i class="fas fa-paint-brush text-6xl text-white/50"></i> |
| </div> |
| <div class="absolute inset-0 bg-black/70 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center"> |
| <div class="text-center p-4"> |
| <h4 class="text-xl font-semibold mb-2">Brand Identity</h4> |
| <a href="#" class="px-4 py-2 bg-white text-green-600 rounded-full font-medium hover:bg-opacity-90 transition">View</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="py-8 bg-black/40 border-t border-white/10"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-2xl font-bold mb-4 md:mb-0"> |
| <span class="gradient-text">Duongkum999</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-xl text-white hover:text-pink-500 transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="text-xl text-white hover:text-pink-500 transition"> |
| <i class="fab fa-linkedin"></i> |
| </a> |
| <a href="#" class="text-xl text-white hover:text-pink-500 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| </div> |
| </div> |
| <div class="text-center mt-6"> |
| <p class="text-gray-400">© 2023 Duongkum999. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const menuToggle = document.getElementById('menu-toggle'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| menuToggle.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const typedTextElement = document.getElementById('typed-text'); |
| const phrases = ['Frontend Developer', 'UI/UX Designer', 'Web Enthusiast']; |
| let phraseIndex = 0; |
| let charIndex = 0; |
| let isDeleting = false; |
| |
| function typeEffect() { |
| const currentPhrase = phrases[phraseIndex]; |
| |
| if (isDeleting) { |
| typedTextElement.textContent = currentPhrase.substring(0, charIndex - 1); |
| charIndex--; |
| } else { |
| typedTextElement.textContent = currentPhrase.substring(0, charIndex + 1); |
| charIndex++; |
| } |
| |
| if (!isDeleting && charIndex === currentPhrase.length) { |
| isDeleting = true; |
| setTimeout(typeEffect, 1500); |
| } else if (isDeleting && charIndex === 0) { |
| isDeleting = false; |
| phraseIndex = (phraseIndex + 1) % phrases.length; |
| setTimeout(typeEffect, 500); |
| } else { |
| setTimeout(typeEffect, isDeleting ? 50 : 100); |
| } |
| } |
| |
| setTimeout(typeEffect, 1000); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| const filterButtons = document.querySelectorAll('.project-filter'); |
| const projectItems = document.querySelectorAll('.project-item'); |
| |
| filterButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| |
| filterButtons.forEach(btn => { |
| btn.classList.remove('bg-gradient-to-r', 'from-pink-500', 'to-purple-600'); |
| }); |
| |
| |
| button.classList.add('bg-gradient-to-r', 'from-pink-500', 'to-purple-600'); |
| |
| const filterValue = button.getAttribute('data-filter'); |
| |
| projectItems.forEach(item => { |
| if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) { |
| item.style.display = 'block'; |
| } else { |
| item.style.display = 'none'; |
| } |
| }); |
| }); |
| }); |
| |
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.progress-fill'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.2; |
| |
| if (elementPosition < screenPosition) { |
| element.style.transform = 'scaleX(1)'; |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', animateOnScroll); |
| window.addEventListener('load', animateOnScroll); |
| </script> |
|
|
| </html> |
|
|
