News for hackers. Stuff that matters.
Re:Show HN: A portfolio website simulating macOS's GUI using... by oh-renovamen on Saturday May 08, 2021 @04:12AM (#27085016)
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.

Re:Show HN: A portfolio website simulating macOS's GUI using... by OzzyB on Saturday May 08, 2021 @09:45AM (#27087069)
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.

Re:Show HN: A portfolio website simulating macOS's GUI using... by stevenhuang on Saturday May 08, 2021 @10:38AM (#27087491)
It's cool but it's an iframe over https://github.com/conwnet/github1s
Re:Show HN: A portfolio website simulating macOS's GUI using... by FabHK on Saturday May 08, 2021 @01:20PM (#27089032)
(Without distracting from your eulogy: "she" and "her", apparently.)
Re:Show HN: A portfolio website simulating macOS's GUI using... by OzzyB on Monday May 10, 2021 @08:14AM (#27105111)
Thanks for the correction :*
Re:Show HN: A portfolio website simulating macOS's GUI using... by smoldesu on Saturday May 08, 2021 @11:51AM (#27088228)
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!
Re:Show HN: A portfolio website simulating macOS's GUI using... by texasbigdata on Saturday May 08, 2021 @11:53AM (#27088253)
Come on way to buzzkill
Re:Show HN: A portfolio website simulating macOS's GUI using... by Terretta on Saturday May 08, 2021 @10:16AM (#27087328)
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”

Re:Show HN: A portfolio website simulating macOS's GUI using... by oh-renovamen on Saturday May 08, 2021 @11:30AM (#27088022)
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!

Re:Show HN: A portfolio website simulating macOS's GUI using... by unlimit on Saturday May 08, 2021 @07:03AM (#27085976)
This is crazy impressive. How many hours did it take?
Re:Show HN: A portfolio website simulating macOS's GUI using... by oh-renovamen on Saturday May 08, 2021 @11:32AM (#27088037)
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...

Re:Show HN: A portfolio website simulating macOS's GUI using... by nefitty on Saturday May 08, 2021 @12:53PM (#27088790)
10 days!! You might be a real life example of a 10x dev...
Re:Show HN: A portfolio website simulating macOS's GUI using... by poutrathor on Monday May 10, 2021 @06:16AM (#27104429)
the time line in the first day of commits is incredibly tight. Later commits frequency looks more on par with what I would expect. But many people don't commit for a while before their code starts working.
Re:Show HN: A portfolio website simulating macOS's GUI using... by gabereiser on Saturday May 08, 2021 @12:31PM (#27088570)
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 ;)
Re:Show HN: A portfolio website simulating macOS's GUI using... by shrimpx on Saturday May 08, 2021 @01:08PM (#27088926)
It supports dark mode.
Re:Show HN: A portfolio website simulating macOS's GUI using... by da39a3ee on Saturday May 08, 2021 @06:27AM (#27085745)
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.
Re:Show HN: A portfolio website simulating macOS's GUI using... by oefrha on Saturday May 08, 2021 @06:33AM (#27085782)
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

Re:Show HN: A portfolio website simulating macOS's GUI using... by da39a3ee on Saturday May 08, 2021 @06:39AM (#27085820)
Ohhh right, thanks! I did see that HN discussion so I should have spotted the github1s URL. Lots of fun tricks going on...
Re:Show HN: A portfolio website simulating macOS's GUI using... by oh-renovamen on Saturday May 08, 2021 @09:44AM (#27087058)
Yeah, github1s is amazing!
Re:Show HN: A portfolio website simulating macOS's GUI using... by gtm1260 on Saturday May 08, 2021 @05:57PM (#27091122)
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.
Re:Show HN: A portfolio website simulating macOS's GUI using... by dceddia on Saturday May 08, 2021 @01:30PM (#27089130)
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.

Re:Show HN: A portfolio website simulating macOS's GUI using... by log101 on Saturday May 08, 2021 @06:42AM (#27085833)
It seems awesome. But dock animation seems to stagger a bit, why is that? And can you solve it?
Re:Show HN: A portfolio website simulating macOS's GUI using... by exikyut on Saturday May 08, 2021 @12:08PM (#27088372)
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?

Re:Show HN: A portfolio website simulating macOS's GUI using... by oh-renovamen on Saturday May 08, 2021 @09:43AM (#27087050)
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!
Re:Show HN: A portfolio website simulating macOS's GUI using... by borski on Saturday May 08, 2021 @12:09PM (#27088383)
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. :)

Re:Show HN: A portfolio website simulating macOS's GUI using... by iseanstevens on Saturday May 08, 2021 @03:23PM (#27089951)
You must be absurdly exceptional at whatever it is you ARE good at!
Re:Show HN: A portfolio website simulating macOS's GUI using... by tyingq on Saturday May 08, 2021 @10:04AM (#27087235)
I know, Art. And thanks for noticing.
Re:Show HN: A portfolio website simulating macOS's GUI using... by aeoleonn on Saturday May 08, 2021 @11:59AM (#27088294)
it's beautiful, innovative, and inspiring! well done!
Re:Show HN: A portfolio website simulating macOS's GUI using... by monkey_monkey on Saturday May 08, 2021 @05:45AM (#27085505)
Very nicely done!