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).
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!
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”
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 ;)
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.
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.
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.
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.
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.
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
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.
> 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)
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?
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.
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.
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.
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.
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.
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.
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 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.
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.
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).
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!
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.)
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). :-)
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
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.
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.
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...
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!
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.
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.
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?
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!
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.
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.
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!
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.