4 ms·
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 work
by neom 3y ago
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 http://h4x.club
- tiborsaas 3y agoYou 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 3y agoWhoah, that's very cool! Looks great!! Thanks so much Tibor, appreciate it. :)
- lloeki 3y agoI 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 3y agoI'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 3y agoI think you mean to use "cat" instead of "pico" to show your text file. Otherwise it should draw pico's interface.
- mxuribe 3y ago@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 3y agoI do the same but use the VT323 Google Font: https://fonts.google.com/specimen/VT323 https://fonts.google.com/specimen/VT323