17 ms·
Show HN: A portfolio website simulating macOS's GUI using React
- oh-renovamen 5y agoI 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/ https://goodmanwen.github.io/
- oh-renovamen 5y agoHi! 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 agoVery nicely done!
- da39a3ee 5y agoWow, 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 agoYes, 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 agoOhhh 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 agoYeah, github1s is amazing!
- log101 5y agoIt seems awesome. But dock animation seems to stagger a bit, why is that? And can you solve it?
- oh-renovamen 5y agoYou 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 agoI’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 agoYou must be absurdly exceptional at whatever it is you ARE good at!
- tyingq 5y agoI know, Art. And thanks for noticing.
- exikyut 5y agoFWIW, 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 agoThis is crazy impressive. How many hours did it take?
- oh-renovamen 5y agoSee 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 ago10 days!! You might be a real life example of a 10x dev...
- poutrathor 5y agothe 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 agoAt 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 agoIt's cool but it's an iframe over https://github.com/conwnet/github1s https://github.com/conwnet/github1s
- smoldesu 5y agoLike 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 agoCome on way to buzzkill
- deleted 5y ago[deleted]
- FabHK 5y ago(Without distracting from your eulogy: "she" and "her", apparently.)
- OzzyB 5y agoThanks for the correction :*
- Terretta 5y agoThis 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 agoThank 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 agoit's beautiful, innovative, and inspiring! well done!
- gabereiser 5y agoI’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 agoIt supports dark mode.
- dceddia 5y agoAmazingly 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 agoAwesome! 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.
- gaoryrt 5y agogood good
- frereubu 5y agoThis 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 5y agoYou meant "too bad", since you'd expect a "too good" implementation to actually close the terminal window?
- deleted 5y ago[deleted]
- strogonoff 5y agoTypeface choice is strange, system font stack could make it look much more like macOS.
- djxfade 5y agoOnly if your browsing from a Mac with the appropriate system font
- strogonoff 5y agoIt’s not an either-or.
- oh-renovamen 5y agoYou are right, I just picked the font arbitrarily. I'll move to more appropriate fonts later, thank you!
- clustrfunk 5y agoReact is so cool, wish I had the time to mess around with it. Cool stuff!
- cube00 5y agoDedicate 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 5y agoLooks 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.
- oh-renovamen 5y agoNice catch! Will fix it later, thank you!
- FabHK 5y agoHaha :-) In the Terminal: zou@macbook-pro ~ > cat my-dream.cpp while(sleeping) { money++; }
- TradingPlaces 5y agoThat’s the headline feature
- quickthrower2 5y agoWhen you stop sleeping the money stops.
- tiborsaas 5y agoIt'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 5y agoIn 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!
- ricardobayes 5y agoHow did you host this?
- luke2m 5y agolooks like vercel
- oh-renovamen 5y agoYep, vercel.
- montebicyclelo 5y agoFantastic. Very fun, with great attention to detail, e.g. the dock animations.
- warpech 5y agoAmazing 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/components/apps/Terminal.js https://github.com/Renovamen/playground-macos/blob/main/src/...
- josephg 5y agoVery 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 5y agoOh, 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!
- 29athrowaway 5y agoHe also created this: https://cube.zxh.io/ https://cube.zxh.io/
- oh-renovamen 5y agoI'm glad that you noticed this project, have fun!
- 29athrowaway 5y agoIt's pretty neat although I am unfamiliar with the algorithms for cubing, it looks pretty neat.
- LaputanMachine 5y agoYou 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 5y agoI didn't experience a recursion limit when I just tried it. Maybe the site was updated after your comment? I'm using Firefox.
- neogodless 5y agoSame here - Firefox on Windows 10. I only went about three deep but... neat!
- LaputanMachine 5y agoIt'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 5y agoI did notice if you have a trailing slash, and you remove it... it usually loads then.
- spamalot159 5y agoSomeone should try to write a copy of this inside the VSCode editor in the site.
- FeelTheBerns 5y ago
- statictype 5y agoThe damn thing is responsive too. Amazing
- xialvjun 5y agoImpressive. All your works.
- deadcoder0904 5y agoThis is so fucking cool. `cat` doesn't work in Terminal. Probably put a bunch of basic commands for someone curious.
- floydnoel 5y agoI used `cat my-dream.cpp` with no issue
- deadcoder0904 5y agoI did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
- danielmeskin 5y agoWorked for me, what did you `cat`?
- deadcoder0904 5y agoI did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
- oh-renovamen 5y agoThat's strange, `cat` is supposed to work well. What did you `cat`?
- deadcoder0904 5y agoI did `cat about` I think which was the wrong thing to do. Didn't know that was a folder. It works fine.
- tyingq 5y agoYou probably cat-ted a directory, like the "about" directory.
- blunte 5y agoThe fake terminal had impressively low typing latency. Overall this portfolio was really well done!
- forgotpwd16 5y agoMake a PR at https://github.com/syxanash/awesome-web-desktops https://github.com/syxanash/awesome-web-desktops
- oh-renovamen 5y agoThanks! Will do it!
- atonse 5y agoI mean will you ever be unemployed with this set of skills??
- temporallobe 5y agoIn the terminal, type rm -rf for a special treat...
- oh-renovamen 5y agoI'm glad you found that hahah
- mjthompson 5y agoThe attention to detail is breathtaking.
- davnicwil 5y agoThis 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 5y agoThis 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.
- hit8run 5y agoThe future of the desktop? Bring your phone, connect it to a big screen and use the webdesktop?
- EvilEy3 5y agoYou can already do that with Android.
- thomasjudge 5y agoResponsiveness is very good
- dorianmariefr 5y agoI'm pretty sure some people enter their real passwords :)
- oh-renovamen 5y agoYeah, this has already happened :)
- crazypython 5y agoIt includes its own terminal: https://i.imgur.com/sdxOHqr.png 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 https://i.imgur.com/PWCYEZP.png Really interesting how iframes are an underused tool.
- sverhagen 5y agoIsn't that the backlash of them having been an overused tool in the past?
- mfbx9da4 5y agolooks similar to https://macos.vercel.app/ https://macos.vercel.app/
- joshmanders 5y agoWell yeah, it's gonna look similar. It's a simulation of macOS operating system.
- njkumarr 5y agolol
- htk 5y agoI spent way too much time on this. And on my phone!
- satysin 5y agoThis is fantastically done. Great job!
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- amitmerchant 5y agoIf you want to see Ubuntu 20.04 in action, check this. https://vivek9patel.github.io/ https://vivek9patel.github.io/
- oh-renovamen 5y agoI 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.
- neogodless 5y agoAfter playing with inception on the original, and seeing this... I couldn't resist trying this: https://imgur.com/a/qTcOqAv https://imgur.com/a/qTcOqAv
- jfmercer 5y agoThis is brilliant work! I hope that Apple doesn't hit you with a takedown order.
- threesquared 5y agoI love how the meta description still says "Web site created using create-react-app"
- agmm 5y agoGo to the terminal an run "cat my-dream.cpp"
- jonas_kgomo 5y agoFrist 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.
- Liskni_si 5y agoFirst 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! :-)
- fiddlerwoaroof 5y agomacOS’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.
- thiht 5y ago> 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.
- fiddlerwoaroof 5y agoI 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.
- thiht 5y ago> 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.
- julienreszka 5y ago"Copying is our superpower"
- s09dfhks 5y agoSome advice: Remove the furry stuff. No ones going to want to work with you
- epse 5y agoWhy?
- EvilEy3 5y agoNot a fan of furry, but wouldn't mind as long as they keep that stuff in their personal life outside of work.
- oh-renovamen 5y agoMaybe 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!
- astrange 5y agoIt's because of the "Hey there! I'm a dragon lost in human world" text I think.
- oh-renovamen 5y agoHa! got it.
- max23_ 5y agoThis is neat! You also did the auto-complete for the terminal (muscle memory as I 'tab' on it) :)
- tdhz77 5y agoI 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?
- catchmeifyoucan 5y agoWhat 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.
- leeoniya 5y ago> 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/ 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.
- deleted 5y ago[deleted]
- imapeopleperson 5y agoWhy are you even looking for a job?
- jspash 5y agoHave 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.
- kyawzazaw 5y agoWork visa issues
- joexuyi 5y agoWell she is young and eager for more on job training before going solo
- sgt 5y agoDragging windows is extremely slow.
- Thomaschris 5y agoWow!! Very cool!!
- boraoztunc 5y agoReally inspiring. Also pulling this off in 10 days is quite something as well. Bravo!
- ChrisMarshallNY 5y agoThat's awesome! Great portfolio!
- icehac 5y agoThis is awesome, great work!
- busymom0 5y agoEven the dark mode works! Wow! You could get the display brightness working too - just change the opacity of the page (with a black background).
- oh-renovamen 5y agoThanks to a pull request, display brightness is now work!
- kodah 5y agoThis is really badass! I'm super impressed.
- raevilman 5y agoThis is insane. Awesome work buddy!
- puruvj 5y agoWell, I made https://macos.vercel.app 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
- tonixx 5y agoI've created a directory of iOS apps, simulating an iPad PRO: https://MillionDollarTablet.com https://MillionDollarTablet.com What do you think?