厳選・オープン・無料
Soulwire
クリエイティブなコーダーおよびエンジニアのための、ミニマルでmonospacedなポートフォリオ。
DeveloperPortfolioDark ModeMonospaceClean
01
デザイン DNA
クリエイティブ・コーダージェネラティブ・デザインインタラクティブミニマル
ターミナル風のパーソナル・ポートフォリオ
02
カラー
#E2E6E8Ink
#16191BBG
rgba(226,230,232,1.0)Line
near-blackの背景とlight grayのテキストを用いた、厳格なモノクロム・パレット
03
タイポグラフィ
monospace
全テキストはmonospaced · 全体を通してlight weight (300)を使用 · セクションラベルには大文字とletter-spacingを適用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクション間に豊かなwhitespaceを置いた、直線的で予測可能なリズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
目に見えるボーダーは不使用
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
フルワイドのdark背景上に中央配置されたコンテンツカラム
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing
要素の出現時におけるopacityトランジション
インタラクティブ要素上のpointerカーソル · 標準のブラウザ動作
08
コンポーネント
- button pointerカーソルを用いたシンプルなmonospacedテキストリンク
- card なし
- chip なし
- input なし
- hero 大きな見出しと短いバイオで構成された、左揃えのシンプルなテキストブロック
09
文体と禁止事項
- トーン プロフェッショナル、直接的、かつミニマル
- 見出し シンプルで会話的、かつ大きなサイズ
- CTA プレーンなmonospacedテキストリンク
- セリフフォントを使用しない — スクリーンショットはmonospaceフォントのみを示している
- 明るい色や彩度の高い色を使用しない — スクリーンショットは厳格なグレースケール・パレットを示している
- シャドウや奥行きを追加しない — スクリーンショットは完全にフラットなサーフェスを示している
- 要素に角丸を使用しない — スクリーンショットはシャープな角、または角なしを示している
- 従来のナビゲーションバーを使用しない — スクリーンショットはレイアウトに統合されたリンクを示している
- テキストを中央揃えにしない — スクリーンショットは左揃えのコンテンツブロックを示している
- 避ける: マーケティング用語
- 避ける: 過度な装飾
- 避ける: 会話のフィラー
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
クリエイティブなコーダーのためのミニマルな開発者ポートフォリオ。darkでモノクロムなカラースキーム(bg #16191B、ink #E2E6E8)と厳格にmonospacedなタイポグラフィシステム(Roboto Mono)を採用。中央揃えのシングルカラム構造で、豊かなwhitespace、ボーダーやシャドウなし。重要禁止事項:serifまたはsans-serifフォントの導入、彩度やコントラストの高いアクセントカラーの使用、三次元的な奥行きや要素への角丸の追加は一切行わないこと。
en · zh-CN · zh-TW · ja · ko