4 ms·

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

30 points by whitetheace 5y ago

whitetheace 5y ago
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 https://GoodManWEN.github.io github repo: https://github.com/GoodManWEN/GoodManWEN.github.io https://github.com/GoodManWEN/GoodManWEN.github.io Any comments and suggestions are very welcome, hope you enjoy it :)
- akmittal 5y ago
  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 5y ago
    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 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 5y ago
  That is really cool man. You seem to have nailed the styles perfectly.
deleted 5y ago
[deleted]
lights0123 5y ago
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 5y ago
  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 5y ago
    > 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.

30 points by whitetheace 5y ago

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 https://GoodManWEN.github.io github repo: https://github.com/GoodManWEN/GoodManWEN.github.io https://github.com/GoodManWEN/GoodManWEN.github.io Any comments and suggestions are very welcome, hope you enjoy it :)

akmittal 5y ago
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 5y ago
  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 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 5y ago
That is really cool man. You seem to have nailed the styles perfectly.

deleted 5y ago

[deleted]

lights0123 5y ago

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 5y ago
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 5y ago
  > 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.