ポートフォリオサイトには2つの面があります。まず自分の関わってきたプロジェクトや持ち合わせている技術を一覧するものです。そしてもう一つはポートフォリオサイト自体が一つの作品になっているケースです。 今回紹介するplayground-macosはまさに後者で、Xiaohan Zou氏の技術力をうかがわせるものとなっています。

playground-macosの使い方

ログイン画面です。ここからしてすでにmacOSっぽいです。

ノートアプリ。編集はできません。

ブラウザ。

FaceTime風にカメラも。

ターミナル。

メニュー。残念ながら動きません。

Spotlight。

ここまでちゃんと再現されています。

輝度や音量の調整ができます。

Launchpadも呼び出せます。

playground-macosはそのまま実際にアプリケーションを利用したりはできません。あくまでも自分の技術力をアピールするものとしてmacOS風のUI/UXを再現したものです。再現度は非常に高く、Webでここまでできるのかと驚くほどです。

playground-macosはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Xiaohan Zou’s Portfolio Renovamen/playground-macos: My portfolio website simulating macOS’s GUI, developed with React and tailwindcss.