HN Explorer

199 comments

[ 5.6 ms ] story [ 217 ms ] thread
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.

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...
log101
It seems awesome. But dock animation seems to stagger a bit, why is that? And can you solve it?
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.
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?

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

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!
[deleted]
(comment deleted)
FabHK
(Without distracting from your eulogy: "she" and "her", apparently.)
OzzyB
Thanks for the correction :*
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!

aeoleonn
it's beautiful, innovative, and inspiring! well done!
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 ;)
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.

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.
frereubu
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
You meant "too bad", since you'd expect a "too good" implementation to actually close the terminal window?
isomorph
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
But a realistic simulation would have closed the terminal window.
Kiro
You're completely missing the point.
jhgb
That is always possible but also often far from certain.
[dead] m_antis89
Do keep up your self-righteous attitude. It will benefit you greatly in 5-10 years and we need more like you.
jhgb
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
Responds to accusations of self-righteousness via a self-righteous pedantic critique. Too bad you can’t use the clown emoji on HN ;)
jhgb
> self-righteous

Again, I'm not even striving to be "acting in accord with divine or moral law". So, no.

Aeolun
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
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.
reasonabl_human
Perhaps “arrogance” was a better word for the OP to let you to chew on? Can you vet that definition for us too?
jhgb
Perhaps it was. At the very least it wouldn't have been a blatant category error in the first place.
isomorph
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
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...
chrismorgan
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
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
> 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.

Th3dud3
Ha. I see you too entered the Matrix.
[deleted]
(comment deleted)
strogonoff
Typeface choice is strange, system font stack could make it look much more like macOS.
djxfade
Only if your browsing from a Mac with the appropriate system font
oh-renovamen
You are right, I just picked the font arbitrarily. I'll move to more appropriate fonts later, thank you!
clustrfunk
React is so cool, wish I had the time to mess around with it. Cool stuff!
cube00
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.
input_sh
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.

FabHK
Haha :-) In the Terminal:

  zou@macbook-pro ~ > cat my-dream.cpp

  while(sleeping) {
    money++;
  }
tiborsaas
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
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!

montebicyclelo
Fantastic. Very fun, with great attention to detail, e.g. the dock animations.
josephg
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
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!
LaputanMachine
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.
h4l0
I didn't experience a recursion limit when I just tried it. Maybe the site was updated after your comment? I'm using Firefox.
neogodless
Same here - Firefox on Windows 10. I only went about three deep but... neat!
LaputanMachine
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
I did notice if you have a trailing slash, and you remove it... it usually loads then.
spamalot159
Someone should try to write a copy of this inside the VSCode editor in the site.
statictype
The damn thing is responsive too. Amazing
deadcoder0904
This is so fucking cool. `cat` doesn't work in Terminal. Probably put a bunch of basic commands for someone curious.
floydnoel
I used `cat my-dream.cpp` with no issue
deadcoder0904
I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
danielmeskin
Worked for me, what did you `cat`?
deadcoder0904
I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
oh-renovamen
That's strange, `cat` is supposed to work well. What did you `cat`?
deadcoder0904
I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
tyingq
You probably cat-ted a directory, like the "about" directory.
deadcoder0904
Yep, I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
FabHK
`cat` works just fine, but `more` or `less` are "not installed" :-)
deadcoder0904
I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
blunte
The fake terminal had impressively low typing latency.

Overall this portfolio was really well done!

atonse
I mean will you ever be unemployed with this set of skills??
mjthompson
The attention to detail is breathtaking.
davnicwil
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 :-)

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