Minimal Developer Portfolio Homepage

{
  "type": "desktop browser screenshot of a minimalist personal portfolio website homepage design draft",
  "style": "Swiss grid system, brutalist minimalism, black and white palette, faint technical blueprint guides, thin gray borders, lots of whitespace, monospace micro-labels mixed with bold geometric sans-serif display type",
  "canvas": {
    "aspect_ratio": "wide 16:9",
    "environment": "shown inside a Chrome-like browser window at localhost:5173 with visible tabs, bookmarks bar, and address bar",
    "background": "white"
  },
  "brand": {
    "logo": "small square outlined mark with initials NRS",
    "name": "{argument name=\"character name\" default=\"Naufaldi Rafif S.\"}"
  },
  "header": {
    "position": "top fixed website navbar below browser chrome",
    "height": "about 64px",
    "left_brand": "NRS logo followed by Naufaldi Rafif S.",
    "navigation": {
      "count": 6,
      "items": [
        "HOME",
        "BLOG",
        "PROJECTS",
        "ABOUT",
        "SPEAKER",
        "OTHER with down chevron"
      ],
      "active_item": "HOME in a thin outlined rectangular tab"
    },
    "actions": {
      "count": 3,
      "items": [
        "Contact white outlined button",
        "Download CV black filled button with arrow",
        "small square sun/theme icon button"
      ]
    }
  },
  "layout": {
    "main_container": "large centered rectangular grid area with faint vertical and horizontal guide lines, coordinate labels, and thin border",
    "technical_annotations": {
      "count": 7,
      "labels": [
        "X-1440",
        "X-768",
        "X-0",
        "X-1024",
        "X-768",
        "X-480",
        "Y-0 / Y-360 / Y-720 guide markings"
      ]
    },
    "sections": [
      {
        "title": "01 // INTRO",
        "position": "left large content column",
        "count": 1,
        "content": "huge boxed headline reading {argument name=\"headline text\" default=\"NAUFALDI RAFIF S.\"} split across two lines, black all-caps extra-bold type"
      },
      {
        "title": "professional summary",
        "position": "below headline in left column",
        "count": 3,
        "items": [
          "subtitle: {argument name=\"role title\" default=\"Software Engineer & Mentor\"}",
          "specialty tags: PRODUCT SYSTEMS | BACKEND FOUNDATIONS | ENGINEERING MENTORSHIP",
          "paragraph: {argument name=\"bio paragraph\" default=\"My foundation is frontend, but the direction is broader: backend ownership, product architecture, and end-to-end software delivery.\"}"
        ]
      },
      {
        "title": "02 // ROUTES",
        "position": "right sidebar separated by a vertical divider",
        "count": 3,
        "items": [
          "01 View projects, black active card with code icon and right arrow",
          "02 Get in touch, white row with right arrow",
          "03 Download CV, white row with right arrow"
        ]
      },
      {
        "title": "bottom status strip",
        "position": "bottom of bordered container",
        "count": 4,
        "items": [
          "OPEN TO WORK",
          "7 YRS EXPERIENCE",
          "1000+ MENTEES",
          "BEKASI, INDONESIA"
        ]
      }
    ],
    "footer_meta": "right side of bottom strip shows BUILD:2026 and PRD:01"
  },
  "typography": {
    "headline": "massive uppercase bold sans-serif, tight spacing",
    "body": "clean readable sans-serif",
    "microcopy": "small uppercase monospace with wide letter spacing"
  },
  "color_palette": {
    "primary": "#0b0d0e near-black",
    "background": "#ffffff",
    "border": "#e8e8e8 light gray",
    "guides": "#edf2ef very faint green-gray",
    "accent": "thin green line on active route card and top grid guide"
  },
  "composition_notes": "Make it look like a polished web design system mockup generated for implementation, not a marketing landing page; emphasize precise alignment, grid overlays, coordinate labels, and modern developer portfolio aesthetics."
}