diff --git a/style.css b/style.css index 6826186ae..b54b4dd19 100644 --- a/style.css +++ b/style.css @@ -1,1397 +1,201 @@ - -#skills { - position: relative; - overflow: hidden; -} - -.skills-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent); - opacity: 0.1; - z-index: -1; - animation: gradientShift 8s ease infinite; - background-size: 400% 400%; -} - -@keyframes gradientShift { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } -} :root { - --primary: #3498db; - --primary-dark: #2980b9; - --secondary: #2ecc71; - --secondary-dark: #27ae60; - --accent: #e74c3c; - --accent-dark: #c0392b; - --text: #e0e0e0; - --text-light: #b0b0b0; - --text-dark: #888; - --bg: #0a0a0a; - --bg-light: #1a1a2e; - --bg-lighter: #2a2a3e; - --shadow: rgba(0, 0, 0, 0.3); - --gradient: linear-gradient(135deg, var(--primary), var(--secondary),)); - --gradient-dark: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark)); + --primary: #fb61ca; + --primary-dark: #bc329c; + --secondary: #19c197; + --accent: #ffffff; + --heading-color: #cd1ac3; + --text: #fff; + --bg: #000; + --border-color: #333; + --gradient-pink: linear-gradient(135deg, #fb61ca 0%, #cd1ac3 100%); + --diamond-size: 20px; + --diamond-border: 3px solid #cd1ac3; +} +/* Reset and Base Styles */ +*, *:before, *:after { + margin: 0; padding: 0; box-sizing: border-box; } - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - body { - font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: var(--bg); - color: var(--text); - overflow-x: hidden; - line-height: 1.6; -} - - -.loading-screen { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--bg); - display: flex; - align-items: center; - justify-content: center; - z-index: 9999; - z-index: 1; - transition: opacity 0.5s ease, visibility 0.5s ease; -} - -.loading-screen.fade-out { - opacity: 0; - visibility: hidden; -} - -.loading-animation { - text-align: center; -} - -.loading-ring { - width: 60px; - height: 60px; - border: 4px solid rgba(52, 152, 219, 0.2); - border-top: 4px solid var(--primary); - border-radius: 50%; - animation: spin 0s linear infinite;; - animation: fadeInUp 1s ease-out forwards; animation: fadeInUp; - margin: 0 auto 20px; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - - -.cursor-dot, .cursor-outline { - position: fixed; - top: 0; - left: 0; - transform: translate(-50%, -50%); - border-radius: 50%; - z-index: 9999; - pointer-events: none; - opacity: 0; - transition: opacity 0.5s ease; -} - -.cursor-dot { - width: 8px; - height: 8px; - background: var(--primary); -} - -.cursor-outline { - width: 40px; - height: 40px; - border: 2px solid var(--primary); - transition: all 0.2s ease-out; -} - -body:hover .cursor-dot, -body:hover .cursor-outline { - opacity: 1; -} - -#particles-js { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -1; -} -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - - -header { - position: fixed; - width: 100%; - padding: 20px 50px; - background: rgba(10, 10, 10, 0.95); - backdrop-filter: blur(10px); - z-index: 1000; - border-bottom: 2px solid rgba(52, 152, 219, 0.3); - transition: all 0.3s ease; -} - -.header-scrolled { - padding: 15px 50px; - background: rgba(10, 10, 10, 0.98); - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); -} - -nav { - display: flex; - justify-content: space-between; - align-items: center; -} - -.logo { - display: flex; - align-items: center; - font-size: 28px; - font-weight: bold; - cursor: pointer; - transition: all 0.3s ease; -} - -.logo-text { - background: var(--gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.logo-dot { - width: 8px; - height: 8px; - background: var(--secondary); - border-radius: 50%; - margin-left: 5px; - animation: pulse 2s infinite; -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.logo:hover { - transform: scale(1.05); -} - -.nav-links { - display: flex; - gap: 30px; - list-style: none; -} - -.nav-links a { - color: var(--text); - text-decoration: none; - font-size: 16px; - font-weight: 500; - position: relative; - transition: all 0.3s ease; - cursor: pointer; -} - -.nav-links a::after { - content: ''; - position: absolute; - width: 0; - height: 2px; - bottom: -5px; - left: 0; - background: var(--gradient); - transition: width 0.3s ease; -} - -.nav-links a:hover::after, -.nav-links a.active::after { - width: 100%; -} - -.nav-links a:hover, -.nav-links a.active { - color: var(--primary); - transform: translateY(-2px); + background: var(--bg); + color: var(--text); + font-family: 'Inter', sans-serif; + line-height: 1.7; + min-height: 100vh; + transition: background 1s; +} +a, button { + color: var(--text); + text-decoration: none; + font-weight: 600; + transition: color 0.3s; +} +h1, h2, h3, h4 { + color: var(--heading-color); + font-family: 'Inter', sans-serif; + font-weight: 700; + letter-spacing: 1px; } - -.mobile-menu { - display: none; - flex-direction: column; - cursor: pointer; -} - -.mobile-menu span { - width: 25px; - height: 3px; - background: var(--primary); - margin: 3px 0; - transition: 0.3s; -} - - -.hero { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 0 50px; - position: relative; - overflow: hidden; -} - -.hero-content { - display: flex; - align-items: center; - justify-content: space-between; - max-width: 1200px; - width: 100%; - gap: 50px; -} - -.hero-text { - flex: 1; - z-index: 1; - opacity: 0; - transform: translateY(50px); - animation: fadeInUp 1s ease-out forwards; -} - -@keyframes fadeInUp { - to { - opacity: 1; - transform: translateY(0); - } -} - -.hero-title { - font-size: 56px; - margin-bottom: -20px; - line-height: 1.2; -} - -.title-line { - display: block; +.section-title { + font-size: 2.75rem; + margin: 1.5em auto; + padding-bottom: 0.6em; + border-bottom: 4px solid var(--heading-color); + text-align: center; } - .highlight { - background: var(--gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - position: relative; -} - -.highlight::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 3px; - background: var(--gradient); - transform: scaleX(0); - transform-origin: left; - animation: expandWidth 1.5s ease forwards 0.5s; -} - -@keyframes expandWidth { - to { - transform: scaleX(1); - } -} - -.hero-subtitle { - font-size: 32px; - color: var(--primary); - margin-bottom: 20px; - font-weight: 600; + color: var(--primary); + background: var(--gradient-pink); + padding: 0.1em 0.5em; + border-radius: 8px; } - -.hero-description { - font-size: 18px; - line-height: 1.6; - margin-bottom: 30px; - color: var(--text-light); - max-width: 600px; -} - -.cta-buttons { - display: flex; - gap: 20px; - flex-wrap: wrap; +nav { + background: rgba(0,0,0,0.9); + position: fixed; width: 100%; + top:0; left:0; z-index:999; + border-bottom: 1px solid var(--border-color); +} +.logo-text { color: var(--heading-color); font-weight: 700; } +.logo-dot { display: inline-block; width: 8px; height: 8px; background: var(--secondary); border-radius: 50%; margin-left: 5px;} +ul.nav-links { + list-style: none; display: flex; gap: 2.2em; align-items: center; +} +.nav-links a { color: var(--accent); padding: 1em 0; } +.nav-links a:hover, .nav-links a.active { color: var(--primary);} +.home, .about, .skills, .projects, .contact { padding: 100px 0 50px; min-height: 100vh;} +.container { max-width: 1000px; margin: auto; padding: 0 24px; } + +.hero-title { font-size: 3rem; } +.hero-subtitle { font-size: 2rem; color: var(--primary);} +.hero-description { color: var(--accent); font-size: 1.15rem; max-width: 500px;} +.cta-buttons { + display: flex; gap: 30px; margin-top: 2em; } - .cta-button { - display: inline-flex; - align-items: center; - gap: 10px; - padding: 15px 40px; - border-radius: 50px; - font-weight: 600; - position: relative; - overflow: hidden; - transition: all 0.3s ease; - cursor: pointer; - border: none; - font-size: 16px; - text-decoration: none; -} - -.cta-button.primary { - background: var(--gradient); - color: white; -} - -.cta-button.secondary { - background: transparent; - border: 2px solid var(--primary); - color: var(--primary); -} - -.cta-button::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - transform: translate(-50%, -50%); - transition: width 0.6s, height 0.6s; -} - -.cta-button:hover::before { - width: 300px; - height: 300px; -} - -.cta-button:hover { - transform: translateY(-3px); - box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4); -} - -.cta-button.secondary:hover { - background: var(--gradient); - color: white; -} - -.hero-visual { - flex: 1; - position: relative; - height: 400px; -} - -.floating-shapes { - position: relative; - width: 100%; - height: 100%; -} - -.shape { - position: absolute; - border-radius: 50%; - background: var(--gradient); - opacity: 0.7; - filter: blur(20px); - animation: float 6s ease-in-out infinite; -} - -.shape-1 { - width: 100px; - height: 100px; - top: 20%; - left: 10%; - animation-delay: 0s; -} - -.shape-2 { - width: 150px; - height: 150px; - top: 50%; - right: 10%; - animation-delay: 2s; -} - -.shape-3 { - width: 80px; - height: 80px; - bottom: 20%; - left: 30%; - animation-delay: 4s; -} - -@keyframes float { - 0%, 100% { - transform: translate(0, 0) scale(1); - } - 50% { - transform: translate(-20px, 20px) scale(1.1); - } -} - -.scroll-indicator { - position: absolute; - bottom: 30px; - left: 50%; - transform: translateX(-50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - color: var(--text-light); - font-size: 14px; - opacity: 0; - animation: fadeIn 1s ease forwards 1.5s; -} - -@keyframes fadeIn { - to { - opacity: 1; - } -} - -.scroll-arrow { - width: 2px; - height: 30px; - background: var(--primary); - position: relative; -} - -.scroll-arrow::after { - content: ''; - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: 10px; - height: 10px; - border-right: 2px solid var(--primary); - border-bottom: 2px solid var(--primary); - transform: translateX(-50%) rotate(45deg); - animation: bounce 2s infinite; -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateX(-50%) rotate(45deg) translateY(0); - } - 40% { - transform: translateX(-50%) rotate(45deg) translateY(-10px); - } - 60% { - transform: translateX(-50%) rotate(45deg) translateY(-5px); - } -} - - -section { - padding: 100px 0; -} - -.section-title { - font-size: 42px; - text-align: center; - margin-bottom: 60px; - position: relative; - color: var(--text); -} - -.section-title::after { - content: ''; - position: absolute; - bottom: -15px; - left: 50%; - transform: translateX(-50%); - width: 80px; - height: 4px; - background: var(--gradient); - border-radius: 2px; -} - - -.about-content { - display: flex; - align-items: center; - gap: 60px; -} - -.about-text { - flex: 1; -} - -.about-text p { - margin-bottom: 20px; - font-size: 18px; - line-height: 1.6; - color: var(--text-light); -} - -.about-stats { - display: flex; - gap: 30px; - margin-top: 40px; -} - -.stat { - text-align: center; -} - -.stat-number { - display: block; - font-size: 42px; - font-weight: bold; - background: var(--gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - margin-bottom: 5px; -} - -.stat-label { - font-size: 16px; - color: var(--text-light); -} - -.about-image { - flex: 1; - display: flex; - justify-content: center; - align-items: center; -} - -.profile-container { - position: relative; - width: 300px; - height: 300px; -} - -.profile-ring { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 50%; - background: conic-gradient(var(--primary), var(--secondary), var(--primary)); - padding: 10px; - animation: rotate 10s linear infinite; -} - -.profile-ring-inner { - width: 100%; - height: 100%; - background: var(--bg-light); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; -} - -.profile-initials { - font-size: 150px; - font-weight: bold; - background: var(--gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - - -.profile-glow { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 320px; - height: 320px; - background: var(--primary); - border-radius: 50%; - filter: blur(40px); - opacity: 0.3; - z-index: -1; - animation: pulse 3s ease-in-out infinite; -} - -@keyframes rotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - - + padding: 15px 36px; + border: none; + border-radius: 11px; + font-weight: 600; + font-size: 1.1em; + transition: background 0.3s, transform 0.2s; + background: var(--gradient-pink); + color: var(--bg); + box-shadow: 0 6px 22px rgba(245, 97, 202, 0.22) +} +.cta-button.secondary { background: var(--secondary); color: var(--bg);} +.cta-button:hover { transform: translateY(-4px) scale(1.03);} +.about-content { display: flex; gap: 45px; } +.about-text { flex: 1; color: var(--text);} .skills-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 30px; + display: grid; + grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); + gap: 2rem; + margin: 2em 0; } - .skill-card { - background: var(--bg-light); - padding: 40px 30px; - border-radius: 20px; - text-align: center; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - border: 1px solid rgba(52, 152, 219, 0.1); + background: var(--bg); + border-radius: 17px; + box-shadow: 0 4px 24px rgba(245, 97, 202, 0.13); + padding: 24px; + display: flex; + flex-direction: column; + align-items: center; + border: 2px solid var(--border-color); + transition: transform 0.5s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s; +} +.skill-card:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 8px 39px rgba(245, 97, 202, 0.28);} +.skill-icon img { width: 45px; height: 45px; filter: drop-shadow(0 1px 6px var(--primary)); margin-bottom: 9px;} +.skill-card h3 { margin: 0.6em 0 0; font-size: 1.24em; color: var(--heading-color);} +.animate-skill { animation: skillFade 1.8s cubic-bezier(.24,.64,.41,.97) forwards; opacity:0;} +@keyframes skillFade { + 0% { opacity:0; transform: translateY(30px);} + 100% { opacity:1; transform: translateY(0);} } - -.skill-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 5px; - background: var(--gradient); - transform: scaleX(0); - transform-origin: left; - transform-origin: right; - transition: transform 0.3s ease; -} - -.skill-card:hover::before { - transform: scaleX(1); -} - -.skill-card:hover { - transform: translateY(-10px); - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); -} - -.skill-icon { - width: 80px; - height: 80px; - margin: 0 auto 20px; - background: rgba(52, 152, 219, 0.1); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: var(--primary); -} -.skill-icon { color: red !important; } - - -.skill-card h3 { - font-size: 24px; - margin-bottom: 15px; - color: var(--text); -} - -.skill-card p { - color: var(--text-light); - margin-bottom: 20px; - transition: transform 0.3s -} -.skill-card:hover { transform: scale(1.1) } -.skill-tags { - display: flex; - flex-wrap: wrap; - gap: 10px; - justify-content: center; -} - -.skill-tagss { - background: rgba(52, 152, 219, 0.1); - color: var(--primary); - padding: 5px 15px; - border-radius: 20px; - font-size: 14px; - font-weight: 500; - transition: all 0.3s ease; -} - -.skill-tag:hover { - background: var(--primary); - color: white; - transform: translateY(-2px); -} - - .projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 30px; + display: grid; + grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); + gap: 2.5em; + margin-top: 1.2em; } - .project-card { - background: var(--bg-light); - border-radius: 20px; - overflow: hidden; - transition: all 0.3s ease; - border: 1px solid rgba(52, 152, 219, 0.1); -} - -.project-card:hover { - transform: translateY(-10px); - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); -} - -.project-image { - height: 200px; - background: var(--bg-lighter); - position: relative; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} - -.project-icon { - font-size: 60px; -} - -.project-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(10, 10, 10, 0.9); - display: flex; - align-items: center; - justify-content: center; - opacity: 90; - opacity:1; - transition: all 0.3s ease; -} - -.project-card:hover .project-overlay { - opacity: 1; -} - -.project-links { - display: flex; - gap: 15px; -} - -.project-link { - padding: 10px 20px; - background: var(--gradient); - color: white; - text-decoration: none; - border-radius: 50px; - font-weight: 500; - transition: all 0.3s ease; -} - -.project-link:hover { - transform: translateY(-3px); - box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4); -} - -.project-content { - padding: 30px; -} - -.project-content h3 { - font-size: 24px; - margin-bottom: 15px; - color: var(--text); -} - -.project-content p { - color: var(--text-light); - margin-bottom: 20px; + background: var(--bg); + border-radius: 19px; + box-shadow: 0 5px 17px rgba(245, 97, 202, 0.15); + padding: 22px; + display: flex; + flex-direction: column; + align-items: center; + border: 2px solid var(--border-color); + transition: transform 0.4s, box-shadow 0.3s; +} +.project-card:hover {transform: scale(1.03); box-shadow: 0 12px 52px rgba(245,97,202,0.19);} +.project-icon img { width: 42px; height: 42px; margin-bottom: 12px;} +.project-content h3 { color: var(--primary); margin-bottom: 0.7em;} +.project-content p { color: var(--text); font-size: 1rem;} +.contact-box { + background: var(--bg); + border-radius: 20px; + box-shadow: 0 5px 18px rgba(245,97,202,0.17); + padding: 2.2em; + max-width: 500px; + margin: auto; } - -.project-tags { - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.project-tag { - background: rgba(52, 152, 219, 0.1); - color: var(--primary); - padding: 5px 15px; - border-radius: 20px; - font-size: 14px; - font-weight: 500; -} - - -.contact-content { - display: flex; - gap: 60px; - align-items: flex-start; -} - -.contact-info { - flex: 1; -} - -.contact-info h3 { - font-size: 32px; - margin-bottom: 20px; - color: var(--text); -} - -.contact-info p { - color: var(--text-light); - margin-bottom: 40px; - font-size: 18px; -} - -.contact-details { - margin-bottom: 40px; -} - -.contact-item { - display: flex; - align-items: center; - gap: 20px; - margin-bottom: 25px; -} - -.contact-icon { - width: 50px; - height: 50px; - background: rgba(52, 152, 219, 0.1); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: var(--primary); -} - -.contact-text span:first-child { - display: block; - font-weight: 600; - margin-bottom: 5px; -} - -.contact-text span:last-child { - color: var(--text-light); -} - -.social-links { - display: flex; - gap: 15px; -} - -.social-links a { - width: 50px; - height: 50px; - background: rgba(52, 152, 219, 0.1); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - color: var(--primary); - transition: all 0.3s ease; - transition: none; -} - -.social-links a:hover { - background: var(--gradient); - color: white; - transform: translateY(-5px); -} - .contact-form { - flex: 1; - background: var(--bg-light); - padding: 40px; - border-radius: 20px; - border: 1px solid rgba(52, 152, 219, 0.1); + display: flex; + flex-direction: column; + gap: 1.7em; } - .form-group { - margin-bottom: 25px; -} - -.form-group label { - display: block; - margin-bottom: 10px; - font-weight: 500; - color: var(--text); -} - -.form-group input, -.form-group textarea { - width: 100%; - padding: 15px 20px; - background: var(--bg-lighter); - border: 1px solid rgba(52, 152, 219, 0.2); - border-radius: 10px; - color: var(--text); - font-size: 16px; - transition: all 0.3s ease; -} - -.form-group input:focus, -.form-group textarea:focus { - outline: none; - border-color: var(--primary); - box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); -} - -.form-group textarea { - min-height: 150px; - resize: vertical; -} - -.submit-button { - display: inline-flex; - align-items: center; - gap: 10px; - padding: 15px 40px; - background: var(--gradient); - color: white; - border: none; - border-radius: 50px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - font-size: 16px; -} - -.submit-button:hover { - transform: translateY(-3px); - box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4); -} - - -footer { - background: var(--bg-light); - padding: 60px 0 30px; - border-top: 1px solid rgba(52, 152, 219, 0.1); -} - -.footer-content { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 40px; -} - -.footer-logo p { - color: var(--text-light); - margin-top: 10px; -} - -.footer-links { - display: flex; - gap: 30px; -} - -.footer-links a { - color: var(--text-light); - text-decoration: none; - transition: all 0.3s ease; - cursor: pointer; -} - -.footer-links a:hover { - color: var(--primary); - transform: translateY(-2px); -} - -.footer-bottom { - text-align: center; - padding-top: 30px; - border-top: 1px solid rgba(52, 152, 219, 0.1); - color: var(--text-light); - font-size: 14px; -} - -.footer-bottom p:first-child { - margin-bottom: 10px; -} - - -.back-to-top { - position: fixed; - bottom: 30px; - right: 30px; - width: 50px; - height: 50px; - background: var(--gradient); - color: white; - border: none; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - z-index: 100; -} - -.back-to-top.visible { - opacity: 1; - visibility: visible; -} - -.back-to-top:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4); -} - - -@media "max-width: 1024px":{ - .hero-title { - font-size: 48px; - } - - .hero-subtitle { - font-size: 28px; - } - - .about-content { - flex-direction: column; - text-align: center; - } - - .contact-content { - flex-direction: column; - } -} - -@media "max-width: 768px": { - header { - padding: 15px 20px; - } - - .header-scrolled { - padding: 10px 20px; - } - - .nav-links { - position: fixed; - top: 70px; - left: 0; - width: 100%; - background: var(--bg); - flex-direction: column; - align-items: center; - padding: 20px 0; - gap: 20px; - transform: translateY(-100%); - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - border-bottom: 2px solid rgba(52, 152, 219, 0.3); - } - - .nav-links.active { - transform: translateY(0); - opacity: 1; - visibility: visible; - } - - .mobile-menu { - display: flex; - } - - .mobile-menu.active span:nth-child(1) { - transform: rotate(45deg) translate(5px, 5px); - } - - .mobile-menu.active span:nth-child(2) { - opacity: 0; - } - - .mobile-menu.active span:nth-child(3) { - transform: rotate(-45deg) translate(7px, -6px); - } - - .hero { - padding: 0 20px; - } - - .hero-content { - flex-direction: column; - text-align: center; - } - - .hero-title { - font-size: 36px; - } - - .hero-subtitle { - font-size: 24px; - } - - .cta-buttons { - justify-content: center; - } - - .about-stats { - flex-direction: column; - gap: 20px; - } - - .footer-content { - flex-direction: column; - gap: 30px; - text-align: center; - } - - .footer-links { - justify-content: center; - } -} - -@media ('max-width: 480px") { - .hero-title { - font-size: 32px; - } - - .hero-subtitle { - font-size: 20px; - } - - .cta-button { - width: 100%; - justify-content: center; - } - - .section-title { - font-size: 32px; - } - - .projects-grid, - .skills-grid { - grid-template-columns: 1fr; - } - - .contact-form { - padding: 30px 20px; - } -} -.skill-visualization { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); - gap: 20px; - margin-top: 40px; -} - -.skill-icon-3d { - width: 80px; - height: 80px; - background: var(--bg-light); - border-radius: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.skill-icon-3d::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); - transition: left 0.5s; -} - -.skill-icon-3d:hover::before { - left: 100%; -} - -.skill-icon-3d:hover { - transform: translateY(-10px) scale(1.1); - box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3); -} -.timeline { - position: relative; - max-width: 800px; - margin: 50px auto; -} - -.timeline::before { - content: ''; - position: absolute; - left: 50%; - transform: translateX(-50%); - width: 4px; - height: 100%; - background: var(--gradient); -} - -.timeline-item { - margin: 40px 0; - opacity: 0; - transform: translateY(50px); - transition: all 0.6s ease; -} - -.timeline-item.animate-in { - opacity: 1; - transform: translateY(0); -} - -.timeline-content { - background: var(--bg-light); - padding: 25px; - border-radius: 15px; - position: relative; - width: 45%; - border: 1px solid rgba(52, 152, 219, 0.2); -} - -.timeline-item:nth-child(odd) .timeline-content { - margin-left: 55%; -} - -.timeline-item:nth-child(even) .timeline-content { - margin-right: 55%; -} -.code-showcase { - background: #1e1e1e; - border-radius: 10px; - padding: 20px; - margin: 20px 0; - position: relative; - overflow: hidden; -} - -.code-line { - display: block; - margin: 5px 0; - opacity: 0; - transform: translateX(-20px); - animation: typeIn 0.5s ease forwards; -} - -@keyframes typeIn { - to { - opacity: 1; - transform: translateX(0); - } -} - -.code-cursor { - display: inline-block; - width: 2px; - height: 1.2em; - background: var(--primary); - margin-left: 2px; - animation: blink 1s infinite; -} - -@keyframes blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} -.project-card { - perspective: 1000px; - height: 400px; -} - -.project-card-inner { - position: relative; - width: 100%; - height: 100%; - transform-style: preserve-3d; - transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -.project-card:hover .project-card-inner { - transform: rotateY(180deg); -} - -.project-card-front, -.project-card-back { - position: absolute; - width: 100%; - height: 100%; - backface-visibility: hidden; - border-radius: 20px; - background: var(--bg-light); - overflow: hidden; -} - -.project-card-back { - transform: rotateY(180deg); - padding: 30px; - display: flex; - flex-direction: column; - justify-content: center; - background: var(--gradient-dark); -} - -.tech-stack { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin: 20px 0; -} - -.tech-item { - background: rgba(255, 255, 255, 0.2); - padding: 5px 12px; - border-radius: 15px; - font-size: 12px; - color: white; -} -.skill-level { - margin-top: 15px; -} - -.skill-progress { - height: 6px; - background: var(--bg-lighter); - border-radius: 10px; - overflow: hidden; - position: relative; -} - -.skill-progress-bar { - height: 100%; - background: var(--gradient); - border-radius: 10px; - transform: scaleX(0); - transform-origin: left; - transition: transform 1.5s ease-out; + position: relative; + margin-bottom: 1em; +} +.input-icon { + position: absolute; + left: 13px; top: 50%; transform: translateY(-50%); + width: 24px; height: 24px; + display: flex; align-items: center; justify-content: center; +} +.input-icon img { width: 22px; height: 22px; opacity: 0.72;} +input, textarea { + width: 100%; padding: 12px 12px 12px 45px; + border-radius: 10px; + border: 1px solid var(--border-color); + background: var(--bg); + color: var(--text); + font-size: 1.07em; +} +textarea { min-height: 120px; resize: vertical;} +input:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(251,97,202,0.17);} +button.cta-button { margin-top: 0.8em;} +footer { background: var(--bg); color: var(--text); text-align: center; padding: 2em 0;} +/* Diamond Cursor Styles */ +.cursor-dot, .cursor-outline { + pointer-events: none; position: fixed; + top: 0; left: 0; z-index: 9999; + transform: translate(-50%, -50%) rotate(45deg); } - -.skill-card.animate-in .skill-progress-bar { - transform: scaleX(1); +.cursor-dot { + width: var(--diamond-size); height: var(--diamond-size); + background: var(--secondary); + border-radius: 3px; + border: var(--diamond-border); + transition: transform 0.12s; } - -.skill-percentage { - position: absolute; - right: 0; - top: -20px; - font-size: 12px; - font-weight: 600; - color: var(--primary); +.cursor-outline { + width: calc(var(--diamond-size) * 2); height: calc(var(--diamond-size) * 2); + border: var(--diamond-border); + border-radius: 8px; + background: none; + transition: border-color 0.22s, width 0.22s, height 0.22s; +} +/* Pink Headings */ +h1, h2, h3, .section-title { color: var(--heading-color); } +/* Responsive */ +@media (max-width: 900px) { + .about-content { flex-direction: column; gap: 30px;} + .skills-grid, .projects-grid { grid-template-columns: 1fr; } +} +@media (max-width: 600px) { + header { padding: 10px 0; } + .section-title { font-size: 2em; } + .hero-title { font-size: 2em;} }