Unable to get partial to return images generated from title - Hugo

Based on this blogpost, I am trying to generate a pseudo-random thumbnail for each new post. First, in my data folder I have a bg.json which contains information about the colours and SVGs like so:

{
  "colours": [
    "#dfe6e9",
    "#00b894"
  ],
  "patterns": [
    "data:image/svg+xml..."
  ]
}

Next, in the partials folder, I created a new partial called thumbnail.html which contains the following code:

{{ $hash := split (md5 .Title) "" }}
        {{ $totalColours := len .Site.Data.bg.colours }}

        {{ $primaryIndex := index $hash 1 }}
        {{ $basedPrimaryIndex := printf "%x" $primaryIndex }}
        {{ $modIndex := mod $basedPrimaryIndex $totalColours }}
        {{ $primary := index .Site.Data.bg.colours $modIndex }}

        
        {{ $secondaryIndex := index $hash 2 }}
        {{ $basedSecondaryIndex := printf "%x" $secondaryIndex }}
        {{ $modIndex := mod $basedSecondaryIndex $totalColours }}
        {{ $secondary := index .Site.Data.bg.colours $modIndex }}


        {{ $bgIndex := mod (printf "%x" (index $hash 0)) (len .Site.Data.bg.patterns) }}
        {{ $bg := replace (replace (replace (replace (index .Site.Data.bg.patterns $bgIndex) "%3C" "<") "%3E" ">") "%23" "" | safeHTML) "data:image/svg+xml," "" }}
        {{ $colouredBg := replace $bg "9C92AC" $secondary }}
        <style>
            .post__header {
                --color: {{ $primary }};
                --bg: url("data:image/svg+xml;charset=utf-8;base64,{{ base64Encode $colouredBg }}");
            }
        </style>

My theme generates portfolio cards in another partial called portfolio.html. I looked through the file and replaced the original img src with a path to my partial like so:

 <div class="box-masonry">
                      {{ if and (isset .Params "image") .Params.image }}
                        {{ if eq .Params.showonlyimage true }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay">
                        {{ else }}
                        <a href="{{ .Permalink }}" title="" class="box-masonry-image with-hover-overlay with-hover-icon">
                        {{ end }}
                            <img src="{{ partial "thumbnail.html" . }}" alt="" class="img-responsive">
                        </a>
     (...)

However, I am not seeing any images when I run my hugo server. I thought this would be the neatest way to approach things, but I think the post title (which is hashed to pick a random palette/pattern) is not being passed. How can I fix this?

My repo is hosted here: https://github.com/thedivtagguy/archives

The repo for the original blogpost's code is hosted here: https://github.com/trys/random-to-a-point