diff --git a/submissions/DakshJuneja1507/README.md b/submissions/DakshJuneja1507/README.md new file mode 100644 index 0000000..5bb7496 Binary files /dev/null and b/submissions/DakshJuneja1507/README.md differ diff --git a/submissions/DakshJuneja1507/daksh.jpg b/submissions/DakshJuneja1507/daksh.jpg new file mode 100644 index 0000000..9970003 Binary files /dev/null and b/submissions/DakshJuneja1507/daksh.jpg differ diff --git a/submissions/DakshJuneja1507/daksh2.jpg b/submissions/DakshJuneja1507/daksh2.jpg new file mode 100644 index 0000000..1e1e304 Binary files /dev/null and b/submissions/DakshJuneja1507/daksh2.jpg differ diff --git a/submissions/DakshJuneja1507/jarvis_portfolio.html b/submissions/DakshJuneja1507/jarvis_portfolio.html new file mode 100644 index 0000000..b2c0c04 --- /dev/null +++ b/submissions/DakshJuneja1507/jarvis_portfolio.html @@ -0,0 +1,166 @@ + + + + + + Portfolio - Jarvis Interface + + + +
+ + + + + + +
+ +
+

+ Welcome +

+
+
+
+
+
+
+
+ Profile Photo +
+
+
+

About Me

+

Hi! I’m Daksh Juneja, an 18-year-old student pursuing B.Tech in Robotics and Automation at Thapar Institute of Engineering and Technology. I’m passionate about AI-driven robotics, automation, and innovation, and I love turning ideas into impactful projects

+

I was selected for the National Level CBSE Science Exhibition and had the incredible opportunity to present my project in front of Hon’ble Prime Minister Shri Narendra Modi Ji at Bharat Mandapam. I’m also the founder of Yuvkriti, an NGO that empowers youth to drive positive social change, and the creator of “Aetheria: The Science Chronicles”, an educational science board game that makes learning interactive and fun. In addition, I won the CorpEureka Ideathon, showcasing my ability to blend innovation with practical problem-solving.

+

Beyond academics, I’m constantly exploring new technologies, participating in hackathons, and striving to bridge creativity with the future of robotics and AI.

+
+
+
+ + +
+

+ Projects +

+
+
+
+

Terra Mitra

+

Terra Mitra is an AIoT-based smart farming system that empowers farmers through real-time data on soil, weather, and crop conditions. It provides AI-driven recommendations, a regional-language chatbot for support, and a smart marketplace for fertilizers — helping farmers boost yield, cut costs, and promote sustainable agriculture. The project was proudly presented before Hon’ble Prime Minister Shri Narendra Modi Ji at Bharat Mandapam for its innovative approach to transforming Indian farming

+

I managed the product development and team coordination for Terra Mitra, while also handling report writing, presentations, and marketing, ensuring the project’s smooth execution and impactful delivery.

+
+
+
+
+

ROAD SAGA

+

Road Saga is an innovative road safety project designed to teach young children about real-life driving challenges and safe road practices through smart technology. The project was selected for the National Level CBSE Science Exhibition for its creativity and impact.

+

1.Sleepless Driver Alert: Detects drowsy drivers using an IR sensor and alerts them with a buzzer and LED.

+

2.Smart Red Light: Automated barriers prevent red-light jumping and ensure pedestrian safety.

+

3.Pothole & Blind Spot Detection: AI-enabled cameras and ultrasonic sensors identify potholes and vehicles at blind turns to prevent accidents.

+

My Contribution

+

I developed the Pothole Detection System and actively contributed to building the project’s Minimum Viable Product (MVP), ensuring all modules worked together seamlessly to deliver a functional and impactful prototype

+
+
+
+
+

ATL MANAGEMENT SYSTEM

+

ATL Management System is a Python and MySQL-based project developed to streamline the operations of Atal Tinkering Labs (ATL). It efficiently manages electronic inventory, tracks issued components, and organizes projects within the lab. The system ensures proper resource allocation, maintains accurate records, and helps prevent shortages — making lab management more organized, transparent, and efficient.

+
+
+
+
+

Simple Calculator and Image Viewer

+

I created a simple calculator using Python’s Tkinter library that performs addition operations. It features a basic and easy-to-use GUI, serving as an introduction to GUI development in Python.

+

I created an Image Viewer using Python’s Tkinter library, which allows users to open and view images easily through a simple graphical interface. The project demonstrates the use of Tkinter and Pillow (PIL) for handling and displaying images, offering a basic yet functional example of GUI-based image applications in Python

+
+
+
+
+

TechMesh

+

I, along with my team The Tycoon Minded, won the CorpEureka Ideathon organized by CTD (Centre for Training and Development), Thapar Institute of Engineering and Technology. + Our project, TrustMesh, proposed a self-healing village network layer that protects rural IoT systems like healthcare, water pumps, and energy grids from cyber sabotage — without shutting them down or compromising privacy. + The system uses AI-based anomaly detection, sandbox isolation, and transparent alerts in local languages, ensuring community safety and trust. This project reflected our goal of merging technology, security, and social responsibility to support Digital India’s rural innovation ecosystem.

+ +
+
+
+
+

Co Founder:Yuvkriti

+

Yuvkriti is a youth-led NGO focused on teaching money-making and real-world life skills while currently conducting awareness drives to create social impact.

+

Our key initiatives include:

+

Book Collection Drive (with TOG): Collected and donated books, bags, and stationery to support education for underprivileged children.

+

Art & Donation Drive (with ASR): Organized art activities, shared stationery and snacks, and spent a fun-filled day with kids.

+

Bangalore Art Drive: Promoted creativity through crafts, dance, and a healthy lifestyle awareness session.

+

Sanskar – For a Better Tomorrow: Focused on spreading moral values, empathy, and positive thinking among youth.

+
+
+
+
+ + +
+

+ Skill Set +

+
+
Python
+
Tkinter
+
Product Development
+
Leadership
+
Marketing
+
Presentation
+
NPO Management
+
Creative Thinking
+
+
+
+ + + + \ No newline at end of file diff --git a/submissions/DakshJuneja1507/jarvis_script.js b/submissions/DakshJuneja1507/jarvis_script.js new file mode 100644 index 0000000..b08236c --- /dev/null +++ b/submissions/DakshJuneja1507/jarvis_script.js @@ -0,0 +1,258 @@ +// Page Navigation +const navButtons = document.querySelectorAll('.nav-btn'); +const pages = document.querySelectorAll('.page'); + +navButtons.forEach(button => { + button.addEventListener('click', function() { + const targetPage = this.getAttribute('data-page'); + + // Remove active class from all buttons and pages + navButtons.forEach(btn => btn.classList.remove('active')); + pages.forEach(page => page.classList.remove('active')); + + // Add active class to clicked button and target page + this.classList.add('active'); + document.getElementById(targetPage).classList.add('active'); + + // Animate connection line for active page + animateConnectionLine(targetPage); + }); +}); + +// Animate connection lines +function animateConnectionLine(page) { + const lines = document.querySelectorAll('.line'); + lines.forEach(line => { + line.style.strokeWidth = '1'; + line.style.stroke = 'rgba(0, 150, 255, 0.3)'; + }); + + const activeLine = document.querySelector(`.line-${page}`); + if (activeLine) { + activeLine.style.strokeWidth = '2'; + activeLine.style.stroke = 'rgba(0, 255, 200, 0.8)'; + } +} + +// Particle System for Background +const canvas = document.getElementById('particle-canvas'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +let particles = []; +const particleCount = 80; + +class Particle { + constructor() { + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.size = Math.random() * 2 + 0.5; + this.speedX = (Math.random() - 0.5) * 0.5; + this.speedY = (Math.random() - 0.5) * 0.5; + this.opacity = Math.random() * 0.5 + 0.2; + } + + update() { + this.x += this.speedX; + this.y += this.speedY; + + if (this.x > canvas.width) this.x = 0; + if (this.x < 0) this.x = canvas.width; + if (this.y > canvas.height) this.y = 0; + if (this.y < 0) this.y = canvas.height; + } + + draw() { + ctx.fillStyle = `rgba(0, 200, 255, ${this.opacity})`; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.fill(); + } +} + +function initParticles() { + particles = []; + for (let i = 0; i < particleCount; i++) { + particles.push(new Particle()); + } +} + +function connectParticles() { + for (let i = 0; i < particles.length; i++) { + for (let j = i + 1; j < particles.length; j++) { + const dx = particles[i].x - particles[j].x; + const dy = particles[i].y - particles[j].y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < 120) { + ctx.strokeStyle = `rgba(0, 150, 255, ${0.2 * (1 - distance / 120)})`; + ctx.lineWidth = 0.5; + ctx.beginPath(); + ctx.moveTo(particles[i].x, particles[i].y); + ctx.lineTo(particles[j].x, particles[j].y); + ctx.stroke(); + } + } + } +} + +function animateParticles() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + particles.forEach(particle => { + particle.update(); + particle.draw(); + }); + + connectParticles(); + requestAnimationFrame(animateParticles); +} + +// Initialize particles +initParticles(); +animateParticles(); + +// Handle window resize +window.addEventListener('resize', () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + initParticles(); +}); + +// Add hover effect to skill tags +const skillTags = document.querySelectorAll('.skill-tag'); +skillTags.forEach(tag => { + tag.addEventListener('mouseenter', function() { + this.style.transition = 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; + }); +}); + +// Add parallax effect to project cards +const projectCards = document.querySelectorAll('.project-card'); +projectCards.forEach(card => { + card.addEventListener('mousemove', function(e) { + const rect = card.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + const rotateX = (y - centerY) / 20; + const rotateY = (centerX - x) / 20; + + card.style.transform = `translateY(-8px) scale(1.02) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; + }); + + card.addEventListener('mouseleave', function() { + card.style.transform = 'translateY(0) scale(1)'; + }); +}); + +// Initialize connection line animation +animateConnectionLine('home'); + +// Add typing effect to page titles (optional enhancement) +function typeWriter(element, text, speed = 100) { + let i = 0; + element.textContent = ''; + + function type() { + if (i < text.length) { + element.textContent += text.charAt(i); + i++; + setTimeout(type, speed); + } + } + + type(); +} + +// Add glitch effect on title hover +const titleGlitches = document.querySelectorAll('.title-glitch'); +titleGlitches.forEach(title => { + title.addEventListener('mouseenter', function() { + this.style.animation = 'none'; + setTimeout(() => { + this.style.animation = 'glitch 0.3s'; + }, 10); + }); +}); + +// Add sound effects on navigation (optional - commented out) +// function playClickSound() { +// const audio = new Audio('click.mp3'); +// audio.volume = 0.3; +// audio.play(); +// } + +// Add keyboard navigation +document.addEventListener('keydown', (e) => { + const currentPage = document.querySelector('.page.active').id; + let nextPage; + + switch(e.key) { + case 'ArrowRight': + case 'ArrowDown': + if (currentPage === 'home') nextPage = 'projects'; + else if (currentPage === 'projects') nextPage = 'skills'; + else nextPage = 'home'; + break; + case 'ArrowLeft': + case 'ArrowUp': + if (currentPage === 'home') nextPage = 'skills'; + else if (currentPage === 'skills') nextPage = 'projects'; + else nextPage = 'home'; + break; + case '1': + nextPage = 'home'; + break; + case '2': + nextPage = 'projects'; + break; + case '3': + nextPage = 'skills'; + break; + } + + if (nextPage) { + const targetButton = document.querySelector(`[data-page="${nextPage}"]`); + if (targetButton) targetButton.click(); + } +}); + +// Add smooth scroll behavior for internal navigation +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Performance monitoring (optional) +let lastFrameTime = Date.now(); +let fps = 60; + +function updateFPS() { + const now = Date.now(); + fps = 1000 / (now - lastFrameTime); + lastFrameTime = now; + + // Reduce particles if FPS drops below 30 + if (fps < 30 && particles.length > 40) { + particles = particles.slice(0, Math.floor(particles.length * 0.8)); + } +} + +setInterval(updateFPS, 1000); + +console.log('🚀 Jarvis Portfolio Initialized'); +console.log('💡 Keyboard shortcuts: Arrow keys or 1/2/3 to navigate'); \ No newline at end of file diff --git a/submissions/DakshJuneja1507/jarvis_styles.css b/submissions/DakshJuneja1507/jarvis_styles.css new file mode 100644 index 0000000..3678780 --- /dev/null +++ b/submissions/DakshJuneja1507/jarvis_styles.css @@ -0,0 +1,647 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +img { + display: block; + margin: 0 auto; + width: 200px; /* optional */ +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: #0a0e27; + color: #fff; + overflow-x: hidden; +} + +/* Animated background */ +.bg-animation { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -2; + background: radial-gradient(ellipse at center, #0f1535 0%, #0a0e27 100%); +} + +#particle-canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + pointer-events: none; +} + +/* Enhanced Jarvis Navigation Circle */ +.jarvis-nav { + position: fixed; + top: 50%; + left: 50px; + transform: translateY(-50%); + z-index: 1000; +} + +.nav-circle { + position: relative; + width: 300px; + height: 300px; +} + +/* Rotating orbit rings */ +.orbit-ring { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 1px solid transparent; + border-top-color: rgba(0, 150, 255, 0.6); + border-right-color: rgba(0, 150, 255, 0.3); +} + +.outer-ring { + width: 280px; + height: 280px; + animation: rotate 15s linear infinite; +} + +.middle-ring { + width: 220px; + height: 220px; + animation: rotate-reverse 12s linear infinite; + border-top-color: rgba(0, 255, 200, 0.5); + border-right-color: rgba(0, 255, 200, 0.2); +} + +.inner-ring { + width: 160px; + height: 160px; + animation: rotate 10s linear infinite; + border-top-color: rgba(0, 150, 255, 0.7); + border-right-color: rgba(0, 150, 255, 0.4); +} + +@keyframes rotate { + from { transform: translate(-50%, -50%) rotate(0deg); } + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +@keyframes rotate-reverse { + from { transform: translate(-50%, -50%) rotate(360deg); } + to { transform: translate(-50%, -50%) rotate(0deg); } +} + +/* Scanner effect */ +.scanner { + position: absolute; + top: 50%; + left: 50%; + width: 280px; + height: 280px; + transform: translate(-50%, -50%); + border-radius: 50%; + background: conic-gradient( + from 0deg, + transparent 0deg, + transparent 270deg, + rgba(0, 255, 200, 0.3) 280deg, + rgba(0, 150, 255, 0.5) 300deg, + transparent 360deg + ); + animation: scan 4s linear infinite; +} + +@keyframes scan { + from { transform: translate(-50%, -50%) rotate(0deg); } + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +/* Core hologram */ +.nav-core { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80px; + height: 80px; +} + +.core-inner { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + background: radial-gradient(circle, rgba(0, 200, 255, 0.4), transparent 70%); + border-radius: 50%; + border: 2px solid #0096ff; + box-shadow: + 0 0 20px rgba(0, 150, 255, 0.6), + inset 0 0 20px rgba(0, 150, 255, 0.4), + 0 0 40px rgba(0, 150, 255, 0.3); + animation: corePulse 3s ease-in-out infinite; +} + +@keyframes corePulse { + 0%, 100% { + box-shadow: + 0 0 20px rgba(0, 150, 255, 0.6), + inset 0 0 20px rgba(0, 150, 255, 0.4), + 0 0 40px rgba(0, 150, 255, 0.3); + } + 50% { + box-shadow: + 0 0 30px rgba(0, 255, 200, 0.8), + inset 0 0 30px rgba(0, 255, 200, 0.6), + 0 0 60px rgba(0, 255, 200, 0.5); + } +} + +.hologram-effect { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 120%; + height: 120%; + background: radial-gradient(circle, transparent 40%, rgba(0, 150, 255, 0.1) 60%, transparent 70%); + animation: hologramPulse 2s ease-in-out infinite; +} + +@keyframes hologramPulse { + 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } + 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.2; } +} + +/* Connection lines SVG */ +.connection-lines { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.line { + stroke: rgba(0, 150, 255, 0.3); + stroke-width: 1; + stroke-dasharray: 5, 5; + animation: linePulse 2s ease-in-out infinite; +} + +.line-home { animation-delay: 0s; } +.line-projects { animation-delay: 0.3s; } +.line-skills { animation-delay: 0.6s; } + +@keyframes linePulse { + 0%, 100% { stroke: rgba(0, 150, 255, 0.3); stroke-width: 1; } + 50% { stroke: rgba(0, 255, 200, 0.6); stroke-width: 2; } +} + +.line-dot { + fill: #00ffcc; + filter: drop-shadow(0 0 5px rgba(0, 255, 200, 0.8)); + animation: dotPulse 1.5s ease-in-out infinite; +} + +@keyframes dotPulse { + 0%, 100% { r: 3; opacity: 1; } + 50% { r: 5; opacity: 0.7; } +} + +/* Navigation buttons */ +.nav-btn-wrapper { + position: absolute; +} + +.home-pos { + top: 10px; + left: 50%; + transform: translateX(-50%); +} + +.projects-pos { + top: 50%; + right: 10px; + transform: translateY(-50%); +} + +.skills-pos { + bottom: 10px; + left: 50%; + transform: translateX(-50%); +} + +.nav-btn { + width: 60px; + height: 60px; + background: rgba(5, 15, 35, 0.9); + border: 2px solid #0096ff; + border-radius: 50%; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #00ffcc; + font-weight: bold; + box-shadow: + 0 0 15px rgba(0, 150, 255, 0.4), + inset 0 0 10px rgba(0, 150, 255, 0.2); + position: relative; + overflow: hidden; +} + +.nav-btn::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: radial-gradient(circle, rgba(0, 255, 200, 0.4), transparent); + transform: translate(-50%, -50%); + transition: width 0.4s ease, height 0.4s ease; +} + +.nav-btn:hover::before { + width: 100%; + height: 100%; +} + +.nav-btn:hover { + background: rgba(0, 150, 255, 0.3); + box-shadow: + 0 0 30px rgba(0, 255, 200, 0.7), + inset 0 0 20px rgba(0, 255, 200, 0.3); + transform: scale(1.15); + border-color: #00ffcc; +} + +.nav-btn.active { + background: rgba(0, 150, 255, 0.5); + box-shadow: + 0 0 40px rgba(0, 150, 255, 1), + inset 0 0 25px rgba(0, 150, 255, 0.5); + border-color: #00ffcc; + border-width: 3px; +} + +.btn-icon { + font-size: 20px; + position: relative; + z-index: 1; +} + +.btn-text { + font-size: 9px; + text-transform: uppercase; + margin-top: 2px; + position: relative; + z-index: 1; +} + +/* Main Content */ +.container { + margin-left: 380px; + padding: 60px 40px; + max-width: 1200px; +} + +.page { + display: none; + animation: fadeIn 0.6s ease-in; +} + +.page.active { + display: block; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } +} + +.page-title { + font-size: 3.5em; + margin-bottom: 40px; + position: relative; + display: inline-block; +} + +.title-glitch { + color: #00ffcc; + text-shadow: + 0 0 10px rgba(0, 255, 200, 0.5), + 0 0 20px rgba(0, 255, 200, 0.3), + 0 0 30px rgba(0, 150, 255, 0.3); + position: relative; + animation: glitch 3s infinite; +} + +@keyframes glitch { + 0%, 90%, 100% { transform: translate(0); } + 92% { transform: translate(-2px, 2px); } + 94% { transform: translate(2px, -2px); } + 96% { transform: translate(-2px, -2px); } + 98% { transform: translate(2px, 2px); } +} + +/* Home Page */ +.about-section { + display: flex; + gap: 50px; + align-items: center; + margin-top: 60px; +} + +.photo-frame { + position: relative; + width: 320px; + height: 320px; + flex-shrink: 0; +} + +.frame-corner { + position: absolute; + width: 30px; + height: 30px; + border: 3px solid #0096ff; +} + +.frame-corner.tl { + top: -10px; + left: -10px; + border-right: none; + border-bottom: none; + animation: cornerGlow 2s ease-in-out infinite; +} + +.frame-corner.tr { + top: -10px; + right: -10px; + border-left: none; + border-bottom: none; + animation: cornerGlow 2s ease-in-out infinite 0.5s; +} + +.frame-corner.bl { + bottom: -10px; + left: -10px; + border-right: none; + border-top: none; + animation: cornerGlow 2s ease-in-out infinite 1s; +} + +.frame-corner.br { + bottom: -10px; + right: -10px; + border-left: none; + border-top: none; + animation: cornerGlow 2s ease-in-out infinite 1.5s; +} + +@keyframes cornerGlow { + 0%, 100% { + border-color: #0096ff; + box-shadow: 0 0 10px rgba(0, 150, 255, 0.5); + } + 50% { + border-color: #00ffcc; + box-shadow: 0 0 20px rgba(0, 255, 200, 0.8); + } +} + +.scan-line { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, rgba(0, 255, 200, 0.8), transparent); + animation: scan-vertical 3s linear infinite; +} + +@keyframes scan-vertical { + from { top: 0; } + to { top: 100%; } +} + +.photo-frame img { + width: 100%; + height: 100%; + object-fit: cover; + border: 2px solid #0096ff; + box-shadow: 0 0 40px rgba(0, 150, 255, 0.5); + position: relative; + z-index: 1; +} + +.hologram-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 255, 200, 0.03) 2px, + rgba(0, 255, 200, 0.03) 4px + ); + pointer-events: none; + z-index: 2; +} + +.about-content { + flex: 1; +} + +.about-content h2 { + font-size: 2.8em; + color: #0096ff; + margin-bottom: 25px; + text-shadow: 0 0 15px rgba(0, 150, 255, 0.5); +} + +.about-content p { + font-size: 1.15em; + line-height: 1.9; + color: #a0d8f1; + margin-bottom: 20px; +} + +/* Projects Page */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 35px; + margin-top: 50px; +} + +.project-card { + background: rgba(10, 20, 40, 0.7); + border: 2px solid rgba(0, 150, 255, 0.4); + border-radius: 12px; + padding: 30px; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + position: relative; + overflow: hidden; +} + +.card-header { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, transparent, #0096ff, transparent); + animation: headerSlide 3s ease-in-out infinite; +} + +@keyframes headerSlide { + 0%, 100% { transform: translateX(-100%); } + 50% { transform: translateX(100%); } +} + +.card-glow { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(0, 255, 200, 0.1), transparent 50%); + opacity: 0; + transition: opacity 0.5s ease; +} + +.project-card:hover .card-glow { + opacity: 1; + animation: cardGlow 2s ease-in-out infinite; +} + +@keyframes cardGlow { + 0%, 100% { transform: translate(0, 0); } + 50% { transform: translate(10%, 10%); } +} + +.project-card:hover { + border-color: #00ffcc; + box-shadow: 0 0 40px rgba(0, 255, 200, 0.4); + transform: translateY(-8px) scale(1.02); + background: rgba(10, 30, 50, 0.8); +} + +.project-card h3 { + color: #00ffcc; + font-size: 1.6em; + margin-bottom: 18px; + position: relative; + z-index: 1; +} + +.project-card p { + color: #a0d8f1; + line-height: 1.7; + position: relative; + z-index: 1; +} + +/* Skills Page */ +.skills-container { + display: flex; + flex-wrap: wrap; + gap: 18px; + margin-top: 50px; +} + +.skill-tag { + background: rgba(0, 150, 255, 0.15); + border: 2px solid #0096ff; + border-radius: 30px; + padding: 14px 28px; + color: #00ffcc; + font-weight: 600; + font-size: 1.05em; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); + cursor: default; + box-shadow: 0 0 12px rgba(0, 150, 255, 0.3); + position: relative; + overflow: hidden; +} + +.skill-tag::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(0, 255, 200, 0.3), transparent); + transition: left 0.5s ease; +} + +.skill-tag:hover::before { + left: 100%; +} + +.skill-tag:hover { + background: rgba(0, 255, 200, 0.25); + border-color: #00ffcc; + box-shadow: 0 0 25px rgba(0, 255, 200, 0.5); + transform: scale(1.08) translateY(-3px); +} + +/* Responsive */ +@media (max-width: 1024px) { + .jarvis-nav { + left: 30px; + transform: translateY(-50%) scale(0.85); + } + + .container { + margin-left: 300px; + padding: 40px 30px; + } +} + +@media (max-width: 768px) { + .jarvis-nav { + left: 20px; + top: 120px; + transform: scale(0.65); + } + + .container { + margin-left: 0; + margin-top: 280px; + padding: 30px 20px; + } + + .about-section { + flex-direction: column; + } + + .photo-frame { + width: 280px; + height: 280px; + } + + .page-title { + font-size: 2.5em; + } + + .projects-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file