[oh-renovamen]

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.

[OzzyB]

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.

[stevenhuang]

It's cool but it's an iframe over https://github.com/conwnet/github1s

[FabHK]

(Without distracting from your eulogy: "she" and "her", apparently.)

[OzzyB]

Thanks for the correction :*

[smoldesu]

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]

Come on way to buzzkill

[Terretta]

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]

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!

[unlimit]

This is crazy impressive. How many hours did it take?

[oh-renovamen]

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]

10 days!! You might be a real life example of a 10x dev...

[poutrathor]

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.

[gabereiser]

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]

It supports dark mode.

[da39a3ee]

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]

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

[da39a3ee]

Ohhh right, thanks! I did see that HN discussion so I should have spotted the github1s URL. Lots of fun tricks going on...

[oh-renovamen]

Yeah, github1s is amazing!

[gtm1260]

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.

[dceddia]

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.

[log101]

It seems awesome. But dock animation seems to stagger a bit, why is that? And can you solve it?

[exikyut]

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?

[oh-renovamen]

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!

[borski]

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. :)

[iseanstevens]

You must be absurdly exceptional at whatever it is you ARE good at!

[tyingq]

I know, Art. And thanks for noticing.

[aeoleonn]

it's beautiful, innovative, and inspiring! well done!

[monkey_monkey]

Very nicely done!