About This Site🔗

(Click here for information about me)

This site is meant to be a digital space outside of social media for me to occupy, and a big part of the enjoyment I get just comes from building and maintaing it. I also get a lot of questions about how I do certain stuff, so I will try to document how the site is made and common questions on this page. Please reach out to me if there's something you want to know or that I failed to address.

Table of Contents🔗

Site Design and Philosophy🔗

The way that I priotized my decisions when working on this site was basically:

  1. Having fun
  2. Easy of maintanence
  3. User experience

How each of those things factor into the final produce depends on which aspect of the site we're talking about.

Visual Design/UX🔗

When I set out to design the site I spent a fair amount of time actually away from this project, and instead just writing down random ideas that occured to me. They centered around the question what do I actually want this for? I think if you just sit down and start making something without putting serious thought into answering this question, you're inevitably going to end up with something that sort of looks and feels like a nice portfolio site. This makes it hard to know where to put information that falls outside of what goes in a portfolio website.

The use of color evolved in response to the moment. For example, I have dark backgrounds just because staring at a bright screen for too long hurt my eyes, and there're a lot of different colors sprinkled throughout the text (perhaps too many?) because it gets boring to just look at once color when you're writing content for long periods of time. Basically, I just wanted to spice things up, and maybe switching back and fourth between my site and preview and a code editor put that idea in my head.

In terms of typography I think I have a long ways to come, and my use of whitespace hasn't really been very creatively inspired. I honestly have no idea what I'm doing, and I just hope that I don't have to change too much when I have more of a clue on how I should do things.

The last thing is I started to draw more and I've begun to really like doing illustrations. You can see an example of this on my homepage. Part of what I enjoy is the problem solving process that comes from doing illustration work. It's amazing in one of those ways where you can really spend as much time as you want continuing to make things better and better, or you can just stop at good enough. There's something elegant about that type of non-binary work.

In any case, I'm trying to start incorporating more illustration and design work into the site to give a polished and professional look, while also still being friendly and fun aesthetically. I hope that when people come to my site that they feel inspired and excited to go and do their own thing based on something that they saw here.

Elsewhere on this page I have a list of websites that inspired the design of this website.

Technologies Used and Site Architecture🔗

The html is generated using the static site generator Zola, the CSS is 99.9% done using Tailwind CSS utility classes, and the site is hosted using Cloudflare Pages. A small subset of functionality is also implemented using Cloudflare Workers.

You will notice also that there is no Javascript, with the exception of a few things that Cloudflare inserts.

Zola doesn't have a plugin system, whereas Tailwind needs to read your html before it can output CSS, due to tree shaking and newer JIT features that it offers. Therefore to make the two work with each other, I run tailwind's standalone build command after Zola's, putting the resulting css in Zola's build output directory (usually public/). This has worked surprisingly well and I haven't had any issues. Although I have a custom npm build script that I use for convenience, my build/run command(s) are more or less the following:

zola build && npx tailwindcss   \
--input <IN> --output <OUT>

zola serve --interface 0.0.0.0  \
& npx tailwindcss               \
--input <IN> --output <OUT>     \
--watch <WATCH_1> <WATCH_2>     \
<...> <WATCH_N>

Where usually I'm watching my main tailwind.css file, as well as content/template directories.

Note, --interface 0.0.0.0 is used so I can test my site on my local machine with my actual mobile device.

HTTP Headers🔗

Here's a copy of my headers file for those who are interested. Feel free to comment or make suggestions.

# HTTP Headers file (Note: https://developers.cloudflare.com/pages/platform/headers)

# Ask to deny search engine indexing for not "production" deployments
https://:project.pages.dev/*
  X-Robots-Tag: noindex

/*
  Strict-Transport-Security: max-age=31536000; includeSubDomains
  Content-Security-Policy: default-src 'none'; script-src 'self' static.cloudflareinsights.com; style-src 'self'; style-src-attr 'self'; img-src 'self'; font-src 'self'; connect-src 'self' cloudflareinsights.com; prefetch-src 'self'; child-src 'none'; frame-src 'none'; worker-src 'self'; frame-ancestors 'none'; form-action 'self' https://forms.spenc.es/; base-uri 'self'; manifest-src 'self'
  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  Referrer-Policy: no-referrer-when-downgrade
  Permissions-Policy: accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), serial=(), sync-script=(), trust-token-redemption=(), vertical-scroll=()
  Feature-Policy: default 'none'
  X-XSS-Protection: 1; mode=block

I used Mozilla's Observatory to help debug issues and try and tighten things down as much as possible.

Testing Mobile From My Local Machine🔗

It's important to test on an actual mobile device. For this, I run squidman on my laptop, and then configure a proxy in my phone's network settings.

E.g.

  1. Start squidman, take note of squidman's port and laptop's IP
  2. Configure proxy on phone, using laptop's IP + squidman's port from previous step
  3. Navigate to website using laptop's IP + port that my server is running on

Resources🔗

Here is a collection of resources that I've found beneficial. Please let me know if there're any I should include.

Inspiration and Acknowledgements🔗

I keep a list of stuff that has inspired me as I continue to work on my site. Each entry has something different to offer. Some of them have some aesthetic element that inspired me, while others organized information in a way that worked but was outside of what you'd see in a template. Others are just wacky and weird. I will try to move that list