[neom]

That's how I tried to make my personal website look!

I actually asked GPT3 to write the code for me. I'm not a SWE so I'm not sure how well it did, but it works!

http://h4x.club

[tiborsaas]

You could add these styles to get closer to the CRT look:

Add these to the body style:

    text-shadow: 1px 1px 6px #8aff00;
    filter: blur(0.3px);
    background-image: repeating-linear-gradient( to bottom, rgb(0 0 0), rgb(0 255 76 / 7%) 3px, rgb(100 100 100 / 23%) 7px );

Also bump the font-size to 18px, it looks a bit better imho.

[neom]

Whoah, that's very cool! Looks great!! Thanks so much Tibor, appreciate it. :)

[lloeki]

I did something like that a year ago for mine (but never published it), complete with scanlines, glow, and beam scan effect. It also handles images as well, making them monochrome, tinted, and subject to scanline bleeding as well. All in CSS so it's very fake but somewhat convincing, and probably not the most optimal way to do it (CPU is like 40% pegged)

[tiborsaas]

I've also made an indie music TV project with this CRT effect and some text animation for retro terminal vibes. If you wait a bit, the ui glitches :) Fun fact, my USB-C monitor connections has a contact error and it produces a similar glitch effect.

(I have a link to it in my bio)

[surteen]

I think you mean to use "cat" instead of "pico" to show your text file. Otherwise it should draw pico's interface.

[mxuribe]

@neom Your site looked great even before the recent css/styling from @tiborsaas , and now looks even better! Kudos! (I'm such a fan of the look-and-feel from things like Cool Retro terminal, etc.)

[ja27]

I do the same but use the VT323 Google Font: https://fonts.google.com/specimen/VT323