[HN Gopher] Show HN: A portfolio website simulating macOS's GUI ... ___________________________________________________________________ Show HN: A portfolio website simulating macOS's GUI using React Author : oh-renovamen Score : 562 points Date : 2021-05-08 08:09 UTC (14 hours ago) (HTM) web link (portfolio.zxh.io) (TXT) w3m dump (portfolio.zxh.io) | catchmeifyoucan wrote: | What blew my mind most was the subtle brand placements. Bear App, | and Gitpod - never used these things before, and now I'm reading | about them. | | This is a really cool website! Well done. | statictype wrote: | The damn thing is responsive too. Amazing | threesquared wrote: | I love how the meta description still says "Web site created | using create-react-app" | gaoryrt wrote: | good good | agmm wrote: | Go to the terminal an run "cat my-dream.cpp" | 29athrowaway wrote: | He also created this: https://cube.zxh.io/ | oh-renovamen wrote: | I'm glad that you noticed this project, have fun! | 29athrowaway wrote: | It's pretty neat although I am unfamiliar with the algorithms | for cubing, it looks pretty neat. | temporallobe wrote: | In the terminal, type rm -rf for a special treat... | oh-renovamen wrote: | I'm glad you found that hahah | oh-renovamen wrote: | I never expected so much attention and feedback, thank you all! | | Also, if you want to see a portfolio simulating Deepin (a Linux | distribution) developed with Vue, check this: | | https://goodmanwen.github.io/ | mjthompson wrote: | The attention to detail is breathtaking. | raju wrote: | This has been echoed in virtually every comment here, but I have | to say it--This is brilliant. Everything about it is stellar! | | It really looks like MacOS (I made the same mistake as | @chrismorgan in another comment) and accidentally closed the tab | with [?]-w). The attention to detail, the easter eggs--I really | have no words but to say, great work! Wow. | satysin wrote: | This is fantastically done. Great job! | LaputanMachine wrote: | You can even open the website recursively within its own "Safari" | window. The recursion depth seems to be limited to one though. | Nice easter egg nonetheless. | | Edit: It's possible to bypass the recursion limit. First open the | "Blog" bookmark on the Safari start page. Use Inspect Element on | the "portfolio" link at the top right, and remove | target="_blank" | | from the HTML. Open the portfolio and enjoy infinite recursion. | spamalot159 wrote: | Someone should try to write a copy of this inside the VSCode | editor in the site. | FeelTheBerns wrote: | Bruh | h4l0 wrote: | I didn't experience a recursion limit when I just tried it. | Maybe the site was updated after your comment? I'm using | Firefox. | LaputanMachine wrote: | It's still not working for me for some reason. | | In the second recursion step, when entering the URL manually, | the tab remains blank. If I instead try to click on the | unedited "portfolio" link, the site opens in a new (native) | tab. | | Happens on Safari and Firefox (macOS) as well as Chromium | (Debian). | neogodless wrote: | I did notice if you have a trailing slash, and you remove | it... it usually loads then. | neogodless wrote: | Same here - Firefox on Windows 10. I only went about three | deep but... neat! | auroranil wrote: | Interesting. It is using iframes behind the scenes. According | to W3C it should limit the recursion depth to one, but it seems | that you can get around that. | | Relevant: https://www.bryanbraun.com/2021/03/24/infinitely- | nested-ifra... | hit8run wrote: | The future of the desktop? Bring your phone, connect it to a big | screen and use the webdesktop? | EvilEy3 wrote: | You can already do that with Android. | [deleted] | FabHK wrote: | Haha :-) In the Terminal: zou@macbook-pro ~ > cat | my-dream.cpp while(sleeping) { money++; | } | TradingPlaces wrote: | That's the headline feature | thomasjudge wrote: | Responsiveness is very good | julienreszka wrote: | "Copying is our superpower" | frereubu wrote: | This is fun, but in some ways it's too good - after a minute | playing around with it I went to use command + W to close a | terminal window and of course it closed the browser window! | jhgb wrote: | You meant "too bad", since you'd expect a "too good" | implementation to actually close the terminal window? | isomorph wrote: | It was "too good" in the sense that it was realistic enough | that they forgot they were in a simulation, and thought the | terminal window was a real native macOS window | jhgb wrote: | But a realistic simulation would have closed the terminal | window. | isomorph wrote: | It was realistic enough to make them expect that their | keyboard shortcut would close the window. It wasn't | realistic enough to actually do that. So the visual UI | was too realistic for them to not have that expectation, | but the behaviour was not realistic enough for it to | fulfil the expectation. | jhgb wrote: | That's what seemed confusing to me, since "it was so | realistic that it didn't do what I expected when I | pressed a certain key combination" seemed like a weird | juxtaposition. Maybe it was the dash... | Kiro wrote: | You're completely missing the point. | jhgb wrote: | That is always possible but also often far from certain. | m_antis89 wrote: | Do keep up your self-righteous attitude. It will benefit | you greatly in 5-10 years and we need more like you. | jhgb wrote: | Why, is something specific scheduled to happen in 5-10 | years? | | Also, I'm not sure why I should consider myself "acting | in accord with divine or moral law". I've never done even | that, much less have I been "convinced of [my] own | righteousness especially in contrast with the actions and | beliefs of others". That would seem utterly pointless. | reasonabl_human wrote: | Responds to accusations of self-righteousness via a self- | righteous pedantic critique. Too bad you can't use the | clown emoji on HN ;) | jhgb wrote: | > self-righteous | | Again, I'm not even striving to be "acting in accord with | divine or moral law". So, no. | Aeolun wrote: | Wouldn't self-righteous for an atheist be more like | 'acting in accordance with my personal moral law'? | | Or maybe more acting like your own personal morals are | superior to everyone elses. | jhgb wrote: | Maybe, but "my personal moral law" doesn't even come into | play here, so I don't see how it could be possibly | relevant. The topic is not a morality question so it's a | category error. | chrismorgan wrote: | When I was done looking around I tried the litmus test of | Ctrl+W (erase word) in a terminal, given that Ctrl+U (erase | line) had already worked. And that was the end of that (Linux, | Ctrl+W closes the tab). :-) | ftio wrote: | I did the same. After using the site's Spotlight once, I used | Cmd+Space to try it again and was blown away by how complete | the app list was. "The attention to detail is incredible," I | thought. "These are almost the exact apps I have on _my_ Mac. " | | Haven't had my Saturday-morning coffee yet, but I think the | realism and attention to detail are really impressive. (Check | out the Terminal app if you haven't.) | FabHK wrote: | > but in some ways it's too good | | Indeed. I typed "rm -rf /" into the "terminal" in the web | browser, and it cost me quite some nerve to actually hit Enter. | imapeopleperson wrote: | Why are you even looking for a job? | jspash wrote: | Have you seen how many Javascript dev there are out there? I | wish I was kidding, but I don't remember the last time a CV | crossed my desk that didn't have JS as a core ability or at | least mentioned in passing. And that's for non-webdev roles. | Data analysts and BI is what we've been hiring for lately. And | it seems like everyone these days likes to dabble at the | weekend in some JS. | | But yea you are correct, this person would have no trouble | getting hired. | kyawzazaw wrote: | Work visa issues | leeoniya wrote: | > using React | | and a performance profile shows absolutely insane JS overhead (in | React) when simply dragging a window. compare this to something | like https://nextapps-de.github.io/winbox/, and you start to | wonder if "the React way" is really best-suited for everything | that people use it for. | ChrisMarshallNY wrote: | That's awesome! | | Great portfolio! | dorianmariefr wrote: | I'm pretty sure some people enter their real passwords :) | oh-renovamen wrote: | Yeah, this has already happened :) | xialvjun wrote: | Impressive. All your works. | davnicwil wrote: | This is absolutely amazing. | | It's so convincing that, on an iPhone, I went to one of the | applications with camera, got a camera permission dialog, assumed | it was part of the mocked up UI and clicked through... then was a | bit surprised to see that it was actually using my camera feed! | | The UI was of course the actual iOS safari permission dialog :-) | [deleted] | crazypython wrote: | It includes its own terminal: https://i.imgur.com/sdxOHqr.png | | I was able to play the alpha of my game in the embedded Safari! | https://i.imgur.com/PWCYEZP.png | | Really interesting how iframes are an underused tool. | sverhagen wrote: | Isn't that the backlash of them having been an overused tool in | the past? | jonas_kgomo wrote: | Frist I was like, this is really cool, then I started thinking | what inspired you to do this, as I noticed that most things are | functional: vs code works, search works etc. | deadcoder0904 wrote: | This is so fucking cool. `cat` doesn't work in Terminal. Probably | put a bunch of basic commands for someone curious. | oh-renovamen wrote: | That's strange, `cat` is supposed to work well. What did you | `cat`? | tyingq wrote: | You probably cat-ted a directory, like the "about" directory. | floydnoel wrote: | I used `cat my-dream.cpp` with no issue | danielmeskin wrote: | Worked for me, what did you `cat`? | FabHK wrote: | `cat` works just fine, but `more` or `less` are "not installed" | :-) | jfmercer wrote: | This is brilliant work! I hope that Apple doesn't hit you with a | takedown order. | s09dfhks wrote: | Some advice: Remove the furry stuff. No ones going to want to | work with you | EvilEy3 wrote: | Not a fan of furry, but wouldn't mind as long as they keep that | stuff in their personal life outside of work. | epse wrote: | Why? | sgt wrote: | Dragging windows is extremely slow. | blunte wrote: | The fake terminal had impressively low typing latency. | | Overall this portfolio was really well done! | Thomaschris wrote: | Wow!! Very cool!! | amitmerchant wrote: | If you want to see Ubuntu 20.04 in action, check this. | | https://vivek9patel.github.io/ | oh-renovamen wrote: | I noticed this Ubuntu themed portfolio after spending two or | three days on my project. Its awesome and give me much | inspiration, many thanks to the author. So I'm not the first | one to think of the idea hhh. | neogodless wrote: | After playing with inception on the original, and seeing | this... I couldn't resist trying this: | | https://imgur.com/a/qTcOqAv | tiborsaas wrote: | It's really fun, but after spending a few minutes playing with | the app, I haven't seen his works and don't remember who made | this. | oh-renovamen wrote: | In fact I have the same concern with you. This is my first | React project and I just started it for learning propose. Then | I need some content to fill it, so I put some of my information | and projects in. After that, just as what you said, I realized | that this "portfolio website" is a little bit too much for my | poor open-source projects hahaha. | | Any way, this project is just for fun and I never expected to | find a job through this. Thank you for liking it! | ricardobayes wrote: | How did you host this? | luke2m wrote: | looks like vercel | oh-renovamen wrote: | Yep, vercel. | max23_ wrote: | This is neat! You also did the auto-complete for the terminal | (muscle memory as I 'tab' on it) :) | montebicyclelo wrote: | Fantastic. Very fun, with great attention to detail, e.g. the | dock animations. | Liskni_si wrote: | First thing that came to my mind when I opened this: hey let's | test if maximization is just as broken as in real MacOS. And oh | my god it is indeed! Safari won't maximize to the entire screen, | just like in the real thing, and other apps like the terminal | maximize correctly. Wow, this level of attention to detail is | really crazy! :-) | charrondev wrote: | I quite like window management through | https://magnet.crowdcafe.com/ magnet. | | You get keyboard shortcuts for tiling things and can drag/snap | to edges of the screen. | resist_futility wrote: | Double click the top/title bar to maximize a window, it's | easier to hit since you have one giant area at the top of the | window to click on too | fiddlerwoaroof wrote: | macOS's zoom functionality isn't broken, it's just content-size | based rather than screen-size based: I like this, but some | applications to implement the necessary hints and so it falls | back to zooming to full screen. | | macOS's resizing has some useful functionality here: dragging | an edge resizes in that direction, double-clicking an edge | maximizes in that direction (including diagonally) and | option+any of these resizes the opposite side of the window as | well. So, if you hold option and double-click a corner, it'll | do a Windows-style maximize. | thiht wrote: | > macOS's zoom functionality isn't broken, it's just content- | size based rather than screen-size based | | So it is indeed broken. The fact that it's not humanly | possible to fullscreen Safari without Spectacle/Rectangle | clearly means it's broken, whether it's what th ey wanted or | not. | fiddlerwoaroof wrote: | I generally prefer the content-based zoom functionality. | This is a case of people not used to the Mac conventions | disliking that Macs don't work like Windows. | | And, as I've pointed out, both behaviors are possible on | macOS out of the box. | thiht wrote: | > I generally prefer the content-based zoom functionality | | Why? This makes absolutely no sense. It's the same thing | as macOS' windows not closing when you close them. It's | stupid. They should copy Windows on what makes sense. | fiddlerwoaroof wrote: | Because I use a 55" TV a lot, and it's useful to make | Preview or whatever just big enough that I can see an | entire page without being too big to fit in the | "comfortable reading" part of the screen. (I also like | the App/Window/Document model of macOS) | einherjae wrote: | Why does it make sense that an application must have | windows to keep running? | anoncake wrote: | It's more intuitive for non-technical users, in my | experience. | lazide wrote: | Not doing that results in closing everything you can see | easily in the GUI but it's still burning RAM and being | obnoxious where you can't easily see it. If I wanted that | to happen, I'd tell it to do that. | wruza wrote: | Maximizing sites that take 1024 px out of 1920 or even | 2560 px doesn't really make any sense. | | _macOS ' windows not closing when you close them_ | | Windows' apps closing when you close their windows is no | less absurd. The same for forcing you to either save or | discard documents on quit/reboot. | amyjess wrote: | I don't want to have any non-maximized windows on my | screen. I despise overlapping windows, and I want every | single application I run to be full-screen, just like on | a phone. | reaperducer wrote: | _I want every single application I run to be full-screen, | just like on a phone._ | | So run them in full-screen mode. No one is stopping you. | | I hardly ever run into a program on macOS that doesn't | support full-screen. View - Enter Full Screen, or | Control+Option+F. | thiht wrote: | > Windows' apps closing when you close their windows is | no less absurd | | ??? | fiddlerwoaroof wrote: | With macOS's setup, I can command-tab to any open app | (e.g. preview), hit the up arrow and then use the arrow | keys to quickly open a recent document. Without the app | model macOS uses, this is a lot less convenient, and I | miss it every time I use my KDE Plasma Desktop. | anoncake wrote: | If you use the cascading Application Menu widget, Win -- | Arrow Down -- Arrow Right gets you to the recent files | menu. | user-the-name wrote: | Why, if I want to close one document and open another, | should it matter which order I do this in? | tambourine_man wrote: | The Mac has behaved like that since the classic days. This | is the platform that invented overlapping windows. They | aren't supposed to be maximized, as it's almost always a | waste of screen real estate. | | You're just used to other platforms. | lazide wrote: | Then why does basically every other application, | including Apple provided ones, work correctly? | dreamer7 wrote: | Best to just install Rectangle app (formerly Spectacle) and | use sane shortcuts like alt+option+enter for full screen. | jorvi wrote: | I use and like Rectangle a lot, but fullscreening an app on | macOS brings real performance and battery benefits. It's | not just fancy for being fancy. | sverhagen wrote: | How is this, does it put other applications to sleep or | something? | jeroenhd wrote: | > So, if you hold option and double-click a corner, it'll do | a Windows-style maximize. | | I've used Linux command lines with more discoverability than | that. Good to know if I ever need to use macOS, though, | that's a nice trick. | fiddlerwoaroof wrote: | It depends what you mean by discoverable: option+mouse | action is a pretty standard macOS convention for alternate | behavior and "double-click == drag all the way" isn't | unreasonable. The behavior of option+double-click is | discoverable by simple composition of these features. | | Also, most of this sort of functionality is documented in | the built-in help system accessible through the help menu. | mirzmaster wrote: | Perhaps more intuitively, you can also option+click on | the green 'maximize' bubble to maximize the window. | nactivint wrote: | I used macOS for about seven years before someone told me | about this behavior. Never would've found it, otherwise. | | I guess if I had been using it for twenty years I | would've known about those old patterns you describe and | would've thought to randomly try that key combination. | | A tooltip at some point would've gone a long way. Pretty | much an impossible feature to discover unless you're a | toddler randomly pressing buttons or a greybeard that | remembers OS 9 | wruza wrote: | If only there was a website that could provide few | relevant links to the "macos tips and tricks" query. | jspash wrote: | macOS user here since 2006. and i never knew about this | or even thought to hold a button and click. you learn | something new every day! | boraoztunc wrote: | +1 | diskzero wrote: | Apple Finder engineer here from 2000 - 2006 and would | never have guessed about double-clicking or option- | clicking window edges. This seems more like something I | would have added to the Nautilus code in 1999. | fiddlerwoaroof wrote: | (The option+mouse action is also a natural extension of | the longstanding macOS convention that control+click == | right click.) | fastball wrote: | For anyone that hates resizing windows in general on a mac, | I've found the combination of using a Hyper Key[1] + Moom[2] to | be amazingly ergonomic. | | Here's a quick demo[3] of what this looks like on my machine. | | [1] https://brettterpstra.com/2017/06/15/a-hyper-key-with- | karabi... | | [2] https://manytricks.com/moom/ | | [3] https://my.supernotes.app/share/wire+unaware+noble+meadow | [deleted] | forgotpwd16 wrote: | Make a PR at https://github.com/syxanash/awesome-web-desktops | oh-renovamen wrote: | Thanks! Will do it! | mfbx9da4 wrote: | looks similar to https://macos.vercel.app/ | joshmanders wrote: | Well yeah, it's gonna look similar. It's a simulation of macOS | operating system. | strogonoff wrote: | Typeface choice is strange, system font stack could make it look | much more like macOS. | oh-renovamen wrote: | You are right, I just picked the font arbitrarily. I'll move to | more appropriate fonts later, thank you! | djxfade wrote: | Only if your browsing from a Mac with the appropriate system | font | strogonoff wrote: | It's not an either-or. | warpech wrote: | Amazing work with writing the Terminal component by yourself. | Very lean and well functional for its purpose. | | For those who are interested to see the source: | https://github.com/Renovamen/playground-macos/blob/main/src/... | atonse wrote: | I mean will you ever be unemployed with this set of skills?? | oh-renovamen wrote: | Hi! I'm recently working on a portfolio website simulating macOS | using React and tailwindcss. The style is between macOS Big Sur | and Catalina (in another word, I picked out and combined my | favorite parts from these two versions). | | Here's the link to website and Github: | | Website: https://portfolio.zxh.io | | Github: https://github.com/Renovamen/playground-macos | | I appreciate any feedback or suggestions. | log101 wrote: | It seems awesome. But dock animation seems to stagger a bit, | why is that? And can you solve it? | tyingq wrote: | I know, Art. And thanks for noticing. | oh-renovamen wrote: | You are right, but I'm not good at frontend so I'm sure I can | solve it hhh. Hope I can find out a solution one day. Thanks! | iseanstevens wrote: | You must be absurdly exceptional at whatever it is you ARE | good at! | borski wrote: | I'm going to challenge your assertion of "not being good at | frontend" based on this submission heh. You should try to | stop seeing yourself that way. | | I _dont't like_ frontend work, but that's different from | being bad at it. :) | exikyut wrote: | FWIW, in Chrome (Dev) on Linux, with hardware decode and 2D | GPU raster enabled, on a fairly old laptop that occasionally | sees GPU process hangs, it's _perfectly smooth_, and try as I | might I can't make it skip frames. The icons jitter around a | tiny bit as they change size, but I can't get it to produce | jank. | | What browser/hardware? | unlimit wrote: | This is crazy impressive. How many hours did it take? | oh-renovamen wrote: | See the commit history: | https://github.com/Renovamen/playground-macos/commits/main | | I started it about 10 days ago, but it's hard to calculate | out the exact number of hours... | nefitty wrote: | 10 days!! You might be a real life example of a 10x dev... | aeoleonn wrote: | it's beautiful, innovative, and inspiring! well done! | da39a3ee wrote: | Wow, this is impressive and quite crazy! Ok so how does the VS | Code thing work? I browsed the source (in VS Code in your | website of course) and found the VS code component but I didn't | quite understand -- it seemed to just be an iframe pointing at | the README src. And yet it appeared sufficiently like I was | actually in a VSCode instance to fool me. | oefrha wrote: | Yes, it's an iframe embedding a third party service, | https://github1s.com/. "It appeared sufficiently like I was | actually in a VSCode instance" because it is a VSCode | instance. | | Source code here: https://github.com/conwnet/github1s | | Discussed a while ago: | https://news.ycombinator.com/item?id=26083919 | oh-renovamen wrote: | Yeah, github1s is amazing! | da39a3ee wrote: | Ohhh right, thanks! I did see that HN discussion so I | should have spotted the github1s URL. Lots of fun tricks | going on... | gtm1260 wrote: | Awesome! You should see if you can get the dock magnification | to feel more like the native dock. Would be a research project | in and of itself, and the current version is still great. | gabereiser wrote: | I've been building sites for 20 years, I've recently picked up | react and seeing the code, it's a great example of react so | thanks for this! Second, kudos for recreating macos! The design | is really where macOS shines along with the subtle animations | and you nailed it. I grew up on System8/9 and miss that | aesthetic but still cool none the less. Now, support dark mode | ;) | shrimpx wrote: | It supports dark mode. | monkey_monkey wrote: | Very nicely done! | OzzyB wrote: | At first I was like: Oh, ok, another one of these "here's my | portfolio that looks like an OS" deals. | | Then I was like: Cool, look how he got the nice Dock animation | down, I bet it took him hours to sort that out. | | And then I opened VS Code and I had to write to tell you how my | mind was blown. | | Kudos, senpai. | smoldesu wrote: | Like the other commenter said, it's not that impressive | considering that VS Code was already written in Javascript | and open-source, so the porting effort required here isn't as | big as it seems. Still a neat project though! | texasbigdata wrote: | Come on way to buzzkill | stevenhuang wrote: | It's cool but it's an iframe over | https://github.com/conwnet/github1s | FabHK wrote: | (Without distracting from your eulogy: "she" and "her", | apparently.) | [deleted] | Terretta wrote: | This is fantastic, and it should help you get hired! | | In late 90s, I got a gig in part by demo-ing my own personal MS | Outlook emulator web front end (backed by ColdFusion POP3/SMTP | calls). It was entertaining getting a 1996 browser to look and | behave like Outlook -- had to love frames and multipart server | push. | | Seeing Bear, Terminal, and VSCode here are all both delightful | and impressive. | | Typo feedback: | | "In the last sever days, Safari has prevent 95 tracker from | profiling you" --> "In the last several [seven?] days, Safari | has prevented 95 trackers from profiling you" | oh-renovamen wrote: | Thank you for your nice words! | | It sounds amazing and quite hard to achieve that in 90s, | awesome job! | | I'll fix the typo later, thanks! | dceddia wrote: | Amazingly well done, nice work! | | The mind-blown moment for me was when I typed `cat my-` into | the terminal and hit Tab, and it actually tab-completed the | filename :D Nice touch. | htk wrote: | I spent way too much time on this. And on my phone! | clustrfunk wrote: | React is so cool, wish I had the time to mess around with it. | Cool stuff! | cube00 wrote: | Dedicate a small amount of time (even if it's only an hour) | each week, read a little doco, hack a little code, progress may | be slow but that's ok because it's still progress. If you wait | until "you have the time" it'll never happen. | tdhz77 wrote: | I think I need to start making a collection of these awesome | portfolio websites that I've been seeing. If you have a cool | personal website will you post it here? | boraoztunc wrote: | Really inspiring. Also pulling this off in 10 days is quite | something as well. Bravo! | [deleted] | input_sh wrote: | Looks great! The only real complaint I have is that I can't tell | which links will open in a new tab vs which ones will work within | a tab. | | Oh and I found a typo in Safari: | | > In the last _sever_ days, Safari has prevent 66 tracker from | profiling you. | | I'm assuming that should be seven. | oh-renovamen wrote: | Nice catch! Will fix it later, thank you! | josephg wrote: | Very cool! Small tweak - MacOS adds a tiny 1px border around each | window, so if two windows partially overlap they don't blend | together into UI soup. | | I'd never consciously noticed that aspect of macos before, but | this small detail instantly threw the window border into uncanny | territory for me. I had to zoom in on both sites to spot what was | going on! | oh-renovamen wrote: | Oh, nice catch! I have used macos for about 5 years but I'd | never noticed that either. I'll add a border later, thank you! ___________________________________________________________________ (page generated 2021-05-08 23:00 UTC)