How can I either make a squarespace banner work externally OR upload a bunch of js, css, and html files without dev mode

I am not a programmer, but my brother is. From what I could find it seems squarespace dev mode will convert everything to dev and I would no longer get the helpful tools to build new pages, which is the entire reason I wanted squarespace in the first place. Basically I am trying to find a way to do both. Main site is https://kaleidoscopecauldronlabs.com 

My brother wrote this little color picking sister site for me on github: https://kaleidoscopecauldronlabs.github.io/ , it has multiple js files, multiple css pages, some html, and png images. I plan to update it and add more things periodically. Originally the plan was to just keep the color picking tool on the seperate url and link to and from the main site. Problem is I would like the header from my squarespace site that has the page links and cool gradient effect, but its difficult to read squarespace's blobs of html to figure out how to copy that part over. 

So I would like a way to either take my squarespace banner and make it work on the external sister site (I am fine needing to re-copy if the banner gets changed with pages.) Or I would like a way to upload all the color picking tool parts into squarespace without needing to be in dev mode.

You can upload files using these instructions

https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Rename them from the generic names you're using (e.g. main.js -> kaleidoscope-main.js) Then add the style sheets and script to the header of a page (don't forget /s/ at the start e.g. /s/kaleidoscope-main.js)

Also, I notice within your script it's importing some other files e.g. the graphics.js.

You'll need to also upload them.

Then you can just basically copy the html across.