Hi devs,
this is my first post on dev.to and I don't know if it is the right place to share my personal website but I want to give you a little insight what I found interesting while building it.
So on a free sunday I just had the idea to create a tiny personal site to be a bit creative, share my social network accounts and SSH & OpenPGP keys.
I finalized the "design" and wrote down the HTML, CSS & JS. I tested the PageSpeed score with GTmetrix and had a pretty bad score. Fortunately GTmetrix provides some really good guides on how to improve certain criterias. Activated some caching here, enabled some webserver mods there and optimized some assets over there: Neat!
After that I digged a bit deeper in performance on the loading. There was this flash of contents that really annoyed me.
Maybe you see, that there is a video looping in the background (maybe not in Safari because Apple blocks auto-playing videos 🤦). So I had to bridge that time before the background video was loaded. The simple solution was just to take the first frame of the background video as background image. That worked great! 🙂
I also added some dns-prefetch tags to improve the loading of external assets:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.googletagmanager.com">
Overall it was interesting to see how granular, even the smallest website, can be optimized.
If you have any questions, critique, improvements or similar experiences, I'd be glad if you just answer here!
The code of my website is also, for sure:
Crease29
/
kai.neuwerth.me
🎨 My personal website
🎨 My personal website: kai.neuwerth.me
This repository holds my own static website. You can see the production state right here.
I'm sorry, that I can't ship the background video that is running there because of the license,
but I'm sure you will pick your own background video anyways. assets/webm/ directory
and link it in the index.html.
Set up for development
git clone git@github.com:Crease29/kai.neuwerth.me.git
cd kai.neuwerth.me
npm install
grunt build
Feel free to use this codebase
I'd be happy if you just like this setup and "theme" and use it for your own website.
Feel free to leave an issue if you have problems or just want to share what you have done out of it.
Thanks for reading this!
Kai
Top comments (19)
What's the point of sharing your public SSH key?
That is a really good question, Jack! I added this because sometimes I don't have my key available. For example on my mobile phone. Then I either tell the one who needs it that she/he can copy it from there.
I don't see a security issue here because the private key can't be generated from the public key.
Also this key is more a temporary key as I always generate a new one for a server. This key is used as first entry key for simplicity and then I replace it with the new one I have generated.
Do you see any security issue when sharing a public key?
I guess I was just under the impression that you would still treat both halves of the SSH key like a password. But I guess I've also never been in a place where I needed SSH access to something where I didn't have the generated keys from that machine already installed.
To be honest it's not possible for me to keep my public key private because I have access to so many different customer's servers.
That's the reason why I create a new key pair for almost every server.
So in most cases, especially when I'm not on my computer, it's just easier for me, to tell someone that she/he can find my public key on my website and I'll replace my key with the new one later.
Ahh.. Ya, that definitely makes sense. Thanks for sharing the insight!
Good point, actually. You give away your public key to some other parties anyway, and you cannot trust them. So yeah, it's a good idea :)
I assume it's mostly a "Hey, you're giving me access to your server. Here's my public key to get access" kind of thing right? I assume there are other scenarios where you'd need to give out the public key?
I can't think of any. I guess even if there are, they fall into 1% of the cases.
Look what I've found: security.stackexchange.com/questio...
I removed the prerender and preconnect instructions for my own domain. That was truely not necessary.
Would you really self-host all external resources including Google Tagmanager and all Google Fonts assets? How would you keep them up-to-date?
Darn! You are right. Didn't see that :D thanks!
Did you used a bundle system for your assets? I ask because I saw your CSS assets could be improved by 12% by trimming useless styles (since you talked about optimizations, which is for me the most exciting part of a website). I checked this number using Chrome WebTools Code Coverage. I recently used NPM purify-css, which works like a charm for removing useless CSS rules. Just droping it here :)
Yes, I'm using grunt and grunt-contrib-less to generate my CSS and minify it. Maybe it's not the best compression but GTmetrix tells me my CSS can only be minified one more percent.
I gave purifycss a try:
assets/css/styles.min.cssbefore: 7914 bytesassets/css/styles.min.cssafter: 7289 bytesThat's a good change. 🙂 Thank you for the hint!
Bug: if you open either "imprint" or "privacy policy" those links still stay visible but aren't clickable until you close the modal.
Fixed. Thanks for the hint, Ben!
Not that often, but what about Google Tagmanager?