Skip to main content
SoftsasiAI for Engineers
Sign in

§ masterplan.md

AI-Generated Portfolio

A personal portfolio where the hero section, project descriptions and even color palette are generated by prompts the visitor can tweak live.

All ideas
Unconventional

01

App overview and objectives

A personal portfolio that rewrites itself for whoever is reading it. A recruiter, a client and a fellow engineer each land on the same URL and see the hero copy, project summaries and even the colour palette re-generated for their context. Success is measured in qualified replies, not pageviews.

02

The problem worth solving

Static portfolios say the same thing to everyone, so they say very little to anyone. Letting the visitor state who they are and what they need turns a brochure into a conversation and proves the owner's AI skill by using it, not describing it.

03

Target audience

  • Primary — Freelance engineers and designers who pitch to very different buyers each week.
  • Secondary — Recruiters and clients who skim ten portfolios in ten minutes and want the relevant slice.

04

Roles and permissions

  • Visitor — read-only public pages, can sign up.
  • Member — owns their own records, cannot see other users' data.

05

Core features

  • Visitor intent picker (recruiter / client / peer) that re-renders hero copy and project ordering
  • Prompt Lab where the visitor can tweak the tone prompt live and watch the page respond
  • Project case studies with problem, approach, result and a hard metric
  • Palette generator that recolours the whole site from one seed prompt
  • Shareable snapshot link that freezes a generated version so it can be sent in an email
  • Contact form with the generated context attached so the first reply is already personalised

Deliberately later

  • Auto-drafted cover letters from a pasted job description
  • Analytics on which generated variants convert
  • Multi-language portfolio generated from the same source content

06

Technical stack

A React front end with server-side AI calls and a small database for projects and snapshots.

Why: Generation must happen on the server so the API key is never exposed and results can be cached per intent — three cached variants cost almost nothing and load instantly.

Alternatives: A fully static site with pre-generated variants (cheapest, zero latency, but no live prompt tweaking), or client-side generation (fast to build, leaks keys — avoid).

07

Conceptual data model

Project — title, problem, approach, result, metrics, tags, media, order

Variant — intent, generated copy, palette seed, source project ordering, cached_at

Snapshot — public id, frozen variant payload, created_at, view count

Inquiry — name, email, message, originating variant

08

Integrations

  • An AI text model for copy generation
  • Email delivery for inquiries
  • Image/file storage for project media

09

UI design principles

  • Break the grid on purpose: overlapping layers, oversized type, one surprising interaction per screen.
  • Motion carries meaning — elements should morph between states instead of hard-cutting.
  • Keep exactly one experimental idea per page so the interface stays usable, not chaotic.

10

Security considerations

  • AI calls run server-side only; the key never reaches the browser.
  • Rate-limit generation per IP so the portfolio cannot be used as a free AI proxy.
  • Snapshots are read-only public documents with no owner data attached.

11

Development phases

Phase 1 — Prove the core

  • — Visitor intent picker (recruiter / client / peer) that re-renders hero copy and project ordering
  • — Prompt Lab where the visitor can tweak the tone prompt live and watch the page respond
  • — Project case studies with problem, approach, result and a hard metric
  • — Static content and design system in place
  • — Basic analytics

Phase 2 — Make it real

  • — Palette generator that recolours the whole site from one seed prompt
  • — Shareable snapshot link that freezes a generated version so it can be sent in an email
  • — Contact form with the generated context attached so the first reply is already personalised
  • — Accounts, sign-in and password reset
  • — Empty, loading and error states everywhere

Phase 3 — Polish and launch

  • — Performance, accessibility and SEO pass
  • — Legal pages, contact route and 404 handling
  • — Wire up: An AI text model for copy generation
  • — Wire up: Email delivery for inquiries

Phase 4 — Grow

  • — Auto-drafted cover letters from a pasted job description
  • — Analytics on which generated variants convert
  • — Multi-language portfolio generated from the same source content

12

Challenges and solutions

Risk — Generated copy drifts into generic AI voice

Solution — Constrain the model with a written voice guide plus real sentences from the owner as few-shot examples.

Risk — Latency on first paint

Solution — Server-render a default variant and stream the personalised rewrite in after.

Risk — Model cost creep

Solution — Cache per intent, regenerate only when the owner edits source content.

13

Future expansion

  • A hosted version other engineers can use with their own content
  • Voice-narrated project walkthroughs
  • Automatic case-study drafting from a Git repository

14

Page list (12 pages)

  1. 01 PUBLIC Home — Intent picker plus the generated hero and highlight reel.
  2. 02 PUBLIC Projects — Full case-study list, reordered by the active intent.
  3. 03 PUBLIC Prompt Lab — Live playground for tone, palette and layout prompts.
  4. 04 PUBLIC About — The human story, stable and hand-written — never generated.
  5. 05 PUBLIC Contact — Form that carries the generated context into the message.
  6. 06 AUTH Sign up — Create an account with email or a social provider.
  7. 07 AUTH Log in — Return to the account, with error and lockout states.
  8. 08 AUTH Reset password — Request a reset link and set a new password.
  9. 09 APP (signed in) Account settings — Profile, email, password, language and delete account.
  10. 10 LEGAL & SYSTEM Privacy policy — What data is collected, why, and how to remove it.
  11. 11 LEGAL & SYSTEM Terms of service — Rules of use, liability and account termination.
  12. 12 LEGAL & SYSTEM 404 not found — Friendly dead end with search and links back.

15

Page map

PUBLIC         AUTH               APP (signed in)      LEGAL & SYSTEM
─────────────  ─────────────────  ───────────────────  ───────────────────
├─ Home        ├─ Sign up         └─ Account settings  ├─ Privacy policy
├─ Projects    ├─ Log in                               ├─ Terms of service
├─ Prompt Lab  └─ Reset password                       └─ 404 not found
├─ About
└─ Contact

key flows:
  Projects ──▶ Contact
  Prompt Lab ──▶ Home