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 Links
- Site Design and Philosophy
- Inspiration and Acknowledgements
- RSS Feed
- Mozilla Observatory score (i.e. Security)
- Google PageSpeed score (i.e. Performance)
Site Design and Philosophy🔗
The way that I priotized my decisions when working on this site was basically:
- Having fun
- Easy of maintanence
- User experience
How each of those things factor into the final produce depends on which aspect of the site we're talking about.
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.
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:
Where usually I'm watching my main
tailwind.css file, as well as
--interface 0.0.0.0 is used so I can test my site on my local machine with my actual mobile device.
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.
- Start squidman, take note of squidman's port and laptop's IP
- Configure proxy on phone, using laptop's IP + squidman's port from previous step
- Navigate to website using laptop's IP + port that my server is running on
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
- This simple, single page website belonging to Haraldur Thorleifsson is what inspired me to do my own illustrations. The feeling I got from visiting his website is the one I'm looking to give others when they first see my homepage. Additionally, he strikes a professional yet humble tone in his copy, and does a really good job communicating the bare minimum of information. I also really like that he's a very important designer and business owner, but he still puts his email on his website and makes an effort to get back to people.
- This blog by Professor David Mumford at Brown University has been a great inspiration to me on the upcoming commenting system project that I'm working on. Basically, at the bottom of the linked article, he's just included directly in the article itself, emails he's had with friends and colleagues discussing various points about the article, and that services as him commenting system. I absolutely love the simplicity and elegance of this system.
- Will Boyd's personal website is overally just a really appealing and nice looking website. The author uses whitespace really well and I especially like the "Bits" page for just random the author wanted to share. I think where to put this kind of information is one of the hardest things when designing my own site, and I can't say I've come up with a good answer.
- This website by Dustin Brett is designed to look like desktop computer. I don't think the design is something that I love for being super utilitarian, but the important thing is that it's fun! Interestingly, I actually ended up doing something sort skeumorphic like this for my homepage in the form of individual SVG's that are clickable as a menu.
- Oleksandr Kaleniuk has a website called Words and Buttons Online that is easy to read, but most of all I love how the author has spent so much time collecting and organizing all of these little interactive modules together. There are dozens of them that you can browse and play with. It's definitely sites like this that give one a taste of what is possible outside of the default. The author also has a free book on the C Programming Language called, So You Think You Know C?.
- John Kapolos' blog has a few things that I really liked. First, there's a fun, approachable feel by sprinkling memes throughout the main content. You can tell the author images they're presenting this content to an audience as they're writing it. Additionally they use really nice looking code examples. Even though they're not selectable (they're actually images) they undeniably are still very readable. I think maybe something like this but mixing SVGs could give the best of both worlds, where you could have selectable text, but also displayed nicely in a faux-window like how this professor has done.
- I appreciate how tailwindcss has organized their blog to look like a
CHANGELOGor markedup version of a really well groomed commit history. One thing that's inspiring about this is that you have to only write articles that have titles that follow this format, which basically forbids you from writing empty blog spam type articles.
- Gavin D. Howard's personal website does this neat thing where it has some meta data before the actual article contents, like a disclaimer as well as information about an the "assumed audience". I did something similar for the writings portion of my website, e.g. here, but in this case it the similarities were just a coincidence. Still I wanted to mention his website.
- Robin Schroer's personal website has beautiful, simple typography and colors that are easy on the eyes without being either too dark nor too light. Additionally, one thing that they do that I really like is they have a whole
Uses Thissection, where they just talk about what their technology setup consists of. It's amazing to me how diverse the internet is outside of social media and standard portfolio-style websites.
- The Modern Sounds website has a beautiful, minimalistic look, with nice whitespace and really beautiful images of their products. It's not particularly novel or creative and is probably just comes from a template, but nonetheless I still liked it and felt it was worth mentioning here.
- Alex Crompton's personal website has a nice clean look, but what I especially loved is how he uses the space in the margins to advertise other things that you may be interested in reading on his site. I don't really use my margins in that way, but it's neat to see and could maybe one day be an idea to revisit.
- The typography of [leerob.io]'s is something I appreciated. I also liked how they have a guestbook which is kind of fun and old school.
- The design of the Electronic Material Office website was really striking I thought, though I didn't really use any ideas from this.