The latest articles on DEV Community by Lufutu (@lufutu). https://dev.to/lufutu https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F100232%2F49292a0f-f92b-4f96-9eef-41e1979823ce.jpeg https://dev.to/lufutu en Lufutu Tue, 08 Jul 2025 10:47:42 +0000 https://dev.to/lufutu/i-made-a-retro-os-for-my-personal-page-4aaj https://dev.to/lufutu/i-made-a-retro-os-for-my-personal-page-4aaj <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk5ydaxwm4fz6bxj6sd89.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk5ydaxwm4fz6bxj6sd89.png" alt="lufutu.com" width="800" height="499"></a><br> I’ve always been fascinated by the charm of old-school operating systems — the pixel icons, blocky UI, and the delightful clicky aesthetics of the late '90s and early 2000s. So I thought: <strong>why not bring that experience to the web?</strong></p> <p>That’s how my personal site turned into a <strong>retro-style operating system UI</strong> — complete with pixel-art icons, draggable windows, fake file explorers, and nostalgic system sounds.</p> <h2> 🖼️ Design: Pixel-Perfect Nostalgia </h2> <p>The whole interface is built to feel like you're using a hybrid of <strong>Windows 98</strong>, <strong>early XP</strong>, and a bit of <strong>DOS</strong> for flavor.</p> <p>I designed (or curated) a custom <strong>sprite sheet of 24 pixel icons</strong> — from the classic <em>My Computer</em> to <em>Minesweeper</em> and <em>floppy disks</em> — all rendered in a consistent <strong>16-bit pixel style</strong> with transparent backgrounds for web or game use.</p> <blockquote> <p>These icons aren’t just decorative — they’re interactive.<br><br> Click one, and it opens a faux window just like on your old desktop.</p> </blockquote> <p>👉 <a href="https://lufutu.com" rel="noopener noreferrer"><strong>lufutu.com</strong></a> — My retro OS homepage </p> pixelart retro Lufutu Fri, 14 Feb 2020 10:26:01 +0000 https://dev.to/lufutu/goo-sidebar-172g https://dev.to/lufutu/goo-sidebar-172g <p>A sidebar menu with GSAP</p> <p><iframe height="600" src="https://codepen.io/lufutu/embed/BaNoXWL?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen