How to Build a Professional Portfolio Using AI

Why Build a Portfolio?

A lot of professional work is visual. You build dashboards, design systems, create maps, develop interfaces, write reports that drive decisions. A portfolio provides demonstrable proof of what you put on your resume. It shows the quality of your work, the way you think through problems, and the results you deliver. A strong portfolio can set you apart. A weak one can actively hurt you.

Here is the challenge: most professionals who would benefit from a portfolio do not have one. They work in government, public health, operations, data, product management, consulting. They have spent years solving hard problems in complex organizations. They have never had a reason to package that work for an audience. And when they finally sit down to build a portfolio, they stare at a blank screen because they do not know where to start, they are not designers, and they do not code.

AI has changed that equation. You do not need to hire a designer or learn to code. You can focus your energy on showcasing your work instead of figuring out how to lay it out. The AI handles the layout, the code, and the deployment. You use AI as a tool to augment your workflow, not replace your thinking.

This still takes real work. The thinking, the reflection, the decisions about what to include and how to frame it: that is all you. What you get at the end is a live, professional website that you own and control, hosted for free, built on your actual thinking. No templates. No drag-and-drop builders. No monthly fees.

More importantly: the process of building the portfolio will change how you talk about your work. The reflection, the voice memos, the hard decisions about what to include and what to cut will sharpen how you present yourself in every professional context, whether or not anyone ever visits the site.

A Note on Industry-Specific Portfolios

This is a generalized portfolio approach that works well for articulating your value and your projects across many industries. Some industries and professions have particular expectations for how a portfolio is organized. Architecture, UX design, and graphic design, for example, each have conventions about what to include and how to present it.

I come at this from GIS, where I ran a GIS portfolio challenge to help other people build theirs. I know this approach works, because it has worked for me. That is the whole reason I wrote this down.

This approach still applies. Where it stands apart is in the belief that your professional and personal experiences all connect, and that the most compelling portfolios tell a narrative story about how your different experiences add up to something meaningful. Your unique story matters, and this process helps you develop a clear and comprehensive through line.

If you work in a field with specific portfolio conventions, you can feed this entire document to an AI tool and ask it to generate an adapted version for your industry. The content-first philosophy and the iterative process transfer directly.

Why Context and Iteration Matter

Two ideas run through every phase of this process: context and iteration.

Context is what separates a forgettable portfolio from one that sounds like you. The more raw material you give the AI, the better it can capture your voice, your values, and the way you actually think about your work. A thin database produces generic output. A rich database produces something that reads like you wrote it. That is why the content database phase takes the longest and matters the most.

Iteration is what separates a good portfolio from a great one. You will not get the right answer on the first try for any part of this process. Not the brand identity, not the thesis, not the page layouts, not the case studies. The people who build the strongest portfolios are the ones who go back, rethink, ask for feedback, and refine. Every phase in this guide is designed to be revisited. At every stage, this process encourages you to generate multiple options and compare them. You do this with brand identity options. You do this with homepage layouts. You do this with case study page designs. Seeing your choices side by side is how you develop a point of view about your own work.

How to Read This Guide

This guide is organized in phases, and the phases are roughly sequential. You will move through them in order, but you will also loop back. Building a portfolio is not a straight line.

The first few phases, building the content database and developing your brand identity, take the most time. Once you have those, you can build the actual portfolio site very quickly.

The phases are:

1. Build your content database
2. Develop your brand identity
3. Define your story
4. Create your resume
5. Gather your visual evidence
6. Refine your story
7. Build the site
8. Deploy, review, get feedback, and keep iterating
9. Share your work

Before You Start

Before diving into Phase 1, make sure you have the following accounts and tools set up. Discovering you need something mid-process breaks your momentum.

Accounts you need:

• A free GitHub account (for hosting your site)
• An Anthropic account (for Claude Code access, either API pay-per-use or a Pro/Team subscription)

Software to install:

• Node.js (version 20 or higher, required for Claude Code)
• Claude Code (installed via npm install -g @anthropic-ai/claude-code after Node.js is set up)
• Git (for version control and deployment; GitHub's guide at pages.github.com walks you through installation)

Other things you will want:

• A phone with a voice recording app (Voice Memos on iPhone, or any recording app on Android)
• A transcription tool (Otter.ai (referral link), Apple's built-in transcription, or Whisper via Claude Code)
• A way to take and organize screenshots
• Optionally, a fast way to review pages and pipe feedback straight back to Claude Code. I built a small open-source tool, html-review, for exactly this while making my own portfolio — more on it in Phase 7.

Rough cost estimate: GitHub Pages is free. A custom domain costs roughly $12 per year. Claude Code access depends on your plan: if you use the Anthropic API, a project like this typically costs $10–30 in total API usage. If you use a Claude Pro subscription ($20/month) or Team plan, the usage is included. Otter.ai has a free tier that covers basic transcription needs.

The Tools

To complete this process, you can use many different tools. These are the tools I used, and I will reference them throughout this guide. You can substitute whatever works best for you.

A note on these prompts: The prompts in this guide were developed and tested using Claude Code on a Mac using Terminal. Many of the processes should work on Windows, but the specific commands may be slightly different. The prompts themselves are starting points, not scripts. The best results come from chatting back and forth. Copy the prompt, send it, and then give more context as Claude asks follow-up questions or as you think of more to say. The more context you provide, the better the output. You will see [bracketed placeholders] throughout the prompts. You can fill those in before sending the prompt, or you can just send the prompt as-is and provide that information at the end or in a follow-up message. Claude Code will ask for what it needs.

Claude Code

Claude Code is a command-line tool from Anthropic that lets you work with Claude directly from your terminal. Instead of copying and pasting code between a chat window and your files, Claude Code reads your project files, writes code, runs commands, and manages your entire project in place. You describe what you want. It builds it.

One of the biggest reasons to use a tool like Claude Code: if you need to make one small change, it can make that change across every page of your site at once. You do not have to download files, edit them individually, and re-upload them. This saves an enormous amount of time, especially as your portfolio grows.

You have two options for access. You can use the Anthropic API, where you pay per use. For a project like this, the cost is relatively low. Or you can pay for one of the Claude memberships (Pro or Team), which gives you a set amount of usage without paying per query.

A note on choosing the right model for the job. Claude Code lets you switch between models with the /model command, and not every task needs the most powerful (and most expensive) one. Think of it like matching the tool to the task. Use a top-tier model like Opus for the work that benefits from real reasoning: shaping your thesis, drafting case studies in your voice, designing the homepage, making judgment calls about what to include. For mechanical, well-defined work, like renaming files, reorganizing folders, converting a document, or making a small repetitive change across pages, a lighter, faster model handles it perfectly well and costs less. Setting yourself a simple rule, "reasoning-heavy work gets the big model, busywork gets a lighter one," keeps you from burning your best model (and your budget) on tasks that do not need it. If you are on a subscription rather than the API, this also stretches your usage further.

Install Claude Code by running this in your terminal:

npm install -g @anthropic-ai/claude-code

You will need a Node.js installation (version 20+) and an Anthropic account. Full setup instructions live at docs.anthropic.com.

If you have never used a terminal before: the terminal is a text-based way to talk to your computer. On a Mac, open the app called "Terminal." On Windows, open "Command Prompt" or "PowerShell." You type commands, press enter, and things happen. Claude Code turns this into a conversation. You type what you want in plain English, and Claude Code does the technical work.

A note on permissions and modes: By default, Claude Code asks you to approve actions at various points, so you need to keep your terminal visible and approve them as they come up. You can change how much it asks by cycling through its permission modes, and the single key you use for this is Shift+Tab. Each press moves you to the next mode, and the current mode is always shown at the bottom of your terminal so you can see where you are. There are three modes worth knowing:

• Normal (ask-first) mode. The default. Claude Code pauses and asks before it makes edits or runs commands. Safest, slowest, most hands-on.
• Auto-accept mode (often called "auto mode"). Claude Code makes edits and runs the routine commands of a step without stopping to ask for each one. It still works inside Claude Code's normal guardrails; it just stops interrupting you for the ordinary stuff. This is the mode that lets you step away and come back to real progress, and it is the one you will use most for portfolio work, since you are creating and editing files in your own project folder.
• Plan mode. Claude Code researches and proposes a plan for how it will do something, then waits for your approval before touching anything. Best when you want to think through an approach before it builds. We come back to plan mode in Phase 7.

You are always just one or two Shift+Tab presses away from switching. A good rhythm: use plan mode to agree on an approach, auto-accept mode to let the building happen, and normal mode any time you want to slow down and review each step closely.

A note on file locks: Depending on how your computer is set up, if you have a file open in a text editor, Claude Code may not be able to write to it because the editor locks the file. If you have a file open in your browser (like an HTML preview), you are unlikely to run into this issue. If Claude Code reports that it cannot write to a file, close it in your editor and try again.

There are other tools that can accomplish similar things. ChatGPT, Cursor, and other AI-powered development tools all offer ways to build websites through conversation. The core process in this guide applies regardless of which tool you choose.

GitHub Pages

GitHub is a version control platform. It tracks every change you make to your code, lets you revert mistakes, and keeps a full history of your project. One of its features, GitHub Pages, lets you turn any repository into a live website. You push your files to GitHub, and your site goes live at yourusername.github.io.

This is one of the easiest ways to quickly publish your work. I recommend purchasing a custom domain (like yourname.com) and connecting it to your GitHub Pages site. It is inexpensive (roughly $12/year from a registrar like Namecheap or Cloudflare) and makes a real difference in how your portfolio comes across. Claude Code can help you set up a custom domain:

Beyond GitHub Pages, you can host your site on Amazon Web Services, Netlify, Vercel, or any number of other platforms. GitHub Pages is free and simple, which is why I recommend starting there.

You will need a free GitHub account and Git installed on your computer. GitHub's own guide walks you through both: pages.github.com. Claude Code can also walk you through the setup process directly:

Why This Combination

Claude Code reads every file in your project folder. It makes changes across multiple pages at once. It pushes updates directly to GitHub. When you want to change a font across your entire site, you describe the change once and Claude Code updates every file. When you want to deploy, Claude Code runs the Git commands for you. You stay focused on decisions. It handles syntax.

Phase 1: Build Your Content Database

This is the most important phase, and it is the one most people want to skip. Do not skip it.

Context is the thing that really matters. Your portfolio will only ever be as compelling as the raw material behind it. If you sit down to write case studies from memory, you will default to vague, resume-style language. "Led a team." "Improved efficiency." "Delivered on time." That language is forgettable because it does not capture how you actually think.

The database is different. It is a messy, honest, comprehensive collection of everything you know about your own work. It captures the specifics: the problem that nobody else wanted to touch, the moment you realized the original approach would not work, the workaround you invented at 2am, the metric that proved it mattered. You will not use all of it. You will use the best of it, and the best of it will be things you would never have written down if you were trying to be polished from the start.

The database also captures who you are beyond your job title. If you are a marathon runner, there are ways that endurance and persistence show up in how you approach your work. If you taught yourself woodworking or learned a new language, that says something about how you learn. The best portfolios paint a complete picture of a person, and the interview process should go there.

Budget several days for this phase. It is not a single sitting. It is an ongoing, iterative process that you chip away at. Keep coming back to update the database throughout the entire portfolio-building process. New insights will surface as you work through later phases.

How Claude Code Sessions Work

Every time you close your terminal, your Claude Code session ends. When you open a new terminal and start Claude Code again, it is like starting a brand new chat. Claude Code does not remember your previous conversation. This is why the CLAUDE.md file is so important: Claude Code reads it at the start of every session, so it picks up context about your project without you having to re-explain everything.

To start a new Claude Code session, navigate to your project folder and start Claude Code. For example:

cd /Users/yourname/Documents/portfolio
claude

Claude Code will open in that folder, read the CLAUDE.md, and be ready to work.

Over the course of a long session, Claude Code may run out of context space. When this happens, it will "compact" the conversation, which means it summarizes what you have discussed so far and continues with that summary. You do not need to do anything when this happens. It is automatic. If a session is getting very long and you notice Claude Code losing track of details, it can help to end the session and start a fresh one. The CLAUDE.md will bring it back up to speed.

Set Up Your Project

Create a project folder on your computer. Drop your resume in it. Before you do anything else, set up your folder structure and give Claude Code the context it needs to help you effectively throughout this process. Here is a recommended structure:

• database/ — Your content database. Voice memo transcripts, interview answers, project writeups, and any raw material about your work and thinking.
• resume/ — Your resume HTML file, PDF export, and any cover letter variations.
• portfolio/ — The actual site files. HTML, CSS, and JavaScript for your portfolio website.
  • portfolio/images/ — Visual evidence. Screenshots, diagrams, photos, and any visual materials for your case studies.
• inspiration/ — Mood boards, screenshots of portfolios you admire, notes about what you like and why.
• fonts/ — Downloaded font files for your brand identity.
• style-guide/ — Your brand identity explorations and final style guide HTML.
• linkedin/ — Social media graphics and any content you create for sharing your work.

A CLAUDE.md file is a documentation file that Claude Code reads every time it starts a session. It helps Claude remember context about your project. Keep it updated throughout the entire process. When you make decisions about your brand, your story, or your target roles, add that information to the CLAUDE.md so Claude Code always has the full picture.

Make updating it a habit. The single best way to keep a multi-day project coherent is to end each phase by telling Claude Code: "Update the CLAUDE.md and the project database with what we decided in this phase." Because every new session starts fresh, the CLAUDE.md is the memory that carries your decisions forward. A stale CLAUDE.md is the most common reason a later session drifts away from choices you already made. You will see this instruction built into many of the prompts below; treat it as a ritual even when a prompt does not spell it out.

Start the Interview

Now begin building your database.

A markdown file is a simple text document (ending in .md) that you can open in any text editor. It uses plain text with minimal formatting symbols. Claude Code will create it for you.

I always copy the interview questions directly into my notes app on my phone so I can access them easily when I am away from my computer.

You do not have to answer every question right away. Answer the ones that come easily first. Come back to the harder ones later. This is iterative. You can stop a session, come back the next day, and pick up where you left off.

Record Voice Memos

One of the best ways to answer those questions easily is to record voice memos. What I did is I copied all the questions into a note on my phone, and I also printed them out. Then I went on walks, did chores, and worked on answering the questions out loud. You will say things in spoken form that you would never sit down and type. That is the point. The spoken version of your story is often more honest and more specific than the written version.

Transcription options: There are plenty of voice transcription tools available. If you use an Apple device, the built-in Voice Memos app does transcription. You can also use Otter.ai (referral link). Another option is to record the audio files and ask Claude Code to use the Whisper model locally to transcribe them. You have lots of choices here.

My workflow: I keep Voice Memos on my phone and record throughout the course of a day. At the end of the day, I transfer the transcripts to my computer and drop them into the project folder.

One caution: I do not recommend using Claude's web interface (claude.ai) for recording or transcribing voice memos. If it loses a blip of internet connectivity, your voice memo and its transcription can be lost. Use a dedicated recording tool on your device, then bring the transcripts into your project folder.

This process is iterative. You will not answer every question in one sitting, and new thoughts will come to you days later. Keep recording. One project per memo, or one question per memo, whatever feels natural. Drop the transcripts into your project folder.

Then answer those new questions. Record more memos. Add them. This back-and-forth is where the database gets rich.

Push for Specific, Grounded Questions

The first round of interview questions is necessarily broad, because Claude Code does not know much about you yet. But once you have answered some questions and dropped in a few voice memos, Claude knows real specifics: the jobs you held, the projects you led, the tools you built. That is the moment to have it generate a much sharper set of questions, ones grounded in your actual history. Generic questions produce generic answers. Specific questions produce the details that make a portfolio unforgettable.

The difference is night and day. A generic question is "Tell me about a challenging project." A grounded, specific question is "You said you worked at the Army Corps of Engineers. What was one specific moment there where your work made a real difference?" or "You mentioned the demand model at Peapod. Walk me through the day you realized the original approach would not work." The specific version forces you to reach for a concrete memory, and concrete memories are where the good material lives.

Do not shy away from questions that get at hard or uncomfortable moments, either. "Tell me about a time in that job when you felt humiliated, and what you did next." "What is a project you are still a little embarrassed by, and what did it teach you?" Those answers are often the most honest and the most human, and they surface the growth and self-awareness that hiring managers actually remember.

Answer these the same way: out loud, in voice memos, whenever they come to you. This is usually the round that turns a decent database into a rich one.

Ask Friends to Interview You

Ask the people who are close to you: what are some of the projects that stood out to them? What are some of the ways they have heard you talk about your work? How do they think you think about your work? The more they can serve as a mirror to you, the better your portfolio will be.

Other people surface the things you take for granted about your own expertise. The thing you consider obvious, the skill you assume everyone has, the insight you think is unremarkable: those are often the most compelling parts of your story. You need someone else to draw them out.

Record the conversations. Transcribe them. Add them to the folder.

A Longer-Term Option: Retrieval-Augmented Generation

As your database grows into dozens of voice-memo transcripts, interview answers, and project writeups, a practical problem shows up: every time Claude Code starts a session, it has to read through all of that material to find what is relevant. That gets slower and uses more of your budget over time.

In the long run, building a retrieval-augmented generation (RAG) database is the right call. Instead of handing Claude your entire database every time, a RAG setup stores your content in a searchable index and pulls only the most relevant pieces for whatever you are working on. It is more consistent, it scales as your material grows, and it will end up saving you money over time. It is out of scope for this guide, so we leave the setup out here, but it is worth knowing as the direction to grow toward.

Worth mentioning: Public Health 360, developed by F&T Labs, lets you create retrieval-augmented generation databases easily using drag-and-drop tools, without extensive configuration. If you want the benefits of a RAG database without building the pipeline yourself, that is one option to explore.

For the scope of this guide, a well-organized folder of Markdown files is more than enough to build an excellent portfolio.

What You Are Building Toward

By the end of this phase, your project folder should contain a sprawling, unpolished document (or collection of documents) that captures the depth of your experience. It should feel like too much. That is exactly right.

Phase 2: Develop Your Brand Identity

With your database growing, start exploring your visual identity. You are developing a consistent visual brand that will carry across everything: your portfolio site, your resume, your LinkedIn presence, your conference slides, your interview presentations. Everything should feel like it comes from the same person.

Before you run any prompts, do some homework. Browse portfolios you admire. Save screenshots into a document where you can take clear notes about each one. Note what you like: a specific color, a layout choice, the way text feels on a page. Be as specific as possible. "I like how this site uses a lot of white space" is helpful. "I like this site" is not. Say things like "I like how this site lays out their case studies." Going on Pinterest and developing a "mood board," which is a collection of images that capture how you want to feel when you interact with a site, is also a great step.

Drop those reference images and notes into your project folder so Claude Code can see them.

A note on accessibility targets: You will see accessibility called out in many prompts throughout this guide. Aim for WCAG AA as your floor: it is a realistic, professional standard that covers color contrast, readable text, and keyboard navigation. AAA is stricter and genuinely hard to hit for many real designs, especially color contrast on anything other than near-black text on a near-white background. Reach for AAA where it does not force you into a palette you dislike, but do not let a perfect accessibility score override a design that looks like you. An accessible AA site beats an inaccessible one that was chasing AAA.

A note on fonts: When you settle on your fonts, download the font files and include them in your project's fonts folder. This ensures your fonts render correctly everywhere, including when generating PDFs from your resume or other materials. Claude Code can help you download and set up the font files. If you use Canva or other design tools, check that the fonts you choose are available in those tools so your brand stays consistent across platforms. If you have a Canva Pro subscription, you can upload your own fonts. If you are using Canva Free, finding a complete list of available fonts is difficult. One workaround: point Claude Code to this Canva blog post listing 100 of the best free fonts and have it use that as a starting point for font selection, then verify that the fonts it recommends are actually available in Canva Free.

Review the HTML file in your browser. Be specific about what works and what does not.

Iterate until it feels right. Do not be afraid to sketch your ideas on paper, take a photo, and share it with Claude Code. Rough sketches help Claude understand what you are going for much faster than words alone. This is what it means to use AI as a tool to augment your thinking.

This style guide becomes the single source of truth for everything Claude Code builds. Every page, every component, every design decision will reference this document.

Phase 3: Define Your Story

This is where the database pays off. You have spent days building a comprehensive picture of your work. Now you find the thread that connects it.

Every strong portfolio has a thesis. Not a job title. A point of view. A storyline is the narrative that connects your individual projects into a coherent picture of who you are and the value you bring. It answers the question: "What do you do, and why does it matter?"

A good thesis is specific enough that not everyone in your field could claim it, and broad enough that it covers the range of your best work. For example:

That is not a job title. That is a point of view. It tells you what this person does, how they think, and why they are different.

Go back and forth. Push on the options. Ask what Claude Code sees that you might be missing. Ask which projects to feature and which to cut. A portfolio with 4–6 strong case studies beats one with 12 shallow ones. Every project you include should earn its place by supporting your thesis.

Deciding What to Leave Out

This is just as important as deciding what to include. You will have projects in your database that do not belong in the portfolio. Old work that no longer represents your skill level. Projects that were fine but unremarkable. Work that pulls in a different direction from your thesis. Things you did because you had to, not because they showcase who you are.

Give yourself permission to cut them. A focused portfolio with 4–6 strong case studies that all reinforce a clear thesis will always outperform a comprehensive portfolio with 12 projects that dilute your story. If a project does not earn its place by supporting your thesis, it does not belong. You can always add it back later if your thesis evolves.

Decide on your case study format. Think about how you want to talk about your work. There are some common structures:

• Context, Challenge, Approach, Outcome
• Problem, Process, Solution, Impact
• Summary, Role, What I Did, Results

Determine what structure makes the most sense for the kind of work you do and how you naturally describe it. You can ask Claude or your AI tool of choice for help thinking through which format fits best. Pick one and use it consistently across all your projects. Consistency signals that you think in systems.

Phase 4: Create Your Resume

Now that you have a brand identity and a clear thesis, create a resume that matches. Your resume and your portfolio should look like they come from the same person.

Once you approve the resume, convert it to PDF using Chrome headless so the fonts embed correctly.

Phase 5: Gather Your Visual Evidence

Now that you have a clear story and know which projects you want to showcase, collect the visual proof of your work. Create an images folder inside your project.

Start by asking Claude Code to help you assess what you have and what you need.

Then go collect. Save screenshots of dashboards, tools, reports, maps, or interfaces you created. Name each image descriptively: project-name-dashboard-overview.jpg, project-name-user-flow.jpg.

When You Cannot Show the Original

Some of your best work may live behind NDAs, security clearances, or client agreements. That does not mean you cannot showcase it. You have options:

• Blur sensitive information. Take a screenshot and blur out names, numbers, or other identifying details. The layout, the design thinking, and the structure of the work are still visible and still valuable.
• Recreate it with dummy data. This is where AI becomes especially useful. If you built a dashboard, describe it to Claude Code and have it generate a version with synthetic data. The result looks like your work, demonstrates your skills, and shares nothing confidential. You can do this with maps, data visualizations, reports, and interfaces.
• Describe the constraints. Sometimes the best way to show the work is to explain what you could not show and why. Hiring managers understand confidentiality. A clear description of the problem, your approach, and the outcome can be just as compelling as a screenshot.

Do not let confidentiality stop you from including your strongest projects. Find a way to show the thinking, even if you cannot show the data.

Not everything needs a screenshot. Some projects are better represented by a diagram, a data visualization, or a before-and-after comparison. Claude Code can help you create Mermaid diagrams, process maps, flow charts, and other visual elements directly in HTML. Some projects have no visual artifact at all, and that is fine. You can describe the work. The point is to show your thinking, and images help when they are available.

Your portfolio is not limited to paid work. Side projects, volunteer work, and personal explorations all count. If it demonstrates how you think and what you can do, it belongs in the conversation.

Phase 6: Refine Your Story

With your visual evidence collected, come back to your story. The process of gathering visuals often reveals gaps or surfaces new connections.

Phase 7: Build the Site

Now you build. Your project folder should contain your style guide, your content database, your images, and a clear thesis. Everything that follows is assembly.

Plan before you build. For the bigger builds in this phase, especially the homepage and the case study template, it is worth having Claude Code think through the approach before it writes a single file. Press Shift+Tab to cycle into plan mode. In plan mode, Claude Code researches your files and proposes a plan for how it will build the page, then waits for you to approve it before doing anything. This is your chance to catch a wrong assumption early, when it costs nothing to fix, instead of after a page is built. Read the plan, push back on anything that feels off, and only then let it build. Once you approve, cycle back to auto-accept mode and let it work.

Turn on auto-accept mode for the build. This phase involves a lot of file creation and editing. Press Shift+Tab to put Claude Code into auto-accept mode so it can build pages without stopping to ask permission for every edit. You will still review each page in your browser as it is finished, so you stay in control of the output. If you ever want Claude Code to slow down and talk through an approach before touching files, press Shift+Tab again to cycle into plan mode, where it proposes a plan and waits for your go-ahead.

Commit early and often. Before you start building pages, initialize your Git repository and make your first commit. Then commit after every major milestone: homepage done, case study template done, about page done. If Claude Code ever breaks something or takes a page in a direction you do not like, you can roll back to the last good version. Version control is your safety net, not just your deployment tool.

From this point forward, ask Claude Code to commit after each major page or change: "Commit this with the message 'homepage v1 complete'."

Build Your Homepage

Start by generating multiple options for your homepage. You want to see different approaches side by side before committing to one direction.

Review the homepage options. Pick what works. Combine elements if you like pieces from different versions.

Build Your Case Study Template

Then do the same for your case study page template. You do not need to build out every case study yet. Build one case study page with real content, and create a second version with placeholder text so you can evaluate the layout independently of the content.

Pick the direction you like.

Write Your Case Studies

Now draft the actual narrative text for each case study. This is where the database pays off most directly. You have all the raw material. Claude Code turns it into polished prose in your voice.

Review the options. Pick the strongest opening. Ask Claude Code to refine it. Repeat for each case study. This is the most writing-intensive part of the build, and it is worth taking your time. Each case study should read like a short, compelling story that proves your thesis.

Make the writing sound like a person, not an AI. Even with a rich database, AI-drafted text can drift into telltale patterns: overuse of em dashes, "not just X but Y" constructions, phrases like "in today's fast-paced world," and a rhythm where everything comes in threes. Readers, and especially hiring managers, notice. One good tool for this is Humanizer, a free skill for Claude Code that detects and strips out common signs of AI writing so your text reads more naturally. You install it once and then invoke it with /humanizer on any draft. Whether you use that tool or just ask Claude Code directly to "remove anything that sounds AI-generated and keep my voice from the database," always do a human pass yourself at the end. You know what sounds like you. Read every case study out loud; if a sentence is not something you would actually say, change it.

Build Your About Page

The About page is often the hardest page to write because it requires you to synthesize everything: your thesis, your personality, your professional history, and the personal details that make you memorable. Most people either write something too formal or too casual. The database gives you the raw material to get it right.

Build the Remaining Pages

Review each page in your browser before moving to the next one. Open the HTML file, read it, click around. Then tell Claude Code what to adjust. Use a voice memo if that is easier than typing out detailed feedback. Record your reactions as you look at the page, then transcribe and share the feedback with Claude Code.

Build Your Navigation and Layout Shell

Once you have your pages built, make sure the site holds together as a whole. Navigation, footer, and the overall flow between pages matter as much as the individual pages themselves.

Tip: If Claude Code generates something useful in the terminal, like a summary or a list, you can ask it to copy the result to your clipboard: "Copy that to my clipboard."

Phase 8: Deploy, Review, Get Feedback, and Keep Iterating

This is not a linear finish line. You deploy, you get feedback, you make changes, you deploy again. The beauty of this setup is that iteration is cheap and fast.

Deploy

Claude Code handles the Git commands. You may need to authenticate with GitHub the first time. Your site will be live at yourusername.github.io/your-portfolio-name within a few minutes. If you purchased a custom domain, now is the time to connect it through GitHub's settings.

Critical: confirm HTTPS actually works on your custom domain. This is the single most common thing people get wrong, and it is invisible until someone else catches it. When you connect a custom domain, GitHub has to provision a security certificate (HTTPS) for it, and that does not always happen automatically. If it fails, anyone who visits https://yourname.com (or whose browser auto-upgrades to https, which most do) gets a full-screen "Your connection is not private" security warning instead of your site. The catch is that if you have only ever visited your own site over plain http://, everything looks fine to you while every real visitor hits a wall. For a portfolio, that is the worst possible first impression.

After connecting your domain, do three things:

1. In your GitHub repository, go to Settings → Pages and confirm the certificate has provisioned (GitHub shows a message). If it has not, remove the custom domain, save, re-add it, and save again — this re-triggers the certificate request. It can take up to an hour.
2. Once the certificate is ready, check the "Enforce HTTPS" box in that same settings page.
3. Test it yourself the way a stranger would: open a fresh or incognito/private browser window and go to https://yourname.com (typing the https:// explicitly). You should see your site with no warning. Do not skip this — visiting over http:// or in your normal browser can hide the exact problem you are checking for.

If the certificate stubbornly refuses to provision, ask Claude Code: "My GitHub Pages custom domain will not provision an HTTPS certificate. Help me diagnose it — check my DNS records for anything blocking Let's Encrypt, like a stray CAA record, and walk me through the fix."

Add SEO and Open Graph Tags

When someone shares your portfolio link on LinkedIn, in a Slack message, or in an email, the link preview is the first impression. If it shows a blank card or a file path, that undermines everything you built. Add proper metadata so your links look polished everywhere they appear.

Add Simple Analytics

Once your site is live, you will want to know if anyone is visiting. You do not need anything complex. GoatCounter is free, open source, privacy-friendly, and requires no cookies. You sign up, get a single script tag, and add it to your pages. It tells you how many people visited, which pages they looked at, and where they came from.

Get Feedback from Real People

This is one of the most important steps in the entire process. Send your portfolio to people you trust and ask specific questions. Do not just say "Can you take a look at this?" Instead, ask:

• Is my thesis clear? Can you tell me what I do and why it matters after reading the homepage?
• When you look at the projects page, do you think I articulated what I did on each project?
• Do you think I am missing anything?
• Does the site feel like me?
• What is the first thing you noticed?
• What confused you?
• If you were hiring for [role], would this portfolio make you want to talk to me?

Take that feedback back to Claude Code and iterate.

Use Claude Code to Pressure-Test It

You do not have to accept every piece of feedback. Decide what resonates, ask Claude Code to make those changes, and review again.

Identify Your Gaps

Once your portfolio is live, use it as a mirror. Look at what you have and ask yourself what is missing.

Keep Iterating

Your portfolio is never done. When you finish a new project, drop the materials in your folder and tell Claude Code:

Claude Code reads your existing style guide, matches everything automatically, and deploys the update. One prompt, multiple files changed, live in minutes.

And if you ever decide to change your entire color palette or switch fonts, you update the style guide and tell Claude Code to propagate the changes. Every page updates at once. That is the power of building a system instead of a collection of one-off pages.

Phase 9: Share Your Work

A portfolio that nobody sees does not help you. Once your site is live, actively share what you have built.

Build LinkedIn Graphics

Rather than writing AI-generated LinkedIn posts, create a series of branded graphics that showcase your projects and your thinking. Write the post text in your own voice. The graphics do the visual heavy lifting.

Review the full set. Some will work immediately. Others will need refinement. Tell Claude Code which ones to adjust and iterate until the set feels cohesive.

How to Use These on LinkedIn

LinkedIn lets you schedule posts using its native scheduling tool. You do not have to publish everything at once. Plan a series over a few weeks. For each post:

• Write the text yourself in your own voice. Tell about your thought process. Show how you work. Ask a question to prompt engagement.
• Attach the branded graphic.
• Link to the relevant case study on your portfolio.

The goal is not to just show your work. The goal is to tell people how you think, invite them to respond, and build your brand as someone worth paying attention to.

Collect Social Proof

Testimonials from real people who have worked with you are some of the most powerful things you can put on a portfolio. Reach out to past bosses, coworkers, and collaborators and ask them to write two paragraphs about you. Be specific about what you are looking for so they can speak directly to your value.

You do not need dozens of testimonials. Two or three strong ones from people who can speak to different aspects of your work go a long way. Place them on your portfolio where they reinforce your case studies or your About page.

Maintain a Consistent Visual Identity

As you think about sharing your work in any context, keep your brand consistent. If you create a presentation for an interview, use your brand colors and fonts. If you share a one-pager or a proposal, match the style guide. If you use Canva or other tools, use the same fonts and colors.

This consistency compounds over time. When people see your LinkedIn graphic, then visit your portfolio, then receive your resume, it should all feel like the same person.