Hairline Grid Portfoliov1.0.4
Nutze diesen Skill für: Webseite erstellen.
Im Kommen
5.031 Downloads0 Likes0-mal gemerkt
$4.99
Was bekomme ich, wenn ich diesen Skill kaufe?Baue eine persönliche Website, die wie ein technisches Zeichenblatt wirkt: eine zentrierte Inhaltsspalte auf randbreiten Haarlinien, monochrome Zinktöne mit vollständigem hellem und dunklem Theme, Streifenbänder zwischen den Abschnitten, eine isometrische Zeichnung „Fig. 1“ und eine wechselnde Rollenzeile. Enthalten sind Profil, Aktivitäts-Heatmap, ausgewählte Arbeiten mit vollständigen Case-Study-Seiten, Berufserfahrung, Stack, Texte mit echten Essays, Über mich und ein validiertes Kontaktformular. Standardmäßig ist es eine eigenständige Datei, die offline öffnet – gemacht für Designer, Design Engineers und Entwickler.
Am häufigsten gewählt von
Aktualisiert am 3. Okt. 2026
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehen
Das bekommst du
- Ein Beispiel mit 15 Routen für den fiktiven Rowan Hale: Startseite, ein Arbeitsverzeichnis mit vier Case Studies und einem Archiv, Texte mit vollständigen Essays, Über mich, Kontakt und eine gestaltete 404-Seite.
- Funktionierende Details: Befehlsmenü, Theme-Umschalter, Filter mit Suche für Arbeiten und Texte, Zeitraum-Tabs für die Heatmap, Kopier-Buttons und ein Kontaktformular mit Inline-Fehlern, Ladezustand und Erfolgsmeldung.
- Projektcover als gezeichnete Live-Produkt-Screens, Schwarzweißfotos aus einer Art Direction, eingebettete Geist-Schriften sowie ein Styleguide und integrierte Prüfungen.
Passt gut für
- Design Engineers und Entwickler, die eine präzise, zurückhaltende Website statt eines auffälligen Templates wollen.
- Jobsuchende, die Case Studies, Essays und ein Kontaktformular brauchen, die in beiden Themes und auf dem Smartphone gut lesbar sind.
- Alle, die Haarlinien, Monospace-Bildunterschriften und monochrome Zurückhaltung mögen.
Nicht geeignet für
- Farbenfrohe, bildlastige Personal Brands; das System ist monochromes Zink mit einem einzigen blauen Akzent.
- Blogs, die ein Content-Management-System brauchen; Essays und Case Studies liegen in den eigenen Daten der Seite.
- Echte Nachrichten direkt zu versenden: Das Kontaktformular bestätigt auf der Seite, bis du ein Backend anbindest.
Corporate Design & MarkenidentitätWebdesign & digitale ErlebnisseWebseite erstellenPortfolio-Website erstellenBearbeitbares ErgebnisGeführter WorkflowVisuell ausgefeiltMinimalistischMonochromHaarlinien-RasterTechnischer Bauplan
Über diesen Skill
Mach aus deinem Namen, Werdegang, Projekten und Essays eine persönliche Website, die aussieht, als wäre sie auf einem Ingenieursblatt entworfen: Haarlinien über den ganzen Bildschirm, monochrome Zinktöne, Streifenbänder und eine kleine isometrische „Fig. 1“. Das ausgearbeitete Beispiel ist der fiktive Rowan Hale, ein Design Engineer in Porto, mit 15 verknüpften Routen. Das Standardergebnis ist eine eigenständige Datei, die offline in jedem Browser öffnet.
Das bekommst du
- Startseite mit „Fig. 1“, Profil, Eckdaten, Heatmap, Über mich, ausgewählten Arbeiten, Berufserfahrung, Stack, Texten und Vorträgen
- Case-Study-Seiten mit Problem, Prozess, Galerie, Ergebnissen und Credits sowie Essays mit Lesefortschrittsbalken und Inhaltsverzeichnis
- Ein Befehlsmenü, helles und dunkles Theme, Filter mit Suche, ein mobiles Menü und ein validiertes Kontaktformular
- Geist, Geist Mono und eine handschriftliche Notiz in Caveat, eingebettet in die Datei, sodass nichts aus dem Netz geladen wird
So nutzt du es
- Nenne deinen Namen, Rollen, Stadt, Projekte mit Ergebnissen, Berufserfahrung, Essays und Kontaktdaten; fehlende Fakten werden entworfen und aufgelistet.
- Dein Agent füllt die Daten, zeichnet für jedes Projekt ein Cover und wandelt dein Porträt in Schwarzweiß um.
- Öffne die Website in beiden Themes, teste Befehlsmenü und Kontaktformular und wünsch dir dann Änderungen.
Dein eigenes Porträt und deine Fotos kosten nichts extra; für generierte Fotos können Nutzungskosten deines Bildtools anfallen.
Was du vorab brauchst
- Du bringst mit
- Name, drei bis fünf kurze Rollenbezeichnungen, Stadt, E-Mail und Verfügbarkeit · Zwei bis sechs Projekte mit Rolle, Prozessschritten und messbaren Ergebnissen, dazu Berufserfahrung und Essays · Ein Porträtfoto oder die Erlaubnis, einen Platzhalter zu generieren
- Abhängigkeiten
- Node.js 18 oder neuer auf dem Rechner deines Agenten, um das mitgelieferte Skript auszuführen, das die einzelne Offline-Datei baut · Internetzugang während des Builds, damit die Schriften einmal heruntergeladen und eingebettet werden können · Optional: ein Bildgenerierungstool in deinem Agenten für Arbeitsplatz- oder Ortsfotos
- Externe Kosten
- Für Fotos, die mit dem Bildtool deines Agenten generiert werden, können dessen Nutzungskosten anfallen. Deine eigenen Fotos und die gezeichneten Projektcover kosten nichts extra.
- Zuletzt getestet
- v1.0.4 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …