ミニマリスト開発者ポートフォリオUIモックアップ

{
  "type": "ミニマリストな個人ポートフォリオWebサイトのホームページ設計ドラフトのデスクトップブラウザスクリーンショット",
  "style": "スイス・スタイルグリッドシステム、ブルータリズムミニマリズム、モノクロパレット、薄い設計図ガイド線、極細のグレーボーダー、余白の美、幾何学的なボールドサンセリフと等幅マイクロラベルの組み合わせ",
  "canvas": {
    "aspect_ratio": "ワイド 16:9",
    "environment": "タブ、ブックマークバー、アドレスバーが表示されたlocalhost:5173のデスクトップブラウザウィンドウ内",
    "background": "#ffffff"
  },
  "brand": {
    "logo": "イニシャルNRSが入った正方形のアウトラインマーク",
    "name": "[Naufaldi Rafif S.]"
  },
  "header": {
    "position": "ブラウザ下部の固定トップナビゲーションバー",
    "height": "64px",
    "left_brand": "NRSロゴとそれに続く [Naufaldi Rafif S.]",
    "navigation": {
      "count": 6,
      "items": [
        "HOME",
        "BLOG",
        "PROJECTS",
        "ABOUT",
        "SPEAKER",
        "下矢印付きOTHER"
      ],
      "active_item": "細いアウトラインの長方形タブで囲まれたHOME"
    },
    "actions": {
      "count": 3,
      "items": [
        "Contactの白アウトラインボタン",
        "矢印付きDownload CVの黒塗りボタン",
        "正方形のテーマ切り替えアイコンボタン"
      ]
    }
  },
  "layout": {
    "main_container": "中央に配置された長方形グリッドエリア、薄い垂直および水平ガイドライン、座標ラベル、ヘアラインボーダー",
    "technical_annotations": {
      "count": 7,
      "labels": [
        "X-1440",
        "X-768",
        "X-0",
        "X-1024",
        "X-768",
        "X-480",
        "Y-0 / Y-360 / Y-720 ガイドマーク"
      ]
    }
  },
  "sections": [
    {
      "title": "01 // INTRO",
      "position": "左側のメインコンテンツ列",
      "count": 1,
      "content": "2行に分割された特大の黒色オールキャップス超極太見出し [NAUFALDI RAFIF S.]"
    },
    {
      "title": "professional summary",
      "position": "左列見出しの下",
      "count": 3,
      "items": [
        "サブタイトル: [Software Engineer & Mentor]",
        "専門タグ: PRODUCT SYSTEMS | BACKEND FOUNDATIONS | ENGINEERING MENTORSHIP",
        "パラグラフ: [My foundation is frontend, but the direction is broader: backend ownership, product architecture, and end-to-end software delivery.]"
      ]
    },
    {
      "title": "02 // ROUTES",
      "position": "細い垂直線で区切られた右サイドバー",
      "count": 3,
      "items": [
        "01 View projects、コードアイコンと右矢印付きの黒背景アクティブカード",
        "02 Get in touch、右矢印付きの白行",
        "03 Download CV、右矢印付きの白行"
      ]
    },
    {
      "title": "bottom status strip",
      "position": "枠付きコンテナ下部のステータス帯",
      "count": 4,
      "items": [
        "OPEN TO WORK",
        "7 YRS EXPERIENCE",
        "1000+ MENTEES",
        "BEKASI, INDONESIA"
      ]
    }
  ],
  "footer_meta": "下部ステータス帯の右端にBUILD:2026およびPRD:01を表示",
  "typography": {
    "headline": "巨大な大文字太字幾何学的サンセリフ、タイトな文字間隔",
    "body": "視認性の高いクリーンなサンセリフ",
    "microcopy": "広めの字間を持つ小型大文字等幅フォント"
  },
  "color_palette": {
    "primary": "#0b0d0e ニアブラック",
    "background": "#ffffff",
    "border": "#e8e8e8 ライトグレー",
    "guides": "#edf2ef かすかなグリーングレー",
    "accent": "アクティブカード上の繊細なグリーンアクセント線"
  },
  "composition_notes": "ブラウザ内の洗練されたデザインシステムアートボード風に仕上げ、ピクセル単位の精密な配置、構造グリッド線、技術的な座標表記、開発者向けポートフォリオ美学を強調する。"
}