Hacker News Reader

Comment by oh-renovamen | Hacker News Reader

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.

View on HN

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.

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

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!

Come on way to buzzkill

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

Thanks for the correction :*

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”

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!

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

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

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

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.

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 ;)

It supports dark mode.

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.

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

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

Yeah, github1s is amazing!

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.

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.

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

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!

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

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

I know, Art. And thanks for noticing.

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?

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

Very nicely done!

Reply on news.ycombinator.com