diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..87337c616 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,1317 @@ + + + + + + Morgan Taylor Portfolio + + + + + + + + + + +
+ + +
+
+ + + + + +
+
+
+

+ Hi, I'm MorganTaylor +

+

+ Full-Stack Developer & AI Enthusiast +

+

+ Computer Science student passionate about creating innovative web + solutions using MERN stack, AI applications for climate change, + healthcare, and agriculture. I love building interactive experiences + with modern animations and cutting-edge technology. +

+
+ View My Work + Contact Me +
+
+
+
+
+ Profile +
+
+
+
+ Available for work +
+
+
+
+
+
+ + +
+
+

+ About Me +

+
+
+
+ About Me +
+
+
+
+

+ I'm a passionate Computer Science student from MET BKC IOE, + Nashik, with a strong focus on full-stack web development and + artificial intelligence applications. My journey in tech has + been driven by curiosity and a desire to solve real-world + problems through innovative solutions. +

+

+ I specialize in the MERN stack and have experience building + interactive web applications with advanced animations, + AI-powered features, and responsive designs. I'm particularly + interested in applying technology to address challenges in + climate change, healthcare, and agriculture. +

+
+
+
+
+
+ + +
+
+

+ Featured Projects +

+
+ +
+
+ Project 1 +
+

AI Travel Planner

+
+
+
+

+ Full-stack MERN application with AI-powered itinerary planning, + user photo uploads, Razorpay integration, and modern animations. + Features mobile-responsive design and real-time travel + recommendations.MERN Stack AI Integration Animations Payment + Gateway +

+
+ Mangodb + Express.js + React.js + Node.js +
+ + View Project + + +
+
+ + +
+
+ Project 2 +
+

+ E-Royalty Authority Platform And Overload Detection System +

+
+
+
+

+ The E-Royalty Authority Platform and Overload Detection System + aims to revolutionize the way royalties are managed and detected + in the online marketplace. This platform provides a + comprehensive solution for tracking and managing royalties in + real-time, while also detecting potential overload scenarios + that can lead to unauthorized usage and loss of revenue. +

+
+ HTML + CSS + JS + MYSQL +
+ + View Project + + +
+
+ + +
+
+ Project 3 +
+

+ Market Basket Analysis for Amazon Product Recommendation +

+
+
+
+

+ Conducted Market Basket Analysis (MBA) on Amazon product dataset + to enhance recommendations. Identified top-selling products and + top products in each category using review count. Implemented + association rule mining for personalized recommendations. + Evaluated effectiveness through metrics. +

+
+ Python + Pandas + Numpy +
+ + View Project + + +
+
+
+
+ + See All Projects + +
+
+
+ + +
+
+

+ My Skills +

+ +
+ +
+

+ Design + Skills +

+
+
+
+ UI/UX Design + 95% +
+
+
+
+
+
+
+ Motion Design + 85% +
+
+
+
+
+
+
+ 3D Animation + 75% +
+
+
+
+
+
+
+ Prototyping + 90% +
+
+
+
+
+
+
+ + +
+

+ Development + Skills +

+
+
+
+ HTML/CSS + 98% +
+
+
+
+
+
+
+ JavaScript + 90% +
+
+
+
+
+
+
+ MERN Stack + 85% +
+
+
+
+
+
+
+ React + 88% +
+
+
+
+
+
+
+
+ + +
+

+ Tools & Technologies +

+
+
+ Figma + Figma +
+ +
+ VSCode + VSCode +
+
+ Git + Git +
+
+ Tailwind + Tailwind +
+
+ Firebase + Firebase +
+
+ React + React +
+
+
+
+
+ + +
+
+

+ My Resume +

+ +
+ +
+
+
+ Morgan Taylor +
+

Morgan Taylor

+

+ Full-Stack Developer +

+ + + Download Resume + +
+
+ + morgantaylor@gmail.com +
+
+ + (123) 456-7890 +
+
+ + Nashik, Maharashtra +
+
+
+
+ + +
+ +
+

+ + Education +

+
+
+

+ Bachelor of Engineering in Computer Science +

+

MET BKC IOE, Nashik

+

2022 - 2026

+

+ CGPA: 8.5/10 +

+
+
+

+ Higher Secondary Certificate (HSC) +

+

Nashik Board

+

2020 - 2022

+

+ Percentage: 85% +

+
+
+
+ + +
+

+ + Work Experience +

+
+
+

+ Full-Stack Developer Intern +

+

+ Tech Innovations Pvt. Ltd. +

+

+ June 2024 - Present +

+
    +
  • + Developed and maintained web applications using MERN stack +
    • +
  • + Implemented responsive UI designs with React and Tailwind + CSS +
    • +
  • + Collaborated with cross-functional teams to deliver + projects on time +
    • +
  • + Optimized application performance and improved load times + by 30% +
    • +
+
+
+

Web Development Intern

+

+ Digital Solutions Inc. +

+

+ Jan 2024 - May 2024 +

+
    +
  • + Assisted in developing client websites using HTML, CSS, + and JavaScript +
    • +
  • + Implemented responsive design principles for mobile + compatibility +
    • +
  • Participated in code reviews and team meetings
    • +
+
+
+
+ + +
+

+ + Certifications +

+
+
+ +
+

MERN Stack Development

+

+ Coding Ninjas • 2024 +

+
+
+
+ +
+

AI and Machine Learning

+

+ Google • 2023 +

+
+
+
+ +
+

React.js Developer

+

+ Meta • 2023 +

+
+
+
+ +
+

Cloud Computing Fundamentals

+

+ AWS • 2023 +

+
+
+
+
+ + +
+

+ + Achievements +

+
+
+ +
+

1st Place - Hackathon 2024

+

+ Won first prize in college-level hackathon for developing + an AI-powered healthcare solution +

+
+
+
+ +
+

Best Project Award

+

+ Received award for the best academic project in Computer + Science department +

+
+
+
+ +
+

GDSC Core Member

+

+ Selected as core member of Google Developer Student Club + for 2023-2024 +

+
+
+
+
+
+
+
+
+ + +
+
+

+ Get In Touch +

+
+
+
+

Contact Information

+

+ Feel free to reach out if you're looking for a + designer/developer, have a question, or just want to connect. +

+ +
+
+ +
+

Email

+

morgantaylor@gmail.com

+
+
+
+ +
+

Location

+

Nashik, Maharashtra

+
+
+
+ +
+

Phone

+

(123) 456-7890

+
+
+
+ +
+ + + + + + + + + + + + +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+
+
+ + + + + + + + + + diff --git a/script.js b/script.js index ed600de4e..56de2ffbd 100644 --- a/script.js +++ b/script.js @@ -1,287 +1,219 @@ -document.addEventListener('DOMContentLoaded', function() { - - setInterval(() => { - console.log('Memory leak running...'); - }, 1000); - - setTimeout(() => { - document.getElementById('loading-screen').classList.add('fade-out'); - setTimeout(() => { - document.getElementById('loading-screen').style.display = 'none'; - }, 500); - }, 1500); - - - var cursorDot = document.querySelector('.cursor-dot'); - var cursorOutline = document.querySelector('.cursor-outline'); - - document.addEventListener('mousemove', (e) => { - cursorDot.style.left = `${e.clientX}px`; - cursorDot.style.top = `${e.clientY}px`; - - - cursorOutline.style.left = `${e.clientX}px`; - cursorOutline.style.top = `${e.clientY}px`; - }); - - document.addEventListener('scroll', () => { - console.log('Scroll listener leak'); - }); - - const interactiveElements = document.querySelectorAll('a, button, .project-card, .skill-card, .nav-links a'); - - interactiveElements.forEach(element => { - element.addEventListener('mouseenter', () => { - cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)'; - }); - - element.addEventListener('mouseleave', () => { - cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)'; - }); - }); - - const header = document.getElementById('header'); - - - window.addEventListener('scroll', () => { - const height = header.offsetHeight; - if (window.scrollY > 100) { - header.classList.add('header-scrolled'); - } else { - header.classList.remove('header-scrolled'); - } - - const backToTop = document.getElementById('backToTop'); - if (window.scrollY > 500) { - backToTop.classList.add('visible'); - } else { - backToTop.classList.remove('visible'); - } - }); - - - window.toggleMobileMenu = function() { - const navLinks = document.getElementById('navLinks'); - const mobileMenu = document.querySelector('.mobile-menu'); - - navLinks.classList.toggle('active'); - mobileMenu.classList.toggle('active'); - }; - - - window.scrollToSection = function(sectionId, unusedParam) { - const section = document.getElementById(sectionId); - const headerHeight = document.getElementById('header').offsetHeight; - - - window.scrollTo({ - top: section.offsetTop - headerHeight, - behavior: 'auto' - }); - - const navLinks = document.getElementById('navLinks'); - const mobileMenu = document.querySelector('.mobile-menu'); - - if (navLinks.classList.contains('active')) { - navLinks.classList.remove('active'); - mobileMenu.classList.remove('active'); - } - }; - - window.scrollToTop = function() { - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); - }; - - - let current = 0; - const animateStats = function() { - const stats = document.querySelectorAll('.stat-number'); - - stats.forEach(stat => { - const target = parseInt(stat.getAttribute('data-count')); - const duration = 2000; - const step = target / (duration / 16); - - const timer = setInterval(() => { - current += step; - - if (current >= target) { - current = target; - - } - - stat.textContent = Math.floor(current); - }, 16); - }); - }; - - const observerOptions = { - root: null, - rootMargin: '0px', - threshold: 0.1 - }; - - - const observer = new IntersectionObserver((entries, unusedObserver) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('animate-in'); - - if (entry.target.id === 'about') { - animateStats(); - } - } - }); - }, observerOptions); - - const sections = document.querySelectorAll('section'); - sections.forEach(section => { - observer.observe(section); - }); - - window.submitForm = function(event) { - event.preventDefault(); - - const formData = new FormData(event.target); - const data = Object.fromEntries(formData); - - console.log('Form submitted:', data); - console.log('Form submitted at: ' + new Date().toISOString()); - console.log('User agent: ' + navigator.userAgent); - console.log('Screen size: ' + window.screen.width); - console.log('Form data processed'); - console.log('Data object created'); - console.log('Event prevented'); - console.log('Starting form processing'); - - alert('Thank you for your message! I will get back to you soon.'); - - event.target.reset(); - }; - - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - const navLinks = document.getElementById('navLinks'); - const mobileMenu = document.querySelector('.mobile-menu'); - - if (navLinks.classList.contains('active')) { - navLinks.classList.remove('active'); - mobileMenu.classList.remove('active'); - } - } - - if (e.key === 'Tab') { - document.body.classList.add('keyboard-navigation'); - } - }); - - document.addEventListener('mousedown', () => { - document.body.classList.remove('keyboard-navigation'); - }); -}); - - -document.addEventListener('DOMContentLoaded', function() { - console.log('Duplicate DOMContentLoaded listener executed'); -}); - - -function typewriterEffect() { - const titles = ["Full-Stack Developer", "AI Enthusiast", "Problem Solver", "Tech Innovator"]; - const element = document.querySelector('.hero-subtitle'); - let currentIndex = 0; - let charIndex = 0; - let isDeleting = false; - - function type() { - const currentTitle = titles[currentIndex]; - - if (isDeleting) { - element.textContent = currentTitle.substring(0, charIndex - 1); - charIndex--; - } else { - element.textContent = currentTitle.substring(0, charIndex + 1); - charIndex++; - } - - - if (charIndex > 100) charIndex = 0; - - if (!isDeleting && charIndex === currentTitle.length) { - isDeleting = true; - setTimeout(type, 2000); - } else if (isDeleting && charIndex === 0) { - isDeleting = false; - currentIndex = (currentIndex + 1) % titles.length; - setTimeout(type, 500); - } else { - setTimeout(type, isDeleting ? 50 : 100); - } - } - - type(); -} - - -function initSkillParticles() { - const skillCards = document.querySelectorAll('.skill-card'); - - skillCards.forEach(card => { - card.addEventListener('mouseenter', () => { - particlesJS('particles-js', { - particles: { - color: { value: "#2ecc71" }, - line_linked: { - color: "#2ecc71" - } - } - }); - }); - - card.addEventListener('mouseleave', () => { - particlesJS('particles-js', { - particles: { - color: { value: "#3498db" }, - line_linked: { - color: "#3498db" - } - } - }); - }); - }); -} - - -let sharedCounter = 0; -function createClosureIssue() { - const buttons = document.querySelectorAll('button'); - buttons.forEach((btn, index) => { - btn.addEventListener('click', () => { - console.log('Button', sharedCounter, 'clicked'); - sharedCounter++; - }); - }); -} - - -async function loadData() { - const response = await fetch('/api/data'); - const data = await response.json(); - - document.getElementById('data').textContent = data.content; -} - - -function riskyOperation() { - return new Promise((resolve) => { - setTimeout(() => { - resolve('Operation completed'); - }, 1000); - }); -} - - -riskyOperation().then(console.log); +// Navbar functionality +document.addEventListener('DOMContentLoaded', function() { + // DOM Elements + const navbar = document.getElementById('navbar'); + const navbarMenu = document.getElementById('navbarMenu'); + const navbarToggle = document.getElementById('navbarToggle'); + const mobileOverlay = document.getElementById('mobileOverlay'); + const themeToggle = document.getElementById('themeToggle'); + const navLinks = document.querySelectorAll('.navbar-link'); + + // Theme Management + function initializeTheme() { + const savedTheme = localStorage.getItem('theme') || 'dark'; + document.documentElement.setAttribute('data-theme', savedTheme); + themeToggle.checked = savedTheme === 'light'; + + // Add transition class for smooth theme changes + document.body.classList.add('theme-transition'); + setTimeout(() => { + document.body.classList.remove('theme-transition'); + }, 300); + } + + function toggleTheme() { + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'light' ? 'dark' : 'light'; + + document.documentElement.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + + // Add animation effect + document.body.classList.add('theme-transition'); + setTimeout(() => { + document.body.classList.remove('theme-transition'); + }, 300); + + // Dispatch custom event for theme change + window.dispatchEvent(new CustomEvent('themeChanged', { detail: newTheme })); + } + + // Scroll Effects + function handleScroll() { + // Navbar scroll effect + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + + // Update active navigation link + updateActiveLink(); + } + + // Mobile Menu + function toggleMobileMenu() { + const isActive = navbarMenu.classList.toggle('active'); + navbarToggle.classList.toggle('active', isActive); + mobileOverlay.classList.toggle('active', isActive); + document.body.style.overflow = isActive ? 'hidden' : ''; + + // Add animation class + if (isActive) { + navbarMenu.style.animation = 'slideDown 0.4s ease forwards'; + } else { + navbarMenu.style.animation = 'slideUp 0.4s ease forwards'; + } + } + + function closeMobileMenu() { + navbarMenu.classList.remove('active'); + navbarToggle.classList.remove('active'); + mobileOverlay.classList.remove('active'); + document.body.style.overflow = ''; + } + + // Active Link Management + function setActiveLink(clickedLink) { + navLinks.forEach(link => link.classList.remove('active')); + clickedLink.classList.add('active'); + } + + function updateActiveLink() { + const sections = document.querySelectorAll('section'); + const scrollPos = window.scrollY + 100; + + let currentSection = ''; + + sections.forEach(section => { + const sectionTop = section.offsetTop; + const sectionHeight = section.offsetHeight; + const sectionId = section.getAttribute('id'); + + if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) { + currentSection = sectionId; + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${currentSection}`) { + link.classList.add('active'); + } + }); + } + + // Smooth Scroll + function scrollToSection(sectionId) { + const section = document.getElementById(sectionId); + if (section) { + window.scrollTo({ + top: section.offsetTop, + behavior: 'smooth' + }); + } + } + + // Event Listeners + function setupEventListeners() { + // Scroll event + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Theme toggle + themeToggle.addEventListener('change', toggleTheme); + + // Mobile menu + navbarToggle.addEventListener('click', toggleMobileMenu); + mobileOverlay.addEventListener('click', closeMobileMenu); + + // Navigation links + navLinks.forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + const targetSection = this.getAttribute('href').substring(1); + setActiveLink(this); + scrollToSection(targetSection); + + // Close mobile menu if open + if (window.innerWidth <= 768) { + closeMobileMenu(); + } + }); + }); + + // Logo click + document.querySelector('.navbar-logo').addEventListener('click', function(e) { + e.preventDefault(); + scrollToSection('home'); + setActiveLink(document.querySelector('a[href="#home"]')); + }); + + // Keyboard navigation + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + closeMobileMenu(); + } + }); + + // Resize handler + window.addEventListener('resize', function() { + if (window.innerWidth > 768) { + closeMobileMenu(); + } + }); + } + + // Add CSS animations + function addAnimations() { + const style = document.createElement('style'); + style.textContent = ` + @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + @keyframes slideUp { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-20px); + } + } + + .theme-transition * { + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; + } + + .navbar-menu { + animation: none; + } + `; + document.head.appendChild(style); + } + + // Initialize everything + function init() { + initializeTheme(); + setupEventListeners(); + addAnimations(); + handleScroll(); // Initial call to set active link + } + + // Make functions globally available + window.toggleMobileMenu = toggleMobileMenu; + window.toggleTheme = toggleTheme; + window.setActiveLink = setActiveLink; + window.scrollToSection = scrollToSection; + + // Start the application + init(); +}); \ No newline at end of file diff --git a/style.css b/style.css index 6826186ae..9aa2b7593 100644 --- a/style.css +++ b/style.css @@ -1,1397 +1,585 @@ - -#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)); -} - -* { - 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); -} - -.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; -} - -.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; -} - -.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; -} - -.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); - } -} - - -.skills-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 30px; -} - -.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); -} - -.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; -} - -.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; -} - -.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); -} - -.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; -} - -.skill-card.animate-in .skill-progress-bar { - transform: scaleX(1); -} - -.skill-percentage { - position: absolute; - right: 0; - top: -20px; - font-size: 12px; - font-weight: 600; - color: var(--primary); -} +:root { + /* Dark Theme Colors */ + --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; + --bg-navbar: rgba(10, 10, 10, 0.95); + + --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)); + + --nav-height: 80px; + --nav-height-mobile: 70px; + + /* Border Radius */ + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 20px; + --radius-full: 50%; + + /* Transitions */ + --transition-fast: 0.2s ease; + --transition-normal: 0.3s ease; + --transition-slow: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +[data-theme="light"] { + /* Light Theme Colors */ + --text: #333333; + --text-light: #666666; + --text-dark: #999999; + + --bg: #f8f9fa; + --bg-light: #ffffff; + --bg-lighter: #e9ecef; + --bg-navbar: rgba(248, 249, 250, 0.95); + + --shadow: rgba(0, 0, 0, 0.1); +} + +* { + 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; + padding-top: var(--nav-height); + transition: background-color var(--transition-normal), color var(--transition-normal); +} + +/* ===== NAVBAR STYLES ===== */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: var(--nav-height); + background: var(--bg-navbar); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(52, 152, 219, 0.2); + z-index: 1000; + transition: all var(--transition-slow); +} + +[data-theme="light"] .navbar { + border-bottom: 1px solid rgba(52, 152, 219, 0.1); +} + +.navbar.scrolled { + height: 70px; + background: var(--bg-navbar); + box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(25px); + -webkit-backdrop-filter: blur(25px); +} + +.navbar-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +/* Logo Styles */ +.navbar-brand { + display: flex; + align-items: center; +} + +.navbar-logo { + display: flex; + align-items: center; + cursor: pointer; + transition: all var(--transition-normal); + position: relative; + z-index: 1001; + gap: 12px; + padding: 8px 12px; + border-radius: var(--radius-md); +} + +.navbar-logo:hover { + transform: translateY(-2px); + background: rgba(52, 152, 219, 0.1); +} + +.logo-icon { + width: 40px; + height: 40px; + background: var(--gradient); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 18px; + transition: all var(--transition-normal); +} + +.navbar-logo:hover .logo-icon { + transform: rotate(15deg) scale(1.1); +} + +.logo-text-container { + display: flex; + align-items: center; + gap: 8px; +} + +.logo-text { + font-size: 22px; + font-weight: 700; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + transition: all var(--transition-normal); +} + +.logo-dot { + width: 8px; + height: 8px; + background: var(--secondary); + border-radius: var(--radius-full); + animation: pulse 2s infinite; + transition: background-color var(--transition-normal); +} + +[data-theme="light"] .logo-dot { + background: var(--secondary-dark); +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.7; + transform: scale(1.1); + } +} + +/* Navigation Menu */ +.navbar-menu { + display: flex; + gap: 8px; + list-style: none; + transition: all var(--transition-slow); +} + +.navbar-item { + position: relative; +} + +.navbar-link { + color: var(--text); + text-decoration: none; + font-size: 15px; + font-weight: 500; + padding: 12px 20px; + border-radius: var(--radius-md); + transition: all var(--transition-normal); + cursor: pointer; + display: flex; + align-items: center; + gap: 10px; + position: relative; + overflow: hidden; +} + +.navbar-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: var(--gradient); + opacity: 0.1; + transition: left var(--transition-normal); +} + +.navbar-link:hover::before { + left: 0; +} + +.navbar-link:hover, +.navbar-link.active { + color: var(--primary); + transform: translateY(-2px); +} + +.navbar-link.active { + background: rgba(52, 152, 219, 0.1); + box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2); +} + +.navbar-link i { + font-size: 16px; + width: 20px; + text-align: center; + transition: transform var(--transition-normal); +} + +.navbar-link:hover i { + transform: scale(1.2); +} + +.link-text { + transition: transform var(--transition-normal); +} + +.navbar-link:hover .link-text { + transform: translateX(2px); +} + +/* Navbar Actions */ +.navbar-actions { + display: flex; + align-items: center; + gap: 15px; +} + +/* Theme Toggle */ +.theme-toggle-container { + position: relative; +} + +.theme-checkbox { + display: none; +} + +.theme-toggle { + position: relative; + width: 60px; + height: 30px; + background: var(--bg-light); + border-radius: 50px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 8px; + transition: all var(--transition-normal); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); + border: 2px solid rgba(52, 152, 219, 0.2); +} + +.theme-toggle:hover { + border-color: var(--primary); + transform: scale(1.05); +} + +.theme-toggle i { + font-size: 12px; + z-index: 2; + transition: all var(--transition-normal); +} + +.theme-toggle .fa-sun { + color: #f39c12; +} + +.theme-toggle .fa-moon { + color: #f1c40f; +} + +.theme-toggle-ball { + position: absolute; + left: 4px; + width: 22px; + height: 22px; + background: var(--gradient); + border-radius: var(--radius-full); + transition: all var(--transition-slow); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.theme-checkbox:checked + .theme-toggle .theme-toggle-ball { + transform: translateX(30px); +} + +/* Mobile Menu Toggle */ +.navbar-toggle { + display: none; + cursor: pointer; + padding: 8px; + border-radius: var(--radius-md); + transition: all var(--transition-normal); +} + +.navbar-toggle:hover { + background: rgba(52, 152, 219, 0.1); +} + +.hamburger-menu { + width: 25px; + height: 18px; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.hamburger-line { + width: 100%; + height: 2px; + background: var(--primary); + border-radius: 2px; + transition: all var(--transition-normal); + transform-origin: center; +} + +.navbar-toggle.active .hamburger-line:nth-child(1) { + transform: rotate(45deg) translate(6px, 6px); +} + +.navbar-toggle.active .hamburger-line:nth-child(2) { + opacity: 0; +} + +.navbar-toggle.active .hamburger-line:nth-child(3) { + transform: rotate(-45deg) translate(6px, -6px); +} + +/* Mobile Menu Overlay */ +.mobile-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); + z-index: 999; + opacity: 0; + visibility: hidden; + transition: all var(--transition-normal); +} + +.mobile-overlay.active { + opacity: 1; + visibility: visible; +} + +/* ===== MAIN CONTENT STYLES ===== */ +.section { + min-height: 100vh; + padding: 80px 0; + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid rgba(52, 152, 219, 0.1); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + text-align: center; +} + +h1, h2 { + margin-bottom: 20px; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +p { + font-size: 18px; + color: var(--text-light); + max-width: 600px; + margin: 0 auto 30px; +} + +.theme-demo { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; + margin-top: 50px; +} + +.demo-card { + background: var(--bg-light); + padding: 30px; + border-radius: var(--radius-lg); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: all var(--transition-normal); + border: 1px solid rgba(52, 152, 219, 0.1); +} + +.demo-card:hover { + transform: translateY(-10px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +} + +.demo-card i { + font-size: 40px; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 15px; + display: block; +} + +.demo-card h3 { + margin-bottom: 10px; + color: var(--text); +} + +.demo-card p { + color: var(--text-light); + font-size: 14px; + margin: 0; +} + +/* ===== RESPONSIVE DESIGN ===== */ +@media (max-width: 1024px) { + .navbar-menu { + gap: 5px; + } + + .navbar-link { + padding: 10px 16px; + font-size: 14px; + } + + .logo-text { + font-size: 20px; + } +} + +@media (max-width: 768px) { + body { + padding-top: var(--nav-height-mobile); + } + + .navbar { + height: var(--nav-height-mobile); + } + + .navbar.scrolled { + height: 60px; + } + + .navbar-menu { + position: fixed; + top: var(--nav-height-mobile); + left: 0; + width: 100%; + background: var(--bg-light); + flex-direction: column; + padding: 20px; + gap: 10px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transform: translateY(-100%); + opacity: 0; + visibility: hidden; + z-index: 1000; + } + + .navbar-menu.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + .navbar-link { + padding: 15px 20px; + font-size: 16px; + justify-content: center; + border-radius: var(--radius-md); + } + + .navbar-toggle { + display: block; + } + + .logo-text { + font-size: 18px; + } + + .logo-icon { + width: 35px; + height: 35px; + font-size: 16px; + } +} + +@media (max-width: 480px) { + .navbar-container { + padding: 0 15px; + } + + .logo-text { + display: none; + } + + .logo-dot { + display: none; + } + + .navbar-logo { + gap: 0; + } + + .theme-toggle { + width: 50px; + height: 26px; + } + + .theme-toggle-ball { + width: 18px; + height: 18px; + } + + .theme-checkbox:checked + .theme-toggle .theme-toggle-ball { + transform: translateX(24px); + } + + h1 { + font-size: 28px; + } + + h2 { + font-size: 24px; + } + + p { + font-size: 16px; + } + + .theme-demo { + grid-template-columns: 1fr; + } +} \ No newline at end of file