Creative Designer Portfolio

Creating visual experiences that captivate and inspire

:root { --primary-color: #8a2be2; --secondary-color: #4b0082; --accent-color: #ff1493; --text-color: #ffffff; --font-main: 'Poppins', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background: linear-gradient(135deg, var(--secondary-color), #000000); color: var(--text-color); min-height: 100vh; overflow-x: hidden; } .floating-shapes { position: fixed; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .shape { position: absolute; opacity: 0.1; border-radius: 50%; background: radial-gradient(circle, var(--primary-color), transparent); animation: float 15s infinite ease-in-out; } .shape.cube { width: 100px; height: 100px; top: 20%; left: 10%; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); } .shape.sphere { width: 150px; height: 150px; top: 60%; left: 75%; } .shape.cone { width: 120px; height: 120px; top: 30%; left: 80%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } header { padding: 2rem; } nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; list-style: none; } nav a { color: var(--text-color); text-decoration: none; font-weight: 300; position: relative; transition: all 0.3s ease; } nav a:hover { color: var(--accent-color); } nav a.active { font-weight: 600; color: var(--primary-color); } nav a.active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--primary-color); } .btn { padding: 0.5rem 1.5rem; background: transparent; border: 1px solid var(--primary-color); border-radius: 50px; transition: all 0.3s ease; } .btn:hover { background: var(--primary-color); color: white; transform: translateY(-3px); box-shadow: 0 10px 15px rgba(138, 43, 226, 0.3); } .hero { display: flex; justify-content: space-between; align-items: center; padding: 5rem 10%; min-height: 80vh; flex-wrap: wrap; } .intro { flex: 1; min-width: 300px; margin-bottom: 2rem; } .intro h1 { font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.2; color: transparent; -webkit-text-stroke: 1px var(--text-color); background: linear-gradient( 90deg, var(--text-color), var(--accent-color) ); background-size: 200%; -webkit-background-clip: text; background-clip: text; animation: textShine 8s linear infinite; } .subtitle { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.8; } .hire-btn { padding: 1rem 2.5rem; border: none; border-radius: 50px; background: var(--primary-color); color: white; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4); position: relative; overflow: hidden; z-index: 1; } .hire-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent-color), var(--primary-color)); transition: all 0.5s ease; z-index: -1; } .hire-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 20, 147, 0.5); } .hire-btn:hover::before { width: 100%; } .profile { position: relative; width: 400px; height: 400px; margin: 0 auto; } .photo-frame { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 5px solid rgba(138, 43, 226, 0.3); animation: floating 8s ease-in-out infinite; box-shadow: 0 0 50px rgba(138, 43, 226, 0.5); } .photo-frame img { width: 100%; height: 100%; object-fit: cover; } .tool-icons { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .icon { position: absolute; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem; backdrop-filter: blur(5px); box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); transition: all 0.3s ease; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .icon:hover { transform: scale(1.2); box-shadow: 0 0 30px var(--accent-color); } .icon.ps { top: -10%; left: 20%; animation-name: float-x; color: #31a8ff; } .icon.ai { top: 80%; left: 70%; animation-name: float-y; color: #ff9a00; } .icon.figma { top: 30%; left: -10%; animation-name: float-xy; color: #a259ff; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(50px, 50px) rotate(180deg); } 100% { transform: translate(0, 0) rotate(360deg); } } @keyframes float-x { 0% { transform: translateX(0px); } 50% { transform: translateX(20px); } 100% { transform: translateX(0px); } } @keyframes float-y { 0% { transform: translateY(0px); } 50% { transform: translateY(20px); } 100% { transform: translateY(0px); } } @keyframes float-xy { 0% { transform: translate(0, 0); } 50% { transform: translate(15px, 15px); } 100% { transform: translate(0, 0); } } @keyframes textShine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @media (max-width: 768px) { .hero { flex-direction: column; padding: 2rem; } .intro h1 { font-size: 2.5rem; } .profile { width: 300px; height: 300px; margin-top: 2rem; } .tool-icons .icon { width: 50px; height: 50px; font-size: 1.5rem; } nav ul { gap: 1rem; } } @media (max-width: 480px) { .intro h1 { font-size: 2rem; } .profile { width: 250px; height: 250px; } nav ul { gap: 0.5rem; } .btn { padding: 0.3rem 1rem; font-size: 0.8rem; } } // Typing animation for intro text const text = "Hi, I'm Alex, a Passionate Graphic Designer."; const animatedText = document.getElementById('animated-text'); let i = 0; let isDeleting = false; let speed = 100; function typeWriter() { const currentText = text.substring(0, i); animatedText.innerHTML = currentText; if (!isDeleting && i === text.length) { isDeleting = true; speed = 50; setTimeout(typeWriter, 1000); return; } if (isDeleting && i === 0) { isDeleting = false; speed = 100; } if (isDeleting) { i--; } else { i++; } setTimeout(typeWriter, speed); } // Initialize animations document.addEventListener('DOMContentLoaded', () => { typeWriter(); // Add hover effect to nav items const navItems = document.querySelectorAll('nav a'); navItems.forEach(item => { item.addEventListener('mouseenter', () => { if (!item.classList.contains('active')) { item.style.transform = 'translateY(-3px)'; } }); item.addEventListener('mouseleave', () => { if (!item.classList.contains('active')) { item.style.transform = 'translateY(0)'; } }); }); // Hire me button effect const hireBtn = document.querySelector('.hire-btn'); hireBtn.addEventListener('click', () => { hireBtn.style.transform = 'translateY(0)'; hireBtn.style.boxShadow = '0 5px 15px rgba(138, 43, 226, 0.4)'; setTimeout(() => { window.location.href = '#contact'; }, 300); }); });