5 ms·

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,

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 https://portfolio.zxh.io Github: https://github.com/Renovamen/playground-macos https://github.com/Renovamen/playground-macos I appreciate any feedback or suggestions.

monkey_monkey 5y ago
Very nicely done!
da39a3ee 5y ago
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 5y ago
  Yes, it's an iframe embedding a third party service, https://github1s.com/ 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 https://github.com/conwnet/github1s Discussed a while ago: https://news.ycombinator.com/item?id=26083919 https://news.ycombinator.com/item?id=26083919
  - da39a3ee 5y ago
    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 5y ago
    Yeah, github1s is amazing!
log101 5y ago
It seems awesome. But dock animation seems to stagger a bit, why is that? And can you solve it?
- oh-renovamen 5y ago
  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 5y ago
    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 5y ago
    You must be absurdly exceptional at whatever it is you ARE good at!
- tyingq 5y ago
  I know, Art. And thanks for noticing.
- exikyut 5y ago
  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 5y ago
This is crazy impressive. How many hours did it take?
- oh-renovamen 5y ago
  See the commit history: https://github.com/Renovamen/playground-macos/commits/main 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 5y ago
    10 days!! You might be a real life example of a 10x dev...
    - poutrathor 5y ago
      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.
OzzyB 5y ago
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 5y ago
  It's cool but it's an iframe over https://github.com/conwnet/github1s https://github.com/conwnet/github1s
- smoldesu 5y ago
  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 5y ago
    Come on way to buzzkill
- deleted 5y ago
  [deleted]
- FabHK 5y ago
  (Without distracting from your eulogy: "she" and "her", apparently.)
  - OzzyB 5y ago
    Thanks for the correction :*
Terretta 5y ago
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 5y ago
  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!
aeoleonn 5y ago
it's beautiful, innovative, and inspiring! well done!
gabereiser 5y ago
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 5y ago
  It supports dark mode.
dceddia 5y ago
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.
gtm1260 5y ago
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.

monkey_monkey 5y ago

Very nicely done!

da39a3ee 5y ago

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 5y ago
Yes, it's an iframe embedding a third party service, https://github1s.com/ 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 https://github.com/conwnet/github1s Discussed a while ago: https://news.ycombinator.com/item?id=26083919 https://news.ycombinator.com/item?id=26083919
- da39a3ee 5y ago
  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 5y ago
  Yeah, github1s is amazing!

log101 5y ago

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

oh-renovamen 5y ago
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 5y ago
  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 5y ago
  You must be absurdly exceptional at whatever it is you ARE good at!
tyingq 5y ago
I know, Art. And thanks for noticing.
exikyut 5y ago
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 5y ago

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

oh-renovamen 5y ago
See the commit history: https://github.com/Renovamen/playground-macos/commits/main 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 5y ago
  10 days!! You might be a real life example of a 10x dev...
  - poutrathor 5y ago
    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.

OzzyB 5y ago

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 5y ago
It's cool but it's an iframe over https://github.com/conwnet/github1s https://github.com/conwnet/github1s
smoldesu 5y ago
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 5y ago
  Come on way to buzzkill
deleted 5y ago
[deleted]
FabHK 5y ago
(Without distracting from your eulogy: "she" and "her", apparently.)
- OzzyB 5y ago
  Thanks for the correction :*

Terretta 5y ago

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

aeoleonn 5y ago

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

gabereiser 5y ago

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 5y ago
It supports dark mode.

dceddia 5y ago

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.

gtm1260 5y ago

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.