Minimal Developer Portfolio Homepage
Generates a clean grid-based personal website homepage mockup for a software engineer portfolio design system.
{"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."} {"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."} {"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."} {"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."}