Spaces:

czak89
/

web-developer

Running

App Files Files Community

czak89 commited on Mar 30

Commit

4cf0004

verified ·

1 Parent(s): 4859842

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +494 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Web Developer
-emoji: 🐠
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: web-developer
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,494 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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;">&times;</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>