Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCraft Showcase</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Animation classes */ | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| tab-size: 2; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-indigo-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="code" class="w-6 h-6"></i> | |
| <span class="font-bold text-xl">CodeCraft</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-indigo-200 transition">Home</a> | |
| <a href="#" class="hover:text-indigo-200 transition">Algorithms</a> | |
| <a href="#" class="hover:text-indigo-200 transition">Data Structures</a> | |
| <a href="#" class="hover:text-indigo-200 transition">Optimizations</a> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 fade-in">Coding Excellence Showcase</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto fade-in"> | |
| Demonstrating clean, efficient, and scalable code with modern best practices | |
| </p> | |
| <div class="flex justify-center space-x-4 fade-in"> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition shadow-lg"> | |
| View Examples | |
| </button> | |
| <button class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Code Showcase Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Algorithm Showcase</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Binary Search Example --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i data-feather="search" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Binary Search</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Efficient O(log n) search algorithm that works on sorted arrays by repeatedly dividing the search interval in half. | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto"> | |
| <pre class="text-green-400 code-block"><code>function binarySearch(arr, target) { | |
| let left = 0; | |
| let right = arr.length - 1; | |
| while (left <= right) { | |
| const mid = Math.floor((left + right) / 2); | |
| if (arr[mid] === target) return mid; | |
| if (arr[mid] < target) left = mid + 1; | |
| else right = mid - 1; | |
| } | |
| return -1; // Not found | |
| }</code></pre> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Time Complexity: O(log n)</span> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| View Details <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Merge Sort Example --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i data-feather="layers" class="text-purple-600 w-5 h-5"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Merge Sort</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| Divide-and-conquer algorithm with O(n log n) time complexity that recursively splits, sorts, and merges subarrays. | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto"> | |
| <pre class="text-green-400 code-block"><code>function mergeSort(arr) { | |
| if (arr.length <= 1) return arr; | |
| const mid = Math.floor(arr.length / 2); | |
| const left = mergeSort(arr.slice(0, mid)); | |
| const right = mergeSort(arr.slice(mid)); | |
| return merge(left, right); | |
| } | |
| function merge(left, right) { | |
| let result = []; | |
| let i = 0, j = 0; | |
| while (i < left.length && j < right.length) { | |
| if (left[i] < right[j]) result.push(left[i++]); | |
| else result.push(right[j++]); | |
| } | |
| return result.concat(left.slice(i)).concat(right.slice(j)); | |
| }</code></pre> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Time Complexity: O(n log n)</span> | |
| <button class="text-purple-600 hover:text-purple-800 text-sm font-medium"> | |
| View Details <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Best Practices Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Coding Best Practices</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="file-text" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Readable Code</h3> | |
| <p class="text-gray-600"> | |
| Use meaningful variable names, consistent indentation, and comments where necessary. Break complex operations into smaller functions. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="zap" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Efficiency</h3> | |
| <p class="text-gray-600"> | |
| Choose appropriate data structures and algorithms. Consider time and space complexity. Avoid unnecessary computations. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="bg-red-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="repeat" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Scalability</h3> | |
| <p class="text-gray-600"> | |
| Design systems that can grow. Use modular architecture, avoid tight coupling, and plan for future requirements. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="code" class="w-6 h-6 text-indigo-400"></i> | |
| <span class="font-bold text-xl">CodeCraft</span> | |
| </div> | |
| <p class="text-gray-400 mt-2">Crafting excellence in every line of code</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm"> | |
| © 2023 CodeCraft Masterpiece. All rights reserved. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Simple animation for code blocks on scroll | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const codeBlocks = document.querySelectorAll('.code-block'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('fade-in'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| codeBlocks.forEach(block => { | |
| observer.observe(block); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |