| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Stay Fresh in AI</title> |
| <meta name="description" content="Practical approaches, templates, and decisions for frontend delivery using AI."> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap" |
| rel="stylesheet"> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
|
|
| <body> |
| <div class="presentation-container"> |
| |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progressFill"></div> |
| </div> |
|
|
| |
| <div class="slide-counter"> |
| <span id="currentSlide">1</span> / <span id="totalSlides">10</span> |
| </div> |
|
|
| |
| <div class="nav-controls"> |
| <button class="nav-btn" id="prevBtn" aria-label="Previous Slide"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polyline points="15 18 9 12 15 6"></polyline> |
| </svg> |
| </button> |
| <button class="nav-btn" id="nextBtn" aria-label="Next Slide"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polyline points="9 18 15 12 9 6"></polyline> |
| </svg> |
| </button> |
| </div> |
|
|
| |
| <div class="slides-wrapper" id="slidesWrapper"> |
|
|
| |
| <section class="slide active" data-slide="1"> |
| <div class="slide-content title-slide"> |
| <span class="tagline-badge">The Daily AI Brief</span> |
| <h1 class="main-title serif-title"> |
| Stay <span class="serif-italic">Updated</span> in AI |
| </h1> |
| <div class="sub-line"></div> |
| <div class="tagline" style="font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2rem;"> |
| Stay Fresh in AI</div> |
|
|
| <div class="logo-row" style="margin-bottom: 3.5rem;"> |
| |
| <div class="logo-wrapper light-bg"><img src="icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI" |
| class="logo-icon" title="OpenAI / ChatGPT"></div> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/Google_Gemini_icon_2025.svg" |
| alt="Gemini" class="logo-icon" title="Google Gemini"></div> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/Anthropic Symbol SVG.svg" alt="Claude" |
| class="logo-icon" title="Claude"></div> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/X Symbol SVG.svg" alt="Grok" |
| class="logo-icon" title="Grok"></div> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/mistral-color.svg" alt="Mistral" |
| class="logo-icon" title="Mistral"></div> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/kimi.svg" alt="Kimi" class="logo-icon" |
| title="Kimi K2"></div> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/meta-color.svg" alt="Meta" |
| class="logo-icon" title="Meta Llama"></div> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/deepseek-color.svg" alt="Deepseek" |
| class="logo-icon" title="DeepSeek"></div> |
| </div> |
|
|
| <div |
| style="display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 40px;"> |
| <span class="footer-date">6th of June 2026</span> |
| <a href="#" class="footer-link">Codewinglet</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="2"> |
| <div class="slide-content"> |
| <span class="tagline-badge">Overview</span> |
| <h2 class="slide-title serif-title">Agenda</h2> |
| <div class="sub-line" style="margin: 1rem 0;"></div> |
| <p class="slide-subtitle" style="margin-bottom: 2rem;">What we will cover today</p> |
| <div class="agenda-list"> |
| <div class="agenda-item" style="--delay: 0.1s"> |
| <span class="agenda-number">01</span> |
| <span class="agenda-text">Context Management (Gemini, Claude, ChatGPT)</span> |
| </div> |
| <div class="agenda-item" style="--delay: 0.2s"> |
| <span class="agenda-number">02</span> |
| <span class="agenda-text">AI Editors & Freebies (Cursor, Claude Code, etc.)</span> |
| </div> |
| <div class="agenda-item" style="--delay: 0.3s"> |
| <span class="agenda-number">03</span> |
| <span class="agenda-text">Benchmarks & Leaderboards (LMArena.ai)</span> |
| </div> |
| <div class="agenda-item" style="--delay: 0.4s"> |
| <span class="agenda-number">04</span> |
| <span class="agenda-text">Daily AI Updates (Evolving AI)</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="3"> |
| <div class="slide-content tagline-slide-content"> |
| <span class="tagline-badge">Context Management</span> |
| <h2 class="tagline-title"> |
| Memory loss, or just a <span class="serif-italic">tiny</span> context window? |
| </h2> |
| <div class="sub-line"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="4"> |
| <div class="slide-content"> |
| <span class="tagline-badge">Context Management</span> |
| <h2 class="slide-title serif-title">Choosing the Right Tool</h2> |
| <div class="sub-line" style="margin: 1rem 0;"></div> |
|
|
| <div class="llm-platforms-grid" |
| style="grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 2rem;"> |
| <div class="llm-card" style="cursor: default;"> |
| <div class="llm-header"> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/Google_Gemini_icon_2025.svg" |
| alt="Gemini" class="llm-icon"></div> |
| <h3 class="serif-title">Google Gemini</h3> |
| </div> |
| <p style="font-size: 0.95rem; line-height: 1.4; color: var(--text-secondary);"> |
| Massive 2M+ context window.<br> |
| Ideal for parsing entire codebases in a single prompt. |
| </p> |
| </div> |
| <div class="llm-card" style="cursor: default;"> |
| <div class="llm-header"> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/Anthropic Symbol SVG.svg" |
| alt="Claude" class="llm-icon"></div> |
| <h3 class="serif-title">Anthropic Claude</h3> |
| </div> |
| <p style="font-size: 0.95rem; line-height: 1.4; color: var(--text-secondary);"> |
| Deep coding reasoning.<br> |
| Best for complex logic and precise refactoring. |
| </p> |
| </div> |
| <div class="llm-card" style="cursor: default;"> |
| <div class="llm-header"> |
| <div class="logo-wrapper light-bg"><img src="icon_assets/OpenAI Symbol SVG.svg" |
| alt="ChatGPT" class="llm-icon"></div> |
| <h3 class="serif-title">OpenAI ChatGPT</h3> |
| </div> |
| <p style="font-size: 0.95rem; line-height: 1.4; color: var(--text-secondary);"> |
| Conversational partner.<br> |
| Excellent for quick drafts, scripts, and general queries. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="5"> |
| <div class="slide-content tagline-slide-content"> |
| <span class="tagline-badge">AI Editors & Freebies</span> |
| <h2 class="tagline-title"> |
| AI agents are coding for <span class="serif-italic">free</span>.<br> |
| Why are you still typing? |
| </h2> |
| <div class="sub-line"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="6"> |
| <div class="slide-content" style="text-align: center;"> |
| <span class="tagline-badge">AI Editors & Freebies</span> |
| <h2 class="slide-title serif-title">Modern AI Coding Environments</h2> |
| <div class="sub-line" style="margin: 1.5rem auto;"></div> |
|
|
| <div class="logo-row" |
| style="display: flex; justify-content: center; gap: 40px; margin-top: 4rem; flex-wrap: wrap;"> |
| <div class="logo-wrapper light-bg" |
| style="padding: 20px; border-radius: 20px; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));"> |
| <img src="icon_assets/Vscode.svg" alt="VS Code" |
| style="width: 90px; height: 90px; object-fit: contain;" title="VS Code"> |
| </div> |
| <div class="logo-wrapper light-bg" |
| style="padding: 20px; border-radius: 20px; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));"> |
| <img src="icon_assets/cursor.svg" alt="Cursor" |
| style="width: 90px; height: 90px; object-fit: contain;" title="Cursor"> |
| </div> |
| <div class="logo-wrapper light-bg" |
| style="padding: 20px; border-radius: 20px; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));"> |
| <img src="icon_assets/Windsurf Icon.png" alt="Windsurf" |
| style="width: 90px; height: 90px; object-fit: contain;" title="Windsurf"> |
| </div> |
| <div class="logo-wrapper light-bg" |
| style="padding: 20px; border-radius: 20px; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));"> |
| <img src="icon_assets/antigravity.png" alt="Antigravity" |
| style="width: 90px; height: 90px; object-fit: contain;" title="Antigravity"> |
| </div> |
| <div class="logo-wrapper light-bg" |
| style="padding: 20px; border-radius: 20px; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));"> |
| <img src="icon_assets/Anthropic Icon.png" alt="Claude Code" |
| style="width: 90px; height: 90px; object-fit: contain;" title="Claude Code"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="7"> |
| <div class="slide-content tagline-slide-content"> |
| <span class="tagline-badge">Benchmarks</span> |
| <h2 class="tagline-title"> |
| Don't trust marketing <span class="serif-italic">hype</span>.<br> |
| Who is actually winning? |
| </h2> |
| <div class="sub-line"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="8"> |
| <div class="slide-content"> |
| <span class="tagline-badge">Leaderboards</span> |
| <h2 class="slide-title serif-title">LMArena.ai: Chatbot Arena</h2> |
| <div class="sub-line" style="margin: 1rem 0;"></div> |
|
|
| <div |
| style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; margin-top: 2rem;"> |
| <div style="text-align: center;"> |
| <img src="icon_assets/lmarena.png" alt="LMArena QR Code" |
| style="max-width: 260px; width: 100%; border-radius: 12px; border: 4px solid var(--border-color); filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));"> |
| <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 10px;">Scan to view |
| Chatbot Arena leaderboard</p> |
| </div> |
| <div> |
| <ul style="list-style-type: none; padding: 0;"> |
| <li |
| style="margin-bottom: 15px; font-size: 1rem; color: var(--text-secondary); line-height: 1.5;"> |
| 🚀 <strong>Crowdsourced Benchmarks:</strong> Side-by-side model comparison with |
| blind voting. |
| </li> |
| <li |
| style="margin-bottom: 15px; font-size: 1rem; color: var(--text-secondary); line-height: 1.5;"> |
| 🏆 <strong>Real-time Leaderboard:</strong> Tracks Elo ratings for all top-performing |
| LLMs. |
| </li> |
| <li |
| style="margin-bottom: 15px; font-size: 1rem; color: var(--text-secondary); line-height: 1.5;"> |
| 🎁 <strong>Developer Freebies:</strong> Free playground to compare and test model |
| capabilities. |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="9"> |
| <div class="slide-content"> |
| <span class="tagline-badge">Stay Updated</span> |
| <h2 class="slide-title serif-title">Evolving AI Updates</h2> |
| <div class="sub-line" style="margin: 1rem 0;"></div> |
|
|
| <div |
| style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-top: 2rem;"> |
| <div> |
| <ul style="list-style-type: none; padding: 0;"> |
| <li |
| style="margin-bottom: 15px; font-size: 1.05rem; color: var(--text-secondary); line-height: 1.5;"> |
| 🔥 <strong>Stay Ahead of the Curve:</strong> Daily news on model updates and tool |
| releases. |
| </li> |
| <li |
| style="margin-bottom: 15px; font-size: 1.05rem; color: var(--text-secondary); line-height: 1.5;"> |
| ⚡ <strong>Fast-Paced Insights:</strong> Bite-sized, curated updates straight to your |
| screen. |
| </li> |
| <li |
| style="margin-bottom: 15px; font-size: 1.05rem; color: var(--text-secondary); line-height: 1.5;"> |
| 🧠 <strong>Always Fresh:</strong> Never get left behind in the rapidly shifting AI |
| ecosystem. |
| </li> |
| </ul> |
| </div> |
| <div style="text-align: center;"> |
| <img src="icon_assets/evolving_ai.png" alt="Evolving AI QR Code" |
| style="max-width: 260px; width: 100%; border-radius: 12px; border: 4px solid var(--border-color); filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));"> |
| <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 10px;">Scan for daily |
| updates</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="slide" data-slide="10"> |
| <div class="slide-content closing-slide"> |
| <span class="tagline-badge">Closing</span> |
| <h2 class="closing-title serif-title" |
| style="font-size: clamp(3rem, 8vw, 5rem); font-weight: 400; margin-bottom: 2rem;"> |
| Thank <span class="serif-italic">You</span>! |
| </h2> |
|
|
| <div class="closing-message" |
| style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 3rem; text-align: left;"> |
| <div class="closing-card"> |
| <span class="closing-icon">🧠</span> |
| <h3 class="serif-title">Think First</h3> |
| <p style="font-size: 0.9rem; color: var(--text-secondary);">Brainstorm the logical flow |
| yourself before prompting the AI.</p> |
| </div> |
| <div class="closing-card"> |
| <span class="closing-icon">🔄</span> |
| <h3 class="serif-title">Stay Critical</h3> |
| <p style="font-size: 0.9rem; color: var(--text-secondary);">Always review, test, and |
| validate the code generated by LLMs.</p> |
| </div> |
| <div class="closing-card"> |
| <span class="closing-icon">📈</span> |
| <h3 class="serif-title">Keep Adapting</h3> |
| <p style="font-size: 0.9rem; color: var(--text-secondary);">The landscape changes fast. Stay |
| fresh by checking leaderboards daily.</p> |
| </div> |
| </div> |
|
|
| <div class="contact-section"> |
| <p class="questions-text" |
| style="font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; color: var(--accent-primary); letter-spacing: 0.05em;"> |
| Questions? Let's discuss!</p> |
| </div> |
| </div> |
| </section> |
|
|
| </div> |
|
|
| |
| <div class="keyboard-hints"> |
| <span>← → or Space to navigate</span> |
| </div> |
| </div> |
|
|
| <script src="main.js"></script> |
| </body> |
|
|
| </html> |
