Poshaus

Poshausは、あるイラストレーターの作品をまとめたオンラインの拠点です。イラスト、タトゥーデザイン、ゲームアート、クライアントワークを一か所に集め、動く水と波をテーマにした遊び心のあるデザインで見せています。

サイトの内容

• トップページ：ループする水の動画の上にPoshausのロゴとリンクを置き、その下にイラストのギャラリーを並べています。
• タトゥーデザイン：フラッシュやオーダーメイドの作品のギャラリー。
• ゲーム：Studio 904と制作したゲームのロゴとコンセプトシート。それぞれitch.ioのページにつながります。
• プロジェクト：フェスティバルのポスターや絵本など、クライアントワーク。
• ストア：EverpressのPoshausショップへの短いリンク。

作り方

すべてのページはAstroで事前に生成されるため、訪問者にはJavaScriptをほとんど含まないシンプルなHTMLとCSSが届きます。画像はAstroの画像機能を通り、ビルド時に小さくリサイズした版が作られるので、スマートフォンでもギャラリーがすばやく表示されます。

プロジェクトはコンテンツコレクションとして管理しています。各プロジェクトはJSONファイルの1項目で、カバー画像と、必要に応じて専用ページのギャラリーか外部リンクを持ちます。

スタイルはTailwind CSSで、波のアートワークから取った少数のテーマカラーを使っています。ギャラリーページの波のヘッダーはSVGをCSSのキーフレームで動かしています。

サイトはVercelでホストしています。