← Back

Profile_01

Files

Select a file 
// Select a file from the sidebar
\n\n\n","size":5298,"isBinary":false},"script.js":{"name":"script.js","path":"script.js","content":"// Cosmos Bio - Interactive Scripts\n\ndocument.addEventListener('DOMContentLoaded', function() {\n // Create dynamic stars\n createDynamicStars();\n\n // Add scroll animations\n addScrollAnimations();\n\n // Add mouse interaction effects\n addMouseEffects();\n});\n\n// Create dynamic animated stars\nfunction createDynamicStars() {\n const starsContainer = document.querySelector('.stars');\n const numberOfStars = 150;\n\n for (let i = 0; i < numberOfStars; i++) {\n const star = document.createElement('div');\n star.className = 'dynamic-star';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.animationDelay = Math.random() * 4 + 's';\n star.style.animationDuration = (Math.random() * 3 + 2) + 's';\n\n starsContainer.appendChild(star);\n }\n}\n\n// Add scroll-based animations\nfunction addScrollAnimations() {\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver(function(entries) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate-in');\n }\n });\n }, observerOptions);\n\n // Observe all sections\n const sections = document.querySelectorAll('.section');\n sections.forEach(section => {\n observer.observe(section);\n });\n}\n\n// Add mouse interaction effects\nfunction addMouseEffects() {\n const body = document.body;\n const cursorGlow = document.createElement('div');\n cursorGlow.className = 'cursor-glow';\n body.appendChild(cursorGlow);\n\n let mouseX = 0;\n let mouseY = 0;\n\n document.addEventListener('mousemove', function(e) {\n mouseX = e.clientX;\n mouseY = e.clientY;\n\n cursorGlow.style.left = mouseX - 250 + 'px';\n cursorGlow.style.top = mouseY - 250 + 'px';\n });\n\n // Add hover effects for cards\n const cards = document.querySelectorAll('.skill-card, .project-card, .contact-link');\n cards.forEach(card => {\n card.addEventListener('mouseenter', function() {\n body.classList.add('card-hover');\n });\n\n card.addEventListener('mouseleave', function() {\n body.classList.remove('card-hover');\n });\n });\n}\n","size":2334,"isBinary":false},"styles.css":{"name":"styles.css","path":"styles.css","content":"/* Cosmos Bio - Space Theme Styles */\n\n/* Reset and Base Styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Raleway', sans-serif;\n line-height: 1.6;\n color: #c0c0c0;\n overflow-x: hidden;\n min-height: 100vh;\n background:\n radial-gradient(ellipse at top left, rgba(128,0,128,0.2) 0%, transparent 50%),\n radial-gradient(ellipse at top right, rgba(75,0,130,0.2) 0%, transparent 50%),\n radial-gradient(ellipse at bottom left, rgba(138,43,226,0.2) 0%, transparent 50%),\n radial-gradient(ellipse at bottom right, rgba(147,112,219,0.2) 0%, transparent 50%),\n linear-gradient(to bottom, #1a1a2e 0%, #16213e 50%, #0f3460 100%);\n position: relative;\n}\n\n/* Animated Stars Background */\n.stars {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: -1;\n}\n\n.stars::before,\n.stars::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image:\n radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),\n radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.5), transparent),\n radial-gradient(1px 1px at 90px 40px, #ffffff, transparent),\n radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.5), transparent),\n radial-gradient(2px 2px at 160px 30px, #ffffff, transparent);\n background-repeat: repeat;\n background-size: 200px 100px;\n animation: twinkle 4s linear infinite;\n}\n\n@keyframes twinkle {\n 0% {\n opacity: 1;\n transform: translateY(0px);\n }\n 50% {\n opacity: 0.8;\n transform: translateY(-50px);\n }\n 100% {\n opacity: 1;\n transform: translateY(-100px);\n }\n}\n\n/* Floating Clouds */\n.floating-clouds {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: -1;\n}\n\n.floating-clouds::before,\n.floating-clouds::after {\n content: '';\n position: absolute;\n background: rgba(255,255,255,0.1);\n border-radius: 50%;\n filter: blur(20px);\n}\n\n.floating-clouds::before {\n width: 300px;\n height: 300px;\n top: 20%;\n left: 10%;\n animation: drift1 25s linear infinite;\n}\n\n.floating-clouds::after {\n width: 200px;\n height: 200px;\n top: 60%;\n right: 15%;\n animation: drift2 30s linear infinite reverse;\n}\n\n@keyframes drift1 {\n 0% { transform: translateX(-100px) translateY(-50px); }\n 50% { transform: translateX(200px) translateY(50px); }\n 100% { transform: translateX(-100px) translateY(-50px); }\n}\n\n@keyframes drift2 {\n 0% { transform: translateX(100px) translateY(50px); }\n 50% { transform: translateX(-200px) translateY(-50px); }\n 100% { transform: translateX(100px) translateY(50px); }\n}\n\n/* Container */\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n position: relative;\n}\n\n/* Hero Section */\n.hero {\n text-align: center;\n padding: 100px 0 80px;\n position: relative;\n}\n\n.avatar {\n margin-bottom: 30px;\n}\n\n.cat-avatar {\n width: 120px;\n height: 120px;\n margin: 0 auto;\n border-radius: 50%;\n border: 3px solid #c71585;\n box-shadow: 0 0 30px rgba(199,21,133, 0.6);\n animation: wiggle 3s ease-in-out infinite alternate;\n display: block;\n}\n\n@keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-20px); }\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n@keyframes wiggle {\n 0% { transform: rotate(-5deg); }\n 100% { transform: rotate(5deg); }\n}\n\n.name {\n font-family: 'Orbitron', monospace;\n font-size: 3.5rem;\n font-weight: 700;\n color: #ffffff;\n margin-bottom: 10px;\n text-shadow: 0 0 20px rgba(139,0,139, 0.5);\n}\n\n.title {\n font-size: 1.4rem;\n color: #8b008b;\n margin-bottom: 20px;\n font-weight: 600;\n}\n\n.subtitle {\n font-size: 1.1rem;\n color: #9ca3af;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.8;\n}\n\n/* Section Styles */\n.section {\n padding: 80px 0;\n position: relative;\n}\n\n.section-header {\n text-align: center;\n margin-bottom: 50px;\n position: relative;\n}\n\n.section-icon {\n font-size: 2.5rem;\n margin-bottom: 20px;\n display: block;\n}\n\n.section-header h2 {\n font-family: 'Orbitron', monospace;\n font-size: 2.2rem;\n color: #ffffff;\n margin-bottom: 20px;\n text-shadow: 0 0 15px rgba(255,255,255,0.3);\n}\n\n.section-line {\n width: 80px;\n height: 3px;\n background: linear-gradient(to right, #8b008b, #9932cc);\n margin: 0 auto;\n border-radius: 2px;\n}\n\n.section-content {\n max-width: 600px;\n margin: 0 auto;\n text-align: center;\n font-size: 1.1rem;\n line-height: 1.8;\n color: #e6e6e6;\n}\n\n/* Skills Section */\n.skills-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 30px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.skill-card {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 25px;\n padding: 30px 20px;\n text-align: center;\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n}\n\n.skill-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(139,0,139,0.1), transparent);\n transition: left 0.5s;\n}\n\n.skill-card:hover::before {\n left: 100%;\n}\n\n.skill-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 35px rgba(139,0,139, 0.2);\n border-color: rgba(139,0,139, 0.3);\n}\n\n.skill-icon {\n font-size: 2.5rem;\n margin-bottom: 15px;\n display: block;\n}\n\n.skill-name {\n font-size: 1.2rem;\n font-weight: 600;\n color: #ffffff;\n}\n\n/* Projects Section */\n.projects-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n max-width: 1100px;\n margin: 0 auto;\n}\n\n.project-card {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 25px;\n padding: 30px;\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n}\n\n.project-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 35px rgba(139,0,139, 0.2);\n border-color: rgba(139,0,139, 0.3);\n}\n\n.project-title {\n font-family: 'Orbitron', monospace;\n font-size: 1.4rem;\n color: #ffffff;\n margin-bottom: 15px;\n text-shadow: 0 0 10px rgba(255,255,255,0.3);\n}\n\n.project-desc {\n color: #d1d5db;\n margin-bottom: 20px;\n line-height: 1.6;\n}\n\n.project-tech {\n font-size: 0.9rem;\n color: #9932cc;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Contact Section */\n.contact-info {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 40px;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.contact-link {\n display: flex;\n align-items: center;\n gap: 15px;\n padding: 15px 25px;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 10px;\n text-decoration: none;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n}\n\n.contact-link:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(139,0,139, 0.2);\n border-color: rgba(139,0,139, 0.3);\n background: rgba(255, 255, 255, 0.08);\n}\n\n.contact-icon {\n font-size: 1.5rem;\n display: flex;\n align-items: center;\n}\n\n.contact-text {\n color: #c0c0c0;\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.contact-link:hover .contact-text {\n color: #8b008b;\n}\n\n/* Dynamic Stars */\n.dynamic-star {\n position: absolute;\n width: 2px;\n height: 2px;\n background: #ffffff;\n border-radius: 50%;\n opacity: 0;\n animation: appear-disappear linear infinite;\n}\n\n@keyframes appear-disappear {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n 50% {\n opacity: 0.8;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.5);\n }\n}\n\n/* Scroll Animations */\n.section {\n opacity: 0;\n transform: translateY(50px);\n transition: all 0.8s ease;\n}\n\n.animate-in {\n opacity: 1;\n transform: translateY(0);\n}\n\n/* Mouse Effects */\n.cursor-glow {\n position: fixed;\n width: 500px;\n height: 500px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(139,0,139, 0.05) 0%, transparent 70%);\n pointer-events: none;\n z-index: -1;\n transition: all 0.2s ease;\n}\n\nbody.card-hover .cursor-glow {\n background: radial-gradient(circle, rgba(139,0,139, 0.08) 0%, transparent 70%);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .name {\n font-size: 2.5rem;\n }\n\n .hero {\n padding: 60px 0 40px;\n }\n\n .section {\n padding: 50px 0;\n }\n\n .skills-grid,\n .projects-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .contact-info {\n gap: 20px;\n }\n\n .contact-link {\n flex: 1 1 calc(50% - 5px);\n justify-content: center;\n }\n\n .planet-avatar {\n width: 100px;\n height: 100px;\n }\n\n .cursor-glow {\n display: none; /* Disable on mobile for performance */\n }\n}\n","size":9436,"isBinary":false}}; const TREE = [{"type":"file","name":"index.html","path":"index.html","size":5298,"language":"HTML"},{"type":"file","name":"script.js","path":"script.js","size":2334,"language":"JavaScript"},{"type":"file","name":"styles.css","path":"styles.css","size":9436,"language":"Other"}]; let currentFile = null; function renderTree(nodes, container, level = 0) { nodes.forEach(node => { const div = document.createElement('div'); div.className = 'tree-item'; div.style.paddingLeft = (level * 15) + 'px'; if (node.type === 'directory') { div.className += ' folder'; div.textContent = '📁 ' + node.name; container.appendChild(div); if (node.children) renderTree(node.children, container, level + 1); } else { div.textContent = '📄 ' + node.name; div.onclick = () => selectFile(node.path, div); container.appendChild(div); } }); } function selectFile(path, element) { document.querySelectorAll('.tree-item').forEach(el => el.classList.remove('active')); element.classList.add('active'); const file = FILES[path]; if (!file) { document.getElementById('code').textContent = 'File not found'; document.getElementById('fileName').textContent = 'Error'; return; } currentFile = file; document.getElementById('fileName').textContent = file.name; if (file.isBinary) { document.getElementById('code').textContent = '⚠️ Binary file cannot be displayed. Use Download button to save this file.'; } else if (!file.content) { document.getElementById('code').textContent = '⚠️ File is too large to display inline. Use Download button to save this file.'; } else { document.getElementById('code').textContent = file.content; } } function copyCode() { if (!currentFile) return; navigator.clipboard.writeText(currentFile.content); alert('Copied!'); } function downloadFile() { if (!currentFile) return; const content = currentFile.content || ''; const blob = new Blob([content], { type: currentFile.isBinary ? 'application/octet-stream' : 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = currentFile.name; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } renderTree(TREE, document.getElementById('tree'));