index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shader Shop</title>
    <link rel="canonical" href="https://javakhanstudio.github.io/Shader_Demo_Conf/">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@graph": [
            {
                "@type": "WebSite",
                "@id": "https://javakhanstudio.github.io/Shader_Demo_Conf/#website",
                "url": "https://javakhanstudio.github.io/Shader_Demo_Conf/",
                "name": "Shader Shop",
                "description": "Live demos of the talk « Shaders : pour des effets hallucinants, même sur le web »: every shader from the slides runs in the browser, with its GLSL code next to it.",
                "inLanguage": "en",
                "author": { "@id": "https://simonbedardprog.com/#person" },
                "about": { "@id": "https://javakhanstudio.github.io/Shader_Demo_Conf/#talk" },
                "isPartOf": { "@type": "WebSite", "url": "https://simonbedardprog.com" },
                "subjectOf": { "@type": "WebPage", "url": "https://simonbedardprog.com/perso/projets/shader-demo" }
            },
            {
                "@type": "PresentationDigitalDocument",
                "@id": "https://javakhanstudio.github.io/Shader_Demo_Conf/#talk",
                "name": "Shaders : pour des effets hallucinants, même sur le web",
                "description": "Talk given at BDX I/O 2024 and Devoxx.",
                "inLanguage": "fr",
                "author": { "@id": "https://simonbedardprog.com/#person" },
                "url": "https://javakhanstudio.github.io/Shader_Demo_Conf/ThreeJS_Shader.pdf",
                "encodingFormat": "application/pdf",
                "sameAs": "https://docs.google.com/presentation/d/15no5I2cuXQd_9M60ibThVRHyi7d7-ZWDqfJ1n7zvBf4/edit?usp=sharing"
            },
            {
                "@type": "Person",
                "@id": "https://simonbedardprog.com/#person",
                "name": "Simon Bédard",
                "url": "https://simonbedardprog.com",
                "sameAs": "https://www.linkedin.com/in/simonbedardprog/"
            }
        ]
    }
    </script>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/fullPresentation.css">
    <link rel="stylesheet" href="css/intro.css">
    <script src="https://cdn.jsdelivr.net/npm/three@0.153.0/build/three.min.js"></script>
    <link rel="icon" href="images/LogoSBP.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <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=Kanit:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap"
        rel="stylesheet">
</head>

<body>
    <script src="js/load-sections.js"></script>
    <div id="header-placeholder"></div>
    <section class="intro">
        <p class="intro-kicker">Live demos of the talk</p>
        <h2 class="intro-title">Shaders&nbsp;: pour des effets hallucinants, même sur le web</h2>
        <p class="intro-lede">
            By Simon Bédard, given at BDX I/O 2024 and Devoxx. Every shader from the slides runs here,
            live in your browser, with its GLSL code next to it.
            <a href="ThreeJS_Shader.pdf" target="_blank">Slides (PDF, FR)</a>
        </p>
        <ul class="intro-sections">
            <li><a href="#main-placeholder"><strong>Explanations</strong><span>The lesson, step by step: colour, time, textures, perspective. Starts right below.</span></a></li>
            <li><a href="galleryExtern.html"><strong>Extern</strong><span>Shaders by other authors, credited.</span></a></li>
            <li><a href="galleryAI.html"><strong>AI</strong><span>Shaders written by AI models: GPT, Claude, Gemini, Mistral, Grok, DeepSeek.</span></a></li>
            <li><a href="galleryStyle.html"><strong>Style</strong><span>One shader per visual style: cyberpunk, retro pixel, organic…</span></a></li>
            <li><a href="galleryToApply.html"><strong>Applied</strong><span>Shaders applied to images.</span></a></li>
            <li><a href="explicationSounds.html"><strong>Sounds</strong><span>A shader driven by your microphone.</span></a></li>
        </ul>
    </section>
    <div class="centered">
        <main id="main-placeholder">
        </main>
    </div>

    <div id="footer-placeholder"></div>
    <script type="module">
        import { loadExplanations } from "./js/shaderExplanation.js";
        loadExplanations("basics"); 
    </script>
</body>

</html>