diff --git a/index.html b/index.html index 664d30346..b5026d0ca 100644 --- a/index.html +++ b/index.html @@ -3,103 +3,94 @@ - - Morgan Taylor - Full-Stack Developer + + Morgan Taylor - Unique Portfolio | Developer - - - + +
-

Loading Portfolio...

+

Initializing Systems...

-
-
-
+

- Hi, I'm Morgan Taylor + Hello, I'm Morgan Taylor

-

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.

+

+

A MERN Stack Developer specializing in **Artificial Intelligence integration** and creating high-impact, uniquely interactive web solutions.

- -
- - + +
-
-
-
-
+
+
+
+
+
-
- Scroll to explore + + Explore
-
+
-

About Me

+

01. 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.

-

When I'm not coding, you'll find me exploring new web animation techniques, researching AI applications, or working on personal projects that push the boundaries of what's possible with modern web technologies.

+

I'm a passionate Computer Science student from MET BKC IOE, Nashik, driven by curiosity and a desire to solve real-world problems through innovative digital solutions. My focus is on creating scalable, intelligent applications.

+

I thrive in the full-stack environment, merging the MERN stack's versatility with the deep power of AI/ML models. My experience spans responsive design, complex animations, and developing features for sectors like climate tech and healthcare.

-
-
0 Projects Completed @@ -110,7 +101,7 @@

About Me

0 - Technologies + Technologies Mastered
@@ -128,31 +119,64 @@

About Me

-
+
-

Technical Skills

-
+

02. Core Arsenal

+
+ +
+

Full-Stack Development

+

Building resilient, scalable web architectures from MongoDB to React's dynamic frontend.

+
+ +
+
+
React & Frontend
+

Advanced state management, performance optimization, and custom hooks.

+
+
+
+ 95% +
+
+ +
+
+
Node.js & Backend
+

Designing fast, secure APIs with Express, microservices, and reliable database integration.

+
+
+
+ 90% +
+
-
-
- - - - - +
+

AI & System Integration

+

From Python scripts to cloud deployment, integrating intelligence into application logic.

+
+ +
+
+
Machine Learning
+

Building predictive models and utilizing frameworks like TensorFlow and Scikit-learn.

-

FULL Stack Development

-

Creating responsive, interactive user interfaces with modern web technologies and advanced animations.

-
- HTML5 - CSS3 - JavaScript - React - 3D Animations - MERN Stack +
+
+ 85% +
+
+ +
+
+
DevOps & Tools
+

Containerization (Docker), cloud deployment (AWS/Netlify), and Git workflow mastery.

+
+
+
+ 80%
-
@@ -160,62 +184,60 @@

FULL Stack Development

-

Featured Projects

-
+

03. Featured Projects

+
-
-
-
🌍
-
-
- Live Demo - GitHub -
-
+ +
+ +

AI Travel Planner (Itinno)

-
-

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 -
+

Full-stack MERN application integrating a custom LLM for personalized itinerary generation.

+
View Project
+ + + +
+ +

AgriSense ML Dashboard

-
+

Yield prediction and data visualization using Python/Flask backend.

+ + +
+ +

HealthConnect API

+
+

Secure, HIPAA-compliant healthcare data exchange service using Node.js and PostgreSQL.

+ + + + +

View All 15+ Projects

+

Deep dive into the full scope of my MERN, AI, and backend work on GitHub.

+
-

Get In Touch

+

04. Get In Touch

-

Let's Connect

-

I'm always open to discussing new opportunities, creative ideas, or opportunities to be part of your vision.

+

Ready to build something unique?

+

I'm always open to discussing new contracts, collaborations, or innovative ideas. Let's start the conversation about your next project.

-
- - - - -
+
Location - Nashik, Maharashtra + Nashik, India
-
- - - - -
+
Email morgantaylor@gmail.com @@ -223,53 +245,32 @@

Let's Connect

-
+
- +
- +
- +
-
@@ -281,35 +282,32 @@

Let's Connect

- Home - About - Skills - Projects - Contact + Home + About + Skills + Work + Contact
-

© 2025 Morgan Taylor. Crafted with passion for innovation.

-

Computer Science Student | Full-Stack Developer | AI Enthusiast

+

© 2025 Morgan Taylor. Designed with Modernist principles.

- - + \ No newline at end of file diff --git a/script.js b/script.js index ed600de4e..1de720508 100644 --- a/script.js +++ b/script.js @@ -1,131 +1,182 @@ document.addEventListener('DOMContentLoaded', function() { - setInterval(() => { - console.log('Memory leak running...'); - }, 1000); - - setTimeout(() => { - document.getElementById('loading-screen').classList.add('fade-out'); + // --- Initial Load & Preloader --- + function hideLoadingScreen() { + const loadingScreen = document.getElementById('loading-screen'); + loadingScreen.classList.add('fade-out'); setTimeout(() => { - document.getElementById('loading-screen').style.display = 'none'; + loadingScreen.style.display = 'none'; }, 500); - }, 1500); + } + setTimeout(hideLoadingScreen, 1500); + + // --- Particles Initialization --- + if (window.particlesJS) { + particlesJS("particles-js", { + particles: { + number: { value: 80, density: { enable: true, value_area: 800 } }, + color: { value: "#5e64ff" }, + shape: { type: "circle" }, + opacity: { value: 0.5, random: false }, + size: { value: 3, random: true }, + line_linked: { enable: true, distance: 150, color: "#5e64ff", opacity: 0.4, width: 1 }, + move: { enable: true, speed: 2, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } + }, + interactivity: { + detect_on: "canvas", + events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true }, + modes: { repulse: { distance: 100, duration: 0.4 }, push: { particles_nb: 4 } } + }, + retina_detect: true + }); + } - var cursorDot = document.querySelector('.cursor-dot'); - var cursorOutline = document.querySelector('.cursor-outline'); + // --- Custom Cursor (rAF for Performance) --- + const cursorDot = document.querySelector('.cursor-dot'); + const cursorOutline = document.querySelector('.cursor-outline'); + const interactiveElements = document.querySelectorAll('a, button, .project-tile, .skill-card, .logo, .social-links a'); 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'); + requestAnimationFrame(() => { + cursorDot.style.left = `${e.clientX}px`; + cursorDot.style.top = `${e.clientY}px`; + cursorOutline.style.left = `${e.clientX}px`; + cursorOutline.style.top = `${e.clientY}px`; + }); }); - 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)'; + cursorDot.style.background = 'var(--secondary)'; }); element.addEventListener('mouseleave', () => { cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)'; + cursorDot.style.background = 'var(--primary)'; }); }); + // --- Header, Nav, and Scroll Logic (Centralized) --- const header = document.getElementById('header'); + const backToTop = document.getElementById('backToTop'); + const navLinksList = document.getElementById('navLinks'); + const mobileMenu = document.getElementById('mobileMenu'); + const sections = document.querySelectorAll('main section'); + + function closeMobileMenu() { + navLinksList.classList.remove('active'); + mobileMenu.classList.remove('active'); + } - - window.addEventListener('scroll', () => { - const height = header.offsetHeight; - if (window.scrollY > 100) { + mobileMenu.addEventListener('click', () => { + navLinksList.classList.toggle('active'); + mobileMenu.classList.toggle('active'); + }); + + function highlightNavLink(scrollY) { + let current = ''; + const headerHeight = header.offsetHeight; + + sections.forEach(section => { + const sectionTop = section.offsetTop - headerHeight; + const sectionHeight = section.clientHeight; + + if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) { + current = section.getAttribute('id'); + } + }); + + document.querySelectorAll('.nav-links a').forEach(a => { + a.classList.remove('active'); + if (a.getAttribute('href').includes(current)) { + a.classList.add('active'); + } + }); + } + + function handleScroll() { + const scrollY = window.scrollY; + + if (scrollY > 100) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } - - const backToTop = document.getElementById('backToTop'); - if (window.scrollY > 500) { + + if (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' + highlightNavLink(scrollY); + } + + window.addEventListener('scroll', handleScroll, { passive: true }); + + // Universal smooth scroll for anchors + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const targetElement = document.querySelector(targetId); + if (targetElement) { + const headerHeight = header.offsetHeight; + window.scrollTo({ + top: targetElement.offsetTop - headerHeight, + behavior: 'smooth' + }); + closeMobileMenu(); + } }); - - 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' - }); - }; + // Back to Top handler + backToTop.addEventListener('click', () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + + // --- Stats & Skill Animation (Intersection Observer) --- + const stats = document.querySelectorAll('.stat-number'); + let hasAnimatedStats = false; - let current = 0; const animateStats = function() { - const stats = document.querySelectorAll('.stat-number'); + if (hasAnimatedStats) return; + hasAnimatedStats = true; stats.forEach(stat => { const target = parseInt(stat.getAttribute('data-count')); + let current = 0; const duration = 2000; - const step = target / (duration / 16); + const startTime = performance.now(); - const timer = setInterval(() => { - current += step; + function updateCount(timestamp) { + const elapsed = timestamp - startTime; + const progress = Math.min(elapsed / duration, 1); - if (current >= target) { - current = target; + current = Math.floor(progress * target); + stat.textContent = current; + if (progress < 1) { + requestAnimationFrame(updateCount); + } else { + stat.textContent = target; } - - stat.textContent = Math.floor(current); - }, 16); + } + requestAnimationFrame(updateCount); }); }; - + const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 }; - - const observer = new IntersectionObserver((entries, unusedObserver) => { + const sectionObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-in'); @@ -133,155 +184,106 @@ document.addEventListener('DOMContentLoaded', function() { if (entry.target.id === 'about') { animateStats(); } + + if (entry.target.classList.contains('skill-card')) { + const level = entry.target.getAttribute('data-level'); + const progressBar = entry.target.querySelector('.skill-progress-bar'); + if (progressBar && level) { + progressBar.style.transform = `scaleX(${level / 100})`; + } + } + + observer.unobserve(entry.target); } }); }, observerOptions); - const sections = document.querySelectorAll('section'); - sections.forEach(section => { - observer.observe(section); + document.querySelectorAll('section, .skill-card, .project-tile').forEach(element => { + sectionObserver.observe(element); }); - window.submitForm = function(event) { + // --- Contact Form Submission --- + const contactForm = document.getElementById('contactForm'); + + contactForm.addEventListener('submit', 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.'); + console.log('Form data captured:', data); - event.target.reset(); - }; + setTimeout(() => { + alert('Thank you for your message! Morgan will be in touch soon.'); + event.target.reset(); + }, 500); + }); - document.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - const navLinks = document.getElementById('navLinks'); - const mobileMenu = document.querySelector('.mobile-menu'); + + // --- Typewriter Effect --- + function typewriterEffect(elementId, titles) { + const element = document.getElementById(elementId); + if (!element) return; + + let currentIndex = 0; + let charIndex = 0; + let isDeleting = false; + let lastTime = 0; + + const speed = { typing: 100, deleting: 50, pause: 2000 }; + + function animateTypewriter(timestamp) { + if (!lastTime) lastTime = timestamp; + const deltaTime = timestamp - lastTime; + const currentTitle = titles[currentIndex]; + let delay = isDeleting ? speed.deleting : speed.typing; - if (navLinks.classList.contains('active')) { - navLinks.classList.remove('active'); - mobileMenu.classList.remove('active'); + if (deltaTime > delay) { + if (isDeleting) { + element.textContent = currentTitle.substring(0, charIndex - 1); + charIndex--; + } else { + element.textContent = currentTitle.substring(0, charIndex + 1); + charIndex++; + } + + element.style.borderRight = (isDeleting || charIndex < currentTitle.length) ? '3px solid var(--secondary)' : 'none'; + + if (!isDeleting && charIndex === currentTitle.length) { + isDeleting = true; + lastTime = timestamp + speed.pause; + requestAnimationFrame(animateTypewriter); + return; + } else if (isDeleting && charIndex === 0) { + isDeleting = false; + currentIndex = (currentIndex + 1) % titles.length; + lastTime = timestamp + 500; + requestAnimationFrame(animateTypewriter); + return; + } + + lastTime = timestamp; } + + requestAnimationFrame(animateTypewriter); } + requestAnimationFrame(animateTypewriter); + } + + typewriterEffect('typewriter-text', ["MERN Stack Specialist", "AI Integration Engineer", "Unique UI/UX Architect", "Full-Stack Developer"]); + + // --- Accessibility: Keyboard Navigation Focus --- + document.addEventListener('keydown', (e) => { if (e.key === 'Tab') { document.body.classList.add('keyboard-navigation'); } + if (e.key === 'Escape') { + closeMobileMenu(); + } }); 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); +}); \ No newline at end of file diff --git a/style.css b/style.css index 6826186ae..5b9ab0e19 100644 --- a/style.css +++ b/style.css @@ -1,45 +1,26 @@ - -#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%; } -} +/* --- CSS Variables: Professional Dark Mode & Geometric UI --- */ :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),)); + --primary: #5e64ff; /* Vibrant Blue/Purple Accent */ + --primary-dark: #474cb8; + --secondary: #00bcd4; /* Cyan/Teal Highlight */ + --secondary-dark: #0097a7; + --accent: #ff7043; /* Warm Orange for high contrast */ + + --text: #ffffff; + --text-light: #b0bec5; + + --bg: #121212; /* Deep Black Background */ + --bg-light: #1e1e1e; /* Dark Gray for cards/sections */ + --bg-lighter: #2c2c2c; /* Lighter Gray for input/overlay */ + + --shadow: rgba(0, 0, 0, 0.5); + + /* Fixed Gradient Syntax */ + --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); --gradient-dark: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark)); } +/* --- Global Reset & Base Styles --- */ * { margin: 0; padding: 0; @@ -51,1347 +32,322 @@ html { } body { - font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; + min-height: 100vh; +} + +section { + padding: 100px 0; + scroll-margin-top: 100px; + position: relative; } +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} +/* --- Loading Screen --- */ .loading-screen { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + width: 100%; height: 100%; background: var(--bg); - display: flex; - align-items: center; - justify-content: center; + 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-screen.fade-out { opacity: 0; visibility: hidden; } .loading-ring { - width: 60px; - height: 60px; - border: 4px solid rgba(52, 152, 219, 0.2); + width: 60px; height: 60px; + border: 4px solid rgba(94, 100, 255, 0.2); border-top: 4px solid var(--primary); border-radius: 50%; - animation: spin 0s linear infinite;; - animation: fadeInUp 1s ease-out forwards; animation: fadeInUp; + animation: spin 1s linear infinite; margin: 0 auto 20px; } - @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } - +/* --- Custom Cursor --- */ .cursor-dot, .cursor-outline { - position: fixed; - top: 0; - left: 0; + position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); - border-radius: 50%; - z-index: 9999; - pointer-events: none; - opacity: 0; + border-radius: 50%; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; } +.cursor-dot { background: var(--primary); } +.cursor-outline { border: 2px solid var(--primary); } +body:hover .cursor-dot, body:hover .cursor-outline { opacity: 1; } -.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 Background --- */ #particles-js { position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; + width: 100%; height: 100%; + top: 0; left: 0; z-index: -1; } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} - +/* --- Header & Navigation --- */ header { - position: fixed; - width: 100%; - padding: 20px 50px; - background: rgba(10, 10, 10, 0.95); - backdrop-filter: blur(10px); + position: fixed; width: 100%; padding: 20px 0; + background: rgba(18, 18, 18, 0.95); + backdrop-filter: blur(8px); z-index: 1000; - border-bottom: 2px solid rgba(52, 152, 219, 0.3); + border-bottom: 1px solid rgba(94, 100, 255, 0.2); 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); + padding: 15px 0; + box-shadow: 0 5px 20px var(--shadow); } nav { - display: flex; - justify-content: space-between; - align-items: center; + 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; + display: flex; align-items: center; font-size: 28px; font-weight: 800; cursor: pointer; text-decoration: none; } - .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; + 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); + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.2); opacity: 0.7; } } .nav-links { - display: flex; - gap: 30px; - list-style: none; + 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); + color: var(--text-light); text-decoration: none; font-size: 16px; font-weight: 500; + position: relative; transition: all 0.3s ease; + display: flex; align-items: center; } - -.mobile-menu { - display: none; - flex-direction: column; - cursor: pointer; +.nav-links a i { + margin-right: 8px; + color: var(--secondary); } - -.mobile-menu span { - width: 25px; - height: 3px; - background: var(--primary); - margin: 3px 0; - transition: 0.3s; +.nav-links a::after { + content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background: var(--primary); 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; z-index: 1001; } +.mobile-menu span { width: 25px; height: 3px; background: var(--primary); margin: 3px 0; transition: 0.3s; } - +/* --- Hero Section: Asymmetrical Layout (FINAL POLISH) --- */ .hero { min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 0 50px; - position: relative; - overflow: hidden; + padding-top: 120px; } .hero-content { display: flex; align-items: center; justify-content: space-between; - max-width: 1200px; - width: 100%; - gap: 50px; + gap: 5%; } .hero-text { - flex: 1; - z-index: 1; + flex: 0 0 55%; + z-index: 10; opacity: 0; transform: translateY(50px); - animation: fadeInUp 1s ease-out forwards; + 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; + to { opacity: 1; transform: translateY(0); } } +.hero-title { font-size: 64px; } .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; + content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: var(--secondary); + transform: scaleX(0); transform-origin: left; animation: expandWidth 1.5s ease forwards 0.5s; } - @keyframes expandWidth { - to { - transform: scaleX(1); - } + 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; + min-height: 40px; font-size: 36px; color: var(--secondary); margin-bottom: 20px; font-weight: 600; + overflow: hidden; border-right: 3px solid var(--secondary); white-space: nowrap; width: fit-content; } -.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 { border-radius: 8px; padding: 15px 30px; } +.cta-button.primary { background: var(--gradient); color: var(--bg); font-weight: 700; box-shadow: 0 5px 20px rgba(94, 100, 255, 0.3); } +.cta-button.secondary { background: transparent; border: 2px solid var(--primary); color: var(--primary); } +.cta-button:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(94, 100, 255, 0.4); } +.cta-button.secondary:hover { background: var(--primary); color: var(--text); } -.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 FINAL POLISH --- */ .hero-visual { - flex: 1; - position: relative; - height: 400px; -} - -.floating-shapes { + flex: 0 0 40%; + height: 450px; + display: grid; /* Use grid for reliable centering */ + place-items: center; 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; -} + z-index: 5; -@keyframes float { - 0%, 100% { - transform: translate(0, 0) scale(1); + /* Slanted Background Block: SIMPLIFIED */ + &::before { + content: ''; position: absolute; top: 0; right: -50px; width: 100%; height: 100%; + background: var(--bg-light); + transform: skewY(-4deg); /* Very subtle, less distracting slant */ + z-index: 0; + border-left: 5px solid var(--primary); + box-shadow: -10px 10px 50px rgba(0, 0, 0, 0.5); } - 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); +/* Tech Stack Ring (Visual Anchor) */ +.tech-stack-ring { + /* Position grid item reliably */ + grid-area: 1/1; + width: 350px; height: 350px; 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); + border: 1px dashed var(--primary-dark); + z-index: 1; + animation: rotateRing 20s linear infinite; + background: transparent; } -.skill-card::before { - content: ''; +.ring-icon { 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 { + width: 50px; height: 50px; 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; + display: flex; align-items: center; justify-content: center; color: var(--text); + font-size: 20px; + box-shadow: 0 0 10px var(--primary); + transition: transform 0.3s ease; } -.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; -} +/* FIXED ICON POSITIONS */ +.ring-icon:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); } +.ring-icon:nth-child(2) { top: 50%; right: 0; transform: translate(50%, -50%); } +.ring-icon:nth-child(3) { bottom: 0; left: 50%; transform: translate(-50%, 50%); } +.ring-icon:nth-child(4) { top: 50%; left: 0; transform: translate(-50%, -50%); } -.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); +@keyframes rotateRing { + to { transform: rotate(360deg); } /* Rotation without translation */ } -.form-group textarea { - min-height: 150px; - resize: vertical; -} +/* Scroll indicator */ +.scroll-indicator { color: var(--primary); } +.scroll-arrow, .scroll-arrow::after { background: var(--primary); border-color: var(--primary); } -.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; +/* --- Section Title --- */ +.section-title { + font-size: 48px; text-align: left; margin-bottom: 80px; padding-left: 20px; position: relative; + font-weight: 300; border-left: 4px solid var(--secondary); } +.section-title span { color: var(--primary); font-size: 0.8em; margin-right: 15px; font-weight: 700; } -.submit-button:hover { - transform: translateY(-3px); - box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4); -} +/* --- About Section --- */ +.about-content { align-items: flex-start; } +.stat-number { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } +.profile-ring { background: conic-gradient(var(--primary) 0deg, var(--secondary) 180deg, var(--primary) 360deg); padding: 10px; animation: rotate 10s linear infinite; } +.profile-ring-inner { background: var(--bg-light); } +/* --- SKILLS Section: ASYMMETRICAL TWO-COLUMN FLOW --- */ +#skills { background: var(--bg-light); } -footer { - background: var(--bg-light); - padding: 60px 0 30px; - border-top: 1px solid rgba(52, 152, 219, 0.1); +.skills-asymmetry-grid { + display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; } -.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; +.skill-group-header { + position: sticky; top: 100px; padding: 20px; border-right: 3px solid var(--primary); text-align: right; + h3 { font-size: 32px; color: var(--primary); margin-bottom: 10px; } + p { color: var(--text-light); font-size: 16px; } } -.footer-links { - display: flex; - gap: 30px; +.skill-card { + background: var(--bg-lighter); padding: 25px; border-radius: 8px; margin-bottom: 20px; + transition: all 0.3s ease; border-left: 5px solid var(--secondary); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + &:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } } -.footer-links a { - color: var(--text-light); - text-decoration: none; - transition: all 0.3s ease; - cursor: pointer; -} +.skill-title { font-size: 20px; font-weight: 600; color: var(--text); i { color: var(--secondary); margin-right: 10px; } } +.skill-progress { flex-grow: 1; height: 6px; background: var(--bg); border-radius: 3px; margin-right: 10px; } +.skill-progress-bar { background: var(--gradient); height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.5s ease-out; } +.skill-percentage { color: var(--secondary); font-weight: 700; font-size: 14px; } -.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; +/* --- PROJECTS Section: GEOMETRIC TILE LAYOUT --- */ +#projects { background: var(--bg); } +.projects-geometric-grid { + display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 20px; } -.footer-bottom p:first-child { - margin-bottom: 10px; +.project-tile { + background: var(--bg-light); border-radius: 8px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; + &::before { content: attr(data-tech); position: absolute; top: 10px; right: 10px; font-size: 12px; background: var(--bg-lighter); color: var(--secondary); padding: 5px 10px; border-radius: 4px; opacity: 0.8; } + &:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); background: var(--bg-lighter); } } +.project-tile.large { grid-column: span 2; } +.project-tile.cta-tile { background: var(--gradient); color: var(--bg); &:hover { background: var(--gradient-dark); } } +.tile-header i { font-size: 32px; color: var(--primary); } +.tile-footer { color: var(--primary); } -.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; -} +/* --- CONTACT Section --- */ +.contact-form { flex: 1; background: var(--bg-light); border-radius: 12px; padding: 40px; } +.contact-icon { background: rgba(94, 100, 255, 0.1); color: var(--primary); } +.social-links a { background: rgba(94, 100, 255, 0.1); color: var(--primary); &:hover { background: var(--primary); color: var(--text); } } +.form-group input, .form-group textarea { background: var(--bg-lighter); color: var(--text); border: none; border-radius: 6px; } +.submit-button { background: var(--gradient); color: var(--bg); } -.back-to-top:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4); -} +/* --- Footer --- */ +footer { background: var(--bg-light); padding: 40px 0; } +/* --- Media Queries (Finalized for Responsiveness) --- */ +@media (max-width: 1024px) { + .hero-content { flex-direction: column; text-align: center; } + .hero-visual { flex: 1; height: 350px; } + .hero-visual::before { right: 0; width: 100%; transform: skewY(0deg); } + .tech-stack-ring { left: 50%; width: 300px; height: 300px; } -@media "max-width: 1024px":{ - .hero-title { - font-size: 48px; - } - - .hero-subtitle { - font-size: 28px; - } - - .about-content { - flex-direction: column; - text-align: center; - } + .skills-asymmetry-grid { grid-template-columns: 1fr; } + .skill-group-header { position: static; border-right: none; border-bottom: 3px solid var(--primary); text-align: left; padding-left: 0; margin-bottom: 20px; } - .contact-content { - flex-direction: column; - } + .projects-geometric-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; } + .project-tile.large, .project-tile.cta-tile { grid-column: span 1; } } -@media "max-width: 768px": { - header { - padding: 15px 20px; - } - - .header-scrolled { - padding: 10px 20px; - } +@media (max-width: 768px) { + .hero-title { font-size: 48px; } + .hero-subtitle { font-size: 30px; } + .hero-visual { display: none; } .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); + position: fixed; top: 65px; left: 0; width: 100%; background: var(--bg); flex-direction: column; + padding: 20px 0; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.3s ease; border-bottom: 2px solid var(--primary); } -} + .mobile-menu { display: flex; } -.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); -} + .projects-geometric-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; } +} \ No newline at end of file