AI Services Market
AI Services Market › Fabbrica delle skill › Web › Split Frame Portfolio
$4.99 · Nessun login necessariov1.0.0– visualizzazioni

Split Frame Portfolio

Tu da una parte, il tuo lavoro dall'altra — sempre visibili.

Trasforma la tua IA in un creatore di siti portfolio che divide lo schermo — un lato fisso per chi sei, un lato scorrevole per il lavoro — così i visitatori incontrano la persona e le prove allo stesso tempo.

Anteprima di Split Frame Portfolio
Ideale per
Designer, sviluppatori, fotografi e scrittori che hanno bisogno di un sito portfolio veloce
Tempo necessario
~60 min
Livello
Intermedio

Installala in 3 passaggi

Nessuna registrazione. Nessuno strumento da riga di comando. Scegli la tua AI, copia una riga e incollala.

Pro — tutte le 511 skill

Preferisci fare da te? Acquista la skill ($4.99), scarica lo ZIP dalla conferma d'acquisto, decomprimilo nella cartella mostrata sopra e riavvia la sessione della tua AI — stesso risultato. L'hai già acquistata? Il tuo assistente AI può scaricarla per te.

Cosa contiene

Un file SKILL.md (la guida operativa) + un modello di partenza. Un'anteprima:

Split Frame Portfolio

When to use

  • You're a designer, developer, photographer, or writer whose portfolio is currently a long scroll where visitors bounce before reaching the good work
  • You want your name, role, and contact visible at every scroll depth — not buried at the bottom
  • Your work is visual and benefits from a large, uninterrupted viewing pane
  • You're applying for jobs or clients and need a portfolio that reads in 30 seconds
  • You want a portfolio site you can build and update without a CMS or a framework

Workflow

  1. Define the fixed side (input: who you are + what you want → output: identity panel content)
    The fixed side carries exactly five things: name, one-line role ("Product designer — fintech, 6 yrs"), location/timezone, three best links (work, writing, contact), and one call to action ("Book a call" / "See case studies"). Nothing else. If a visitor reads only this side, they should know who you are and what to do next. Draft it in plain text before touching any layout.
  2. Curate the scrolling side (input: all your work → output: 5–8 selected projects with one-line hooks)
    Pick 5–8 projects, not 20: the ones you'd defend in an interview. Each gets a thumbnail, a one-line hook ("Redesigned onboarding — signup completion up"), and a link to the full case study. Order by strength, strongest first — most visitors never scroll past the third project. Cut anything you can't write a one-line hook for; it doesn't belong on the front page.
  3. Write the case-study skeleton (input: selected projects → output: one-page structure per project)
    Each project page follows the same skeleton: problem (2 sentences), your role (1 line), what you did (3–5 bullets with the actual decisions), result (numbers if you have them, honest qualitative outcome if not), and one artifact (screenshot, link, or demo). Same skeleton for every project — consistency is what makes a portfolio feel professional.
  4. Build the split layout (input: identity panel + project list → output: working split-frame page)
    Left (or top on mobile) = fixed identity panel; right (or below on mobile) = scrolling project feed. On desktop the identity side stays put while the work scrolls; on mobile the identity collapses to a compact header above the feed. Use plain HTML/CSS — no framework needed — with one stylesheet, readable type, and images that lazy-load. Test at three widths: phone, laptop, wide monitor.
  5. Proof, link-check, and ship (input: built page → output: live portfolio + update checklist)
    Read every word aloud once, click every link, check every image loads, and confirm the contact action actually reaches you (send yourself a test message). Add one line to the bottom of the feed: when this page was last updated. Ship it, then set a quarterly reminder: swap the weakest project for the newest one.

Anteprima del modello

Split Frame Portfolio — Template

One fixed side, one scrolling side. Fill this in before writing any code.

Identity panel (fixed side — exactly these five things)

Name: {full name} One-line role: {role — field, years — e.g. "Product designer — fintech, 6 yrs"} Location / timezone: {e.g. Berlin · CET} Three best links:

  1. {Work / case studies}
  2. {Writing / blog}
  3. {Contact / social}

Call to action (one only): {e.g. "Book a call →" / "Email me →"} Contact target: {URL / email — must actually reach you}

Project feed (scrolling side — 5–8 projects, strongest first)

Cut list (didn't make the front page + why): {project — reason}

Il pacchetto della skill (SKILL.md + modello) è scritto in inglese.

Pro — tutte le 511 skill

Potrebbe piacerti anche