From 882248cba6b3d6a6fb6de1632edfb3b861ef5e85 Mon Sep 17 00:00:00 2001 From: Aditya Aushikar Date: Thu, 9 Oct 2025 13:15:48 +0530 Subject: [PATCH 1/2] update: Submodule content synchronized --- index.html | 409 ++++---------- script.js | 430 ++++++--------- style.css | 1523 +++++----------------------------------------------- 3 files changed, 400 insertions(+), 1962 deletions(-) diff --git a/index.html b/index.html index 664d30346..dd02a1ad9 100644 --- a/index.html +++ b/index.html @@ -1,315 +1,134 @@ - + - - - - Morgan Taylor - Full-Stack Developer - - - - - - + + + Aditya A. — Creative Technologist + + + - -
-
-
-

Loading Portfolio...

-
+ + - -
+ +
+ +
+
- +
+ +
+
+
+

Hi — I'm Aditya

+

+ I build fast, accessible web apps and experiment with AI to solve real problems. + +

-
-
-
-
-

- Hi, 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.

-
- -
- - -
-
-
-
-
-
-
-
-
-
-
- Scroll to explore -
-
-
+
+ See Work + Let's Talk +
+
-
-
-

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.

-
-
- -
- 0 - Projects Completed -
-
- 0 - Years Experience -
-
- 0 - Technologies -
-
-
-
-
-
-
-
MT
-
-
-
-
-
-
+
+ +
+
+
-
- -
-
-

Technical Skills

-
- -
-
- - - - - -
-

FULL Stack Development

-

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

-
- HTML5 - CSS3 - JavaScript - React - 3D Animations - MERN Stack -
-
- - -
+
+
+
Itinno
+
AgriSense
+
+
+
React
+
Node
+
OpenAI
+
-
+ + + + -
-
-

Featured Projects

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

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

Featured Projects

+
+ +
+
+
-
-
-

Get In Touch

-
-
-

Let's Connect

-

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

-
-
-
- - - - -
-
- Location - Nashik, Maharashtra -
-
-
-
- - - - -
-
- Email - morgantaylor@gmail.com -
-
-
- -
-
-
- - -
-
- - -
-
- - -
-
- - -
- -
-
-
-
- + +
+
+

Skills & Tools

+
+ +
+
+
- +
+ + + +
+ + +
+

+
+ + + - + - - - + diff --git a/script.js b/script.js index ed600de4e..62efeb409 100644 --- a/script.js +++ b/script.js @@ -1,287 +1,175 @@ -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'); +/* ---------- small data for projects & skills ---------- */ +const PROJECTS = [ + {id:'p1',title:'Itinno — AI Travel',desc:'AI itinerary generator with route optimisation and cost estimates.'}, + {id:'p2',title:'AgriSense',desc:'Sensor-backed yield predictions and farmer insights.'}, + {id:'p3',title:'HealthConnect',desc:'Secure clinical-data API with audit logging and roles.'}, + {id:'p4',title:'UI-Atoms',desc:'Tiny accessible component system for dashboards.'} +]; +const SKILLS = [ + {name:'Full-Stack',val:92}, + {name:'Frontend',val:90}, + {name:'AI / ML',val:78}, + {name:'DevOps',val:66} +]; + +/* ---------- render projects & skills ---------- */ +function mountProjects(){ + const el = document.getElementById('projects'); + PROJECTS.forEach(p=>{ + const card = document.createElement('article'); + card.className = 'project-card'; + card.tabIndex = 0; + card.innerHTML = ` +
${escapeHtml(p.title)}
+
${escapeHtml(p.desc)}
+ `; + // simple hover parallax (transform based on mouse) + card.addEventListener('mousemove', e => { + const r = card.getBoundingClientRect(); + const dx = (e.clientX - r.left) / r.width - 0.5; + const dy = (e.clientY - r.top) / r.height - 0.5; + card.style.transform = `perspective(900px) rotateX(${ -dy * 6 }deg) rotateY(${ dx * 8 }deg) translateZ(6px)`; }); -}); - - -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++; - } - + card.addEventListener('mouseleave', ()=> card.style.transform = ''); + // click -> show details (simple alert for demo) + card.addEventListener('click', ()=> alert(p.title + '\\n\\n' + p.desc)); + el.appendChild(card); + }); +} - 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 mountSkills(){ + const el = document.getElementById('skillsGrid'); + SKILLS.forEach(s=>{ + const deg = Math.round(s.val * 3.6); + const wrapper = document.createElement('div'); + wrapper.className = 'skill-meter'; + wrapper.innerHTML = ` +
+
${s.val}%
+
+
+
${escapeHtml(s.name)}
+
Proficiency • ${s.val}%
+
+ `; + el.appendChild(wrapper); + }); } +/* ---------- typewriter (simple, accessible) ---------- */ +function startTypewriter(elId, words, speed=2200){ + const el = document.getElementById(elId); + if(!el) return; + let i = 0; + setInterval(()=>{ + el.animate([{opacity:1, transform:'translateY(0)'},{opacity:0, transform:'translateY(-6px)'}],{duration:240,fill:'forwards'}); + setTimeout(()=> el.textContent = words[i++ % words.length], 260); + }, speed); +} -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" - } - } - }); - }); +/* ---------- scroll reveal using IntersectionObserver ---------- */ +function initReveal(){ + const obs = new IntersectionObserver((entries, o) => { + entries.forEach(en => { + if(en.isIntersecting){ + en.target.style.transition = 'opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1)'; + en.target.style.opacity = 1; + en.target.style.transform = 'translateY(0)'; + o.unobserve(en.target); + } }); + }, {threshold: 0.12}); + document.querySelectorAll('.project-card, .skill-meter, .card-floating, .section-title').forEach(n=>{ + n.style.opacity = 0; n.style.transform = 'translateY(10px)'; obs.observe(n); + }); } - -let sharedCounter = 0; -function createClosureIssue() { - const buttons = document.querySelectorAll('button'); - buttons.forEach((btn, index) => { - btn.addEventListener('click', () => { - console.log('Button', sharedCounter, 'clicked'); - sharedCounter++; - }); +/* ---------- background canvas subtle particles ---------- */ +function initBackground(){ + const c = document.getElementById('bg-canvas'); + if(!c) return; + const ctx = c.getContext('2d'); + let w = c.width = innerWidth; + let h = c.height = innerHeight; + const dots = Array.from({length: Math.max(20, Math.floor((w+h)/140))}).map(()=>{ + return {x:Math.random()*w,y:Math.random()*h,r:Math.random()*1.6+0.6, vx:(Math.random()-0.5)/30, vy:(Math.random()-0.5)/30}; + }); + function resize(){ w = c.width = innerWidth; h = c.height = innerHeight; } + window.addEventListener('resize', resize, {passive:true}); + function draw(){ + ctx.clearRect(0,0,w,h); + dots.forEach(d => { + d.x += d.vx; d.y += d.vy; + if(d.x < -20) d.x = w + 20; if(d.x > w + 20) d.x = -20; + if(d.y < -20) d.y = h + 20; if(d.y > h + 20) d.y = -20; + ctx.beginPath(); + ctx.fillStyle = 'rgba(108,92,231,0.12)'; + ctx.arc(d.x, d.y, d.r+2, 0, Math.PI*2); ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = 'rgba(0,224,255,0.06)'; + ctx.arc(d.x+30, d.y-20, d.r+1, 0, Math.PI*2); ctx.fill(); }); + requestAnimationFrame(draw); + } + draw(); } - -async function loadData() { - const response = await fetch('/api/data'); - const data = await response.json(); - - document.getElementById('data').textContent = data.content; +/* ---------- form handling (no network) ---------- */ +function initForm(){ + const form = document.getElementById('contactForm'); + const status = document.getElementById('formStatus'); + document.getElementById('clearForm').addEventListener('click', ()=> form.reset()); + form.addEventListener('submit', e=>{ + e.preventDefault(); + const fd = new FormData(form); + const name = fd.get('name') || ''; + status.textContent = 'Sending...'; + setTimeout(()=>{ + status.textContent = `Thanks ${name.split(' ')[0] || ''}! Message queued (demo).`; + form.reset(); + setTimeout(()=> status.textContent = '', 3600); + }, 900); + }); } - -function riskyOperation() { - return new Promise((resolve) => { - setTimeout(() => { - resolve('Operation completed'); - }, 1000); - }); +/* ---------- theme toggle (persist) ---------- */ +function initTheme(){ + const btn = document.getElementById('themeToggle'); + const stored = localStorage.getItem('pref-theme') || 'dark'; + applyTheme(stored); + btn.addEventListener('click', () => { + const next = document.documentElement.style.getPropertyValue('--bg') === '#ffffff' ? 'dark' : 'light'; + applyTheme(next); localStorage.setItem('pref-theme', next); + }); +} +function applyTheme(name){ + if(name === 'light'){ + document.documentElement.style.setProperty('--bg','#ffffff'); + document.documentElement.style.setProperty('--muted','#5b6670'); + document.documentElement.style.setProperty('--panel','rgba(255,255,255,0.6)'); + document.documentElement.style.setProperty('--accent1','#6C5CE7'); + document.documentElement.style.setProperty('--accent2','#00E0FF'); + } else { + document.documentElement.style.setProperty('--bg','#071026'); + document.documentElement.style.setProperty('--muted','#9aa3b2'); + document.documentElement.style.setProperty('--panel','rgba(9,12,20,0.6)'); + } } +/* ---------- tiny helpers ---------- */ +function escapeHtml(str){ return String(str).replace(/[&<>"']/g, s=>({ '&':'&','<':'<','>':'>','"':'"',"'":''' })[s]); } + +function boot(){ + mountProjects(); + mountSkills(); + startTypewriter('typewriter',['Full-Stack Developer','AI Experimenter','UI/UX Enthusiast','Problem Solver'],2600); + initReveal(); + initBackground(); + initForm(); + initTheme(); + document.getElementById('year').textContent = new Date().getFullYear(); +} -riskyOperation().then(console.log); +/* start when DOM ready */ +if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); +else boot(); diff --git a/style.css b/style.css index 6826186ae..783cb50e4 100644 --- a/style.css +++ b/style.css @@ -1,1397 +1,128 @@ - -#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); +/* ----- futuristic dark theme ----- */ +:root{ + --bg:#07070b; + --panel: rgba(9,12,20,0.6); + --glass: rgba(255,255,255,0.04); + --muted:#9aa3b2; + --accent1:#6C5CE7; + --accent2:#00E0FF; + --accent3:#FF5C93; + --radius:14px; + --glass-border: rgba(255,255,255,0.04); + --glass-strong: rgba(255,255,255,0.06); + --shadow: 0 12px 40px rgba(3,7,18,0.6); + --container:1100px; +} + +/* reset */ +*{box-sizing:border-box} +html,body{height:100%} +body{ + margin:0; + font-family:Inter, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; + background: linear-gradient(180deg,#030312 0%, #071026 60%); + color:#E7EEF8; + -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; + overflow-x:hidden; +} + +/* container */ +.container{max-width:var(--container);margin:0 auto;padding:0 20px;} + +/* topbar glass */ +.topbar{ + position:fixed;left:0;right:0;top:12px;margin:0 auto;padding:10px 26px; + display:flex;align-items:center;justify-content:space-between;gap:12px; + width:calc(100% - 48px);max-width:calc(var(--container) + 40px); + border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); + box-shadow:var(--shadow);backdrop-filter:blur(8px);border:1px solid var(--glass-border);z-index:40; +} +.brand{display:flex;gap:12px;align-items:center} +.brand .brand-meta .name{font-weight:700} +.brand .brand-meta .role{font-size:12px;color:var(--muted)} + +/* nav */ +.nav{display:flex;align-items:center;gap:12px} +.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600;transition:all .22s} +.nav a:hover{color:#fff;background:linear-gradient(90deg, rgba(108,92,231,0.12), rgba(0,224,255,0.06));transform:translateY(-2px)} +#themeToggle{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:6px 8px;border-radius:8px} + +/* background - canvas sits behind content */ +#bg-wrap{position:fixed;inset:0;pointer-events:none;z-index:-2} +.nebula{ + position:fixed;inset:0;background: + radial-gradient(600px 300px at 10% 10%, rgba(108,92,231,0.12), transparent 12%), + radial-gradient(500px 260px at 80% 80%, rgba(0,224,255,0.08), transparent 14%); + mix-blend-mode:screen;opacity:0.9;z-index:-1; +} + +/* hero */ +.hero{padding:160px 0 60px;display:flex;align-items:center;min-height:70vh} +.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center} +.headline{font-size:2.4rem;margin:0 0 8px;line-height:1.02} +.accent{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;color:transparent;font-weight:800} +.lead{color:var(--muted);max-width:56ch;margin:0 0 18px} +.typewriter{display:inline-block;margin-left:8px;font-weight:700;color:var(--accent2)} + +/* hero floating mock (parallax) */ +.card-floating{width:100%;max-width:420px;margin:auto;pointer-events:none} +.mock{width:100%;height:260px;border-radius:14px;padding:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-strong);box-shadow:0 18px 50px rgba(2,6,20,0.6);display:flex;flex-direction:column;gap:12px;transform:translateY(-6px)} +.mock-top{display:flex;gap:8px} +.dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--accent1),var(--accent2))} +.mock-body{display:flex;flex-direction:column;gap:10px;flex:1} +.m-row{display:flex;gap:10px} +.m-block{flex:1;background:linear-gradient(180deg,rgba(108,92,231,0.06),rgba(0,224,255,0.02));padding:12px;border-radius:10px;font-weight:700;color:#EAF6FF;display:flex;align-items:center;justify-content:center} +.m-row.small .m-chip{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:999px;color:var(--muted);font-weight:700} + +/* section */ +.section{padding:80px 0} +.section.alt{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border-top:1px solid rgba(255,255,255,0.02)} +.section-title{text-align:center;font-size:1.4rem;margin:8px 0 28px;font-weight:700;color:#EAF6FF} + +/* grid utility */ +.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} + +/* projects (hover tilt + glow) */ +.project-card{ + position:relative;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); + border:1px solid var(--glass-border);overflow:hidden;cursor:pointer;transition:transform .25s ease,box-shadow .25s; + display:flex;flex-direction:column;gap:12px;min-height:160px; +} +.project-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 28px 90px rgba(6,12,30,0.6)} +.project-title{font-weight:700;color:var(--accent1);font-size:1.05rem} +.project-desc{color:var(--muted);font-size:0.95rem} + +/* skills */ +.skill-meter{display:flex;gap:12px;align-items:center;padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02)} +.meter-circle{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:conic-gradient(var(--accent1) 0deg, var(--accent1) var(--deg), rgba(255,255,255,0.03) var(--deg));box-shadow:inset 0 -6px 18px rgba(0,0,0,0.45)} +.meter-inner{width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:grid;place-items:center;color:#EAF6FF} +.skill-info{flex:1} +.skill-name{font-weight:700} +.skill-meta{color:var(--muted);font-size:0.9rem;margin-top:6px} + +/* contact */ +.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:12px;border:1px solid var(--glass-border)} +.contact-left h2{margin:0 0 8px} +.contact-list{list-style:none;padding:0;margin:12px 0 0;color:var(--muted);line-height:1.8} +.contact-form label{display:block;margin-bottom:8px} +.contact-form input,.contact-form textarea{ + width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit;outline:none +} +.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px} +.form-status{color:var(--muted);margin-top:8px;min-height:20px} + +/* buttons */ +.btn{padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-weight:700} +.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#041022;box-shadow:0 12px 30px rgba(108,92,231,0.12)} +.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)} + +/* footer */ +.footer{padding:36px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)} + +/* responsive */ +@media (max-width:980px){ + .hero-inner{grid-template-columns:1fr;gap:18px} + .card-floating{order:-1;max-width:100%} + .contact-card{grid-template-columns:1fr} + .topbar{padding:10px 16px;width:calc(100% - 32px)} } From 185f124282bdd6a7f6b1db3343f6c123f051bd1f Mon Sep 17 00:00:00 2001 From: Aditya Aushikar Date: Thu, 9 Oct 2025 14:45:08 +0530 Subject: [PATCH 2/2] Add project files to enhancementh --- index.html | 421 ++++++++++++++++++++++++++++++++-------------- script.js | 458 +++++++++++++++++++++++++++++++------------------- style.css | 479 +++++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 938 insertions(+), 420 deletions(-) diff --git a/index.html b/index.html index dd02a1ad9..b5026d0ca 100644 --- a/index.html +++ b/index.html @@ -1,134 +1,313 @@ - + - - - Aditya A. — Creative Technologist - - - + + + + Morgan Taylor - Unique Portfolio | Developer + + + + + - - - - -
- -
-
- -
- -
-
-
-

Hi — I'm Aditya

-

- I build fast, accessible web apps and experiment with AI to solve real problems. - -

- -
- See Work - Let's Talk -
+
+
+ +
+ + -
- -
-
-
+
+
+
+
+

+ Hello, I'm Morgan Taylor +

+

+

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

+
+ + View My Work + + + + Get In Touch + + +
+
+
+
+
+
+
+
+
+
-
-
-
Itinno
-
AgriSense
-
-
-
React
-
Node
-
OpenAI
-
+ + Explore +
+ +
+ +
+
+

01. About Me

+
+
+

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 +
+
+ 0 + Years Experience +
+
+ 0 + Technologies Mastered +
+
+
+
+
+
+
+
MT
+
+
+
+
+
+
+
+
+ +
+
+

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.

+
+
+
+ 85% +
+
+ +
+
+
DevOps & Tools
+

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

+
+
+
+ 80% +
+
+ +
+
+
+ +
+
+

03. Featured Projects

+
+ + +
+ +

AI Travel Planner (Itinno)

+
+

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.

+ +
+
+
+ +
+
+

04. Get In Touch

+
+
+

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, India +
+
+
+
+
+ Email + morgantaylor@gmail.com +
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+ +
-
-
- - -
-
-

Featured Projects

-
- -
-
-
- - -
-
-

Skills & Tools

-
- -
-
-
- - -
-
-
-

Say hello

-

Open to internships, projects and collaborations. Drop a line and I’ll reply.

-
-
- - - -
- - -
-

-
-
-
-
- -
-
- © Aditya Auhikar — Crafted with curiosity. -
-
+ + + - + + + - + \ No newline at end of file diff --git a/script.js b/script.js index 62efeb409..1de720508 100644 --- a/script.js +++ b/script.js @@ -1,175 +1,289 @@ -/* ---------- small data for projects & skills ---------- */ -const PROJECTS = [ - {id:'p1',title:'Itinno — AI Travel',desc:'AI itinerary generator with route optimisation and cost estimates.'}, - {id:'p2',title:'AgriSense',desc:'Sensor-backed yield predictions and farmer insights.'}, - {id:'p3',title:'HealthConnect',desc:'Secure clinical-data API with audit logging and roles.'}, - {id:'p4',title:'UI-Atoms',desc:'Tiny accessible component system for dashboards.'} -]; -const SKILLS = [ - {name:'Full-Stack',val:92}, - {name:'Frontend',val:90}, - {name:'AI / ML',val:78}, - {name:'DevOps',val:66} -]; - -/* ---------- render projects & skills ---------- */ -function mountProjects(){ - const el = document.getElementById('projects'); - PROJECTS.forEach(p=>{ - const card = document.createElement('article'); - card.className = 'project-card'; - card.tabIndex = 0; - card.innerHTML = ` -
${escapeHtml(p.title)}
-
${escapeHtml(p.desc)}
- `; - // simple hover parallax (transform based on mouse) - card.addEventListener('mousemove', e => { - const r = card.getBoundingClientRect(); - const dx = (e.clientX - r.left) / r.width - 0.5; - const dy = (e.clientY - r.top) / r.height - 0.5; - card.style.transform = `perspective(900px) rotateX(${ -dy * 6 }deg) rotateY(${ dx * 8 }deg) translateZ(6px)`; +document.addEventListener('DOMContentLoaded', function() { + + // --- Initial Load & Preloader --- + function hideLoadingScreen() { + const loadingScreen = document.getElementById('loading-screen'); + loadingScreen.classList.add('fade-out'); + setTimeout(() => { + loadingScreen.style.display = 'none'; + }, 500); + } + + 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 + }); + } + + // --- 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) => { + 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`; + }); + }); + + 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'); + } + + 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'); + } + + if (scrollY > 500) { + backToTop.classList.add('visible'); + } else { + backToTop.classList.remove('visible'); + } + + 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(); + } + }); }); - card.addEventListener('mouseleave', ()=> card.style.transform = ''); - // click -> show details (simple alert for demo) - card.addEventListener('click', ()=> alert(p.title + '\\n\\n' + p.desc)); - el.appendChild(card); - }); -} - -function mountSkills(){ - const el = document.getElementById('skillsGrid'); - SKILLS.forEach(s=>{ - const deg = Math.round(s.val * 3.6); - const wrapper = document.createElement('div'); - wrapper.className = 'skill-meter'; - wrapper.innerHTML = ` -
-
${s.val}%
-
-
-
${escapeHtml(s.name)}
-
Proficiency • ${s.val}%
-
- `; - el.appendChild(wrapper); - }); -} - -/* ---------- typewriter (simple, accessible) ---------- */ -function startTypewriter(elId, words, speed=2200){ - const el = document.getElementById(elId); - if(!el) return; - let i = 0; - setInterval(()=>{ - el.animate([{opacity:1, transform:'translateY(0)'},{opacity:0, transform:'translateY(-6px)'}],{duration:240,fill:'forwards'}); - setTimeout(()=> el.textContent = words[i++ % words.length], 260); - }, speed); -} - -/* ---------- scroll reveal using IntersectionObserver ---------- */ -function initReveal(){ - const obs = new IntersectionObserver((entries, o) => { - entries.forEach(en => { - if(en.isIntersecting){ - en.target.style.transition = 'opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1)'; - en.target.style.opacity = 1; - en.target.style.transform = 'translateY(0)'; - o.unobserve(en.target); - } + + // 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; + + const animateStats = function() { + if (hasAnimatedStats) return; + hasAnimatedStats = true; + + stats.forEach(stat => { + const target = parseInt(stat.getAttribute('data-count')); + let current = 0; + const duration = 2000; + const startTime = performance.now(); + + function updateCount(timestamp) { + const elapsed = timestamp - startTime; + const progress = Math.min(elapsed / duration, 1); + + current = Math.floor(progress * target); + stat.textContent = current; + + if (progress < 1) { + requestAnimationFrame(updateCount); + } else { + stat.textContent = target; + } + } + requestAnimationFrame(updateCount); + }); + }; + + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const sectionObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate-in'); + + 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); + + document.querySelectorAll('section, .skill-card, .project-tile').forEach(element => { + sectionObserver.observe(element); + }); + + // --- 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 data captured:', data); + + setTimeout(() => { + alert('Thank you for your message! Morgan will be in touch soon.'); + event.target.reset(); + }, 500); + }); + + + // --- 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 (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(); + } }); - }, {threshold: 0.12}); - document.querySelectorAll('.project-card, .skill-meter, .card-floating, .section-title').forEach(n=>{ - n.style.opacity = 0; n.style.transform = 'translateY(10px)'; obs.observe(n); - }); -} - -/* ---------- background canvas subtle particles ---------- */ -function initBackground(){ - const c = document.getElementById('bg-canvas'); - if(!c) return; - const ctx = c.getContext('2d'); - let w = c.width = innerWidth; - let h = c.height = innerHeight; - const dots = Array.from({length: Math.max(20, Math.floor((w+h)/140))}).map(()=>{ - return {x:Math.random()*w,y:Math.random()*h,r:Math.random()*1.6+0.6, vx:(Math.random()-0.5)/30, vy:(Math.random()-0.5)/30}; - }); - function resize(){ w = c.width = innerWidth; h = c.height = innerHeight; } - window.addEventListener('resize', resize, {passive:true}); - function draw(){ - ctx.clearRect(0,0,w,h); - dots.forEach(d => { - d.x += d.vx; d.y += d.vy; - if(d.x < -20) d.x = w + 20; if(d.x > w + 20) d.x = -20; - if(d.y < -20) d.y = h + 20; if(d.y > h + 20) d.y = -20; - ctx.beginPath(); - ctx.fillStyle = 'rgba(108,92,231,0.12)'; - ctx.arc(d.x, d.y, d.r+2, 0, Math.PI*2); ctx.fill(); - ctx.beginPath(); - ctx.fillStyle = 'rgba(0,224,255,0.06)'; - ctx.arc(d.x+30, d.y-20, d.r+1, 0, Math.PI*2); ctx.fill(); + + document.addEventListener('mousedown', () => { + document.body.classList.remove('keyboard-navigation'); }); - requestAnimationFrame(draw); - } - draw(); -} - -/* ---------- form handling (no network) ---------- */ -function initForm(){ - const form = document.getElementById('contactForm'); - const status = document.getElementById('formStatus'); - document.getElementById('clearForm').addEventListener('click', ()=> form.reset()); - form.addEventListener('submit', e=>{ - e.preventDefault(); - const fd = new FormData(form); - const name = fd.get('name') || ''; - status.textContent = 'Sending...'; - setTimeout(()=>{ - status.textContent = `Thanks ${name.split(' ')[0] || ''}! Message queued (demo).`; - form.reset(); - setTimeout(()=> status.textContent = '', 3600); - }, 900); - }); -} - -/* ---------- theme toggle (persist) ---------- */ -function initTheme(){ - const btn = document.getElementById('themeToggle'); - const stored = localStorage.getItem('pref-theme') || 'dark'; - applyTheme(stored); - btn.addEventListener('click', () => { - const next = document.documentElement.style.getPropertyValue('--bg') === '#ffffff' ? 'dark' : 'light'; - applyTheme(next); localStorage.setItem('pref-theme', next); - }); -} -function applyTheme(name){ - if(name === 'light'){ - document.documentElement.style.setProperty('--bg','#ffffff'); - document.documentElement.style.setProperty('--muted','#5b6670'); - document.documentElement.style.setProperty('--panel','rgba(255,255,255,0.6)'); - document.documentElement.style.setProperty('--accent1','#6C5CE7'); - document.documentElement.style.setProperty('--accent2','#00E0FF'); - } else { - document.documentElement.style.setProperty('--bg','#071026'); - document.documentElement.style.setProperty('--muted','#9aa3b2'); - document.documentElement.style.setProperty('--panel','rgba(9,12,20,0.6)'); - } -} - -/* ---------- tiny helpers ---------- */ -function escapeHtml(str){ return String(str).replace(/[&<>"']/g, s=>({ '&':'&','<':'<','>':'>','"':'"',"'":''' })[s]); } - -function boot(){ - mountProjects(); - mountSkills(); - startTypewriter('typewriter',['Full-Stack Developer','AI Experimenter','UI/UX Enthusiast','Problem Solver'],2600); - initReveal(); - initBackground(); - initForm(); - initTheme(); - document.getElementById('year').textContent = new Date().getFullYear(); -} - -/* start when DOM ready */ -if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); -else boot(); +}); \ No newline at end of file diff --git a/style.css b/style.css index 783cb50e4..5b9ab0e19 100644 --- a/style.css +++ b/style.css @@ -1,128 +1,353 @@ -/* ----- futuristic dark theme ----- */ -:root{ - --bg:#07070b; - --panel: rgba(9,12,20,0.6); - --glass: rgba(255,255,255,0.04); - --muted:#9aa3b2; - --accent1:#6C5CE7; - --accent2:#00E0FF; - --accent3:#FF5C93; - --radius:14px; - --glass-border: rgba(255,255,255,0.04); - --glass-strong: rgba(255,255,255,0.06); - --shadow: 0 12px 40px rgba(3,7,18,0.6); - --container:1100px; -} - -/* reset */ -*{box-sizing:border-box} -html,body{height:100%} -body{ - margin:0; - font-family:Inter, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; - background: linear-gradient(180deg,#030312 0%, #071026 60%); - color:#E7EEF8; - -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; - overflow-x:hidden; -} - -/* container */ -.container{max-width:var(--container);margin:0 auto;padding:0 20px;} - -/* topbar glass */ -.topbar{ - position:fixed;left:0;right:0;top:12px;margin:0 auto;padding:10px 26px; - display:flex;align-items:center;justify-content:space-between;gap:12px; - width:calc(100% - 48px);max-width:calc(var(--container) + 40px); - border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); - box-shadow:var(--shadow);backdrop-filter:blur(8px);border:1px solid var(--glass-border);z-index:40; -} -.brand{display:flex;gap:12px;align-items:center} -.brand .brand-meta .name{font-weight:700} -.brand .brand-meta .role{font-size:12px;color:var(--muted)} - -/* nav */ -.nav{display:flex;align-items:center;gap:12px} -.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600;transition:all .22s} -.nav a:hover{color:#fff;background:linear-gradient(90deg, rgba(108,92,231,0.12), rgba(0,224,255,0.06));transform:translateY(-2px)} -#themeToggle{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:6px 8px;border-radius:8px} - -/* background - canvas sits behind content */ -#bg-wrap{position:fixed;inset:0;pointer-events:none;z-index:-2} -.nebula{ - position:fixed;inset:0;background: - radial-gradient(600px 300px at 10% 10%, rgba(108,92,231,0.12), transparent 12%), - radial-gradient(500px 260px at 80% 80%, rgba(0,224,255,0.08), transparent 14%); - mix-blend-mode:screen;opacity:0.9;z-index:-1; -} - -/* hero */ -.hero{padding:160px 0 60px;display:flex;align-items:center;min-height:70vh} -.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center} -.headline{font-size:2.4rem;margin:0 0 8px;line-height:1.02} -.accent{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;color:transparent;font-weight:800} -.lead{color:var(--muted);max-width:56ch;margin:0 0 18px} -.typewriter{display:inline-block;margin-left:8px;font-weight:700;color:var(--accent2)} - -/* hero floating mock (parallax) */ -.card-floating{width:100%;max-width:420px;margin:auto;pointer-events:none} -.mock{width:100%;height:260px;border-radius:14px;padding:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-strong);box-shadow:0 18px 50px rgba(2,6,20,0.6);display:flex;flex-direction:column;gap:12px;transform:translateY(-6px)} -.mock-top{display:flex;gap:8px} -.dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--accent1),var(--accent2))} -.mock-body{display:flex;flex-direction:column;gap:10px;flex:1} -.m-row{display:flex;gap:10px} -.m-block{flex:1;background:linear-gradient(180deg,rgba(108,92,231,0.06),rgba(0,224,255,0.02));padding:12px;border-radius:10px;font-weight:700;color:#EAF6FF;display:flex;align-items:center;justify-content:center} -.m-row.small .m-chip{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:999px;color:var(--muted);font-weight:700} - -/* section */ -.section{padding:80px 0} -.section.alt{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border-top:1px solid rgba(255,255,255,0.02)} -.section-title{text-align:center;font-size:1.4rem;margin:8px 0 28px;font-weight:700;color:#EAF6FF} - -/* grid utility */ -.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} - -/* projects (hover tilt + glow) */ -.project-card{ - position:relative;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); - border:1px solid var(--glass-border);overflow:hidden;cursor:pointer;transition:transform .25s ease,box-shadow .25s; - display:flex;flex-direction:column;gap:12px;min-height:160px; -} -.project-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 28px 90px rgba(6,12,30,0.6)} -.project-title{font-weight:700;color:var(--accent1);font-size:1.05rem} -.project-desc{color:var(--muted);font-size:0.95rem} - -/* skills */ -.skill-meter{display:flex;gap:12px;align-items:center;padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02)} -.meter-circle{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:conic-gradient(var(--accent1) 0deg, var(--accent1) var(--deg), rgba(255,255,255,0.03) var(--deg));box-shadow:inset 0 -6px 18px rgba(0,0,0,0.45)} -.meter-inner{width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:grid;place-items:center;color:#EAF6FF} -.skill-info{flex:1} -.skill-name{font-weight:700} -.skill-meta{color:var(--muted);font-size:0.9rem;margin-top:6px} - -/* contact */ -.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:12px;border:1px solid var(--glass-border)} -.contact-left h2{margin:0 0 8px} -.contact-list{list-style:none;padding:0;margin:12px 0 0;color:var(--muted);line-height:1.8} -.contact-form label{display:block;margin-bottom:8px} -.contact-form input,.contact-form textarea{ - width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit;outline:none -} -.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px} -.form-status{color:var(--muted);margin-top:8px;min-height:20px} - -/* buttons */ -.btn{padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-weight:700} -.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#041022;box-shadow:0 12px 30px rgba(108,92,231,0.12)} -.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)} - -/* footer */ -.footer{padding:36px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)} - -/* responsive */ -@media (max-width:980px){ - .hero-inner{grid-template-columns:1fr;gap:18px} - .card-floating{order:-1;max-width:100%} - .contact-card{grid-template-columns:1fr} - .topbar{padding:10px 16px;width:calc(100% - 32px)} +/* --- CSS Variables: Professional Dark Mode & Geometric UI --- */ +:root { + --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; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + 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; + width: 100%; height: 100%; + background: var(--bg); + display: flex; align-items: center; justify-content: center; + z-index: 9999; + transition: opacity 0.5s ease, visibility 0.5s ease; +} +.loading-screen.fade-out { opacity: 0; visibility: hidden; } +.loading-ring { + width: 60px; height: 60px; + border: 4px solid rgba(94, 100, 255, 0.2); + border-top: 4px solid var(--primary); + border-radius: 50%; + 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; + transform: translate(-50%, -50%); + 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; } + +/* --- Particles Background --- */ +#particles-js { + position: fixed; + width: 100%; height: 100%; + top: 0; left: 0; + z-index: -1; +} + +/* --- Header & Navigation --- */ +header { + position: fixed; width: 100%; padding: 20px 0; + background: rgba(18, 18, 18, 0.95); + backdrop-filter: blur(8px); + z-index: 1000; + border-bottom: 1px solid rgba(94, 100, 255, 0.2); + transition: all 0.3s ease; +} + +.header-scrolled { + padding: 15px 0; + box-shadow: 0 5px 20px var(--shadow); +} + +nav { + display: flex; justify-content: space-between; align-items: center; +} + +.logo { + 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; +} +@keyframes pulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.2); opacity: 0.7; } +} + +.nav-links { + display: flex; gap: 30px; list-style: none; +} +.nav-links a { + 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; +} +.nav-links a i { + margin-right: 8px; + color: var(--secondary); +} +.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; + padding-top: 120px; +} + +.hero-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: 5%; +} + +.hero-text { + flex: 0 0 55%; + z-index: 10; + opacity: 0; + transform: translateY(50px); + animation: fadeInUp 1s ease-out forwards; +} +@keyframes fadeInUp { + 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: -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); } +} + +.hero-subtitle { + 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-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); } + + +/* --- HERO VISUAL FINAL POLISH --- */ +.hero-visual { + flex: 0 0 40%; + height: 450px; + display: grid; /* Use grid for reliable centering */ + place-items: center; + position: relative; + z-index: 5; + + /* 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); + } +} + +/* Tech Stack Ring (Visual Anchor) */ +.tech-stack-ring { + /* Position grid item reliably */ + grid-area: 1/1; + width: 350px; height: 350px; + border-radius: 50%; + border: 1px dashed var(--primary-dark); + z-index: 1; + animation: rotateRing 20s linear infinite; + background: transparent; +} + +.ring-icon { + position: absolute; + width: 50px; height: 50px; + background: var(--primary); + border-radius: 50%; + 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; +} + +/* 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%); } + +@keyframes rotateRing { + to { transform: rotate(360deg); } /* Rotation without translation */ +} + +/* Scroll indicator */ +.scroll-indicator { color: var(--primary); } +.scroll-arrow, .scroll-arrow::after { background: var(--primary); border-color: var(--primary); } + +/* --- 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; } + +/* --- 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); } + +.skills-asymmetry-grid { + display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; +} + +.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; } +} + +.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); } +} + +.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; } + + +/* --- 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; +} + +.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); } + + +/* --- 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); } + +/* --- 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; } + + .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; } + + .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) { + .hero-title { font-size: 48px; } + .hero-subtitle { font-size: 30px; } + .hero-visual { display: none; } + + .nav-links { + 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; } + + .projects-geometric-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; } +} \ No newline at end of file