厳選・オープン・無料

Soulwire

クリエイティブなコーダーおよびエンジニアのための、ミニマルでmonospacedなポートフォリオ。

01

デザイン DNA

ターミナル風のパーソナル・ポートフォリオ

02

カラー

near-blackの背景とlight grayのテキストを用いた、厳格なモノクロム・パレット

03

タイポグラフィ

monospace

• display24px · 300

全テキストはmonospaced · 全体を通してlight weight (300)を使用 · セクションラベルには大文字とletter-spacingを適用

04

余白

セクション間に豊かなwhitespaceを置いた、直線的で予測可能なリズム

05

サーフェス (角丸 / 影 / 罫線)

目に見えるボーダーは不使用

06

レイアウト

フルワイドのdark背景上に中央配置されたコンテンツカラム

07

モーションとインタラクション

要素の出現時におけるopacityトランジション

インタラクティブ要素上のpointerカーソル · 標準のブラウザ動作

08

コンポーネント

• button pointerカーソルを用いたシンプルなmonospacedテキストリンク
• card なし
• chip なし
• input なし
• hero 大きな見出しと短いバイオで構成された、左揃えのシンプルなテキストブロック

09

文体と禁止事項

• トーン プロフェッショナル、直接的、かつミニマル
• 見出し シンプルで会話的、かつ大きなサイズ
• CTA プレーンなmonospacedテキストリンク

• セリフフォントを使用しない — スクリーンショットはmonospaceフォントのみを示している
• 明るい色や彩度の高い色を使用しない — スクリーンショットは厳格なグレースケール・パレットを示している
• シャドウや奥行きを追加しない — スクリーンショットは完全にフラットなサーフェスを示している
• 要素に角丸を使用しない — スクリーンショットはシャープな角、または角なしを示している
• 従来のナビゲーションバーを使用しない — スクリーンショットはレイアウトに統合されたリンクを示している
• テキストを中央揃えにしない — スクリーンショットは左揃えのコンテンツブロックを示している
• 避ける: マーケティング用語
• 避ける: 過度な装飾
• 避ける: 会話のフィラー

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko