Spaces:
Running
Running
add a chart next to this block that relevant to this page's content - Initial Deployment
073b760
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interview Insights: Neo-Brutalist Presentation</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;700&family=Syne:wght@400;700;800&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #000; | |
| color: #fff; | |
| overflow-x: hidden; | |
| } | |
| .slide { | |
| min-height: 100vh; | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| border-bottom: 4px solid #fff; | |
| } | |
| .neo-box { | |
| border: 4px solid #fff; | |
| background-color: #000; | |
| box-shadow: 8px 8px 0 #fff; | |
| } | |
| .title-font { | |
| font-family: 'Syne', sans-serif; | |
| } | |
| .bounce { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .swirl-in { | |
| animation: swirlIn 1s ease-out forwards; | |
| } | |
| @keyframes swirlIn { | |
| 0% { opacity: 0; transform: rotate(-540deg) scale(0); } | |
| 100% { opacity: 1; transform: rotate(0) scale(1); } | |
| } | |
| .slide-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .slide-btn:hover { | |
| transform: scale(1.05) rotate(2deg); | |
| box-shadow: 12px 12px 0 #fff; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 bg-black py-4 px-6 border-b-4 border-white flex justify-between items-center"> | |
| <div class="text-2xl font-bold title-font">INTERVIEW INSIGHTS</div> | |
| <div class="flex space-x-2"> | |
| <button onclick="showSlide(1)" class="neo-box px-3 py-1 slide-btn">1</button> | |
| <button onclick="showSlide(2)" class="neo-box px-3 py-1 slide-btn">2</button> | |
| <button onclick="showSlide(3)" class="neo-box px-3 py-1 slide-btn">3</button> | |
| <button onclick="showSlide(4)" class="neo-box px-3 py-1 slide-btn">4</button> | |
| <button onclick="showSlide(5)" class="neo-box px-3 py-1 slide-btn">5</button> | |
| <button onclick="showSlide(6)" class="neo-box px-3 py-1 slide-btn">6</button> | |
| </div> | |
| </nav> | |
| <!-- Slide 1: Title Slide --> | |
| <section id="slide1" class="slide relative"> | |
| <div class="absolute top-10 right-10 bounce"> | |
| <i data-feather="star" class="text-yellow-300" width="40" height="40"></i> | |
| </div> | |
| <div class="mx-auto text-center max-w-4xl"> | |
| <h1 class="text-6xl md:text-8xl font-bold title-font mb-6 swirl-in" data-aos="fade-up">KEY INSIGHTS</h1> | |
| <div class="neo-box p-8 mt-10" data-aos="fade-up" data-aos-delay="300"> | |
| <p class="text-xl md:text-2xl">From the Interview Article</p> | |
| <p class="text-sm mt-4 opacity-75">Highlighting key interview insights on technology, creativity, and innovation strategies</p> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-10"> | |
| <button onclick="showSlide(2)" class="neo-box px-6 py-3 slide-btn flex items-center"> | |
| Next <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Slide 2: Main Theme --> | |
| <section id="slide2" class="slide hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center max-w-6xl mx-auto"> | |
| <div class="neo-box p-8" data-aos="fade-right"> | |
| <h2 class="text-3xl md:text-4xl font-bold title-font mb-4">CORE THEME</h2> | |
| <p class="text-lg">The interview explores the intersection of technology and creativity in modern business environments, emphasizing innovative approaches to problem-solving.</p> | |
| </div> | |
| <div class="relative" data-aos="fade-left" data-aos-delay="300"> | |
| <div class="neo-box p-6 absolute -top-4 -right-4 swirl-in"> | |
| <i data-feather="zap" width="50" height="50"></i> | |
| </div> | |
| <img src="http://static.photos/technology/640x360/1" alt="Technology Concept" class="w-full h-64 object-cover neo-box"> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 right-10"> | |
| <button onclick="showSlide(3)" class="neo-box px-6 py-3 slide-btn flex items-center"> | |
| Next <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Slide 3: Key Point 1 --> | |
| <section id="slide3" class="slide hidden"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start mb-10"> | |
| <div class="neo-box p-8" data-aos="zoom-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold title-font mb-6">INNOVATION MINDSET</h2> | |
| <ul class="space-y-4 text-lg"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-3 mt-1"></i> | |
| <span>Embrace experimentation and calculated risk-taking</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-3 mt-1"></i> | |
| <span>Foster cross-disciplinary collaboration</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-3 mt-1"></i> | |
| <span>Challenge conventional industry practices</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="neo-box p-6" data-aos="zoom-in" data-aos-delay="300"> | |
| <h3 class="text-xl font-bold title-font mb-4 text-center">Innovation Impact Factors</h3> | |
| <div class="flex items-end justify-between h-48 mt-6 px-4"> | |
| <div class="flex flex-col items-center"> | |
| <div class="bg-blue-400 w-12 h-32 neo-box mb-2" style="height: 80%;"></div> | |
| <span class="text-sm">Experimentation</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="bg-green-400 w-12 h-40 neo-box mb-2" style="height: 95%;"></div> | |
| <span class="text-sm">Collaboration</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="bg-yellow-400 w-12 h-36 neo-box mb-2" style="height: 85%;"></div> | |
| <span class="text-sm">Risk-taking</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="bg-red-400 w-12 h-28 neo-box mb-2" style="height: 70%;"></div> | |
| <span class="text-sm">Conventional</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center bounce"> | |
| <i data-feather="lightbulb" width="40" height="40" class="text-yellow-300"></i> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 right-10"> | |
| <button onclick="showSlide(4)" class="neo-box px-6 py-3 slide-btn flex items-center"> | |
| Next <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Slide 4: Key Point 2 --> | |
| <section id="slide4" class="slide hidden"> | |
| <div class="max-w-5xl mx-auto"> | |
| <h2 class="text-4xl md:text-5xl font-bold title-font text-center mb-12" data-aos="fade-down">ADAPTATION STRATEGIES</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="neo-box p-6 text-center" data-aos="flip-left" data-aos-delay="100"> | |
| <i data-feather="refresh-cw" class="mx-auto text-blue-400 mb-4" width="40" height="40"></i> | |
| <h3 class="font-bold text-xl mb-2">Agile Response</h3> | |
| <p>Quick adaptation to market changes and feedback</p> | |
| </div> | |
| <div class="neo-box p-6 text-center" data-aos="flip-left" data-aos-delay="300"> | |
| <i data-feather="users" class="mx-auto text-pink-400 mb-4" width="40" height="40"></i> | |
| <h3 class="font-bold text-xl mb-2">Team Dynamics</h3> | |
| <p>Leveraging diverse perspectives for innovation</p> | |
| </div> | |
| <div class="neo-box p-6 text-center" data-aos="flip-left" data-aos-delay="500"> | |
| <i data-feather="trending-up" class="mx-auto text-green-400 mb-4" width="40" height="40"></i> | |
| <h3 class="font-bold text-xl mb-2">Growth Focus</h3> | |
| <p>Continuous learning and skill development</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 right-10"> | |
| <button onclick="showSlide(5)" class="neo-box px-6 py-3 slide-btn flex items-center"> | |
| Next <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Slide 5: Key Point 3 --> | |
| <section id="slide5" class="slide hidden"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="neo-box p-8" data-aos="fade-up"> | |
| <h2 class="text-3xl md:text-4xl font-bold title-font mb-6">FUTURE OUTLOOK</h2> | |
| <p class="text-lg mb-6">The interview highlights several emerging trends that will shape the industry landscape in coming years:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="flex items-start"> | |
| <i data-feather="arrow-right" class="text-red-400 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">AI Integration</h4> | |
| <p class="text-sm">Increasing use of artificial intelligence in creative processes</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="arrow-right" class="text-red-400 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Remote Collaboration</h4> | |
| <p class="text-sm">New tools and methods for distributed teams</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="arrow-right" class="text-red-400 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Sustainable Innovation</h4> | |
| <p class="text-sm">Eco-conscious approaches to technology development</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="arrow-right" class="text-red-400 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Ethical Considerations</h4> | |
| <p class="text-sm">Balancing progress with responsible practices</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 right-10"> | |
| <button onclick="showSlide(6)" class="neo-box px-6 py-3 slide-btn flex items-center"> | |
| Next <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Slide 6: Conclusion --> | |
| <section id="slide6" class="slide hidden"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold title-font mb-8" data-aos="fade-down">KEY TAKEAWAYS</h2> | |
| <div class="neo-box p-8 mb-10" data-aos="zoom-in"> | |
| <p class="text-xl mb-6">The interview emphasizes that success in today's environment requires:</p> | |
| <ul class="space-y-3 text-lg"> | |
| <li class="flex justify-center items-center"> | |
| <i data-feather="heart" class="text-red-400 mr-3"></i> | |
| Passion for innovation | |
| </li> | |
| <li class="flex justify-center items-center"> | |
| <i data-feather="target" class="text-blue-400 mr-3"></i> | |
| Clear strategic vision | |
| </li> | |
| <li class="flex justify-center items-center"> | |
| <i data-feather="shield" class="text-green-400 mr-3"></i> | |
| Resilience in facing challenges | |
| </li> | |
| <li class="flex justify-center items-center"> | |
| <i data-feather="award" class="text-yellow-400 mr-3"></i> | |
| Commitment to excellence | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bounce"> | |
| <i data-feather="feather" width="40" height="40"></i> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-10"> | |
| <button onclick="showSlide(1)" class="neo-box px-6 py-3 slide-btn flex items-center"> | |
| <i data-feather="rotate-ccw" class="mr-2"></i> Restart | |
| </button> | |
| </div> | |
| </section> | |
| <script> | |
| // Initialize animations | |
| AOS.init({ | |
| duration: 800, | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Slide management | |
| function showSlide(slideNumber) { | |
| // Hide all slides | |
| document.querySelectorAll('.slide').forEach(slide => { | |
| slide.classList.add('hidden'); | |
| }); | |
| // Show selected slide | |
| document.getElementById('slide' + slideNumber).classList.remove('hidden'); | |
| // Add entrance animation to elements | |
| setTimeout(() => { | |
| AOS.refresh(); | |
| }, 50); | |
| } | |
| // Initial slide show | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showSlide(1); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |