Skip to main content

Build your portfolio website: the quick start

A short summary of the free guide at adityagangwani.me/portfolio-guide. Use it as a checklist; the online guide has the full steps and the prompts to copy.

Back to the full guide

To keep a PDF copy, choose “Save as PDF” as the destination in the print dialog.

From notes to a live portfolio in five steps

The shortest path through this guide, for any field: design, engineering, research, teaching, product, or something else entirely. Each step lists what to do and links to the step with the full instructions.

Hosting can be free: Vercel’s Hobby plan (personal, non-commercial use) or GitHub Pages (public repositories on GitHub Free), both with usage limits. Some AI coding tools need a paid plan. A custom domain is optional and costs money every year.

Times are a rough guide. Your content and your review take most of the time.

  1. Rough time: 1–3 hours

    Prepare your content

    Gather the words, work samples, and links your site will show, so the AI tool works from real material instead of inventing it.

    • Write two or three sentences on what you do and the kind of role, client, or program you want next.
    • Pick two to four pieces of work. For each, note the problem, what you did, and what changed as a result.
    • Put your links (email, LinkedIn, resume, other profiles) and a few clearly named images in one folder.
    • Run the discovery prompt to turn those notes into a sitemap and a content outline, saved as portfolio-brief.md.
    Full steps
    Step 1, Picture your site and Step 2, Gather content
    Jump to
    Discovery prompt
  2. Rough time: 2–6 hours

    Build the site with an AI tool

    Give an AI coding tool the master prompt and your outline, then improve the first draft with small, specific requests.

    • Choose a tool: a coding agent such as Google Antigravity or Claude Code, or a chat assistant you copy code from. Some need a paid plan; free tiers have usage limits.
    • Put portfolio-brief.md in the project folder, paste the master prompt, fill in the marked parts, and let the tool build a first version in Next.js and TypeScript.
    • Open the site in your browser and ask for one change at a time: say what you see and what you want instead.
    • Check it at phone width and read every word. Remove anything that is not true.
    Full steps
    Step 3, Pick an AI tool and Step 4, Build and refine
    Jump to
    Master prompt
  3. Rough time: 20–45 minutes

    Put the project on GitHub

    Create a free GitHub account and a repository, then push your project so a host can publish it.

    • Create a GitHub account and a new repository. If you plan to use GitHub Pages on GitHub Free, make the repository public.
    • Push your code with your coding agent, with GitHub Desktop, or by uploading files in the browser.
    • Keep passwords, API keys, and .env files out of the repository.
    Full steps
    Step 5, Save to GitHub
    Jump to
    Keep secrets out of your repository
  4. Rough time: 15–45 minutes

    Deploy on Vercel or GitHub Pages

    Pick one host, connect your repository, and get a free public address. After that, each push to GitHub updates the live site.

    • Compare the two hosts and pick one. Vercel can also run server code; GitHub Pages publishes static files only.
    • Vercel: import the repository, check the framework it detects, and deploy to a vercel.app address.
    • GitHub Pages: in the repository’s Settings, open Pages and publish from a branch or with GitHub Actions to a github.io address.
    • If a deployment fails, copy the error (or take a screenshot of it) and give it to your coding agent with the short fix prompt, then push the fix.
    • Push a small change and confirm the live site updates. On GitHub Pages this can take up to 10 minutes.
    Full steps
    Step 6, Choose a host and Step 7, Go live
    Jump to
    Compare Vercel and GitHub Pages
  5. Rough time: 30–60 minutes

    Check and share

    Test the live site the way a visitor would, fix what breaks, then share the address.

    • Open the live address on a phone and on a laptop, and click every link and button.
    • Work through the launch checklist: content, design and usability, and technical checks.
    • If something breaks, find the symptom in the troubleshooting table and fix the smallest thing first.
    • Add the address to your resume, LinkedIn, and email signature.
    Full steps
    Step 10, Check and launch
    Jump to
    Help desk, Optional: use your own domain

Tip:Keep this guide open in one tab and your AI tool in another; the address bar always points to your current step.

From the free guide by Aditya Gangwani at https://adityagangwani.me/portfolio-guide. Hosting plans, prices, and tool features change; check the online guide and each provider’s official pages before you rely on a detail.