Show HN: A portfolio website simulating macOS's GUI using React | Hacker News Reader

Show HN: A portfolio website simulating macOS's GUI using React

portfolio.zxh.io

683 pointsoh-renovamen191 comments

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.

Very nicely done!

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!

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?

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.

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!

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

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.

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.

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.

First thing that came to my mind when I opened this: hey let's test if maximization is just as broken as in real MacOS. And oh my god it is indeed! Safari won't maximize to the entire screen, just like in the real thing, and other apps like the terminal maximize correctly. Wow, this level of attention to detail is really crazy! :-)

macOS’s zoom functionality isn’t broken, it’s just content-size based rather than screen-size based: I like this, but some applications to implement the necessary hints and so it falls back to zooming to full screen.

macOS’s resizing has some useful functionality here: dragging an edge resizes in that direction, double-clicking an edge maximizes in that direction (including diagonally) and option+any of these resizes the opposite side of the window as well. So, if you hold option and double-click a corner, it’ll do a Windows-style maximize.

> So, if you hold option and double-click a corner, it’ll do a Windows-style maximize.

I've used Linux command lines with more discoverability than that. Good to know if I ever need to use macOS, though, that's a nice trick.

It depends what you mean by discoverable: option+mouse action is a pretty standard macOS convention for alternate behavior and “double-click == drag all the way” isn’t unreasonable. The behavior of option+double-click is discoverable by simple composition of these features.

Also, most of this sort of functionality is documented in the built-in help system accessible through the help menu.

(The option+mouse action is also a natural extension of the longstanding macOS convention that control+click == right click.)

I used macOS for about seven years before someone told me about this behavior. Never would've found it, otherwise.

I guess if I had been using it for twenty years I would've known about those old patterns you describe and would've thought to randomly try that key combination.

A tooltip at some point would've gone a long way. Pretty much an impossible feature to discover unless you're a toddler randomly pressing buttons or a greybeard that remembers OS 9

If only there was a website that could provide few relevant links to the “macos tips and tricks” query.

macOS user here since 2006. and i never knew about this or even thought to hold a button and click. you learn something new every day!

Apple Finder engineer here from 2000 - 2006 and would never have guessed about double-clicking or option-clicking window edges. This seems more like something I would have added to the Nautilus code in 1999.

Perhaps more intuitively, you can also option+click on the green 'maximize' bubble to maximize the window.

> macOS’s zoom functionality isn’t broken, it’s just content-size based rather than screen-size based

So it is indeed broken. The fact that it's not humanly possible to fullscreen Safari without Spectacle/Rectangle clearly means it's broken, whether it's what th ey wanted or not.

I generally prefer the content-based zoom functionality. This is a case of people not used to the Mac conventions disliking that Macs don't work like Windows.

And, as I've pointed out, both behaviors are possible on macOS out of the box.

> I generally prefer the content-based zoom functionality

Why? This makes absolutely no sense. It's the same thing as macOS' windows not closing when you close them. It's stupid. They should copy Windows on what makes sense.

Because I use a 55" TV a lot, and it's useful to make Preview or whatever just big enough that I can see an entire page without being too big to fit in the "comfortable reading" part of the screen. (I also like the App/Window/Document model of macOS)

Maximizing sites that take 1024 px out of 1920 or even 2560 px doesn’t really make any sense.

macOS' windows not closing when you close them

Windows’ apps closing when you close their windows is no less absurd. The same for forcing you to either save or discard documents on quit/reboot.

> Windows’ apps closing when you close their windows is no less absurd

???

With macOS’s setup, I can command-tab to any open app (e.g. preview), hit the up arrow and then use the arrow keys to quickly open a recent document. Without the app model macOS uses, this is a lot less convenient, and I miss it every time I use my KDE Plasma Desktop.

If you use the cascading Application Menu widget, Win -- Arrow Down -- Arrow Right gets you to the recent files menu.

I don't want to have any non-maximized windows on my screen. I despise overlapping windows, and I want every single application I run to be full-screen, just like on a phone.

I want every single application I run to be full-screen, just like on a phone.

So run them in full-screen mode. No one is stopping you.

I hardly ever run into a program on macOS that doesn't support full-screen. View → Enter Full Screen, or Control+Option+F.

If that’s your preference, just do it. My comment wasn’t not about you or me, it was about what you get if you choose macos, how it works, and the reasoning behind that. This “I want how I want” sounds like a christian complaint in a mosque.

Use another OS then, macOS is not for you.

Why does it make sense that an application must have windows to keep running?

It's more intuitive for non-technical users, in my experience.

Is there even a pattern behind what gets downvoted here?

Not doing that results in closing everything you can see easily in the GUI but it’s still burning RAM and being obnoxious where you can’t easily see it. If I wanted that to happen, I’d tell it to do that.

Why, if I want to close one document and open another, should it matter which order I do this in?

> This makes absolutely no sense

I don’t understand the fascination with maximising windows, especially web browsers. What the hell is the point of filling my screen with the window when, for the vast majority of websites, half or more of it is gonna be empty margin?

Kiosks/dashboards where the display is what matters, not the navigation.

Centering. If it's not fullscreen, it's hard to center the windows properly, and I hate looking at a floating window.

The Mac has behaved like that since the classic days. This is the platform that invented overlapping windows. They aren't supposed to be maximized, as it's almost always a waste of screen real estate.

You're just used to other platforms.

Then why does basically every other application, including Apple provided ones, work correctly?

They don't? Some applications don't seem implement the content-size hints (or "content size" doesn't really make sense: e.g. iTerm) and macOS falls back to using the full screen size: but, Finder, Safari, Preview, Pages and even MS Word all do zoom the way I described.

Exactly.

On the surface, it may seem as if we’ve reached a common interface for mainstream desktop OSs, that one could use Windows and macOS interchangeably.

But there are still fundamental concepts that are unique to the Mac that always trip Windows users, namely, apps that keep running after all windows are closed and maximize vs full screen.

There’s obviously a common ground that has evolved over the years, but you must understand the platform in order to appreciate its subtleties or you’re bound to be frustrated.

Eh, I’ve been using MacOS as my daily driver for at least a decade. Before that was a variety of window managers on Ubuntu and Slackware. 20 years ago, and randomly when I can’t avoid it I’ve used windows.

But I’m far from a fan.

A lot of just plain silly defaults and UX weirdness gets attributed to some massive usability genius, but near a I can tell (from using all the platforms), it’s just designers making what could be straightforward functionality overly hidden or obtuse because of UX purity and insider cachet with power users or whatever - ending up with changes/behavior for everyone that is surprising and ends up getting in the way for people.

I have actual work to do, I don’t want to have to learn yet another secret handshake gesture in this version of MacOS or turn off new settings to stop it from screen locking me if I accidentally bump my mouse over.

Example - this thread and others like it, or the massive numbers of bug reports and forum complaints on the hot corner screen lock functionality when it came out. and now windows is copying it, yuck.

> You're just used to other platforms.

I've been a daily macOS user for 2 years. Window management on Windows still makes more sense.

Which platform did you learn first? Your formative years?

Best to just install Rectangle app (formerly Spectacle) and use sane shortcuts like alt+option+enter for full screen.

I use and like Rectangle a lot, but fullscreening an app on macOS brings real performance and battery benefits. It's not just fancy for being fancy.

How is this, does it put other applications to sleep or something?

Yes, it's called "App Nap":

Apple MacBook Pro lasts 135 minutes longer on battery in full screen mode https://news.ycombinator.com/item?id=14947703

Apple MacBook Pro 15: How to get 2 more hours of battery life with this simple trick https://www.notebookcheck.net/Apple-MacBook-Pro-lasts-135-mi...

Why do Macs have a longer battery life when in full screen mode? https://www.quora.com/Why-do-Macs-have-a-longer-battery-life...

For anyone that hates resizing windows in general on a mac, I've found the combination of using a Hyper Key[1] + Moom[2] to be amazingly ergonomic.

Here's a quick demo[3] of what this looks like on my machine.

[1] https://brettterpstra.com/2017/06/15/a-hyper-key-with-karabi...

[2] https://manytricks.com/moom/

[3] https://my.supernotes.app/share/wire+unaware+noble+meadow

I quite like window management through https://magnet.crowdcafe.com/ magnet.

You get keyboard shortcuts for tiling things and can drag/snap to edges of the screen.

Double click the top/title bar to maximize a window, it's easier to hit since you have one giant area at the top of the window to click on too

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.

I didn't experience a recursion limit when I just tried it. Maybe the site was updated after your comment? I'm using Firefox.

Same here - Firefox on Windows 10. I only went about three deep but... neat!

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

I did notice if you have a trailing slash, and you remove it... it usually loads then.

Someone should try to write a copy of this inside the VSCode editor in the site.

Bruh

Interesting. It is using iframes behind the scenes. According to W3C it should limit the recursion depth to one, but it seems that you can get around that.

Relevant: https://www.bryanbraun.com/2021/03/24/infinitely-nested-ifra...

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!

You meant "too bad", since you'd expect a "too good" implementation to actually close the terminal window?

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

But a realistic simulation would have closed the terminal window.

You're completely missing the point.

That is always possible but also often far from certain.

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.

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

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

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

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

Ha. I see you too entered the Matrix.

I never expected so much attention and feedback, thank you all!

Also, if you want to see a portfolio simulating Deepin (a Linux distribution) developed with Vue, check this:

https://goodmanwen.github.io/

Haha :-) In the Terminal:

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

  while(sleeping) {
    money++;
  }

That’s the headline feature

When you stop sleeping the money stops.

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

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, 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!

It includes its own terminal: https://i.imgur.com/sdxOHqr.png

I was able to play the alpha of my game in the embedded Safari! https://i.imgur.com/PWCYEZP.png

Really interesting how iframes are an underused tool.

Isn't that the backlash of them having been an overused tool in the past?

He also created this: https://cube.zxh.io/

I'm glad that you noticed this project, have fun!

It's pretty neat although I am unfamiliar with the algorithms for cubing, it looks pretty neat.

If you want to see Ubuntu 20.04 in action, check this.

https://vivek9patel.github.io/

I noticed this Ubuntu themed portfolio after spending two or three days on my project. Its awesome and give me much inspiration, many thanks to the author. So I'm not the first one to think of the idea hhh.

After playing with inception on the original, and seeing this... I couldn't resist trying this:

https://imgur.com/a/qTcOqAv

Amazing work with writing the Terminal component by yourself. Very lean and well functional for its purpose.

For those who are interested to see the source: https://github.com/Renovamen/playground-macos/blob/main/src/...

> using React

and a performance profile shows absolutely insane JS overhead (in React) when simply dragging a window. compare this to something like https://nextapps-de.github.io/winbox/, and you start to wonder if "the React way" is really best-suited for everything that people use it for.

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.

Typeface choice is strange, system font stack could make it look much more like macOS.

Only if your browsing from a Mac with the appropriate system font

It’s not an either-or.

You are right, I just picked the font arbitrarily. I'll move to more appropriate fonts later, thank you!

looks similar to https://macos.vercel.app/

Well yeah, it's gonna look similar. It's a simulation of macOS operating system.

lol

Make a PR at https://github.com/syxanash/awesome-web-desktops

Thanks! Will do it!

I'm pretty sure some people enter their real passwords :)

Yeah, this has already happened :)

In the terminal, type rm -rf for a special treat...

I'm glad you found that hahah

The future of the desktop? Bring your phone, connect it to a big screen and use the webdesktop?

You can already do that with Android.

I love how the meta description still says "Web site created using create-react-app"

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.

Nice catch! Will fix it later, thank you!

Well, I made https://macos.vercel.app

Not really an exact portfolio, but it leads to my twitter and gets me tons of followers, and leads them to my personal site, so IG it counts

The fake terminal had impressively low typing latency.

Overall this portfolio was really well done!

What blew my mind most was the subtle brand placements. Bear App, and Gitpod - never used these things before, and now I'm reading about them.

This is a really cool website! Well done.

Frist I was like, this is really cool, then I started thinking what inspired you to do this, as I noticed that most things are functional: vs code works, search works etc.

I think I need to start making a collection of these awesome portfolio websites that I've been seeing. If you have a cool personal website will you post it here?

I mean will you ever be unemployed with this set of skills??

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.

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!

Even the dark mode works! Wow!

You could get the display brightness working too - just change the opacity of the page (with a black background).

Thanks to a pull request, display brightness is now work!

This is so fucking cool. `cat` doesn't work in Terminal. Probably put a bunch of basic commands for someone curious.

I used `cat my-dream.cpp` with no issue

I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.

Worked for me, what did you `cat`?

I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.

That's strange, `cat` is supposed to work well. What did you `cat`?

I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.

You probably cat-ted a directory, like the "about" directory.

Yep, I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.

`cat` works just fine, but `more` or `less` are "not installed" :-)

I did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.

This is neat! You also did the auto-complete for the terminal (muscle memory as I 'tab' on it) :)

Why are you even looking for a job?

Have you seen how many Javascript dev there are out there? I wish I was kidding, but I don't remember the last time a CV crossed my desk that didn't have JS as a core ability or at least mentioned in passing. And that's for non-webdev roles. Data analysts and BI is what we've been hiring for lately. And it seems like everyone these days likes to dabble at the weekend in some JS.

But yea you are correct, this person would have no trouble getting hired.

Work visa issues

Well she is young and eager for more on job training before going solo

Really inspiring. Also pulling this off in 10 days is quite something as well. Bravo!

This is brilliant work! I hope that Apple doesn't hit you with a takedown order.

Fantastic. Very fun, with great attention to detail, e.g. the dock animations.

React is so cool, wish I had the time to mess around with it. Cool stuff!

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.

Go to the terminal an run "cat my-dream.cpp"

I spent way too much time on this. And on my phone!

This is really badass! I'm super impressed.

The damn thing is responsive too. Amazing

The attention to detail is breathtaking.

This is fantastically done. Great job!

This is insane. Awesome work buddy!

Dragging windows is extremely slow.

This is awesome, great work!

Responsiveness is very good

Impressive. All your works.

How did you host this?

looks like vercel

Yep, vercel.

That's awesome!

Great portfolio!

Wow!! Very cool!!

good good

Some advice: Remove the furry stuff. No ones going to want to work with you

Why?

Not a fan of furry, but wouldn't mind as long as they keep that stuff in their personal life outside of work.

Maybe I'm missing something, but could you please specify the stuff related to furry? The cat and dog icon or my avatar? I'm not a fan of furry so I'm suprised that you mention it. Thanks!

It's because of the "Hey there! I'm a dragon lost in human world" text I think.

Ha! got it.

Reply on news.ycombinator.com