Claude Code Portfolio Website: Build a Stunning Professional Site in just 1 Day Without Writing a Single Line of Code

You have spent years building a body of work worth showing. Courses you have designed. Clients you have served. Projects you have led. Talks you have delivered. And yet, your portfolio website is either non-existent, a plain link-in-bio page, or a neglected template from 2018 that you keep promising to update.

Here is a fact worth sitting with: according to research by the website builder platform Wix, over 56% of professionals believe a personal website is more important than their social media profiles when it comes to being taken seriously by potential clients – but fewer than 30% actually have one that they are proud of. The gap between knowing you need a portfolio and actually having a great one has always been the technical barrier.

That barrier is no longer what it was.

Claude Code, Anthropic’s AI-powered command-line coding agent, makes it possible for a writer, educator, consultant, or coach with zero coding experience to build and deploy a fully custom portfolio website in a weekend. Not a template. Not a drag-and-drop compromise. A real, coded, professional site you own entirely and can update freely.

Peace Akinwale, a B2B SaaS content writer, built her full portfolio website using Claude Code in about 24 hours spread across two days. The ongoing annual maintenance cost? Around $7. Abbas Ali, a complete non-developer, built five websites using Claude Code without knowing a single line of HTML, CSS, or JavaScript.

This guide will walk you through every step of that same process. We will explain every technical term in plain English, cover multiple approaches depending on your comfort level, and give you the prompts, tools, and decision points you need to go from a blank screen to a live portfolio website you are genuinely proud to share.

Disclosure: Our content is engineered to help you make informed, data-driven decisions. Digital Solutions Edge is reader-supported; when you engage with our recommendations or click certain links, we may receive a commission. This support allows us to continue delivering the digital solutions you rely on. Thank you for being part of our community.

What Is Claude Code and Why Should You Use It for Your Portfolio? 

Claude Code is a coding agent built by Anthropic, the AI safety company behind the Claude family of AI models. Unlike using the Claude chat interface on a browser, Claude Code runs inside your computer’s terminal – the black (or white) command-line window that most people never open.

Think of it like this: your computer’s terminal is a direct line of communication to your machine’s inner workings. Normally, you would need years of coding experience to use it productively. Claude Code changes that. You type plain English instructions into the terminal, and Claude does the technical work. It reads files, writes code, installs tools, creates folder structures, and even pushes your finished project to the internet – all from that one window.

Why use Claude Code for a portfolio website, specifically, rather than a website builder like Wix, Squarespace, or WordPress?

The honest answer is ownership and flexibility. With drag-and-drop builders, you are renting space inside a system that makes decisions for you. Your design options are limited to what the platform allows. Your site lives on their servers. If they increase pricing or shut down, your site goes with them. Claude Code builds you a website where every file lives on your own computer. The code is yours. You can take it anywhere.

Oliur, a designer who documented his Claude Code experience, put it plainly: “The interesting part is you don’t need to know how to code to do this. I barely know any code myself.” That is the premise this guide is built on.

There is a second reason relevant specifically to DSE readers: Claude Code gives you something customisable in a way no template ever will. Your portfolio should look like you. Not like a theme that 80,000 other people bought from the same marketplace.

[INTERNAL LINK: What is Claude AI and how does it work – beginner’s guide]

What You Need Before You Start 

Before you open a terminal or download anything, get these items ready. The checklist is short:

Accounts you will need to create:

• A Claude account with at least a Pro subscription ($20/month). The free tier does not include Claude Code access. The Pro plan is sufficient for building a full portfolio site.
• A GitHub account (free, strongly recommended). GitHub stores your website’s code in the cloud and connects to Vercel so your site updates automatically every time you make a change. Without it, you will need to redeploy manually each time. Claude Code handles the full setup – you just need the account.
• A Vercel account (free). Vercel is the hosting service that puts your site on the internet. Think of it as the landlord for your website. You sign up for free and connect it to GitHub.
• A Namecheap or Hostinger account to purchase your domain name. A domain is your website address – the thing people type into a browser to find you.
• A Google account (free, if you do not already have one). You will need this to set up Google Analytics in Step 9, which tracks how many people visit your site and which pages they view. If you already use Gmail, you already have one.
• A CMS (Content Management System) account to store and manage your site’s content. Your CMS is the filing cabinet behind your portfolio – it holds your posts, project descriptions, and pages. You will choose the right one for your situation in Step 4, but the main options are: Hashnode (free, great for writers), Sanity.io (free tier, highly flexible), Contentful (free tier available, professional-grade), Strapi (open-source, self-hosted), WordPress (best if your content is already there), and Ghost (subscription-based, clean and editorial). If you do not plan to have a blog or regularly updated content section, you may not need a CMS account at all – Step 4 covers this fully.

Things to prepare on your computer:

• A folder where you want your portfolio project to live. You can create this at any point, but knowing where you want it saves a step.
• Your CV or résumé as a document (PDF or Word). Claude will use this to populate your experience, bio, and achievements.
• A short list of projects you want to showcase – ideally with a one-paragraph description of each.
• Screenshots or links of two or three portfolio websites you admire. You do not need to explain what you like. Just having the links is enough.
• A clear sense of your brand colours (even if it is just “deep blue and white” or “black and gold”). If you do not have one, Claude can suggest options.

Technical prerequisites:

• A computer running Windows 10 or higher, macOS 13 (Ventura) or higher, or a modern Linux distribution.
• A stable internet connection. Claude Code connects to Anthropic’s cloud servers, so everything it does requires a live connection.
• About 4GB of free storage space on your computer.

That is genuinely the full list. No coding experience. No prior technical background.

[IMAGE PLACEHOLDER: A checklist graphic showing the accounts and files needed before starting. Alt text: Claude Code portfolio website prerequisites checklist]

Step 1 – Secure Your Domain Name 

Your domain name is your address on the internet. It is the thing that goes before “.com” (or .co.uk, .ng, .io, etc.). Peace Akinwale registered hers for $6.99 for the first year. That is the realistic cost expectation.

How to choose a good domain name:

• Use your name or your business name if possible. yourname.com is the gold standard for a portfolio.
• Keep it short. Avoid hyphens. Avoid numbers unless they are part of your brand.
• If .com is taken, .co and .io are clean alternatives for consultants and creatives.

Where to register it:

Namecheap is a reliable, affordable registrar. Head to namecheap.com, search for your preferred domain, and add it to your cart. First-year pricing for a .com domain typically runs between $6 and $14. After the first year, renewal costs are in the $10–$15 range annually.

Hostinger is another solid option, particularly if you are in Africa or Southeast Asia and want local payment support.

[INTERNAL LINK: Hostinger review – web hosting and domains for content creators]

Once you have purchased your domain, do not worry about configuring it yet. You will connect it to your live site at the end of the process. For now, you simply need to own it.

Step 2 – Choose Your Approach: Terminal or Desktop App? 

Here is where many guides lose non-technical readers. They assume everyone is comfortable with a terminal (the command-line window). You do not have to be.

Claude Code is available in two ways:

Option A: The Claude Desktop App (Recommended for Beginners)

Anthropic released a desktop version of Claude Code that sits inside the main Claude application. You access it from the “Code” tab at the top of the Claude desktop app. The experience is almost identical to the terminal version, except you are working inside a familiar app window rather than a black command-line screen.

Oliur, who documented building his first website this way, described the process: “The Code interface makes things a lot easier because you’re basically just prompting Claude and it builds everything inside a folder for you. No terminal required.”

If you are new and the idea of a terminal makes you nervous, start here. Download the Claude desktop app from claude.ai, open it, and navigate to the Code section.

Option B: The Terminal (For Those Who Want Full Control)

The terminal (called “Terminal” on Mac and Linux, “PowerShell” or “Command Prompt” on Windows) gives you the full Claude Code experience. Every serious guide you will find from practised users – including Peace Akinwale’s – uses this approach. It is not as intimidating as it looks, and this guide will walk you through it step by step.

Both options produce the same result. Pick the one that feels more comfortable.

Step 3 – Install Claude Code 

If you chose the Desktop App: Simply download the Claude app from claude.ai, log in with your Claude Pro account, and click the “Code” tab. No installation steps beyond the app download itself.

If you chose the Terminal:

The installation method depends on your operating system:

On a Mac or Linux computer:

Open your Terminal app (search for “Terminal” in Spotlight on Mac) and paste in this single line, then press Enter:

curl -fsSL https://claude.ai/install.sh | bash

What does that do? It runs Anthropic’s official installation script, which downloads the Claude Code application and places it on your computer automatically.

On a Windows computer:

Open PowerShell (search for “PowerShell” in your Windows search bar, right-click, and select “Run as administrator”) and paste in this line, then press Enter:

irm https://claude.ai/install.ps1 | iex

If that does not work, try this alternative:

winget install Anthropic.ClaudeCode

Important for Windows users: Claude Code requires Git for Windows to be installed. Git is a free tool that manages code versions. Download it from git-scm.com/downloads/win and install it with the default settings (just click through). Make sure the option “Add Git to PATH” remains checked during installation.

What is PATH? In plain English, PATH is the list of locations your computer checks when you type a command. When Git or Claude Code are added to PATH, your computer knows where to find them when you call their names.

Once installation is complete, close the terminal entirely and open a new one. Then type claude and press Enter.

You will see a welcome screen asking whether you prefer dark or light mode. Choose with your keyboard arrow keys and press Enter. Next, it will prompt you to log in with your Claude account.

[VIDEO PLACEHOLDER: Screen recording of Claude Code installation on Mac and Windows, step by step]

[IMAGE PLACEHOLDER: Claude Code welcome screen in the terminal. Alt text: Claude Code portfolio website terminal welcome screen]

Step 4 – Choose and Set Up Your Content Management System (CMS) 

A CMS, or Content Management System, is the tool that stores and organises your website’s content – your blog posts, project descriptions, about page, and so on. Think of it as the filing cabinet behind your website, while the website itself is the shop front that customers see.

For a portfolio website, you have several solid options:

Hashnode (Recommended for writers and content creators)

Hashnode is a free, developer-friendly blogging and portfolio platform. What makes it ideal here is its API – a connection point that allows your custom website design to pull in your content automatically. Peace Akinwale used Hashnode for exactly this reason, and it made the migration from her old setup seamless.

To set it up: visit hashnode.com, create a free account, click “Create blog,” and choose a blog URL using your name or brand. You do not need to customise it at this stage. Claude Code will handle the design entirely.

WordPress (Best for those who already have content there)

If your existing content lives on WordPress, it can serve as your headless CMS. “Headless” simply means WordPress handles your content storage, but a completely custom design handles what visitors actually see. This is an intermediate-level setup and is best tackled after you have completed your first portfolio build.

Sanity.io (Best for maximum flexibility)

Sanity is a developer favourite because it gives you total control over your content structure. It has a visual editor and a free tier that is more than adequate for a personal portfolio. It works particularly well if you want to structure your content in a bespoke way – for example, tagging projects by industry, skill set, or client type so they can be filtered on your portfolio page.

Contentful (Best for professional and agency-scale setups)

Contentful is one of the most widely adopted headless CMS platforms in professional web development. It has a generous free tier that supports up to 25,000 API calls per month, which is comfortably enough for a personal portfolio. Its content modelling tools are more advanced than Hashnode or Sanity, making it a strong choice if you anticipate scaling your portfolio into a broader digital presence – say, a consultancy site with multiple content types. Visit contentful.com to create a free account.

Strapi (For readers who want maximum ownership and are comfortable with self-hosting)

Strapi is a fully open-source headless CMS, which means the software itself is free. The key difference from every other option on this list: Strapi runs on your own server rather than a third-party platform. That gives you complete data ownership and no vendor dependency. The trade-off is complexity. You need a server (a cloud hosting service like Railway or Render has free tiers that work) and some comfort navigating the setup process. Strapi is not recommended as a starting point for this guide. If you complete your first portfolio build and want maximum control for a second project, Strapi is worth exploring at that stage.

Plain Markdown Files in GitHub (Simplest technical option)

If you are comfortable enough with the process by the end of this guide, you can simply save your content as plain text files (Markdown format) directly inside your GitHub repository. No CMS login required.

Which should you choose?

For most DSE readers who are new to this: start with Hashnode. It is free, the setup takes under five minutes, and Claude Code integrates with it cleanly. If you already work in a professional context where your clients or employers use Contentful, set that up instead – familiarity matters. Strapi is the long-game choice for those who want full ownership. Save it for round two.

[INTERNAL LINK: Best content management systems for educators and course creators]

Step 5 – Create Your Project Folder 

Before Claude Code starts building, it needs a home – a folder on your computer where all your portfolio files will live.

If you are using the Desktop App, it will ask you to choose a folder when you open the Code section. Simply click “Open Folder,” navigate to where you want your project, and create a new folder called something like “my-portfolio.”

If you are using the terminal, do this:

Open your terminal and type:

mkdir my-portfolio

cd my-portfolio

claude

Breaking that down:

• mkdir my-portfolio – “Make Directory” – creates a new folder called “my-portfolio”
• cd my-portfolio – “Change Directory” – moves you into that folder
• claude – launches Claude Code inside that folder

If you want your portfolio folder inside a specific location (like your Documents or Desktop folder), navigate there first. On a Mac, to put the folder on your Desktop, you would type:

cd ~/Desktop

mkdir my-portfolio

cd my-portfolio

claude

On Windows in PowerShell:

cd C:\Users\YourName\Desktop

mkdir my-portfolio

cd my-portfolio

claude

Replace “YourName” with your actual Windows username.

Step 6 – Write Your Master Prompt 

This is where most people either shine or fumble. Your first prompt to Claude Code sets the direction for everything that follows. The more specific you are, the closer your first build will be to what you actually want – and the less time you will spend going back and forth.

Before you type anything, gather these things:

1. Two or three websites you admire (just the URLs)
2. Your preferred colour palette (even rough descriptions like “navy blue, white, and gold” work)
3. The font style you like (serif fonts like Georgia feel editorial; sans-serif fonts like Inter feel modern and clean)
4. The sections you want on your site
5. Your tagline or professional summary in one sentence

A starter prompt you can copy and adapt:

I want to build a professional portfolio website. Here are my specifications:

Design inspiration: [paste 2-3 URLs of websites you like]

Colour palette: [e.g., deep navy, off-white, and copper gold]

Font preference: [e.g., Georgia for headings, Inter for body text]

Overall feel: [e.g., editorial and serious / warm and creative / clean and minimal]

Pages I need:

– Homepage with a hero section (my name, title, and a short tagline)

– Projects page showing [number] key projects with images and descriptions

– About page with my professional bio and a photo

– Blog or writing section [include this if relevant]

– Contact page with my email and links to LinkedIn, Twitter/X

Technical setup:

– Integrate with Hashnode as my CMS via their GraphQL API [remove if you are not using Hashnode]

– Make the site responsive (looks good on phones and desktops)

– Set it up to deploy on Vercel and connect to GitHub for version control

Please start by researching the best approach for my goals, then create a plan.md file outlining the recommended technology stack, file structure, and step-by-step implementation plan before writing any code.

My tagline is: [paste your tagline here]

What does “GraphQL API” mean? GraphQL is a communication language that allows two digital systems to share data. When you say “integrate with Hashnode via GraphQL API,” you are telling Claude to connect your custom website to your Hashnode account so that any blog post you publish on Hashnode appears automatically on your portfolio site. You do not need to understand GraphQL to use it. Claude handles that entirely.

What is “version control”? It is like a save history for your code. Every time Claude makes a significant change to your site, GitHub records it. If something breaks, you can roll back to a previous version. Asking Claude to set this up from the start saves you headaches later.

Pro tip on prompting from real experience: Abbas Ali, who built five websites without any coding knowledge, used a smart technique before writing his final prompt. He first opened Claude chat (not Code) and typed: “I want to build a portfolio website. Don’t write code yet. Ask me questions to understand what I want, then write me a prompt I can feed to Claude Code.” Claude then asked him clarifying questions, and the answers became the foundation of a detailed, specific prompt. Try this approach if you are unsure how to articulate your vision.

[IMAGE PLACEHOLDER: Screenshot of a well-structured master prompt inside the Claude Code terminal. Alt text: Claude Code portfolio website master prompt example]

Step 7 – Let Claude Build, Then Review and Redirect 

Once you submit your master prompt, Claude Code springs into action. Here is what happens in sequence:

First, it enters Plan Mode. If your prompt was detailed enough, Claude Code will propose a plan before writing a single line of code. You will see a breakdown of the technology choices it recommends, the file structure it intends to create, and the steps it will follow.

Read this plan. Do not just approve it blindly. Ask questions if something is unclear. If the plan mentions a technology you have not heard of, ask Claude to explain it in plain terms. Felix Lee, a designer who documented his Claude Code process, specifically recommends this planning step: “Before writing any code, ask for a plan. Claude Code creates a plan.md file. Open it and review.”

Once you approve the plan, Claude begins building. You will see it working through tasks in real time, installing tools, creating files, and writing code. Lines will scroll past in the terminal. Some of it will look like a foreign language. That is fine. You do not need to read all of it.

Interrupting mid-build:

You are not locked in once Claude starts. If a new idea comes to you – a section you forgot to mention, a design detail you want to add – press the Escape key on your keyboard to pause Claude, type your additional instruction, and press Enter. It will incorporate the change and continue.

Peace Akinwale described doing exactly this during her build: she received a newsletter from TechCrunch mid-build, loved the article page layout, pasted the URL into Claude, and asked it to match the styling. Claude analysed the page and incorporated the design elements.

On Windows, you can also paste screenshots directly into the terminal by pressing Alt+V. On Mac, use Control+V. This means you can show Claude a screenshot of a design element – a specific button style, a navigation layout, a card format – and ask it to replicate the approach.

When Claude needs information from you (your GitHub username, your Hashnode publication ID, your preferred project name), it will pause and ask. Answer each question, or tell Claude you do not know and ask it to guide you through finding the answer. It will walk you through every step.

Step 8 – Preview Your Site Locally 

When Claude Code finishes its initial build, it will typically tell you to preview the site at localhost:3000. This is your cue that the foundational build is complete.

What does localhost:3000 mean?

“Localhost” means your own computer. Rather than putting the site on the internet immediately, Claude sets up a temporary private server on your machine. The “3000” is the port – essentially the door number on your computer’s server. When you open your web browser and type http://localhost:3000 into the address bar, you see your website exactly as it will appear live – but only you can see it. It is completely private.

This preview stage is where your real work begins.

Go through every section. Check every page. Make notes as you go:

• Does the layout feel right?
• Is anything missing from what you described?
• Do the colours match your brand?
• Does the text reflect your actual professional voice?
• Does it look good on your phone? (Resize your browser window to simulate a mobile screen)

Then, feed Claude specific, actionable feedback. Alexis Brochu, a product manager who built her portfolio with Claude, identified a key lesson from her experience: “Specific feedback gets specific results. ‘Make the hero section smaller’ yielded better results than ‘I don’t like the header.'”

Good feedback examples:

• “The hero section text feels too small. Make the heading 64px and centre it vertically in the section.”
• “The project cards need more breathing room between them. Add 40px of space between each card.”
• “The navigation bar should be sticky – it should stay at the top when I scroll down the page.”
• “Add a subtle shadow under each card so they feel elevated from the background.”

Avoid:

• “It looks fine but something feels off.”
• “Make it better.”
• “I don’t like it.”

The more specifically you can describe what you want, the more precisely Claude can deliver it.

[IMAGE PLACEHOLDER: Side-by-side comparison of a portfolio site on desktop and mobile views. Alt text: Claude Code portfolio website responsive design desktop and mobile preview]

Step 9 – Add the Details That Make It Yours 

A portfolio is not just a collection of pages. The features you add on top of the base structure are what make it memorable and functional. Here are specific additions worth considering – all of which can be requested from Claude Code in plain English:

An image lightbox: When a visitor clicks on an image, it opens in a full-screen overlay with a dark backdrop. This is particularly useful if your projects involve visual work or if your blog posts include screenshots. To request it, simply say: “Add an image lightbox so that clicking any image opens it full-screen with a dark overlay and the ability to close it by pressing Escape or clicking outside.”

A table of contents: For long pages or blog posts, a floating or sticky table of contents helps visitors navigate without scrolling endlessly. Say: “Add a sticky table of contents on the left side of long blog posts that highlights the current section as I scroll.”

A search bar on your blog or projects section: If you publish regularly or have many projects, a search function is worth having. Say: “Add a search bar on the projects page that filters results in real-time as I type.”

A contact form with email integration: A contact form that actually delivers emails to your inbox requires an email service. Resend is a clean, developer-friendly option with a generous free tier. Say: “Set up a contact form using Resend so that messages submitted on the contact page arrive in my email inbox.”

Animations and hover effects: Subtle movement makes a site feel polished. Say: “Add a hover effect on each project card so it lifts slightly and shows a soft shadow when I move my cursor over it.”

Code block styling for technical content: If you write about technical topics, this makes your posts look more professional. Say: “Style code blocks in my blog posts with a dark background, monospace font, and a copy-to-clipboard button.”

Google Analytics: If you want to track how many people visit your site and which pages they view, say: “Add Google Analytics tracking to the site. My tracking ID is G-XXXXXXXXXX.” (You get this from analytics.google.com after creating a free account.)

You can feed any of these instructions to Claude one at a time, as you think of them. There is no deadline. Your portfolio can keep evolving.

Step 10 – Deploy Your Site and Go Live 

“Deploying” a website means moving it from your private local computer preview to the actual internet, where anyone with the URL can see it. There are two stages: pushing to GitHub first, then connecting GitHub to Vercel.

Stage A: Push to GitHub

If you have not set up GitHub yet, do it now at github.com – it is free. Once your account is live, tell Claude:

“Push my portfolio project to a new GitHub repository. Help me through the setup if I don’t have GitHub CLI configured.”

GitHub CLI is a tool that lets Claude control your GitHub account directly from the terminal, creating the repository and uploading your files without you having to click anything manually. Claude will install it if needed and ask for your GitHub username.

The relevant commands Claude will typically run on your behalf:

git init

git add .

git commit -m “Initial portfolio build”

git remote add origin https://github.com/yourusername/my-portfolio.git

git push -u origin main

You do not need to understand these commands. But here is what they do in plain English:

• git init – tells Git to start tracking this folder
• git add . – stages all your files (marks them as ready to save)
• git commit -m “…” – saves a snapshot of your work with a description
• git remote add origin – links your local folder to your online GitHub repository
• git push – uploads your files to GitHub

If you prefer to skip GitHub entirely, ask Claude to deploy using the Vercel CLI directly: “Deploy my portfolio to Vercel using the Vercel CLI without GitHub.” It will handle the command. Note that future updates will require a manual redeploy each time, so this works best if you are building a one-time static portfolio you do not plan to update regularly.

Stage B: Deploy to Vercel

Once your code is on GitHub, go to vercel.com and sign up for a free account using your GitHub login (choose “Continue with GitHub”). This links your Vercel account to your GitHub automatically.

Click “Add New Project.” Vercel will show you a list of your GitHub repositories. Select your portfolio repository. Choose any framework preset it recommends (usually it detects this automatically), then click “Deploy.”

Within about 60 seconds, Vercel will give you a live URL that looks something like yourportfolio.vercel.app. Your site is now on the internet.

[IMAGE PLACEHOLDER: Vercel new project screen showing GitHub repository import. Alt text: Deploying Claude Code portfolio website to Vercel]

When should you consider a paid Vercel plan?

The free Hobby plan is the right choice for a personal portfolio, full stop. However, if your portfolio grows into something bigger, or if you are building sites for clients, there are scenarios where upgrading to Vercel Pro ($20/month) makes practical sense:

• Client work and agency projects: The Pro plan allows you to share password-protected preview links with clients before a site goes live. This is a standard part of professional web delivery workflows and is not available on the free tier.
• High-traffic sites: The free tier includes 100GB of bandwidth per month. For a personal portfolio, you will never come close to that limit. If you are running a content-heavy site with significant traffic – a media publication, a course platform, or a business site with regular visitors – Pro removes bandwidth anxiety entirely.
• Team collaboration: If more than one person needs access to manage and deploy the same project, the Pro plan supports multiple team members on a single project dashboard.
• Longer build times: Complex sites with many pages or heavy processing at build time can exceed the free tier’s build duration limit of 45 minutes. Pro extends this to six hours, which accommodates large-scale projects comfortably.

For your portfolio: stay on the free plan. Upgrade when the work outgrows it.

Step 11 – Connect Your Custom Domain

Your Vercel URL (yourname.vercel.app) works, but a custom domain (yourname.com) is what makes your portfolio look professional. Here is how to connect your Namecheap domain to Vercel:

On Vercel:

1. Go to your project dashboard
2. Click “Settings” at the top
3. Click “Domains” in the left sidebar
4. Type your custom domain (e.g., yourname.com) and click “Add”
5. Vercel will give you a set of DNS records to add – specifically two values called “Name” and “Value”

On Namecheap:

1. Log in to your Namecheap account
2. Click “Domain List” on the left, then click “Manage” next to your domain
3. Click the “Advanced DNS” tab
4. Add the DNS records Vercel gave you. You are specifically looking for an “A Record” or “CNAME Record” option.
5. Save the changes

DNS changes take anywhere from 15 minutes to 48 hours to propagate globally. Vercel will show a green “Valid Configuration” status once it is done. Once that appears, your custom domain is live.

If any of this is unclear, go back to Claude Code and say: “Walk me through connecting my Namecheap domain to Vercel step by step. My domain is [yourdomainhere.com] and my Vercel URL is [yourproject.vercel.app].” Claude will guide you through the entire process interactively.

Step 12 – How to Fix Things When They Break 

Here is the truth: things will break. Pages will show errors. Sections will not render the way you expected. Some feature you requested will produce a result that is entirely wrong.

This is not a sign that Claude Code does not work. This is the normal experience of building anything. The difference between a frustrating experience and a productive one is knowing how to respond when it happens.

When you hit a 404 error (a page that is not found):

A 404 error means the browser went looking for a page and could not find it. Tell Claude: “Some of my pages are returning 404 errors. Enter Plan Mode and diagnose the root cause.”

What is Plan Mode? Plan Mode is a special mode in Claude Code where, instead of immediately making changes, it first analyses the problem and presents a written diagnosis and proposed solution. You review the plan, ask questions, and then approve it before Claude does anything. It is the debugging equivalent of consulting a doctor before surgery.

You can also paste a screenshot of the error message directly into the terminal (Alt+V on Windows, Ctrl+V on Mac). Claude will read it and use it to understand what is failing.

Peace Akinwale encountered exactly this issue during her build. Pages were returning 404 errors even though she had published content on Hashnode. She described the problem to Claude, asked it to enter Plan Mode, and Claude “read the files, checked the logs, reviewed the deployment, and diagnosed the root cause.”

When the design does not look right:

Paste a screenshot showing the problem and describe it: “The hero section background image is not showing on mobile. The image appears correctly on desktop but disappears on screens smaller than 768px.”

When Claude Code gives you an error mid-task:

Read the error message out loud to Claude. Yes, literally copy and paste the error text into the terminal and say: “I got this error. What does it mean and how do we fix it?”

General rule: do not delete things yourself. Do not try to edit the code manually unless you know what you are doing. When something breaks, describe the problem to Claude and let it fix it. You are the director. Claude is the technical crew.

Tweaks That Make a Real Difference 

These are not cosmetic additions. They are the features that separate a “portfolio” from a portfolio that works hard for you:

1. Your About page photo

Add a professional photo of yourself. A face builds trust faster than any amount of written copy. Tell Claude: “Add a professional photo to my About page. The image file is named headshot.jpg and is in my Downloads folder.”

2. A professional bio written in third person

Ask Claude to help write your bio if you are struggling with it: “Help me write a third-person bio for my About page. Here is my background: [paste your experience summary]. I want it to sound authoritative but human.”

3. Testimonials from LinkedIn

Go to your LinkedIn recommendations and copy the text of two or three genuine testimonials. Say: “Add a testimonials section to my homepage with these three recommendations. Display them in a clean card format with the person’s name, title, and a short excerpt.”

4. An SEO meta description for every page

Search engine optimisation (SEO) is what helps people find your site on Google. Tell Claude: “Add a meta title and meta description to every page. Use my name and specialty for the homepage. For my projects page, use the most notable project I have listed.”

5. A sitemap and robots.txt file

These are technical files that help Google understand and index your site properly. Simply say: “Generate a sitemap.xml and robots.txt file for my portfolio.” Claude will handle the rest.

6. A favicon

A favicon is the tiny icon that appears in your browser tab next to your page title. Say: “Add a favicon to my site. I want it to use my initials [YI] in [your brand colour].” Claude will generate it.

How Much Does All of This Actually Cost? 

One of the most compelling aspects of this workflow is the cost. Here is the realistic annual breakdown:

The primary ongoing cost is the Claude Pro subscription. The key point is that you are not paying this for your portfolio alone – a Claude Pro subscription gives you access to Claude across all its features, including chat, document analysis, writing assistance, and research. The portfolio is simply one of many things you build with it.

For the website infrastructure itself – hosting, domain management, CMS, version control – the recurring cost is roughly $10–$15 per year after the first year. That is less than most people spend on a monthly streaming subscription.

Compare that to hiring a web developer for a custom portfolio, which typically starts at $1,500 and goes up, or a premium website builder subscription, which runs between $180 and $600 per year with far less flexibility.

Frequently Asked Questions 

Q: Do I need to know how to code to use Claude Code for a portfolio website?

No. Multiple practitioners – from B2B writers to product managers to designers – have built full portfolio sites with Claude Code without writing a single line of code themselves. What you do need is the ability to describe what you want clearly. Think of it as giving direction to a highly skilled technical assistant. Your job is to know what you want and communicate it precisely. Claude’s job is to build it.

Q: How long does it take to build a portfolio with Claude Code?

Expect anywhere from three hours to two full days, depending on the complexity of your site, how many pages you want, and how many rounds of revisions you go through. Peace Akinwale spent about 24 hours spread across two days. A simpler single-page portfolio with three or four sections could be done in an afternoon.

Q: What happens if I want to update my site after it is live?

Open your terminal, navigate to your project folder using cd [path to your folder], type claude to launch Claude Code, and make your changes. You can add new projects, update your bio, change colours, and add new sections at any point. Every push to GitHub automatically redeploys on Vercel. Your site updates within seconds.

Q: Can I use Claude Code to build a portfolio if I am on Windows?

Yes. Install Git for Windows from git-scm.com first, then install Claude Code via PowerShell using the command in Step 3 of this guide. Windows support for Claude Code is stable and actively maintained in 2026.

Q: What CMS should I use if I am not a writer and do not plan to blog?

If you do not need a blog section, you may not need a CMS at all. Ask Claude Code to build a static portfolio – one where the content is written directly into the code rather than pulled from a separate database. This is the simplest setup, requires no CMS account, and is perfectly appropriate for a portfolio that showcases projects without a blog component.

Q: Is my website secure if Claude Code builds it?

Claude Code builds standard, well-structured websites using industry-standard frameworks. Vercel hosting includes HTTPS (secure encryption) automatically. That said, security also depends on any third-party services you connect (payment tools, email services, databases). For a standard portfolio without payments or user logins, security is not a significant concern.

Q: Can I add a booking link or payment page to my portfolio?

Yes. Claude Code can integrate with Stripe for payments and Calendly or Cal.com for bookings. Simply tell it: “Add a services section with a booking link from Calendly and a button that links to my Stripe payment page.” It will handle the integration.

Q: What if Claude Code produces something that looks nothing like what I described?

This is common on the first attempt, especially with vague prompts. Do not delete and start over. Instead, paste a screenshot of what Claude built, alongside a screenshot of what you actually wanted, and say: “The current result looks like [describe it]. I wanted something that looks more like [describe your vision]. Here are two screenshots for reference. Rebuild the [specific section] to match my original brief.” The more reference material you give, the closer Claude gets.

You are all set to build your portfolio website 

Building a portfolio website has historically been either expensive (hire someone) or limiting (use a template). Claude Code removes both of those constraints. For the cost of a monthly subscription you were probably already going to have, and the investment of a focused weekend, you can have a fully custom, professionally deployed portfolio website that belongs entirely to you.

The workflow is not magic. It requires clear thinking, specific communication, and a willingness to iterate when the first attempt does not land perfectly. Those are skills DSE readers already have. You have been thinking clearly about your work for years. Now you have a tool that can translate that clarity into a digital presence that matches your professional standard.

Here is your next move: pick one section of this guide and start there today. Do not wait until you have all the assets perfect. Start with your domain name. Or open Claude and use the prompt technique to clarify your brief. Or simply download the Claude desktop app and spend 20 minutes exploring what it can do.

The portfolio website you have been meaning to build is closer than it has ever been. You already know what your work is worth. Now let it be found.

Share this post if someone in your network has been waiting to get their portfolio sorted. Leave a comment with your biggest question about the process – we read every one. And if you found this useful, explore related content below.

[INTERNAL LINK: How to edit AI-generated content and make it sound like you]