functionsio · google-labs-jules · Jan 18, 2026
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+dist/
+build/
+*.log
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+# functions.io
+
+Modern solutions for an evolving technology landscape.
+
+## Overview
+
+functions.io is a technology consulting firm based in Utah, USA. We specialize in technology consulting, systems integration, and software development.
+
+This repository contains the source code for the functions.io website and an experimental dashboard for media processing.
+
+## Project Structure
+
+- `index.html`: The main landing page for functions.io.
+- `css/`: Custom styles and Bootstrap overrides.
+- `images/`: Brand assets and photography used across the site.
+- `dashboard/stream/`: A suite of browser-based media tools, including:
+  - Video transcoding (using ffmpeg.wasm)
+  - Image optimization (using wasm-imagemagick)
+  - Real-time video calling (using PeerJS)
+
+## Local Development
+
+You can serve the website locally for development and verification using any static file server. For example, using Python:
+
+```bash
+python3 -m http.server 8000
+```
+
+Once the server is running, navigate to `http://localhost:8000` in your browser.
+
+## Technologies Used
+
+- **Frontend**: Bootstrap 4 & 5, jQuery
+- **Media Processing**: [ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm), [wasm-imagemagick](https://github.com/KnicKnic/Wasm-ImageMagick)
+- **Networking**: [PeerJS](https://peerjs.com/)
diff --git a/dashboard/stream/concatDemuxer.html b/dashboard/stream/concatDemuxer.html
@@ -1,8 +1,8 @@
 <html>
   <head>
     <link rel="stylesheet" href="style.css">
-    <script src="/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
-    <script src="/stream/assets/util/package/dist/umd/index.js"></script>
+    <script src="/dashboard/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
+    <script src="/dashboard/stream/assets/util/package/dist/umd/index.js"></script>
   </head>
 
   <body>
@@ -26,7 +26,7 @@ <h3>Select multiple video files to Concatenate</h3>
 	    message.innerHTML = `${time / 1000000} s`;
           });
           await ffmpeg.load({
-            coreURL: "/stream/assets/core/package/dist/umd/ffmpeg-core.js",
+            coreURL: "/dashboard/stream/assets/core/package/dist/umd/ffmpeg-core.js",
           });
         }
         message.innerHTML = "Start Concating";

diff --git a/dashboard/stream/index.html b/dashboard/stream/index.html
@@ -8,7 +8,7 @@
     <script src="/dashboard/stream/assets/util/package/dist/umd/index.js"></script>
     <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
     <title>Dashboard</title>
-    {% include favicons.html %}
+    <link rel="icon" href="/images/favicon.png">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 
 
@@ -742,7 +742,7 @@ <h1 class="h2">Video</h1>
                         message.innerHTML = `${progress * 100} %`;
                       });
                       await ffmpeg.load({
-                        coreURL: "/stream/assets/core/package/dist/umd/ffmpeg-core.js",
+                        coreURL: "/dashboard/stream/assets/core/package/dist/umd/ffmpeg-core.js",
                       });
                     }
                     const { name } = videoMain;

diff --git a/dashboard/stream/transcode-mt.esm.html b/dashboard/stream/transcode-mt.esm.html
@@ -8,8 +8,8 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
     <input type="file" id="uploader">
     <p id="message"></p>
     <script type="module">
-      import { FFmpeg } from "/stream/assets/ffmpeg/package/dist/esm/index.js";
-      import { fetchFile } from "/stream/assets/util/package/dist/esm/index.js";
+      import { FFmpeg } from "/dashboard/stream/assets/ffmpeg/package/dist/esm/index.js";
+      import { fetchFile } from "/dashboard/stream/assets/util/package/dist/esm/index.js";
       let ffmpeg = null;
 
       const transcode = async ({ target: { files } }) => {
@@ -23,7 +23,7 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
             message.innerHTML = `${progress * 100} %`;
           });
           await ffmpeg.load({
-            coreURL: "/stream/assets/core-mt/package/dist/esm/ffmpeg-core.js",
+            coreURL: "/dashboard/stream/assets/core-mt/package/dist/esm/ffmpeg-core.js",
           });
         }
         const { name } = files[0];

diff --git a/dashboard/stream/transcode-mt.html b/dashboard/stream/transcode-mt.html
@@ -1,8 +1,8 @@
 <html>
   <head>
     <link rel="stylesheet" href="style.css">
-    <script src="/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
-    <script src="/stream/assets/util/package/dist/umd/index.js"></script>
+    <script src="/dashboard/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
+    <script src="/dashboard/stream/assets/util/package/dist/umd/index.js"></script>
   </head>
   <body>
     <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
@@ -25,7 +25,7 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
             message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
           });
           await ffmpeg.load({
-            coreURL: "/stream/assets/core-mt/package/dist/umd/ffmpeg-core.js",
+            coreURL: "/dashboard/stream/assets/core-mt/package/dist/umd/ffmpeg-core.js",
           });
         }
         const { name } = files[0];

diff --git a/dashboard/stream/transcode.esm.html b/dashboard/stream/transcode.esm.html
@@ -8,8 +8,8 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
     <input type="file" id="uploader">
     <p id="message"></p>
     <script type="module">
-      import { FFmpeg } from "/stream/assets/ffmpeg/package/dist/esm/index.js";
-      import { fetchFile } from "/stream/assets/util/package/dist/esm/index.js";
+      import { FFmpeg } from "/dashboard/stream/assets/ffmpeg/package/dist/esm/index.js";
+      import { fetchFile } from "/dashboard/stream/assets/util/package/dist/esm/index.js";
       let ffmpeg = null;
 
       const transcode = async ({ target: { files } }) => {
@@ -23,7 +23,7 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
             message.innerHTML = `${progress * 100} %`;
           });
           await ffmpeg.load({
-            coreURL: "/stream/assets/core/package/dist/esm/ffmpeg-core.js",
+            coreURL: "/dashboard/stream/assets/core/package/dist/esm/ffmpeg-core.js",
           });
         }
         const { name } = files[0];

diff --git a/dashboard/stream/transcode.html b/dashboard/stream/transcode.html
@@ -1,8 +1,8 @@
 <html>
   <head>
     <link rel="stylesheet" href="style.css">
-    <script src="/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
-    <script src="/stream/assets/util/package/dist/umd/index.js"></script>
+    <script src="/dashboard/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
+    <script src="/dashboard/stream/assets/util/package/dist/umd/index.js"></script>
   </head>
   <body>
     <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
@@ -25,7 +25,7 @@ <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
             message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
           });
           await ffmpeg.load({
-            coreURL: "/stream/assets/core/package/dist/umd/ffmpeg-core.js",
+            coreURL: "/dashboard/stream/assets/core/package/dist/umd/ffmpeg-core.js",
           });
         }
         const { name } = files[0];

diff --git a/dashboard/stream/trim.html b/dashboard/stream/trim.html
@@ -1,8 +1,8 @@
 <html>
   <head>
     <link rel="stylesheet" href="style.css">
-    <script src="/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
-    <script src="/stream/assets/util/package/dist/umd/index.js"></script>
+    <script src="/dashboard/stream/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
+    <script src="/dashboard/stream/assets/util/package/dist/umd/index.js"></script>
   </head>
   <body>
     <h2>Video</h2>
@@ -26,7 +26,7 @@ <h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
             message.innerHTML = `${progress * 100} %`;
           });
           await ffmpeg.load({
-            coreURL: "/stream/assets/core/package/dist/umd/ffmpeg-core.js",
+            coreURL: "/dashboard/stream/assets/core/package/dist/umd/ffmpeg-core.js",
           });
         }
         const { name } = files[0];

diff --git a/index.html b/index.html
@@ -12,8 +12,8 @@
 		</script>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <meta name="description" content="">
-        <meta name="author" content="">
+        <meta name="description" content="functions.io provides modern technology consulting, systems integration, and bespoke software development services tailored to fit your unique functional needs.">
+        <meta name="author" content="functions.io">
         <link rel="icon" href="images/favicon.png">
         <script src="https://kit.fontawesome.com/bd4e975cf5.js" crossorigin="anonymous"></script>
 
@@ -70,7 +70,7 @@ <h2 class="lead">Tailored to fit your unique functional needs.</h2>
                     <div class="row">
                         <div class="col-lg-4 shadow-sm">
                             <div class="card">
-                                <img class="card-img-top" src="images/daria-nepriakhina-zoCDWPuiRuA-unsplash.jpg" alt="Card image cap">
+                                <img class="card-img-top" src="images/daria-nepriakhina-zoCDWPuiRuA-unsplash.jpg" alt="Business strategy and technology consulting">
                                 <div class="card-body">
                                     <h4 class="card-title">Technology Consulting</h4>
                                     <p class="card-text">We specialize in working with small to medium-sized businesses by gathering business requirements, developing a technological strategy to satisfy those requirements, and outputting results that show.</p>
@@ -80,7 +80,7 @@ <h4 class="card-title">Technology Consulting</h4>
                         </div>
                         <div class="col-lg-4 shadow-sm">
                             <div class="card" >
-                                <img class="card-img-top" src="images/ian-battaglia-9drS5E_Rguc-unsplash.jpg" alt="Card image cap">
+                                <img class="card-img-top" src="images/ian-battaglia-9drS5E_Rguc-unsplash.jpg" alt="Systems integration and hardware connectivity">
                                 <div class="card-body">
                                     <h4 class="card-title">Systems Integration</h4>
                                     <p class="card-text">Disparate software/hardware is a thing of the past. We break open stove-piped solutions and integrate where you need it the most. We are dedicated to creative problem-solving within existing infrastructures to reduce development cost.</p>
@@ -90,7 +90,7 @@ <h4 class="card-title">Systems Integration</h4>
                         </div>
                         <div class="col-lg-4 shadow-sm">
                             <div class="card">
-                                <img class="card-img-top" src="images/markus-spiske-466ENaLuhLY-unsplash.jpg" alt="Card image cap">
+                                <img class="card-img-top" src="images/markus-spiske-466ENaLuhLY-unsplash.jpg" alt="Custom software development and code optimization">
                                 <div class="card-body">
                                     <h4 class="card-title">Software Development</h4>
                                     <p class="card-text">Need something more custom? We provide software development services. We build bespoke software in an agile, flexible way to provide confidence in your software solution, all while using modern software development best practices.</p>
@@ -212,7 +212,7 @@ <h2>Web Marketing/SEO</h2>
                     <div class="row">
                         <div class="col-lg-12 shadow-sm">
                             <div class="card">
-                                <img class="card-img-top" src="https://digitaleducationsafety.org/assets/img/header-bg.jpg" alt="Card image cap">
+                                <img class="card-img-top" src="https://digitaleducationsafety.org/assets/img/header-bg.jpg" alt="Digital Education and Safety Foundation Project">
                                 <div class="card-body">
                                     <h4 class="card-title">Digital Education & Safety Foundation</h4>
                                     <p class="card-text">The Digital Education & Safety Foundation is a non-profit that provides STEM/STEAM education services to the underserved.</p>