diff --git a/.gitignore b/.gitignore
index e43b0f9..51fde8e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,7 @@
 .DS_Store
+._*
+docs/_site
+docs/.sass-cache
+docs/.jekyll-cache
+docs/.jekyll-metadata
+docs/vendor
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index c7c2536..0000000
--- a/_config.yml
+++ /dev/null
@@ -1,55 +0,0 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-#
-# If you need help with YAML syntax, here are some quick references for you:
-# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
-# https://learnxinyminutes.com/docs/yaml/
-#
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-
-title: "Gridwise: WebGPU Compute Primitives in JavaScript"
-email: jowens@ece.ucdavis.edu
-description: >- # this means to ignore newlines until "baseurl:"
-  Gridwise defines WebGPU compute primitives using JavaScript.
-baseurl: "/gridwise" # the subpath of your site, e.g. /blog
-source: docs
-exclude:
-  - misc/
-url: "https://gridwise-js.github.io" # the base hostname & protocol for your site, e.g. http://example.com
-twitter_username: jekyllrb
-github_username: jekyll
-
-# Build settings
-theme: minima
-plugins:
-  - jekyll-feed
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
diff --git a/docs/.gitignore b/docs/.gitignore
deleted file mode 100644
index 918de83..0000000
--- a/docs/.gitignore
+++ /dev/null
@@ -1,6 +0,0 @@
-_site
-.sass-cache
-.jekyll-cache
-.jekyll-metadata
-vendor
-Gemfile.lock
diff --git a/docs/404.html b/docs/404.html
deleted file mode 100644
index 3a16ab5..0000000
--- a/docs/404.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-permalink: /404.html
-layout: page
----
-
-<style type="text/css" media="screen">
-  .container {
-    margin: 10px auto;
-    max-width: 600px;
-    text-align: center;
-  }
-  h1 {
-    margin: 30px 0;
-    font-size: 4em;
-    line-height: 1;
-    letter-spacing: -1px;
-  }
-</style>
-
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
-</div>
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
new file mode 100644
index 0000000..5ef9ab6
--- /dev/null
+++ b/docs/Gemfile.lock
@@ -0,0 +1,287 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (8.0.3)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.3.0)
+    benchmark (0.4.1)
+    bigdecimal (3.3.1)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
+    colorator (1.1.0)
+    commonmarker (0.23.12)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.4)
+    csv (3.3.5)
+    dnsruby (1.73.0)
+      base64 (>= 0.2)
+      logger (~> 1.6)
+      simpleidn (~> 0.2.1)
+    drb (2.2.3)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    ethon (0.15.0)
+      ffi (>= 1.15.0)
+    eventmachine (1.2.7)
+    execjs (2.10.0)
+    faraday (2.14.0)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
+      logger
+    faraday-net_http (3.4.1)
+      net-http (>= 0.5.0)
+    ffi (1.17.2-arm64-darwin)
+    forwardable-extended (2.6.0)
+    gemoji (4.1.0)
+    github-pages (232)
+      github-pages-health-check (= 1.18.2)
+      jekyll (= 3.10.0)
+      jekyll-avatar (= 0.8.0)
+      jekyll-coffeescript (= 1.2.2)
+      jekyll-commonmark-ghpages (= 0.5.1)
+      jekyll-default-layout (= 0.1.5)
+      jekyll-feed (= 0.17.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.16.1)
+      jekyll-include-cache (= 0.2.1)
+      jekyll-mentions (= 1.6.0)
+      jekyll-optional-front-matter (= 0.3.2)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.3.0)
+      jekyll-redirect-from (= 0.16.0)
+      jekyll-relative-links (= 0.6.1)
+      jekyll-remote-theme (= 0.4.3)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.8.0)
+      jekyll-sitemap (= 1.4.0)
+      jekyll-swiss (= 1.0.0)
+      jekyll-theme-architect (= 0.2.0)
+      jekyll-theme-cayman (= 0.2.0)
+      jekyll-theme-dinky (= 0.2.0)
+      jekyll-theme-hacker (= 0.2.0)
+      jekyll-theme-leap-day (= 0.2.0)
+      jekyll-theme-merlot (= 0.2.0)
+      jekyll-theme-midnight (= 0.2.0)
+      jekyll-theme-minimal (= 0.2.0)
+      jekyll-theme-modernist (= 0.2.0)
+      jekyll-theme-primer (= 0.6.0)
+      jekyll-theme-slate (= 0.2.0)
+      jekyll-theme-tactile (= 0.2.0)
+      jekyll-theme-time-machine (= 0.2.0)
+      jekyll-titles-from-headings (= 0.5.3)
+      jemoji (= 0.13.0)
+      kramdown (= 2.4.0)
+      kramdown-parser-gfm (= 1.1.0)
+      liquid (= 4.0.4)
+      mercenary (~> 0.3)
+      minima (= 2.5.1)
+      nokogiri (>= 1.16.2, < 2.0)
+      rouge (= 3.30.0)
+      terminal-table (~> 1.4)
+      webrick (~> 1.8)
+    github-pages-health-check (1.18.2)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (>= 4, < 8)
+      public_suffix (>= 3.0, < 6.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.14.3)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.8.0)
+    i18n (1.14.7)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.10.0)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      csv (~> 3.0)
+      em-websocket (~> 0.5)
+      i18n (>= 0.7, < 2)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (>= 1.17, < 3)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+      webrick (>= 1.0)
+    jekyll-avatar (0.8.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-coffeescript (1.2.2)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.12)
+    jekyll-commonmark (1.4.0)
+      commonmarker (~> 0.22)
+    jekyll-commonmark-ghpages (0.5.1)
+      commonmarker (>= 0.23.7, < 1.1.0)
+      jekyll (>= 3.9, < 4.0)
+      jekyll-commonmark (~> 1.4.0)
+      rouge (>= 2.0, < 5.0)
+    jekyll-default-layout (0.1.5)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-feed (0.17.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.16.1)
+      jekyll (>= 3.4, < 5.0)
+      octokit (>= 4, < 7, != 4.4.0)
+    jekyll-include-cache (0.2.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-mentions (1.6.0)
+      html-pipeline (~> 2.3)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-optional-front-matter (0.3.2)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.3.0)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-relative-links (0.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-remote-theme (0.4.3)
+      addressable (~> 2.0)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
+      rubyzip (>= 1.3.0, < 3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-swiss (1.0.0)
+    jekyll-theme-architect (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.6.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.2.0)
+      jekyll (> 3.5, < 5.0)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.3)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jemoji (0.13.0)
+      gemoji (>= 3, < 5)
+      html-pipeline (~> 2.2)
+      jekyll (>= 3.0, < 5.0)
+    json (2.15.1)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.7.0)
+    mercenary (0.3.6)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.26.0)
+    net-http (0.6.0)
+      uri
+    nokogiri (1.18.10-arm64-darwin)
+      racc (~> 1.4)
+    octokit (4.25.1)
+      faraday (>= 1, < 3)
+      sawyer (~> 0.9)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.1.1)
+    racc (1.8.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.4.4)
+    rouge (3.30.0)
+    rubyzip (2.4.1)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.9.2)
+      addressable (>= 2.3.5)
+      faraday (>= 0.17.3, < 3)
+    securerandom (0.4.1)
+    simpleidn (0.2.3)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    typhoeus (1.5.0)
+      ethon (>= 0.9.0, < 0.16.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (1.8.0)
+    uri (1.0.4)
+    webrick (1.9.1)
+
+PLATFORMS
+  arm64-darwin
+
+DEPENDENCIES
+  github-pages (~> 232)
+  http_parser.rb (~> 0.6.0)
+  jekyll-feed (~> 0.12)
+  minima (~> 2.5)
+  tzinfo (>= 1, < 3)
+  tzinfo-data
+  wdm (~> 0.1)
+
+BUNDLED WITH
+   2.7.2
diff --git a/docs/_config.yml b/docs/_config.yml
new file mode 100644
index 0000000..baa2bcf
--- /dev/null
+++ b/docs/_config.yml
@@ -0,0 +1,21 @@
+title: Gridwise
+email: jowens@ece.ucdavis.edu
+description: WebGPU compute primitives in JavaScript
+baseurl: "/gridwise"
+url: "https://gridwise-webgpu.github.io"
+github_username: gridwise-webgpu
+
+markdown: kramdown
+theme: minima
+permalink: pretty
+plugins:
+  - jekyll-feed
+
+# Only show About in header navigation
+header_pages:
+  - about.markdown
+
+exclude:
+  - misc/
+  - Gemfile
+  - Gemfile.lock
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
new file mode 100644
index 0000000..d90885f
--- /dev/null
+++ b/docs/_includes/footer.html
@@ -0,0 +1,24 @@
+<footer class="site-footer h-card">
+    <data class="u-url" href="{{ " /" | relative_url }}"></data>
+
+    <div class="wrapper">
+        <h2 class="footer-heading">{{ site.title | escape }}</h2>
+
+        <div class="footer-col-wrapper">
+            <div class="footer-col footer-col-1">
+                <ul class="contact-list">
+                    <li class="p-name">{{ site.title | escape }}</li>
+                    {%- if site.email -%}
+                    <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+                    {%- endif -%}
+                </ul>
+            </div>
+
+            <div class="footer-col footer-col-3">
+                <p>{{- site.description | escape -}}</p>
+            </div>
+        </div>
+
+    </div>
+
+</footer>
\ No newline at end of file
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
new file mode 100644
index 0000000..16edca4
--- /dev/null
+++ b/docs/_includes/head.html
@@ -0,0 +1,12 @@
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {%- seo -%}
+    <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+    <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
+    {%- feed_meta -%}
+    {%- if jekyll.environment == 'production' and site.google_analytics -%}
+    {%- include google-analytics.html -%}
+    {%- endif -%}
+</head>
\ No newline at end of file
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
new file mode 100644
index 0000000..6cf4880
--- /dev/null
+++ b/docs/_includes/header.html
@@ -0,0 +1,37 @@
+<header class="site-header" role="banner">
+  <div class="wrapper">
+    {%- assign default_paths = site.pages | map: "path" -%}
+    {%- assign page_paths = site.header_pages | default: default_paths -%}
+    <a class="site-title" rel="author" href="{{ " /" | relative_url }}">{{ site.title | escape }}</a>
+
+    {%- if page_paths -%}
+    <nav class="site-nav">
+      <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+      <label for="nav-trigger">
+        <span class="menu-icon">
+          <svg viewBox="0 0 18 15" width="18px" height="15px">
+            <path
+              d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.484C18,14.304,17.335,14.969,16.516,14.969H1.484 C0.665,14.969,0,14.304,0,13.484l0,0C0,12.665,0.665,12,1.484,12h15.032C17.335,12,18,12.665,18,13.484L18,13.484z" />
+          </svg>
+        </span>
+      </label>
+
+      <div class="trigger">
+        {%- for path in page_paths -%}
+        {%- assign my_page = site.pages | where: "path", path | first -%}
+        {%- if my_page.title -%}
+        <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+        {%- endif -%}
+        {%- endfor -%}
+        <a class="button" href="javascript:void(0)" onclick="launchExample()">Try Interactive Example</a>
+      </div>
+    </nav>
+    {%- endif -%}
+  </div>
+</header>
+
+<script>
+  function launchExample() {
+    window.open('https://gridwise-webgpu.github.io/examples/scan_sort_pane_example.html', '_blank');
+  }
+</script>
\ No newline at end of file
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
new file mode 100644
index 0000000..48c6abb
--- /dev/null
+++ b/docs/_layouts/home.html
@@ -0,0 +1,43 @@
+---
+layout: default
+---
+
+<div class="docs-container">
+  <!-- Left Sidebar Navigation -->
+  <aside class="docs-sidebar">
+    <h3>Documentation</h3>
+    {%- assign gridwise_pages = site.pages | where: "category", "gridwise" | sort: "order" -%}
+    {%- if gridwise_pages.size > 0 -%}
+    <ul class="docs-nav">
+      {%- for page in gridwise_pages -%}
+      <li>
+        <a href="{{ page.url | relative_url }}">{{ page.title | escape }}</a>
+      </li>
+      {%- endfor -%}
+    </ul>
+    {%- endif -%}
+
+    <!-- Sidebar Footer -->
+    <div class="sidebar-footer">
+      <a href="https://github.com/gridwise-webgpu/gridwise" target="_blank" class="github-link">
+        <svg class="github-icon" viewBox="0 0 16 16" width="20" height="20">
+          <path fill="currentColor"
+            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
+          </path>
+        </svg>
+        <span>GitHub</span>
+      </a>
+    </div>
+  </aside>
+
+  <!-- Main Content Area -->
+  <main class="docs-content">
+    <div class="home">
+      {%- if page.title -%}
+      <h1 class="page-heading">{{ page.title }}</h1>
+      {%- endif -%}
+
+      {{ content }}
+    </div>
+  </main>
+</div>
\ No newline at end of file
diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
new file mode 100644
index 0000000..9732ba4
--- /dev/null
+++ b/docs/_layouts/page.html
@@ -0,0 +1,47 @@
+---
+layout: default
+---
+
+<div class="docs-container">
+    <!-- Left Sidebar Navigation -->
+    <aside class="docs-sidebar">
+        <h3>Documentation</h3>
+        {%- assign gridwise_pages = site.pages | where: "category", "gridwise" | sort: "order" -%}
+        {%- if gridwise_pages.size > 0 -%}
+        <ul class="docs-nav">
+            {%- for p in gridwise_pages -%}
+            <li>
+                <a href="{{ p.url | relative_url }}" {% if p.url==page.url %}class="active" {% endif %}>
+                    {{ p.title | escape }}
+                </a>
+            </li>
+            {%- endfor -%}
+        </ul>
+        {%- endif -%}
+
+        <!-- Sidebar Footer -->
+        <div class="sidebar-footer">
+            <a href="https://github.com/gridwise-webgpu/gridwise" target="_blank" class="github-link">
+                <svg class="github-icon" viewBox="0 0 16 16" width="20" height="20">
+                    <path fill="currentColor"
+                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
+                    </path>
+                </svg>
+                <span>GitHub</span>
+            </a>
+        </div>
+    </aside>
+
+    <!-- Main Content Area -->
+    <main class="docs-content">
+        <article class="post">
+            <header class="post-header">
+                <h1 class="post-title">{{ page.title | escape }}</h1>
+            </header>
+
+            <div class="post-content">
+                {{ content }}
+            </div>
+        </article>
+    </main>
+</div>
\ No newline at end of file
diff --git a/docs/_posts/2025-07-23-welcome-to-jekyll.markdown b/docs/_posts/2025-07-23-welcome-to-jekyll.markdown
deleted file mode 100644
index dc0180e..0000000
--- a/docs/_posts/2025-07-23-welcome-to-jekyll.markdown
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: post
-title:  "Welcome to Jekyll!"
-date:   2025-07-23 16:06:17 -0700
-categories: jekyll update
----
-You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
-
-Jekyll requires blog post files to be named according to the following format:
-
-`YEAR-MONTH-DAY-title.MARKUP`
-
-Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.
-
-Jekyll also offers powerful support for code snippets:
-
-{% highlight ruby %}
-def print_hi(name)
-  puts "Hi, #{name}"
-end
-print_hi('Tom')
-#=> prints 'Hi, Tom' to STDOUT.
-{% endhighlight %}
-
-Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
-
-[jekyll-docs]: https://jekyllrb.com/docs/home
-[jekyll-gh]:   https://github.com/jekyll/jekyll
-[jekyll-talk]: https://talk.jekyllrb.com/
diff --git a/docs/about.markdown b/docs/about.markdown
index 8b4e0b2..073fadb 100644
--- a/docs/about.markdown
+++ b/docs/about.markdown
@@ -4,15 +4,6 @@ title: About
 permalink: /about/
 ---
 
-This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
+Gridwise is a JavaScript library for WebGPU compute primitives including scan, reduce, and sort.
 
-You can find the source code for Minima at GitHub:
-[jekyll][jekyll-organization] /
-[minima](https://github.com/jekyll/minima)
-
-You can find the source code for Jekyll at GitHub:
-[jekyll][jekyll-organization] /
-[jekyll](https://github.com/jekyll/jekyll)
-
-
-[jekyll-organization]: https://github.com/jekyll
+View the source code on [GitHub](https://github.com/gridwise-webgpu/gridwise).
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
new file mode 100644
index 0000000..a6e8d03
--- /dev/null
+++ b/docs/assets/css/style.scss
@@ -0,0 +1,308 @@
+---
+---
+@import "minima";
+
+/* Header Button Styling */
+.button {
+    display: inline-block;
+    padding: 5px 10px;
+    border: 1px solid #4f4f4f;
+    border-radius: 4px;
+    transition: all 0.2s ease-in;
+    position: relative;
+    overflow: hidden;
+    font-size: 16px;
+    cursor: pointer;
+    color: black;
+    z-index: 1;
+    text-decoration: none;
+    line-height: 1.5;
+    vertical-align: middle;
+    margin-top: 0;
+}
+
+.button:before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%) scaleY(1) scaleX(1.25);
+    top: 100%;
+    width: 140%;
+    height: 180%;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 50%;
+    display: block;
+    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
+    z-index: -1;
+}
+
+.button:after {
+    content: "";
+    position: absolute;
+    left: 55%;
+    transform: translateX(-50%) scaleY(1) scaleX(1.45);
+    top: 180%;
+    width: 160%;
+    height: 190%;
+    background-color: #39bda7;
+    border-radius: 50%;
+    display: block;
+    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
+    z-index: -1;
+}
+
+.button:hover {
+    color: #ffffff;
+    border: 1px solid #39bda7;
+    text-decoration: none;
+}
+
+.button:hover:before {
+    top: -35%;
+    background-color: #39bda7;
+    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
+}
+
+.button:hover:after {
+    top: -45%;
+    background-color: #39bda7;
+    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
+}
+
+/* Override wrapper for documentation pages */
+.page-content .wrapper {
+    max-width: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* Documentation Layout with Sidebar */
+.docs-container {
+    display: flex;
+    gap: 0;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+/* Left Sidebar - Fixed to left edge */
+.docs-sidebar {
+    width: 380px;
+    flex-shrink: 0;
+    background-color: #f8f9fa;
+    padding: 25px 20px 30px 20px;
+    border-right: 1px solid #e1e4e8;
+    position: fixed;
+    left: 0;
+    top: 56px;
+    /* Below the header */
+    height: calc(100vh - 56px);
+    overflow-y: auto;
+    z-index: 100;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+}
+
+.docs-sidebar h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    font-size: clamp(1.3rem, 2vw, 1.6rem);
+    color: #333;
+    border-bottom: 2px solid #39bda7;
+    padding-bottom: 0.5rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.docs-nav {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 30px;
+    min-height: 0;
+}
+
+.docs-nav li {
+    margin-bottom: 0.15rem;
+}
+
+.docs-nav a {
+    display: block;
+    padding: 0.75rem 1rem;
+    color: #555;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    font-size: clamp(1rem, 1.5vw, 1.2rem);
+    line-height: 1.5;
+    border-left: 3px solid transparent;
+}
+
+.docs-nav a:hover {
+    background-color: #e8eaed;
+    color: #111;
+    border-left-color: #39bda7;
+    transform: translateX(5px);
+    padding-left: 1.1rem;
+}
+
+.docs-nav a.active {
+    background-color: #39bda7;
+    color: white;
+    font-weight: 500;
+    border-left-color: #2ecc71;
+    box-shadow: 0 2px 8px rgba(57, 189, 167, 0.3);
+}
+
+/* Scrollbar styling for sidebar */
+.docs-sidebar::-webkit-scrollbar {
+    width: 8px;
+}
+
+.docs-sidebar::-webkit-scrollbar-track {
+    background: #f0f0f0;
+}
+
+.docs-sidebar::-webkit-scrollbar-thumb {
+    background: #39bda7;
+    border-radius: 4px;
+}
+
+.docs-sidebar::-webkit-scrollbar-thumb:hover {
+    background: #2ecc71;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 0.5rem;
+    border-top: 1px solid #e1e4e8;
+    flex-shrink: 0;
+    background-color: #f8f9fa;
+}
+
+.github-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: #555;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+.github-link:hover {
+    background-color: #e8eaed;
+    color: #111;
+}
+
+.github-icon {
+    flex-shrink: 0;
+}
+
+/* Main Content - Centered with left margin for sidebar */
+.docs-content {
+    flex: 1;
+    margin-left: 380px;
+    /* Same as sidebar width */
+    padding: 40px 100px 40px 100px;
+    max-width: calc(100vw - 380px);
+    width: 100%;
+}
+
+/* Override minima wrapper inside docs-content */
+.docs-content .wrapper {
+    max-width: 1200px;
+    margin: 0;
+    padding: 0;
+}
+
+.docs-content .home,
+.docs-content .post {
+    max-width: 1200px;
+}
+
+.docs-content .post-content,
+.docs-content .home {
+    font-size: 18px;
+    line-height: 1.8;
+}
+
+.docs-content h1 {
+    font-size: 2.75rem;
+    margin-bottom: 1.5rem;
+    color: #111;
+    font-weight: 600;
+}
+
+.docs-content h2 {
+    font-size: 2rem;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    color: #111;
+    font-weight: 600;
+}
+
+.docs-content h3 {
+    font-size: 1.5rem;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
+    color: #111;
+    font-weight: 600;
+}
+
+.docs-content p {
+    margin-bottom: 1.3rem;
+}
+
+.docs-content code {
+    font-size: 0.95em;
+    padding: 0.2em 0.4em;
+    background-color: #f6f8fa;
+    border-radius: 3px;
+}
+
+.docs-content pre {
+    padding: 18px;
+    overflow: auto;
+    font-size: 15px;
+    line-height: 1.5;
+    background-color: #f6f8fa;
+    border-radius: 6px;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .docs-sidebar {
+        width: 300px;
+    }
+
+    .docs-content {
+        margin-left: 300px;
+        padding: 30px 50px;
+    }
+}
+
+@media (max-width: 768px) {
+    .docs-sidebar {
+        width: 100%;
+        position: static;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid #e1e4e8;
+    }
+
+    .docs-content {
+        margin-left: 0;
+        padding: 20px;
+    }
+}
\ No newline at end of file
diff --git a/docs/gridwise/architecture.md b/docs/gridwise/architecture.md
index f756abd..447f7cf 100644
--- a/docs/gridwise/architecture.md
+++ b/docs/gridwise/architecture.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise Architecture"
-date: 2025-08-12
+category: gridwise
+permalink: /gridwise/architecture/
+excerpt: "Overview of Gridwise's core architecture, including Primitives and Buffers, and how they provide best-in-class WebGPU compute performance."
+order: 1
 ---
 
 The primary goal of Gridwise is to deliver best-in-class performance on WebGPU compute primitives while minimizing the amount of code that must be written by the library user. Ideally, a Gridwise user will declare and then execute a primitive and Gridwise will handle all low-level details of setting up and calling the necessary WebGPU primitives.
diff --git a/docs/gridwise/binop.md b/docs/gridwise/binop.md
index 723835f..f66e1c4 100644
--- a/docs/gridwise/binop.md
+++ b/docs/gridwise/binop.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise's Binary Operator Class"
-date: 2025-09-16
+category: gridwise
+permalink: /gridwise/binop/
+excerpt: "Understanding the BinOp class that represents monoids with binary operations, datatypes, and identity elements for use in primitives."
+order: 3
 ---
 
 Gridwise's binary operator class is called `binop`. This class represents a [monoid](https://en.wikipedia.org/wiki/Monoid), which has as its constituent parts a binary operation, a datatype for the data on which the operator is applied, and an identity element. (If we call the identity element `I` and the operator `op`, then `x = I op x`. For instance, addition's identity is zero, and multiplication's is one.) In Gridwise, we package these elements into an instance of a JS class, `BinOp`. This class then defines a number of objects that are used in WGSL code generation and CPU correctness checking.
diff --git a/docs/gridwise/buffer.md b/docs/gridwise/buffer.md
index ddee0e6..b14533e 100644
--- a/docs/gridwise/buffer.md
+++ b/docs/gridwise/buffer.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise's Buffer Class"
-date: 2025-09-16
+category: gridwise
+permalink: /gridwise/buffer/
+excerpt: "The Buffer class encapsulates data that spans both CPU (typed arrays) and GPU (GPUBuffer), providing a unified interface for data management."
+order: 2
 ---
 
 During Gridwise's development, we found a need to encapsulate the concept of a single wad of data that spans CPU and GPU. We call this class `Buffer`. It contains both a CPU-side JS typed array and a GPU-side `GPUBuffer`. The abstraction is that these two objects are (roughly) consistent with each other (they are not meant to store two logically different objects).
diff --git a/docs/gridwise/builtins-strategy.md b/docs/gridwise/builtins-strategy.md
index 218a25f..eb2361b 100644
--- a/docs/gridwise/builtins-strategy.md
+++ b/docs/gridwise/builtins-strategy.md
@@ -1,5 +1,8 @@
 ---
-layout: post
+layout: page
 title: "Gridwise WebGPU @builtins Strategy"
-date: 2025-08-22
+category: gridwise
+permalink: /gridwise/builtins-strategy/
+excerpt: "Exploring the use of WGSL @builtin functions in Gridwise for optimal WebGPU primitive performance."
+order: 6
 ---
diff --git a/docs/gridwise/primitive-design.md b/docs/gridwise/primitive-design.md
index a59317f..0e315be 100644
--- a/docs/gridwise/primitive-design.md
+++ b/docs/gridwise/primitive-design.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise WebGPU Primitive Strategy wrt Subgroups"
-date: 2025-08-21
+category: gridwise
+permalink: /gridwise/primitive-design/
+excerpt: "How Gridwise implements single-pass chained algorithms for sort, scan, and reduce with and without subgroup support."
+order: 7
 ---
 
 We wish to implement WebGPU sort, scan, and reduce. The fastest known GPU techniques for these operations are single-pass (chained) algorithms that minimize overall memory bandwidth. However, these techniques have historically been written using warp/subgroup support, and that subgroup support appears to be critical for their high performance. This document looks at the different considerations for different primitive implementations.
diff --git a/docs/gridwise/scan-and-reduce.md b/docs/gridwise/scan-and-reduce.md
index 862a276..99475fa 100644
--- a/docs/gridwise/scan-and-reduce.md
+++ b/docs/gridwise/scan-and-reduce.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise Scan and Reduce"
-date: 2025-09-16
+category: gridwise
+permalink: /gridwise/scan-and-reduce/
+excerpt: "Implementation details of scan (parallel prefix) and reduce operations in Gridwise, including our SPAA 2025 paper findings."
+order: 4
 ---
 
 [Scan](https://en.wikipedia.org/wiki/Prefix_sum) (parallel prefix) is a fundamental parallel compute primitive useful in both other primitives as well as a wide range of application domains. (The [Wikipedia page](https://en.wikipedia.org/wiki/Prefix_sum#Applications) describes many possible uses of scan.) Here we describe how our implementation works and how it is used in Gridwise. We published a [paper on our scan implementation](https://dl.acm.org/doi/10.1145/3694906.3743326) at SPAA 2025. Here we instead aim for a higher-level, more informal description of our implementation.
diff --git a/docs/gridwise/sort.md b/docs/gridwise/sort.md
index 095fb59..b6e4c5c 100644
--- a/docs/gridwise/sort.md
+++ b/docs/gridwise/sort.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise Sort"
-date: 2025-09-16
+category: gridwise
+permalink: /gridwise/sort/
+excerpt: "GPU radix sort implementation using the OneSweep architecture with chained scan and forward-progress guarantees."
+order: 5
 ---
 
 The dominant approach to GPU sorting is a [radix sort](https://en.wikipedia.org/wiki/Radix_sort) over input keys. In general, radix sorts deliver high performance on GPUs because they require _O(n)_ work for inputs of _n_ elements, because their constituent memory accesses are generally fairly coalesced and thus deliver good memory performance, and because the underlying compute primitives that compose to make the sort are good matches for GPUs.
diff --git a/docs/gridwise/subgroup-strategy.md b/docs/gridwise/subgroup-strategy.md
index 88b0ec9..82964dd 100644
--- a/docs/gridwise/subgroup-strategy.md
+++ b/docs/gridwise/subgroup-strategy.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise WebGPU Subgroup Emulation Strategy"
-date: 2025-08-18
+category: gridwise
+permalink: /gridwise/subgroup-strategy/
+excerpt: "Strategies for writing high-performance code that uses WGSL subgroups when available and falls back to emulation when not."
+order: 8
 ---
 
 WGSL's [subgroup built-in functions](https://gpuweb.github.io/gpuweb/wgsl/#subgroup-builtin-functions) have the potential to significantly improve performance on subgroup-capable hardware. A [large (and growing) fraction of WebGPU devices](https://web3dsurvey.com/webgpu) support subgroups. However, writing high-performance code that supports both using subgroups when available _and_ falls back to code with no subgroups is a challenge. This document describes my experience attempting to do exactly that.
diff --git a/docs/gridwise/timing-strategy.md b/docs/gridwise/timing-strategy.md
index ff017bd..601beab 100644
--- a/docs/gridwise/timing-strategy.md
+++ b/docs/gridwise/timing-strategy.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise WebGPU Timing Strategy"
-date: 2025-08-12
+category: gridwise
+permalink: /gridwise/timing-strategy/
+excerpt: "CPU and GPU timing methodologies for measuring and optimizing WebGPU primitive performance in Gridwise."
+order: 10
 ---
 
 Building a high-performance WebGPU primitive library requires careful timing measurements to ensure that primitives deliver high performance to their users. In developing Gridwise, we designed both CPU and GPU timing methodologies and describe them here.
diff --git a/docs/gridwise/webgpu-object-caching-strategy.md b/docs/gridwise/webgpu-object-caching-strategy.md
index 8b7637b..9e8a8cb 100644
--- a/docs/gridwise/webgpu-object-caching-strategy.md
+++ b/docs/gridwise/webgpu-object-caching-strategy.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Gridwise WebGPU Object Caching Strategy"
-date: 2025-08-12
+category: gridwise
+permalink: /gridwise/webgpu-object-caching-strategy/
+excerpt: "How Gridwise caches WebGPU objects to improve performance by avoiding expensive object recreation."
+order: 9
 ---
 
 ## Gridwise WebGPU Object Caching Strategy
diff --git a/docs/gridwise/writing-a-webgpu-wgsl-workgroup-reduce-function.md b/docs/gridwise/writing-a-webgpu-wgsl-workgroup-reduce-function.md
index 6790a80..4265ce4 100644
--- a/docs/gridwise/writing-a-webgpu-wgsl-workgroup-reduce-function.md
+++ b/docs/gridwise/writing-a-webgpu-wgsl-workgroup-reduce-function.md
@@ -1,7 +1,10 @@
 ---
-layout: post
+layout: page
 title: "Abstraction Challenges in Writing a WebGPU/WGSL Workgroup Reduce Function"
-date: 2025-04-08
+category: gridwise
+permalink: /gridwise/writing-a-webgpu-wgsl-workgroup-reduce-function/
+excerpt: "A practical walkthrough of implementing a workgroupReduce function in WGSL, exploring language challenges and abstraction pain points."
+order: 11
 ---
 
 In this post, we'll walk through the process of writing a `workgroupReduce` function in WGSL. We write this function as if we were a library writer who would implement `workgroupReduce` with the intent that other unknown developers will call our function. Our goal is to explore the WGSL issues facing the library writer. Through this practical example of creating a `reduceWorkgroup` function, we will identify and discuss several pain points in the language.
diff --git a/docs/index.markdown b/docs/index.markdown
index 0671507..e4d427d 100644
--- a/docs/index.markdown
+++ b/docs/index.markdown
@@ -1,6 +1,3 @@
 ---
-# Feel free to add content and custom Front Matter to this file.
-# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
 layout: home
 ---
diff --git a/docs/updating-your-site-links.txt b/docs/updating-your-site-links.txt
deleted file mode 100644
index b5c913c..0000000
--- a/docs/updating-your-site-links.txt
+++ /dev/null
@@ -1,32 +0,0 @@
-## The Crucial Next Step: Updating Your Site's Links 🔗
-Simply changing the _config.yml file is only half the battle. You must ensure your site's templates use these variables. If your links are hardcoded, they will break.
-
-You need to go through your layout files (_layouts), includes (_includes), and any other HTML or Markdown files to make sure all internal links and asset paths are prepended with {{ site.baseurl }}.
-
-Here are some examples of what to look for and how to fix them:
-
-CSS Stylesheets:
-
-Incorrect: <link rel="stylesheet" href="/assets/css/style.css">
-
-Correct: <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css">
-
-JavaScript Files:
-
-Incorrect: <script src="/assets/js/main.js"></script>
-
-Correct: <script src="{{ site.baseurl }}/assets/js/main.js"></script>
-
-Image Paths:
-
-Incorrect: <img src="/images/logo.png">
-
-Correct: <img src="{{ site.baseurl }}/images/logo.png">
-
-Internal Page Links:
-
-Incorrect: <a href="/about/">About Us</a>
-
-Correct: <a href="{{ site.baseurl }}/about/">About Us</a>
-
-By using {{ site.baseurl }}, you make your site portable. Jekyll will automatically insert /gridwise when building for your project site and an empty string if you ever move it back to an organization/user site.