DEV Community

Cover image for My little personal website
Kai Neuwerth
Kai Neuwerth

Posted on • Edited on

My little personal website

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">
Enter fullscreen mode Exit fullscreen mode

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:

GitHub logo Crease29 / kai.neuwerth.me

๐ŸŽจ My personal website

Teaser image

๐ŸŽจ 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. ๐Ÿ˜Š Just place it in the 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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
jackharner profile image
Jack Harner ๐Ÿš€

What's the point of sharing your public SSH key?

Collapse
 
crease29 profile image
Kai Neuwerth • Edited

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?

Collapse
 
jackharner profile image
Jack Harner ๐Ÿš€

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.

Thread Thread
 
crease29 profile image
Kai Neuwerth

I guess I was just under the impression that you would still treat both halves of the SSH key like a password.

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.

Thread Thread
 
jackharner profile image
Jack Harner ๐Ÿš€

Ahh.. Ya, that definitely makes sense. Thanks for sharing the insight!

Collapse
 
voins profile image
Alexey Voinov

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 :)

Thread Thread
 
jackharner profile image
Jack Harner ๐Ÿš€

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?

Thread Thread
 
voins profile image
Alexey Voinov

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...

Collapse
 
crease29 profile image
Kai Neuwerth

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?

Collapse
 
crease29 profile image
Kai Neuwerth

Darn! You are right. Didn't see that :D thanks!

Collapse
 
anwar_nairi profile image
Anwar

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 :)

Collapse
 
crease29 profile image
Kai Neuwerth

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:

  • File size of assets/css/styles.min.css before: 7914 bytes
  • File size of assets/css/styles.min.css after: 7289 bytes

That's a good change. ๐Ÿ™‚ Thank you for the hint!

Collapse
 
moopet profile image
Ben Sinclair

Bug: if you open either "imprint" or "privacy policy" those links still stay visible but aren't clickable until you close the modal.

Collapse
 
crease29 profile image
Kai Neuwerth

Fixed. Thanks for the hint, Ben!

 
crease29 profile image
Kai Neuwerth

Not that often, but what about Google Tagmanager?