Update year

Reviewed-on: #4

.gitea/workflows/release.yaml

@@ -2,7 +2,6 @@ name: release
 
 on:
   push:
-    branches: [main]
 
 jobs:
   publish:
@@ -17,20 +16,28 @@ jobs:
         with:
           lfs: true
       - uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
-      - name: Install pico
+      - name: Install npm packages
         run: npm ci
 
       - name: Create build artifacts
         run: ./build.sh
 
       - name: Publish to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: resume
-          directory: build
+          command: pages deploy build --project-name=resume
+
+      - name: Publish Email Worker
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          workingDirectory: contact-email-worker
 
       - uses: actions/upload-artifact@v3
         with:

.gitignore

@@ -1,4 +1,7 @@
-/node_modules
+node_modules
 .DS_Store
 .vscode
-build
+build
+.wrangler
+website.css
+website.css.map

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright © 2023 Michael Pivato
+Copyright © 2025 Michael Pivato
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -2,15 +2,25 @@
 
 A dead simple website showcasing my career and interests!
 
+Also includes a contact form, which sends an email with relevant details from whoever is trying to make contact, using CloudFlare Workers and Email Routing.
+
 ## Build
 
 Ensure npm is installed.
 
-Download pico css:
+Download dependencies:
 
 `npm install`
 
+Run `./build.sh` to build the site that is served by cloudflare pages
+
 ## Debugging
 
 Easiest way to debug/visualise the content is to use the inbuilt IDE browser. VS Code/Codium can display a preview side-by-side by clicking the Open Preview to the Side button.
 This will show changes live, exactly as the content will be rendered when run from another webserver.
+
+To generate the css file during development, run the following:
+
+`npx sass --watch website.scss. website.css`
+
+Note: The contact form cannot be tested locally with wrangler as this is not supported by Email Routing, instead you'll need to use the --remote

_headers

@@ -1,3 +1,3 @@
 /*
-    Content-Security-Policy: default-src 'self'; frame-ancestors 'none'
+    Content-Security-Policy: default-src 'self'; img-src 'self' data:; frame-ancestors 'none'; script-src static.cloudflareinsights.com; connect-src 'self' cloudflareinsights.com;
     X-Content-Type-Options: nosniff

build.sh

@@ -1,5 +1,3 @@
-mkdir -p build/@picocss/pico/css/
-cp *.png *.xml *.svg *.css *.webmanifest *.ico robots.txt _headers build
-# https://github.com/cloudflare/workers-sdk/issues/3615
-sed 's/node_modules\///' index.html > build/index.html
-cp node_modules/@picocss/pico/css/pico.min.css build/@picocss/pico/css/
+mkdir -p build/
+cp -r *.png *.xml *.html *.svg *.webmanifest *.ico robots.txt _headers functions contact build
+npx sass --quiet --style=compressed --no-source-map website.scss build/website.css

contact-email-worker/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "royal-leaf-c03c",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "deploy": "wrangler deploy",
+    "dev": "wrangler dev",
+    "start": "wrangler dev",
+    "cf-typegen": "wrangler types"
+  },
+  "devDependencies": {
+    "@cloudflare/vitest-pool-workers": "^0.6.4",
+    "@cloudflare/workers-types": "^4.20250129.0",
+    "typescript": "^5.5.2",
+    "wrangler": "^3.107.2"
+  },
+  "dependencies": {
+    "mimetext": "^3.0.27"
+  }
+}

contact-email-worker/src/index.ts

@@ -0,0 +1,52 @@
+import { EmailMessage } from "cloudflare:email";
+import { WorkerEntrypoint } from "cloudflare:workers";
+import { createMimeMessage } from "mimetext";
+
+const formatEmptyString = (s: string) => s ?? "Not Specified";
+
+interface EmailDetails {
+  fullName: string;
+  organisation: string;
+  email: string;
+  mobile: string;
+  message: string;
+}
+
+export default class SendEmailWorker extends WorkerEntrypoint<Env> {
+  async fetch() {
+    return new Response("Unimplemented");
+  }
+
+  async sendEmail({
+    fullName,
+    organisation,
+    email,
+    mobile,
+    message,
+  }: EmailDetails) {
+    const msg = createMimeMessage();
+    msg.setSender({
+      name: "Michael Pivato Contact Form",
+      addr: "contact@michaelpivato.dev",
+    });
+    msg.setRecipient("contact@michaelpivato.dev");
+    msg.setSubject(`Message from ${fullName ?? email}`);
+    msg.addMessage({
+      contentType: "text/plain",
+      data: `You've received a new message from ${fullName ?? email}.
+Full Name: ${formatEmptyString(fullName)}
+Organisation: ${formatEmptyString(organisation)}
+Email: ${formatEmptyString(email)}
+Mobile: ${formatEmptyString(mobile)}
+
+Message:
+${message}`,
+    });
+    const cfMessage = new EmailMessage(
+      "contact@michaelpivato.dev",
+      "contact@michaelpivato.dev",
+      msg.asRaw()
+    );
+    this.ctx.waitUntil(this.env.SEB.send(cfMessage));
+  }
+}

contact-email-worker/tsconfig.json

@@ -0,0 +1,46 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		"target": "es2021",
+		/* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		"lib": ["es2021"],
+		/* Specify what JSX code is generated. */
+		"jsx": "react-jsx",
+
+		/* Specify what module code is generated. */
+		"module": "es2022",
+		/* Specify how TypeScript looks up a file from a given module specifier. */
+		"moduleResolution": "Bundler",
+		/* Specify type package names to be included without being referenced in a source file. */
+		"types": [
+			"@cloudflare/workers-types/2023-07-01"
+		],
+		/* Enable importing .json files */
+		"resolveJsonModule": true,
+
+		/* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+		"allowJs": true,
+		/* Enable error reporting in type-checked JavaScript files. */
+		"checkJs": false,
+
+		/* Disable emitting files from a compilation. */
+		"noEmit": true,
+
+		/* Ensure that each file can be safely transpiled without relying on other imports. */
+		"isolatedModules": true,
+		/* Allow 'import x from y' when a module doesn't have a default export. */
+		"allowSyntheticDefaultImports": true,
+		/* Ensure that casing is correct in imports. */
+		"forceConsistentCasingInFileNames": true,
+
+		/* Enable all strict type-checking options. */
+		"strict": true,
+
+		/* Skip type checking all .d.ts files. */
+		"skipLibCheck": true
+	},
+	"exclude": ["test"],
+	"include": ["worker-configuration.d.ts", "src/**/*.ts"]
+}

contact-email-worker/worker-configuration.d.ts

@@ -0,0 +1,5 @@
+// Generated by Wrangler by running `wrangler types`
+
+interface Env {
+	SEB: SendEmail;
+}

contact-email-worker/wrangler.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "contact-email",
+  "main": "src/index.ts",
+  "compatibility_date": "2025-01-29",
+  "observability": {
+    "enabled": true
+  },
+  "send_email": [
+    { "name": "SEB", "destination_address": "contact@michaelpivato.dev" }
+  ],
+  "workers_dev": false,
+  "compatibility_flags": ["nodejs_compat"]
+}

contact/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Michael Pivato | Contact</title>
+    <link rel="stylesheet" href="../website.css" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="../apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="../favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="../favicon-16x16.png"
+    />
+    <link rel="manifest" href="../site.webmanifest" />
+    <link rel="mask-icon" href="../safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#13171f"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#2a3140"
+    />
+    <meta name="description" content="Michael Pivato's Resume: Contact Form" />
+  </head>
+  <body>
+    <main class="container">
+      <header>
+        <hgroup>
+          <h1>Contact</h1>
+          <p>Send Michael a message</p>
+          <a href="../">Back to resume</a>
+        </hgroup>
+      </header>
+      <form data-static-form-name="contact">
+        <fieldset>
+          <label>
+            Name
+            <input name="name" placeholder="Name" autocomplete="name" />
+          </label>
+          <label
+            >Organisation
+            <input
+              name="org"
+              placeholder="Organisation"
+              autocomplete="organization"
+            />
+          </label>
+          <label>
+            Email
+            <input
+              type="email"
+              name="email"
+              placeholder="Email"
+              autocomplete="email"
+            />
+          </label>
+          <label>
+            Mobile
+            <input
+              type="tel"
+              name="mobile"
+              placeholder="Mobile"
+              autocomplete="mobile"
+            />
+          </label>
+          <label>
+            Message
+            <textarea name="message" placeholder="Message..."></textarea>
+          </label>
+        </fieldset>
+        <input type="submit" value="Send Message" />
+      </form>
+      <footer class="container">
+        <small>Michael Pivato • 2025</small>
+      </footer>
+    </main>
+  </body>
+</html>

functions/contact.ts

@@ -0,0 +1,49 @@
+import staticFormsPlugin from "@cloudflare/pages-plugin-static-forms";
+
+interface EmailDetails {
+  fullName: string;
+  organisation: string;
+  email: string;
+  mobile: string;
+  message: string;
+}
+
+interface SendEmailWorker {
+  sendEmail(rawMessage: EmailDetails): Promise<Response>;
+}
+
+interface Env {
+  SERVICE: SendEmailWorker;
+}
+
+export const onRequest: PagesFunction<Env> = (context) => {
+  // Wrap static forms plugin so we can extract the env to use email routing
+  return staticFormsPlugin({
+    respondWith: async ({ formData }) => {
+      const fullName = formData.get("name");
+      const organisation = formData.get("org");
+      const email = formData.get("email");
+      const mobile = formData.get("mobile");
+      const message = formData.get("message");
+
+      // Must have some kind of identifiable information for me to actually care about them.
+      if ((fullName || email) && message) {
+        try {
+          context.waitUntil(
+            context.env.SERVICE.sendEmail({
+              fullName,
+              organisation,
+              email,
+              mobile,
+              message,
+            })
+          );
+        } catch (e) {
+          return new Response(e);
+        }
+      }
+
+      return Response.redirect("https://michaelpivato.dev");
+    },
+  })(context);
+};

functions/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "NodeNext",
+        "moduleResolution": "nodenext",
+        "lib": [
+            "esnext"
+        ],
+        "types": [
+            "@cloudflare/workers-types"
+        ]
+    }
+}

index.html

@@ -4,8 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Michael Pivato</title>
-    <link rel="stylesheet" href="node_modules/@picocss/pico/css/pico.min.css" />
-    <link rel="stylesheet" href="site.css" />
+    <link rel="stylesheet" href="website.css" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -28,7 +27,7 @@
     />
   </head>
   <body>
-    <main class="container">
+    <main class="container responsive-nav">
       <aside>
         <nav class="closed-on-mobile">
           <ul>
@@ -55,6 +54,9 @@
             <li>
               <a class="secondary" href="#depthprediction">Depth Prediction</a>
             </li>
+            <li>
+              <a class="contrast" href="#about">About</a>
+            </li>
           </ul>
         </nav>
       </aside>
@@ -63,6 +65,7 @@
           <hgroup>
             <h1>Michael Pivato</h1>
             <p>Career summary and interests</p>
+            <a href="contact">Contact</a>
           </hgroup>
         </header>
         <p>
@@ -82,12 +85,8 @@
           <ul>
             <li>
               Design, maintain and implement modern solutions in various
-              products, primarily the enterprise costing product (PPM).
-            </li>
-            <li>
-              Create and maintain various front- and back-end components to
-              support consistent theming, quality, and developer experience
-              across PPM and the billing product (PBRC).
+              internal and client-facing products, primarily relating to the
+              enterprise costing product (PPM).
             </li>
             <li>Respond to internal and client feedback to improve PPM.</li>
             <li>Develop automated tests to improve code quality.</li>
@@ -96,18 +95,18 @@
           <h4>Key Achievements</h4>
           <ul>
             <li>
-              Significant contributions to PPM, including designing and
-              implementing shared libraries for use in other teams.
+              Significant contributions to PPM, including rewriting many Java
+              Swing components to work natively in the browser.
             </li>
             <li>
-              Create and setup front-end and associated web server back-end
-              components on PPM AND PBRC, as well as internal products.
+              Reduced time for a data transmission service by a factor of 10x
+              (e.g. 7.5GB file went from 50 minutes to 5 minutes for data
+              upload).
             </li>
             <li>
               Created the PowerAnalytics product within the PPM reporting
-              framework, which improved the speed and functionality of an
-              implementation in PowerBI by another team that experienced cost
-              blowouts.
+              framework, which improved the speed and functionality of a PowerBI
+              implementation by another team that went over budget.
             </li>
           </ul>
           <details id="powerhealth">
@@ -139,10 +138,11 @@
                 that is now in production use and enjoyed by clients.
               </li>
               <li>
-                Create and setup front-end and associated web server back-end
-                components on the costing and billing products, as well as
-                internal products.
+                Create front-end and associated web server back-end components
+                on the costing and billing products, as well as internal
+                products such as the licensing service.
               </li>
+              <li>Migrate the PPM build system from a Ant to Gradle.</li>
             </ul>
           </details>
           <details id="dstgroup">
@@ -266,29 +266,39 @@
           <p>
             Over the years I've hacked away at various personal projects. My
             preference is always to build, run and host applications locally,
-            which includes this page!
+            however I have come around to cloud services for public-facing
+            resources, such as CloudFlare, which is used to host this page!
           </p>
           <p>
-            Recently my interesets have shifted slightly to large machine
-            learning models, and have messed around with Stable Diffusion
-            (mainly with
-            <a href="https://github.com/invoke-ai">Invoke AI</a>) and Large
-            Language Models such as the
-            <a href="https://llama.meta.com">Llama</a> family. I have also
-            trained/finetuned LLMs in the past (BERT), however this has been
-            outside of my capability recently due to the growth in parameters.
+            I have used AI/ML in the past, as seen in my own Depth Prediction
+            implementation, and LLMs, where I fine-tuned BERT to perform Named
+            Entity Recognition, however recent models have gotten too large to
+            train at home. I also use local LLMs in LM Studio, to provide basic
+            information and coding assistance when learning a new framework.
+            Recently my interesets have shifted to designing applications that
+            can maximise throughput for large datasets and minimise response
+            time for queries/charts. I'm currently reading
+            <a
+              href="https://www.oreilly.com/library/view/designing-data-intensive-applications/9781491903063/"
+              >Designing Data-Intensive Applications</a
+            >
+            to facilitate improvements in the Ingey project once core
+            implemetation is complete.
           </p>
           <p>
-            Finally I've thoroughly enjoyed writing in Rust, mainly the
-            efficiency, ease of use and correctness that come from using this
-            programming language. One example was in the
+            Finally I've enjoyed writing new applications in Rust; the
+            efficiency, ease of use and correctness have been fantastic. One
+            example is in the
             <a href="https://gitea.michaelpivato.dev/vato007/ingey">Ingey</a>
-            project, where I reduced the time taken for processing some demo
-            data on the costing product from ~1.5 hours to ~7 seconds on a
-            laptop/desktop, or ~36 seconds on a smartphone. This was mainly due
-            to not using SQL Server, and using a custom algorithm in overhead
-            allocation that significantly reduced memory consumption and the
-            number of required calculations.
+            project, where I reduced the time to perform reciprocal accounting
+            on a costing product from ~1.5 hours to ~7 seconds on a
+            laptop/desktop, or ~36 seconds on a smartphone. This was due to
+            avoiding non-bulk inserts into a relational database, and using a
+            custom algorithm in overhead allocation that significantly reduced
+            memory consumption and the number of required calculations. The
+            optimisations applied by Rust in release mode also had a significant
+            impact on performance, and is what facilitated easy deployment to an
+            iOS application.
           </p>
           <hgroup id="bufpiv">
             <h3>Buf Piv</h3>
@@ -299,10 +309,10 @@
             </p>
           </hgroup>
           <p>
-            This is a tauri application that makes it easy to edit json files
-            conforming to a protobuf definition. It works as a standalone
-            desktop application for the most complete experience, with browser
-            support to show tauri's versatility as well.
+            This is a Tauri + Angular application that makes it easy to edit
+            json files conforming to a protobuf definition. It works as a
+            standalone desktop application for the most complete experience,
+            with browser support to show Tauri's versatility as well.
           </p>
           <p>
             A browser demo is available at
@@ -318,7 +328,7 @@
             This project originally involved communication between a Raspberry
             Pi and a Traxxas Slash using the Pi's GPIO to control the steering
             and throttle of the RC Car. This was mounted on some 3D printed
-            brackets.The steering and throttle are set using an iPhone/Android
+            brackets. The steering and throttle are set by an iPhone/Android
             application connected over WiFi.
           </p>
           <p>Over time this worked as a base to explore other ideas, namely:</p>
@@ -340,8 +350,8 @@
           <p>
             Recently there have been efforts to port the backend to Rust, with
             the 2D Lidar sensing and control completed. The Python BreezySLAM
-            implementation is currently unfinished, mainly due to distractions
-            from other projects
+            implementation is currently unfinished, mainly due to work on other
+            projects
           </p>
           <hgroup id="depthprediction">
             <h3>Depth Prediction</h3>
@@ -364,8 +374,20 @@
             this large, or specifically computer vision related models.
           </p>
         </section>
+        <section id="about">
+          <h2>About</h2>
+          <p>
+            Licensed under the
+            <a href="https://gitea.michaelpivato.dev/">MIT</a> license.
+          </p>
+          <p>
+            Inspired by a
+            <a href="https://motherfuckingwebsite.com">motherfuckingwebsite</a>
+            - no JavaScript or framework was used to create this resume.
+          </p>
+        </section>
         <footer class="container">
-          <small>Michael Pivato • 2025</small>
+          <small>Michael Pivato • 2026</small>
         </footer>
       </div>
     </main>

package.json

@@ -7,9 +7,18 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
+  "type": "module",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@picocss/pico": "^2.0.0"
+    "@cloudflare/pages-plugin-static-forms": "^1.0.3",
+    "@picocss/pico": "^2.0.0",
+    "mimetext": "^3.0.27"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250129.0",
+    "sass": "^1.85.0",
+    "typescript": "^5.7.3",
+    "wrangler": "^3.107.2"
   }
 }

site.css

@@ -1,24 +0,0 @@
-.closed-on-mobile {
-  display: none;
-}
-
-@media (min-width: 992px) {
-  main {
-    --block-spacing-horizontal: calc(var(--spacing) * 1.75);
-    grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
-    display: grid;
-    grid-template-columns: 200px auto;
-  }
-
-  .closed-on-mobile {
-    display: block;
-  }
-
-  main > aside nav {
-    position: fixed;
-    width: 200px;
-    max-height: calc(100vh - 5.5rem);
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-}

website.scss

@@ -0,0 +1,53 @@
+@use "node_modules/@picocss/pico/scss/pico" with (
+  $theme-color: "cyan",
+  $modules: (
+    "content/code": false,
+    "content/embedded": true,
+    "content/figure": false,
+    "content/miscs": false,
+    "content/table": false,
+    "forms/checkbox-radio-switch": false,
+    "forms/input-color": false,
+    "forms/input-date": false,
+    "forms/input-file": false,
+    "forms/input-range": false,
+    "forms/input-search": false,
+    "components/card": false,
+    "components/dropdown": false,
+    "components/loading": false,
+    "components/group": false,
+    "components/modal": false,
+    "components/progress": false,
+    "components/tooltip": false,
+    "layout/grid": false,
+    "layout/landmarks": false,
+    "layout/overflow-auto": false,
+    "utilities/accessibility": false,
+    "utilities/reduce-motion": false,
+  )
+);
+
+.closed-on-mobile {
+  display: none;
+}
+
+@media (min-width: 992px) {
+  main.responsive-nav {
+    --block-spacing-horizontal: calc(var(--spacing) * 1.75);
+    grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
+    display: grid;
+    grid-template-columns: 200px auto;
+  }
+
+  .closed-on-mobile {
+    display: block;
+  }
+
+  main > aside nav {
+    position: fixed;
+    width: 200px;
+    max-height: calc(100vh - 5.5rem);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}

wrangler.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "resume",
+  "compatibility_date": "2025-01-29",
+  "services": [{ "binding": "SERVICE", "service": "contact-email" }],
+  "pages_build_output_dir": "build"
+}