Minimalistisches Entwickler-Portfolio-Homepage-Design

Generates a clean grid-based personal website homepage mockup for a software engineer portfolio design system.

{"type":"Desktop-Browser-Screenshot eines minimalistischen Designentwurfs für eine persönliche Portfolio-Website","style":"Schweizer Rastersystem, brutalistischer Minimalismus, Schwarz-Weiß-Palette, dezente technische Blaupausen-Hilfslinien, dünne graue Rahmen, viel Weißraum, Monospace-Mikro-Labels gemischt mit fetter geometrischer serifenloser Display-Schrift","canvas":{"aspect_ratio":"Breitbild 16:9","environment":"dargestellt in einem Chrome-ähnlichen Browserfenster unter localhost:5173 mit sichtbaren Tabs, Lesezeichenleiste und Adresszeile","background":"weiß"},"brand":{"logo":"kleines quadratisches umrandetes Zeichen mit den Initialen NRS","name":"{argument name=\"character name\" default=\"Naufaldi Rafif S.\"}"},"header":{"position":"oben fixierte Website-Navigationsleiste unter der Browser-Chrome","height":"ca. 64px","left_brand":"NRS-Logo gefolgt von Naufaldi Rafif S.","navigation":{"count":6,"items":["HOME","BLOG","PROJEKTE","ÜBER MICH","SPEAKER","SONSTIGES mit Dropdown-Pfeil"],"active_item":"HOME in einem dünn umrandeten rechteckigen Tab"},"actions":{"count":3,"items":["Kontakt-Button, weiß umrandet","CV herunterladen-Button, schwarz gefüllt mit Pfeil","kleiner quadratischer Button für Sonnen-/Theme-Icon"]},"layout":{"main_container":"großer, zentrierter rechteckiger Rasterbereich mit dezenten vertikalen und horizontalen Hilfslinien, Koordinatenbeschriftungen und dünnem Rahmen","technical_annotations":{"count":7,"labels":["X-1440","X-768","X-0","X-1024","X-768","X-480","Y-0 / Y-360 / Y-720 Hilfslinien-Markierungen"]},"sections":[{"title":"01 // INTRO","position":"linke große Inhaltsspalte","count":1,"content":"riesige eingerahmte Überschrift mit {argument name=\"headline text\" default=\"NAUFALDI RAFIF S.\"}, aufgeteilt auf zwei Zeilen, schwarze, extra-fette Versalien"},{"title":"professionelle Zusammenfassung","position":"unter der Überschrift in der linken Spalte","count":3,"items":["Untertitel: {argument name=\"role title\" default=\"Software Engineer & Mentor\"}","Spezialitäts-Tags: PRODUKTSYSTEME | BACKEND-GRUNDLAGEN | ENGINEERING-MENTORING","Absatz: {argument name=\"bio paragraph\" default=\"Mein Fundament ist Frontend, aber die Ausrichtung ist breiter: Backend-Ownership, Produktarchitektur und End-to-End-Softwarebereitstellung.\"}"]},{"title":"02 // ROUTES","position":"rechte Seitenleiste, getrennt durch einen vertikalen Trennstrich","count":3,"items":["01 Projekte ansehen, schwarze aktive Karte mit Code-Icon und Pfeil nach rechts","02 Kontakt aufnehmen, weiße Zeile mit Pfeil nach rechts","03 CV herunterladen, weiße Zeile mit Pfeil nach rechts"]},{"title":"unterer Statusstreifen","position":"unten am umrandeten Container","count":4,"items":["OFFEN FÜR PROJEKTE","7 JAHRE ERFAHRUNG","1000+ MENTEES","BEKASI, INDONESIEN"]}],"footer_meta":"rechte Seite des unteren Streifens zeigt BUILD:2026 und PRD:01"},"typography":{"headline":"massive, fette serifenlose Versalien, enger Zeilenabstand","body":"saubere, gut lesbare serifenlose Schrift","microcopy":"kleine Monospace-Versalien mit weitem Buchstabenabstand"},"color_palette":{"primary":"#0b0d0e fast Schwarz","background":"#ffffff","border":"#e8e8e8 hellgrau","guides":"#edf2ef sehr dezentes Grüngrau","accent":"dünne grüne Linie auf der aktiven Routen-Karte und der oberen Raster-Hilfslinie"},"composition_notes":"Soll wie ein poliertes Web-Designsystem-Mockup für die Implementierung aussehen, nicht wie eine Marketing-Landingpage; betone präzise Ausrichtung, Raster-Overlays, Koordinatenbeschriftungen und moderne Entwickler-Portfolio-Ästhetik."}

Maschinell übersetzt — das Original hat dieses Ergebnis erzeugt.

✨ Generieren Speichern Prompt kopieren Teilen Originalbeitrag In Hitboard öffnen