renovamen / playground-macos

My portfolio website simulating macOS's GUI, developed with React and UnoCSS.

playground-macos

My portfolio website simulating macOS's GUI: https://portfolio.zxh.io

Powered by React + Zustand + UnoCSS + TypeScript + Vite.

 

Usage

Clone the repo and install dependencies:

pnpm install

Start dev server (with hot reloading):

pnpm dev

Build for production with minification to the dist folder:

pnpm build

 

Changelog

• Update 2023.06.26: Improve FaceTime.

• Update 2023.06.25: Add Typora, built on top of Milkdown.

• Update 2021.12.05: Simulated the device's actual battery state using Battery API, displaying 100% charge on unsupported browsers.

• Update 2021.12.05: Refactored for cleaner code by utilizing functional components and hooks. Refer to this branch for the previous version implemented with class components.

 

Credits

• macOS
  • Monterey
  • Catalina
• macOS Icon Gallery
• sindresorhus/file-icon-cli
• vivek9patel.github.io

 

License

MIT

playground-macos's Issues

How to rename username in login screen?

I am new here, and I want to use this theme. How can I rename the Username in the login screen?

clock is outdated

Your setInterval on your new Date in state doesnt seem to be working. Clock is out of date.

Well done!

Just wanted to congratulate you for your own portfolio. It's very complex and complete at the same time. Would be cool if you could create a framework out of this.

Nevertheless I had some fun looking at it. Thanks :)

app内文字模糊

大佬的项目很酷炫！但我遇到了个问题

浏览器：Edge91.0.864.37

比如自带的Bear中，projects页：

然而profile是正常的：

我将app链接替换为自己的，果然也糊了（红框处是浏览器单独打开的效果）：

Hi. Why not make a right-click menu

I think it is almost perfect. If the design includes the right-click menu

renaming the tab

how do you rename the tab?

Resizing the safari window beyond some size pulls in the wallpaper

As title says, if I resize Safari (only at the initial page), beyond some size the wallpaper is bleeding through instead of it being the default Safari app. I don't think this is the behavior on MacOS but maybe it has changed in the more recent release in which case please ignore.

Apple Icon Dropdown should overlap Windows.

Photo from screenshot using Edge browser in iOS on iPhone XS Max.

In true MacOS, the Apple icon dropdown in the top left would overlay windows. This is not the case in your site.

Either way, awesome site! Good job!

Index.html showing a blank page

Hi, I've made the yarn build, and am trying to run the app using the build folder. It is, however, showing a blank page as in the screensht below:

The build was successful, can you let me know what I am doing wrong and how to run the optimised version of the app?

md渲染问题

源文件样式：

正常渲染后的样式：

macos主页渲染后样式：

大概问题就是，原生的html语法再主页项目栏内不兼容，导致主页看起来很怪

请问登录页面能实现输入密码访问吗

让输入的密码与我们的配置来比对，而不是只作为一个界面来展示它

Not able to deploy to heroku or github pages

Hi, I'm trying to deploy the app:
On GitHub pages it just shows me the Readme file on the created url.
On Heroku it shows me this error in the logs:

2022-01-15T05:33:45.424226+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=myapp.herokuapp.com request_id=3c64ab79-434e-4b28-bf1f-fb3e3a4c207b fwd="202.89.77.71" dyno= connect= service= status=503 bytes= protocol=https

2022-01-15T05:33:46.475301+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=f5e94d87-a369-45d0-b7ad-f07a26b59377 fwd="202.89.77.71" dyno= connect= service= status=503 bytes= protocol=https

For heroku I'm using this procfile:
web: bin/boot

and this server.js:

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/'));
app.listen(process.env.PORT || 8080);

Please help me deploy this to either of this places

Blocked Google Analytics Crashing Whole Page

Using Firefox + uBlock Origin, the page fails to load due to the error below

Uncaught (in promise) GA4React intialization failed: {"type":"error"}
    onerror ga4manager.tsx:148
    value ga4manager.tsx:144
    value ga4manager.tsx:66
    e index.js:72
    c runtime.js:63
    _invoke runtime.js:293
    T runtime.js:118
    Babel 4
    565 index.js:71
    565 index.js:71
    l (index):1
    t (index):1
    r (index):1
    <anonymous> main.6349041b.chunk.js:1

issue1

Use css-property filter to implent brightness justify feature

使用 redux+css： filter( brightness:( 0.x %); ) 应用在界面上就可以超偷鸡地实现控制栏里Brightness的调节功能啦~ 最好加个限制，否则调到0就完全看不到就尴尬了hhh
因为实在太简单所以不好意思提PR，希望龙大人采纳，嗷呜嗷呜🐲

Failed to compile 编译好像有点问题

出现这个，但是我刷新又能出现画面。但是一闪而过又回到了上图的情况

2

my issiue is how dope this is

无法打开示例页面

无论我开不开代理，都无法访问 https://portfolio.zxh.io/

太酷了！

这个项目出现在我的首推页面上，看了一下非常赞！2333，顺便也瞅了一下作者的博客和其他项目，感觉都非常有意思！祝好~

Can't go deeper...

Hey, cool project! But can't go deeper...

Steps to reproduce

1. Log in
2. Open safari and go to https://portfolio.zxh.io
3. Repeat 1 and 2

How to change it's content to ours

How to change it's content to ours

希望Launchpad内添加应用app而不仅是链接link

建议开屏加个开机加载动画

哈哈

I just wanted to say how awesome this is

Hopefully the good citizens of Github will +1 me.

[Not an issue] This is pure awesomeness!

Oh man, just want to tell you how cool this project is, 好久沒看到那麼酷的react網站了!
Feel free to close this issue.