Quick save

src/App.svelte

@@ -27,6 +27,10 @@
     import NixDarwin from './slides/NixDarwin.svelte'
     import HomeManager from './slides/HomeManager.svelte'
     import DesktopManagement from './slides/DesktopManagement.svelte'
+    import Agenix from './slides/Agenix.svelte'
+    import Devenv from './slides/Devenv.svelte'
+    import Configuration from './slides/Configuration.svelte'
+    import Neovim from './slides/Neovim.svelte'
 
     onMount(async () => {
         await tick()
@@ -46,9 +50,9 @@
         <Title />
         <AboutMe />
         <WhatIsNix />
+        <History />
         <TheProblem />
         <CoreIdea />
-        <History />
         <TitleNixLanguage />
         <NixLanguage />
         <TitleNixpkgs />
@@ -56,10 +60,13 @@
         <Channels />
         <TitleNixOS />
         <NixOSInstall />
-        <Flake />
+        <Configuration />
         <TitleCommunityProjects />
         <HomeManager />
         <DesktopManagement />
         <NixDarwin />
+        <Agenix />
+        <Devenv />
+        <Neovim />
     </div>
 </div>

src/code/Configuration/1.nix

@@ -0,0 +1,43 @@
+{ config, lib, pkgs, ... }:
+
+{
+  imports =
+    [
+      ./hardware-configuration.nix
+    ];
+
+  boot.loader.systemd-boot.enable = true;
+  boot.loader.efi.canTouchEfiVariables = true;
+
+  networking.hostName = "nixos";
+
+  networking.networkmanager.enable = true;
+
+  time.timeZone = "Europe/Amsterdam";
+
+  services.xserver.enable = true;
+
+  services.pipewire = {
+    enable = true;
+    pulse.enable = true;
+  };
+
+  users.users.alice = {
+    isNormalUser = true;
+    extraGroups = [ "wheel" ];
+    packages = with pkgs; [
+      tree
+    ];
+  };
+
+  programs.firefox.enable = true;
+
+  environment.systemPackages = with pkgs; [
+    vim
+    wget
+  ];
+
+  services.openssh.enable = true;
+
+  system.stateVersion = "25.11";
+}

src/code/devenv/1.nix

@@ -0,0 +1,34 @@
+{
+  pkgs,
+  ...
+}:
+{
+  packages = [ pkgs.git ];
+
+  languages = {
+    python = {
+      enable = true;
+      venv = {
+        enable = true;
+        requirements = ''
+          beautifulsoup4==4.14.2
+          certifi==2025.10.5
+          charset-normalizer==3.4.3
+          idna==3.10
+          requests==2.32.5
+          soupsieve==2.8
+          typing_extensions==4.15.0
+          urllib3==2.5.0
+        '';
+      };
+    };
+    javascript = {
+      enable = true;
+      bun = {
+        enable = true;
+        install.enable = true;
+      };
+    };
+    typescript.enable = true;
+  };
+}

src/slides/AboutMe.svelte

@@ -1,17 +1,32 @@
+<script lang="ts">
+    import GithubProfile from '/github-profile.png'
+</script>
+
 <section>
-    <h3>About Me</h3>
-    <ul>
-        <li>Senior Computer Science Major / CIS Minor</li>
-        <li>The Nix guy or maybe the CD Guy</li>
-    </ul>
+    <div id="about-me">
+        <div style="text-align: left;">
+            <strong>About Me</strong>
+            <ul class="description">
+                <li>Senior Computer Science Major / CIS Minor</li>
+                <li>The Nix guy or maybe the CD Guy</li>
+                <li>Has a vendetta against YouTube's backend developers</li>
+            </ul>
+        </div>
+        <img src={GithubProfile} alt="age" />
+    </div>
 </section>
 
 <style>
-    section {
-        text-align: left;
+    #about-me {
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 2fr 1fr;
+        align-items: center;
+        gap: 40px;
     }
 
-    ul {
+    .description {
+        color: #aaaaaa;
         font-size: 20pt;
     }
 </style>

src/slides/Agenix.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import Age from '/age.svg'
+</script>
+
+<section>
+    <div id="agenix">
+        <div style="text-align: left;">
+            <strong>Agenix</strong>
+            <p class="description">
+                Agenix allos you to store encypted secrets directly in your Nix configuration.
+                Safely share and deploy your configurations
+            </p>
+        </div>
+        <img src={Age} alt="age" />
+    </div>
+</section>
+
+<style>
+    #agenix {
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 2fr 1fr;
+        align-items: center;
+        gap: 40px;
+    }
+
+    .description {
+        color: #aaaaaa;
+        font-size: 24pt;
+    }
+</style>

src/slides/Configuration.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import NixLogo from '/nix.svg'
+    import ModularConfig from '/modular-config.png'
+
+    const Code = import.meta.glob('../code/Configuration/*.nix', { as: 'raw', eager: true })
+</script>
+
+<section>
+    <section>
+        <div id="generate-config">
+            <div>
+                <pre><code data-trim class="language-shell">
+nixos-generate-config
+        </code></pre>
+            </div>
+            <div id="initial-files">
+                <div class="file-line">
+                    <span>configuration.nix</span>
+                    <img src={NixLogo} alt="nix-logo" />
+                </div>
+                <div class="file-line">
+                    <span>hardware-configuration.nix</span>
+                    <img src={NixLogo} alt="nix-logo" />
+                </div>
+            </div>
+        </div>
+    </section>
+    <section data-auto-animate>
+        <pre data-id="flake-animation"><code
+                data-trim
+                data-line-numbers="4-7|9-10|12-14|20-23|25-31|33-38"
+                class="language-nix">
+{Object.values(Code)[0]}
+    </code></pre>
+    </section>
+    <section>
+        <div>
+            <img id="modular-config" src={ModularConfig} alt="modular-config" />
+        </div>
+    </section>
+</section>
+
+<style>
+    #generate-config {
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 2fr 3fr;
+    }
+    #initial-files {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: end;
+        gap: 2rem;
+        font-size: 24pt;
+    }
+    .file-line {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        height: 4rem;
+    }
+    #modular-config {
+        height: 40rem;
+    }
+</style>

src/slides/Devenv.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import Devenv from '/devenv.webp'
+
+    const Code = import.meta.glob('../code/devenv/*.nix', { as: 'raw', eager: true })
+</script>
+
+<section>
+    <section>
+        <div id="devenv">
+            <div style="text-align: left;">
+                <strong>devenv</strong>
+                <p class="description">
+                    devenv enables declarative & reproducible developer environments using the nix
+                    language. Declare all the programming languages, packages, scrips, environments
+                    variables, etc. that your project relies on.
+                </p>
+            </div>
+            <img src={Devenv} alt="devenv" />
+        </div>
+    </section>
+    <section>
+        <div id="slides-env">
+            <div style="text-align: left;">
+                <strong>The env for these slides</strong>
+                <ul class="description">
+                    <li>Python virtual environment with exact requiremnts</li>
+                    <li>Typesciprt & Javascript support</li>
+                    <li>Automatic JS runtime setup and dependecy installation with bun</li>
+                </ul>
+            </div>
+            <div style="font-size: 13pt;">
+                <pre><code data-trim data-line-numbers class="language-nix">
+{Object.values(Code)[0]}
+                </code></pre>
+            </div>
+        </div>
+    </section>
+</section>
+
+<style>
+    #devenv,
+    #slides-env {
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 2fr 1fr;
+        align-items: center;
+        gap: 40px;
+    }
+
+    .description {
+        color: #aaaaaa;
+        font-size: 24pt;
+    }
+</style>

src/slides/HomeManager.svelte

@@ -5,7 +5,7 @@
 <section>
     <div id="intro">
         <div style="text-align: left;">
-            <h3>Home Manager</h3>
+            <strong>Home Manager</strong>
             <p class="description">
                 Nix module that extends user configuraiton capabilities. Allows for easy management
                 of per-user packages and dotfiles.
@@ -21,6 +21,7 @@
         grid-template-rows: 1fr;
         grid-template-columns: 2fr 1fr;
         gap: 40px;
+        align-items: center;
     }
     .description {
         color: #aaaaaa;

src/slides/Neovim.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import NVF from '/nvf.svg'
+</script>
+
+<section>
+    <div id="intro">
+        <div style="text-align: left;">
+            <strong>Neovim</strong>
+            <p class="description">
+                Projects like Nixvim, NVF, and nixCats allow you to integrate your neovim
+                configuration into your Nix config. With Nixvim and NVF write your entire neovim
+                config using nix, or use nixCats if you want to stick with lua.
+            </p>
+        </div>
+        <img src={NVF} alt="nvf-log" />
+    </div>
+</section>
+
+<style>
+    #intro {
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 2fr 1fr;
+        gap: 40px;
+        align-items: center;
+    }
+    .description {
+        color: #aaaaaa;
+        font-size: 24pt;
+    }
+</style>

src/slides/NixDarwin.svelte

@@ -7,7 +7,7 @@
     <section>
         <div id="intro">
             <div style="text-align: left;">
-                <h3>Nix Darwin</h3>
+                <strong>Nix Darwin</strong>
                 <p class="description">
                     Nix Darwin allows you to use Nix's declarative system to manage your MacOS.
                     Built around nixpkgs, similar to NixOS.
@@ -27,6 +27,7 @@
         grid-template-rows: 1fr;
         grid-template-columns: 2fr 1fr;
         gap: 40px;
+        align-items: center;
     }
     .description {
         color: #aaaaaa;

src/slides/Title.svelte

@@ -1 +1,21 @@
-<section>Nick's guide to Nix</section>
+<script lang="ts">
+    import NixOSBG from '/nixos-bg.jpeg'
+</script>
+
+<section
+    data-background-image={NixOSBG}
+    data-background-size="cover"
+    data-background-position="left"
+>
+    <div style="text-align: right;">
+        <strong style="font-size: 64pt;">Nix & NixOS</strong>
+        <div class="description">Reproducible, Declarative<br /> & Reliable</div>
+    </div>
+</section>
+
+<style>
+    .description {
+        color: #cccccc;
+        font-size: 24pt;
+    }
+</style>