Show HN: A portfolio website simulating Deepin Linux's GUI using Vue.js

whitetheace · on May 9, 2021

Hi everyone, I've recently made a web project simulating linux system's GUI, using theme of Deepin distro. Which is inspired by a recently very popular react-made Ubuntu website (vivek9patel.github.io). Considering there's no one uses Vue for similar projects at the moment, I hope to help provide a reference for other contributors in the Vue community.

DEMO url: https://GoodManWEN.github.io

github repo: https://github.com/GoodManWEN/GoodManWEN.github.io

Any comments and suggestions are very welcome, hope you enjoy it :)

akmittal · on May 9, 2021

This seems great, kudos for this.

There are quite a lot of project which emulator MacOS, Windows, Ubuntu. I am always surprised by attention to detail. Like it can open files, wow. Its has a terminal too.

whitetheace · on May 9, 2021

Aha, thanks for support! It's nice to hear responses as it's my first time using hacker news, learn about here from friend posting his MacOS simulating(https://news.ycombinator.com/item?id=27084995), I've been concerned about whether my posting meets the rules XD.

What makes this project a little bit different from others is that it implements a window sorting system & focus logic.

graderjs · on May 10, 2021

That is really cool man. You seem to have nailed the styles perfectly.

lights0123 · on May 9, 2021

If your OS/browser hides scroll bars, make sure you test with them always on. The notification panel has tw-overflow-scroll as a property, which makes it always show vertical and horizontal scroll bars even when not needed.

whitetheace · on May 9, 2021

Thanks for reply. Appreciate any issue to help this project improve if there's bugs in UI logic. With regard to the problem, scroll bar is set to have 0 pixel width by default, it's a behavior not expected If it shows up in your browser.

shakna · on May 10, 2021

> With regard to the problem, scroll bar is set to have 0 pixel width by default, it's a behavior not expected If it shows up in your browser.

That isn't correct.

> UAs should enforce a minimum actual size of scrollbar width per WCAG 2.1 SC 2.5.5 Target Size

If you want the scrollbar not to appear, then the width must be set to 'none':

> 'none' - implementations must not display any scrollbar, however the element’s scrollability is not affected.