Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Capabilities Showcase</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6c5ce7; | |
| --secondary: #a29bfe; | |
| --dark: #2d3436; | |
| --light: #f5f6fa; | |
| --accent: #fd79a8; | |
| --success: #00b894; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--light); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(45deg, var(--primary), var(--accent)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| h1::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary), var(--accent)); | |
| border-radius: 2px; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| color: var(--dark); | |
| opacity: 0.8; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .capabilities-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .capability-card { | |
| background: white; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .capability-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .card-header { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .card-icon { | |
| font-size: 2rem; | |
| margin-right: 1rem; | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .card-title { | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| .card-description { | |
| margin-bottom: 1.5rem; | |
| color: #555; | |
| } | |
| .examples-list { | |
| list-style: none; | |
| } | |
| .examples-list li { | |
| padding: 0.5rem 0; | |
| position: relative; | |
| padding-left: 1.5rem; | |
| } | |
| .examples-list li::before { | |
| content: '\f00c'; | |
| font-family: 'Font Awesome 6 Free'; | |
| font-weight: 900; | |
| position: absolute; | |
| left: 0; | |
| top: 0.5rem; | |
| color: var(--success); | |
| } | |
| .interactive-demo { | |
| margin-top: 4rem; | |
| text-align: center; | |
| } | |
| .demo-container { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| margin-top: 1.5rem; | |
| } | |
| .code-editor { | |
| background: #2d3436; | |
| color: white; | |
| border-radius: 10px; | |
| padding: 1rem; | |
| font-family: monospace; | |
| text-align: left; | |
| margin: 1rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .code-toolbar { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| display: flex; | |
| } | |
| .code-btn { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| margin-left: 6px; | |
| } | |
| .red { background: #ff5f56; } | |
| .yellow { background: #ffbd2e; } | |
| .green { background: #27c93f; } | |
| .preview-container { | |
| margin: 2rem 0; | |
| } | |
| .toggle-buttons { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .toggle-btn { | |
| padding: 0.5rem 1.5rem; | |
| background: white; | |
| border: none; | |
| border-radius: 30px; | |
| margin: 0 0.5rem; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-btn.active { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3); | |
| } | |
| .toggle-btn:hover:not(.active) { | |
| background: #f1f1f1; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 4rem; | |
| padding: 2rem 0; | |
| border-top: 1px solid #eee; | |
| color: #777; | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .tagline { | |
| font-size: 1rem; | |
| } | |
| .capabilities-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>What I Can Do</h1> | |
| <p class="tagline">Here's a showcase of my capabilities using just HTML, CSS, and JavaScript - with some modern UI flair!</p> | |
| </header> | |
| <div class="capabilities-grid"> | |
| <div class="capability-card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <h3 class="card-title">Creative Design</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p class="card-description">Crafting visually appealing, responsive interfaces with modern design principles and animations.</p> | |
| <ul class="examples-list"> | |
| <li>Interactive UI Components</li> | |
| <li>Custom Animations</li> | |
| <li>Responsive Layouts</li> | |
| <li>Theming Systems</li> | |
| <li>Visual Effects</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="capability-card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3 class="card-title">Frontend Development</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p class="card-description">Building functional, interactive web experiences with clean, maintainable code.</p> | |
| <ul class="examples-list"> | |
| <li>DOM Manipulation</li> | |
| <li>Event Handling</li> | |
| <li>Form Validation</li> | |
| <li>API Integrations</li> | |
| <li>Dynamic Content</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="capability-card"> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="card-title">Mobile-First Approach</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p class="card-description">Prioritizing mobile experience with responsive designs that adapt to any screen size.</p> | |
| <ul class="examples-list"> | |
| <li>Flexible Grids</li> | |
| <li>Media Queries</li> | |
| <li>Touch Interactions</li> | |
| <li>Viewport Optimization</li> | |
| <li>Performance Tuning</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="interactive-demo"> | |
| <h2>Try It Out</h2> | |
| <p>See a live example of interactive capabilities:</p> | |
| <div class="demo-container"> | |
| <div class="toggle-buttons"> | |
| <button class="toggle-btn active" data-content="css">CSS Magic</button> | |
| <button class="toggle-btn" data-content="js">JavaScript Power</button> | |
| <button class="toggle-btn" data-content="ui">UI Components</button> | |
| </div> | |
| <div class="preview-container"> | |
| <div class="code-editor"> | |
| <div class="code-toolbar"> | |
| <span class="code-btn red"></span> | |
| <span class="code-btn yellow"></span> | |
| <span class="code-btn green"></span> | |
| </div> | |
| <div id="code-display"> | |
| <pre><code id="code-content">/* Hover over the cards to see animations */ | |
| .capability-card { | |
| transition: all 0.3s ease; | |
| } | |
| .capability-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); | |
| }</code></pre> | |
| </div> | |
| </div> | |
| <div id="demo-visual"> | |
| <div class="visual-container" style="text-align: center; padding: 2rem;"> | |
| <div style="display: inline-block; width: 100px; height: 100px; background: linear-gradient(135deg, #6c5ce7, #a29bfe); border-radius: 15px; transition: all 0.5s ease;"></div> | |
| <p style="margin-top: 1rem;">Hover over the colored box to see CSS transitions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Built with <i class="fas fa-heart" style="color: var(--accent);"></i> using just HTML, CSS, and JavaScript</p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Toggle buttons functionality | |
| const toggleBtns = document.querySelectorAll('.toggle-btn'); | |
| const codeContent = document.getElementById('code-content'); | |
| const demoVisual = document.getElementById('demo-visual'); | |
| // Demo content for each button | |
| const demoContents = { | |
| css: { | |
| code: `/* Hover over the cards to see animations */ | |
| .capability-card { | |
| transition: all 0.3s ease; | |
| } | |
| .capability-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); | |
| }`, | |
| visual: `<div class="visual-container" style="text-align: center; padding: 2rem;"> | |
| <div style="display: inline-block; width: 100px; height: 100px; background: linear-gradient(135deg, #6c5ce7, #a29bfe); border-radius: 15px; transition: all 0.5s ease;"></div> | |
| <p style="margin-top: 1rem;">Hover over the colored box to see CSS transitions</p> | |
| </div>` | |
| }, | |
| js: { | |
| code: `// Color changing animation | |
| const box = document.querySelector('.color-box'); | |
| let hue = 0; | |
| function changeColor() { | |
| hue = (hue + 1) % 360; | |
| box.style.backgroundColor = \`hsl(\${hue}, 80%, 60%)\`; | |
| requestAnimationFrame(changeColor); | |
| } | |
| changeColor();`, | |
| visual: `<div class="visual-container" style="text-align: center; padding: 2rem;"> | |
| <div class="color-box" style="display: inline-block; width: 100px; height: 100px; border-radius: 15px;"></div> | |
| <p style="margin-top: 1rem;">Watch the JavaScript-driven color animation</p> | |
| </div>` | |
| }, | |
| ui: { | |
| code: `// Modal component | |
| function openModal() { | |
| document.getElementById('modal').classList.add('active'); | |
| } | |
| function closeModal() { | |
| document.getElementById('modal').classList.remove('active'); | |
| }`, | |
| visual: `<div class="visual-container" style="text-align: center; padding: 2rem;"> | |
| <button onclick="showDemoModal()" style="padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: white; border: none; border-radius: 30px; cursor: pointer; font-weight: 600;">Open Modal</button> | |
| <p style="margin-top: 1rem;">Click the button to see a modal component</p> | |
| </div>` | |
| } | |
| }; | |
| // Add click events to toggle buttons | |
| toggleBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| toggleBtns.forEach(b => b.classList.remove('active')); | |
| // Add active class to clicked button | |
| this.classList.add('active'); | |
| // Get the content type | |
| const contentType = this.getAttribute('data-content'); | |
| // Update the displayed content | |
| codeContent.textContent = demoContents[contentType].code; | |
| demoVisual.innerHTML = demoContents[contentType].visual; | |
| // If JS content is selected, run the animation | |
| if (contentType === 'js') { | |
| startColorAnimation(); | |
| } | |
| }); | |
| }); | |
| // Color animation function for JS demo | |
| function startColorAnimation() { | |
| const box = demoVisual.querySelector('.color-box'); | |
| if (box) { | |
| let hue = 0; | |
| function changeColor() { | |
| hue = (hue + 1) % 360; | |
| box.style.backgroundColor = `hsl(${hue}, 80%, 60%)`; | |
| requestAnimationFrame(changeColor); | |
| } | |
| changeColor(); | |
| } | |
| } | |
| // Modal demo function for UI demo | |
| window.showDemoModal = function() { | |
| const modalHTML = ` | |
| <div id="demo-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;"> | |
| <div style="background: white; padding: 2rem; border-radius: 15px; max-width: 400px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); position: relative;"> | |
| <button onclick="closeDemoModal()" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.5rem; cursor: pointer;">×</button> | |
| <h3 style="margin-bottom: 1rem;">Modal Title</h3> | |
| <p>This is a custom modal dialog created with pure JavaScript!</p> | |
| </div> | |
| </div> | |
| `; | |
| const modalContainer = document.createElement('div'); | |
| modalContainer.innerHTML = modalHTML; | |
| document.body.appendChild(modalContainer); | |
| window.closeDemoModal = function() { | |
| document.body.removeChild(modalContainer); | |
| } | |
| } | |
| // Add hover effect to the CSS demo box | |
| demoVisual.addEventListener('mouseover', function(e) { | |
| if (e.target.matches('.visual-container div')) { | |
| e.target.style.transform = 'scale(1.2) rotate(10deg)'; | |
| } | |
| }); | |
| demoVisual.addEventListener('mouseout', function(e) { | |
| if (e.target.matches('.visual-container div')) { | |
| e.target.style.transform = ''; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |