[{"data":1,"prerenderedAt":788},["ShallowReactive",2],{"project-27084995":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":46,"post_text":47,"what":48,"said":99,"maker_in_thread":226,"shape":236,"grid":240,"attempts":749,"same_week":750,"maker_shows":18,"maker_hidden":780,"reader_version":781,"card":782},"27084995","playground-macos","A portfolio website simulating macOS's GUI using React","title","Show HN: A portfolio website simulating macOS's GUI using React","https:\u002F\u002Fportfolio.zxh.io","portfolio.zxh.io","oh-renovamen",1620461363,2021,683,191,25,2533,1,"legend","productivity","portfolio website","web_app",[24,25,21,26],"react","macos simulation","tailwindcss","mixed",0.349,{"positive":30,"neutral":31,"mixed":32,"critical":33},38,30,3,12,83,{"design":36,"execution":38,"performance":41,"idea":43,"privacy":45},{"positive":33,"critical":37},2,{"positive":39,"critical":40},6,5,{"positive":42,"critical":32},4,{"positive":44,"critical":37},0,{"positive":44,"critical":44},[40,32,40,42,32,40,40,44,44,44,44,44,44,44,44,44,42,32,32,32,32,42,40,40,37,32,32,18,40,42,32,32,32,40,40,40,40,40,40,32],null,{"problem":49,"audience":47,"pricing":47,"motivation":59,"time_to_build":64,"stack":74,"openness":96,"stage":97,"team_size":98},{"value":50,"source":51,"evidence":52},"Showcases the maker's work through a macOS-style desktop interface","inferred",[53,56],{"id":54,"by":11,"text":55},"27085016","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…",{"id":57,"by":11,"text":58},"27087215","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…",{"value":60,"source":61,"evidence":62},"Learning React and having fun; filling a portfolio","maker",[63],{"id":57,"by":11,"text":58},{"value":65,"source":61,"evidence":66},"About 10 days",[67,70],{"id":68,"by":11,"text":69},"27088037","See the commit history: https:\u002F\u002Fgithub.com\u002FRenovamen\u002Fplayground-macos\u002Fcommits\u002Fmain I started it about 10 days ago, but it's hard to calculate out the exact number of hours...",{"id":71,"by":72,"text":73},"27091173","boraoztunc","Really inspiring. Also pulling this off in 10 days is quite something as well. Bravo!",[75,79,82,88],{"value":76,"source":61,"evidence":77},"React",[78],{"id":54,"by":11,"text":55},{"value":26,"source":61,"evidence":80},[81],{"id":54,"by":11,"text":55},{"value":83,"source":61,"evidence":84},"Vercel hosting",[85],{"id":86,"by":11,"text":87},"27087239","Yep, vercel.",{"value":89,"source":90,"evidence":91},"github1s embedded VS Code iframe","commenter",[92],{"id":93,"by":94,"text":95},"27085782","oefrha","Yes, it's an iframe embedding a third party service, https:\u002F\u002Fgithub1s.com\u002F. \"It appeared sufficiently like I was actually in a VSCode instance\" because it is a VSCode instance.…","open_source","launched","solo",{"praise":100,"objections":142,"requests":172,"questions":191,"alternatives":203},[101,116,127],{"value":102,"source":90,"evidence":103},"Extremely convincing macOS look and attention to detail",[104,108,112],{"id":105,"by":106,"text":107},"27086368","mjthompson","The attention to detail is breathtaking.",{"id":109,"by":110,"text":111},"27085723","montebicyclelo","Fantastic. Very fun, with great attention to detail, e.g. the dock animations.",{"id":113,"by":114,"text":115},"27086626","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…",{"value":117,"source":90,"evidence":118},"Responsive and smooth performance",[119,123],{"id":120,"by":121,"text":122},"27086914","thomasjudge","Responsiveness is very good",{"id":124,"by":125,"text":126},"27086213","blunte","The fake terminal had impressively low typing latency. Overall this portfolio was really well done!",{"value":128,"source":90,"evidence":129},"Easter eggs such as the embedded terminal and VS Code",[130,134,138],{"id":131,"by":132,"text":133},"27085860","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…",{"id":135,"by":136,"text":137},"27087216","crazypython","It includes its own terminal: https:\u002F\u002Fi.imgur.com\u002FsdxOHqr.png I was able to play the alpha of my game in the embedded Safari! https:\u002F\u002Fi.imgur.com\u002FPWCYEZP.png Really interesting…",{"id":139,"by":140,"text":141},"27085745","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…",[143,158,165],{"value":144,"source":90,"evidence":145},"Window dragging performance is slow or janky",[146,150,154],{"id":147,"by":148,"text":149},"27090308","sgt","Dragging windows is extremely slow.",{"id":151,"by":152,"text":153},"27085833","log101","It seems awesome. But dock animation seems to stagger a bit, why is that? And can you solve it?",{"id":155,"by":156,"text":157},"27089229","leeoniya","> using React and a performance profile shows absolutely insane JS overhead (in React) when simply dragging a window. compare this to something like…",{"value":159,"source":90,"evidence":160},"Maximize and zoom behavior differs from real macOS",[161],{"id":162,"by":163,"text":164},"27088050","Liskni_si","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…",{"value":166,"source":90,"evidence":167},"Font choice does not match macOS",[168],{"id":169,"by":170,"text":171},"27085515","strogonoff","Typeface choice is strange, system font stack could make it look much more like macOS.",[173,180,184],{"value":174,"source":90,"evidence":175},"Add a 1px window border",[176],{"id":177,"by":178,"text":179},"27085819","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…",{"value":181,"source":90,"evidence":182},"Use system font stack",[183],{"id":169,"by":170,"text":171},{"value":185,"source":90,"evidence":186},"Fix typo in Safari text",[187],{"id":188,"by":189,"text":190},"27085560","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…",[192,196],{"value":193,"source":90,"evidence":194},"How does the VS Code component work",[195],{"id":139,"by":140,"text":141},{"value":197,"source":90,"evidence":198},"How was it hosted",[199],{"id":200,"by":201,"text":202},"27085715","ricardobayes","How did you host this?",[204,215,219],{"value":205,"source":90,"evidence":206},"macos.vercel.app",[207,211],{"id":208,"by":209,"text":210},"27087304","mfbx9da4","looks similar to https:\u002F\u002Fmacos.vercel.app\u002F",{"id":212,"by":213,"text":214},"27105654","puruvj","Well, I made https:\u002F\u002Fmacos.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",{"value":216,"source":90,"evidence":217},"winbox web desktop",[218],{"id":155,"by":156,"text":157},{"value":220,"source":90,"evidence":221},"Ubuntu-themed portfolio by vivek9patel",[222],{"id":223,"by":224,"text":225},"27087498","amitmerchant","If you want to see Ubuntu 20.04 in action, check this. https:\u002F\u002Fvivek9patel.github.io\u002F",{"comments":227,"answered":42,"key":228},20,[229,230,233],{"id":54,"text":55},{"id":231,"text":232},"27087058","Yeah, github1s is amazing!",{"id":234,"text":235},"27087050","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!",{"commenters":237,"max_depth":238,"maker_replies":227,"first_comment_mins":42,"lifespan_hours":239},122,9,119,[241,243,247,249,251,253,254,256,258,262,265,268,272,275,276,279,282,286,290,294,297,300,302,305,307,310,313,317,321,324,325,328,331,333,335,338,341,344,346,349,352,355,357,359,361,363,365,367,370,373,376,378,381,384,386,389,392,395,398,401,403,405,407,409,411,413,415,417,420,424,427,430,433,436,439,440,443,446,448,450,454,457,460,464,467,470,472,475,477,479,481,484,487,489,492,494,496,499,502,505,507,510,512,514,517,519,521,523,525,527,532,533,535,538,542,544,546,548,551,554,558,560,565,567,571,573,577,580,583,586,589,592,594,598,601,605,609,614,615,619,621,624,627,629,632,634,637,639,641,643,645,647,651,655,657,660,663,665,669,671,675,678,682,685,689,693,695,699,703,705,709,711,715,717,720,721,725,729,733,737,740,742,744,747],[54,44,44,242,11,18],"project\u002Fneutral\u002Fnone",[244,44,40,245,246,44],"27085505","project\u002Fpositive\u002Fdesign","monkey_monkey",[139,44,32,248,140,44],"project\u002Fneutral\u002Fexecution",[93,44,44,250,94,44],"commenter\u002Fneutral\u002Fnone",[252,44,44,250,140,44],"27085820",[231,44,44,250,11,18],[151,44,18,255,152,44],"project\u002Fcritical\u002Fperformance",[234,44,44,257,11,18],"maker\u002Fneutral\u002Fnone",[259,44,40,260,261,44],"27088383","maker\u002Fpositive\u002Fnone","borski",[263,44,40,260,264,44],"27089951","iseanstevens",[266,44,44,250,267,44],"27087235","tyingq",[269,44,40,270,271,44],"27088372","project\u002Fpositive\u002Fperformance","exikyut",[273,44,32,257,274,44],"27085976","unlimit",[68,44,44,257,11,18],[277,44,40,260,278,44],"27088790","nefitty",[280,44,32,257,281,44],"27104429","poutrathor",[283,44,40,284,285,44],"27087069","project\u002Fpositive\u002Fnone","OzzyB",[287,44,18,288,289,44],"27087491","project\u002Fcritical\u002Fexecution","stevenhuang",[291,44,18,292,293,44],"27088228","project\u002Fcritical\u002Fidea","smoldesu",[295,44,44,250,296,44],"27088253","texasbigdata",[298,44,32,257,299,44],"27089032","FabHK",[301,44,32,257,285,44],"27105111",[303,44,40,284,304,44],"27087328","Terretta",[306,44,44,260,11,18],"27088022",[308,44,40,245,309,44],"27088294","aeoleonn",[311,44,40,245,312,44],"27088570","gabereiser",[314,44,32,315,316,44],"27088926","project\u002Fneutral\u002Fdesign","shrimpx",[318,44,40,319,320,44],"27089130","project\u002Fpositive\u002Fexecution","dceddia",[322,44,32,315,323,44],"27091122","gtm1260",[162,18,40,245,163,44],[326,18,44,250,327,44],"27088504","fiddlerwoaroof",[329,18,44,250,330,44],"27088621","jeroenhd",[332,18,44,250,327,44],"27088749",[334,18,44,250,327,44],"27088792",[336,18,44,250,337,44],"27088998","nactivint",[339,18,44,250,340,44],"27089298","wruza",[342,18,44,250,343,44],"27090374","jspash",[345,18,44,250,72,44],"27090753",[347,18,44,250,348,44],"27091388","diskzero",[350,18,44,250,351,44],"27091461","mirzmaster",[353,18,44,250,354,44],"27088943","thiht",[356,18,44,250,327,44],"27088977",[358,18,44,250,354,44],"27089127",[360,18,44,250,327,44],"27089152",[362,18,44,250,340,44],"27089354",[364,18,44,250,354,44],"27089379",[366,18,44,250,327,44],"27089476",[368,18,44,250,369,44],"27090293","anoncake",[371,18,44,250,372,44],"27090284","amyjess",[374,18,44,250,375,44],"27091222","reaperducer",[377,18,44,250,340,44],"27092013",[379,18,44,250,380,44],"27092900","tambourine_man",[382,18,44,250,383,44],"27089550","einherjae",[385,18,44,250,369,44],"27090234",[387,18,44,388,369,44],"27095495","other\u002Fneutral\u002Fnone",[390,18,44,250,391,44],"27091520","lazide",[393,18,44,250,394,44],"27090126","user-the-name",[396,18,44,250,397,44],"27091592","deergomoo",[399,18,44,250,400,44],"27091754","nitrogen",[402,18,44,250,354,44],"27095058",[404,18,44,250,380,44],"27090525",[406,18,44,250,391,44],"27091508",[408,18,44,250,327,44],"27092284",[410,18,44,250,380,44],"27092862",[412,18,44,388,391,44],"27099524",[414,18,44,250,354,44],"27095068",[416,18,44,250,380,44],"27100969",[418,18,44,250,419,44],"27089030","dreamer7",[421,18,44,422,423,44],"27089062","commenter\u002Fneutral\u002Fperformance","jorvi",[425,18,44,250,426,44],"27090729","sverhagen",[428,18,44,422,429,44],"27092296","miles",[431,18,44,250,432,44],"27089048","fastball",[434,18,44,250,435,44],"27089446","charrondev",[437,18,44,250,438,44],"27091544","resist_futility",[131,37,40,284,132,44],[441,37,32,248,442,44],"27086452","h4l0",[444,37,40,319,445,44],"27087804","neogodless",[447,37,18,288,132,44],"27088030",[449,37,32,248,445,44],"27088036",[451,37,32,452,453,44],"27086594","project\u002Fneutral\u002Fidea","spamalot159",[455,37,44,388,456,44],"27086880","FeelTheBerns",[458,37,32,248,459,44],"27090821","auroranil",[461,32,32,462,463,44],"27085386","project\u002Fmixed\u002Fexecution","frereubu",[465,32,44,250,466,44],"27085902","jhgb",[468,32,44,250,469,44],"27086042","isomorph",[471,32,44,250,466,44],"27086082",[473,32,44,250,474,44],"27086263","Kiro",[476,32,44,250,466,44],"27086506",[478,32,44,250,469,44],"27087626",[480,32,44,250,466,44],"27087672",[482,32,18,288,483,44],"27085955","chrismorgan",[485,32,40,245,486,44],"27086219","ftio",[488,32,32,242,299,44],"27087830",[490,32,44,388,491,44],"27125862","Th3dud3",[493,42,44,257,11,18],"27087646",[495,40,32,242,299,44],"27085632",[497,40,32,242,498,44],"27088548","TradingPlaces",[500,40,32,242,501,44],"27093821","quickthrower2",[503,39,40,245,504,44],"27086441","davnicwil",[177,506,32,315,178,44],7,[508,506,44,509,11,18],"27087093","maker\u002Fneutral\u002Fdesign",[135,511,40,319,136,44],8,[513,511,44,388,426,44],"27090814",[515,238,44,388,516,44],"27085849","29athrowaway",[518,238,44,257,11,18],"27087155",[520,238,44,388,516,44],"27089557",[223,522,44,388,224,44],10,[524,522,44,257,11,18],"27087584",[526,522,44,388,445,44],"27087857",[528,529,40,530,531,44],"27085779",11,"maker\u002Fpositive\u002Fexecution","warpech",[155,33,18,255,156,44],[113,534,40,245,114,44],13,[169,536,18,537,170,44],14,"project\u002Fcritical\u002Fdesign",[539,536,44,540,541,44],"27085800","commenter\u002Fneutral\u002Fdesign","djxfade",[543,536,44,250,170,44],"27086206",[545,536,44,509,11,18],"27087125",[208,547,32,452,209,44],15,[549,547,44,250,550,44],"27088693","joshmanders",[552,547,44,388,553,44],"27114651","njkumarr",[555,556,32,242,557,44],"27086278",16,"forgotpwd16",[559,556,44,257,11,18],"27088083",[561,562,32,563,564,44],"27087207",17,"project\u002Fneutral\u002Fprivacy","dorianmariefr",[566,562,44,563,11,18],"27088097",[568,569,32,242,570,44],"27086363",18,"temporallobe",[572,569,44,260,11,18],"27087130",[574,575,32,452,576,44],"27086894",19,"hit8run",[578,575,18,292,579,44],"27090287","EvilEy3",[581,227,18,288,582,44],"27087887","threesquared",[188,584,32,585,189,44],21,"project\u002Fmixed\u002Fdesign",[587,584,44,588,11,18],"27087149","maker\u002Fneutral\u002Fdocs",[212,590,44,591,213,44],22,"commenter\u002Fneutral\u002Fidea",[124,593,40,270,125,44],23,[595,596,40,245,597,44],"27088896",24,"catchmeifyoucan",[599,16,32,452,600,44],"27087991","jonas_kgomo",[602,603,44,388,604,44],"27088862",26,"tdhz77",[606,607,40,260,608,44],"27086294",27,"atonse",[610,611,32,612,613,44],"27085714",28,"project\u002Fmixed\u002Fidea","tiborsaas",[57,611,44,257,11,18],[616,617,40,245,618,44],"27091836",29,"busymom0",[620,617,44,257,11,18],"27103552",[622,31,18,288,623,44],"27086200","deadcoder0904",[625,31,32,248,626,44],"27086251","floydnoel",[628,31,44,250,623,44],"27139154",[630,31,32,248,631,44],"27086255","danielmeskin",[633,31,44,250,623,44],"27139156",[635,31,44,636,11,18],"27087144","maker\u002Fneutral\u002Fexecution",[638,31,44,250,623,44],"27139151",[640,31,44,250,267,44],"27087211",[642,31,44,250,623,44],"27139150",[644,31,32,248,299,44],"27087852",[646,31,44,250,623,44],"27139149",[648,649,40,319,650,44],"27088277",31,"max23_",[652,653,32,257,654,44],"27090250",32,"imapeopleperson",[656,653,44,388,343,44],"27090417",[658,653,44,388,659,44],"27091220","kyawzazaw",[661,653,44,388,662,44],"27092751","joexuyi",[71,664,40,319,72,44],33,[666,667,40,284,668,44],"27087747",34,"jfmercer",[109,670,40,245,110,44],35,[672,673,44,388,674,44],"27085533",36,"clustrfunk",[676,673,44,388,677,44],"27086866","cube00",[679,680,32,248,681,44],"27087892",37,"agmm",[683,30,40,245,684,44],"27087324","htk",[686,687,40,284,688,44],"27092634",39,"kodah",[690,691,40,270,692,44],"27086092",40,"statictype",[105,694,40,245,106,44],41,[696,697,40,284,698,44],"27087395",42,"satysin",[700,701,40,284,702,44],"27095132",43,"raevilman",[147,704,18,255,148,44],44,[706,707,40,284,708,44],"27091670",45,"icehac",[120,710,40,270,121,44],46,[712,713,40,284,714,44],"27086184",47,"xialvjun",[200,716,32,242,201,44],48,[718,716,32,242,719,44],"27086772","luke2m",[86,716,44,257,11,18],[722,723,40,284,724,44],"27091552",49,"ChrisMarshallNY",[726,727,40,284,728,44],"27090568",50,"Thomaschris",[730,731,40,284,732,44],"27085072",51,"gaoryrt",[734,735,18,537,736,44],"27088259",52,"s09dfhks",[738,735,44,250,739,44],"27089099","epse",[741,735,44,250,579,44],"27090305",[743,735,44,257,11,18],"27093561",[745,735,32,315,746,44],"27096778","astrange",[748,735,44,257,11,18],"27103558",[],[751,756,761,766,770,775],{"id":752,"name":753,"points":754,"category":755},"27132334","Permafrost Engine",1102,"games",{"id":757,"name":758,"points":759,"category":760},"27128424","Mmm.page",591,"web_saas",{"id":762,"name":763,"points":764,"category":765},"27112573","Sequencer64",327,"creative",{"id":767,"name":768,"points":769,"category":755},"27083666","Lovetris",215,{"id":771,"name":772,"points":773,"category":774},"27107428","Django SQL Dashboard",204,"dev_tools",{"id":776,"name":777,"points":778,"category":779},"27116106","Codewell",189,"learning_science",false,"v2",{"id":783,"name":5,"line":6,"ai":780,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":784,"top":18,"kw":785,"maker":11,"domain":10,"tier":19,"attempts":44,"strip":786,"url":9,"mix":787,"praise":102,"objection":144,"sub":21},27084995,0.35,[24,25,21,26],"5354355000000000433334552331543335555553",[30,31,32,33],1794036606528]