Build a Portfolio Website with Claude Code

Build a personal portfolio website using AI-assisted coding with Claude Code.

Introduction

30 Second Summary

Every developer needs a portfolio website, but building one from scratch can feel like a chore. What if you could describe what you want in plain English and have an AI build it for you?

In this project, you will build a personal portfolio website entirely through natural language conversations with Claude Code, an AI coding assistant that lives in your terminal. You won't write a single line of code yourself.

What You'll Build

A responsive HTML/CSS portfolio website featuring a hero section, an About Me area, project cards, and a contact form.

By the end of this project, you'll have:

  • A working portfolio website built entirely through natural language prompts to Claude Code.
  • A CLAUDE.md file that gives Claude Code persistent memory of your project standards.
  • Hands-on experience with Claude Code's core workflows: prompting, approving changes, and committing with Git.
  • Secret Mission: Add a dark mode toggle with smooth CSS transitions and JavaScript persistence.

Are there any prerequisites?

You need a Claude Pro subscription ($20/month) or an Anthropic Console account (pay-as-you-go) to use Claude Code. The free Claude.ai plan does not include Claude Code access.

Basic familiarity with what HTML and CSS are is helpful, but you do not need to be proficient. Claude Code handles the actual coding for you.

Install Claude Code

Claude Code is an AI coding assistant that lives in your terminal. You give it natural language instructions, and it reads your project, writes code, and manages files for you.

In this step, you'll install Claude Code on your Windows machine, authenticate with your account, and confirm everything is working.

In this step, get ready to:
  • Install Claude Code using PowerShell.
  • Authenticate with your Claude account.
  • Verify Claude Code responds to prompts.
Install Claude Code on Windows

Claude Code installs as a command-line tool. You'll run a single PowerShell command to download and set it up.

  • Press the Windows key to open your search bar.
  • Type PowerShell and press Enter to open it.
  • Install Claude Code by running this command:
irm https://claude.ai/install.ps1 | iex

What does this command do?

irm is PowerShell's shorthand for Invoke-RestMethod. It downloads the install script from Anthropic's servers.

The | iex part pipes the downloaded script directly into PowerShell to execute it.

  • After the installation finishes, close and reopen PowerShell so your system picks up the new command.
  • Verify the installation by running:
claude --version

✔️ I see a version number

Claude Code is installed and ready. You can move on to authentication.

ⓧ Command not found

PowerShell does not recognize the claude command yet. Try these fixes:

  • Make sure you fully closed and reopened PowerShell after the install. The installer updates your PATH, but the old window does not pick that up.
  • If reopening did not help, try running the install command again. Sometimes a network interruption causes a partial install.
  • If you prefer an alternative install method, run:
winget install Anthropic.ClaudeCode

After installing with either method, close and reopen PowerShell, then try claude --version again.

Install Git for Windows

Git for Windows is recommended so Claude Code can use the Bash tool for running shell commands. Without it, Claude Code uses PowerShell as its shell tool instead, which still works.

If you do not already have Git installed, download it from git-scm.com and run the installer with default settings.

Authenticate with your account

Claude Code requires a paid account. On first launch, it walks you through a browser-based login flow.

  • Start Claude Code by running:
claude

What will I see?

Claude Code opens a login prompt in your terminal. It asks you to choose a login method:

  • Claude account with subscription (Pro, Max, Team, or Enterprise).
  • Anthropic Console account (API usage billing).

A browser window then opens for you to complete authentication. If the browser does not open automatically, the terminal displays a URL you can copy and paste into your browser manually.

  • Select your login method (Claude subscription or Console account) when prompted.
  • Complete the sign-in process in your browser.
  • Return to your terminal. Claude Code confirms the login succeeded and shows the interactive prompt.

Login not completing?

If you see a confirmation code in your browser, copy it and paste it back into the terminal when prompted.

If you see a 403 error or the login loops without completing, make sure you are using a paid account. The free Claude.ai plan does not include Claude Code access.

help me troubleshoot my Claude Code login

Verify everything works

Now that you are logged in, you should see the Claude Code interactive prompt. Let's confirm it can respond to a message.

  • Type the following prompt and press Enter:
hello, what can you do?

Claude Code responds with a summary of its capabilities. You should see text describing how it can edit files, run commands, and help with coding tasks.

  • Exit the session by typing:
exit

Other ways to exit

You can also press Ctrl+D to exit Claude Code at any time. Both methods close the interactive session and return you to your normal PowerShell prompt.

Not seeing a response?

If Claude Code hangs or returns an error after typing your message, check that your internet connection is active. Claude Code sends your prompts to Anthropic's servers for processing.

If you see a message about usage limits, your subscription plan may have hit its daily cap. Wait a few minutes and try again.

help me fix Claude Code not responding

Claude Code is installed, authenticated, and responding. Next up, you'll create a project folder and teach Claude Code about your project using a CLAUDE.md file.

Set Up Your Project and CLAUDE.md

Claude Code is installed and ready to go. Now it's time to create a project for it to work on.

Every Claude Code project benefits from a special file called CLAUDE.md. This file gives Claude persistent memory about your project's rules, standards, and conventions. Without it, Claude starts every conversation from scratch.

In this step, get ready to:
  • Create a project folder and initialize a Git repository.
  • Create a CLAUDE.md file with project standards.
  • Make your first Git commit through Claude Code.
Create a project folder and initialize Git

Claude Code needs a folder with a Git repository to track the changes it makes to your files. You'll create both now.

  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder, move into it, and initialize a Git repository by running these commands:
mkdir portfolio
cd portfolio
git init

What do these commands do?

  • mkdir portfolio creates a new folder called portfolio on your Desktop.
  • cd portfolio moves you inside that new folder.
  • git init creates a new Git repository so Claude Code can track file changes and make commits.
  • You should see a message confirming the repository was created, like Initialized empty Git repository in....

Seeing 'git' is not recognized?

Git for Windows needs to be installed for this command to work. Download it from git-scm.com and run the installer with all default settings. After installing, close and reopen PowerShell.

Git for Windows is also recommended so Claude Code can use the Bash tool for running commands. Without it, Claude Code falls back to PowerShell, which still works but has some limitations.

Help me install Git for Windows so I can use Claude Code

  • Start Claude Code inside your project folder by running:
claude
  • Claude Code's interactive prompt appears. You're now inside a Claude Code session in your portfolio folder.
Create a CLAUDE.md file with project standards

CLAUDE.md is a markdown file that Claude Code reads at the start of every session. Whatever standards you put in this file, Claude follows them automatically every time you ask it to write code.

  • Run the initialization command inside your Claude Code session by typing this and pressing Enter:
/init

What does /init do?

The /init command tells Claude Code to analyze your project and generate a starting CLAUDE.md file. Since this is a brand new empty project, the generated file will be minimal. That's fine because you'll add your own standards next.

Claude Code will ask for permission to create the file. Approve the file creation when prompted.

  • Now tell Claude Code what standards you want for this project by typing:
Update the CLAUDE.md with these project standards: Use semantic HTML5, mobile-first responsive CSS, and no frameworks or libraries. Use 2-space indentation. Our color palette is dark navy (#1a1a2e) for primary, white for content sections, and accent color (#e94560). Set the title to "Portfolio Website".

What happens when you send this prompt?

Claude Code reads your natural language instructions and rewrites the CLAUDE.md file to include your project standards. It will ask for permission before editing the file. Approve the changes when prompted.

From now on, every time you start a Claude Code session in this folder, Claude automatically loads these standards and follows them.

  • Verify the file looks correct by asking Claude Code:
show me the contents of CLAUDE.md
  • Claude Code displays the contents of your CLAUDE.md file. It should include all five standards: semantic HTML5, mobile-first responsive CSS, no frameworks or libraries, 2-space indentation, and the color palette.

Standards missing or different from expected?

Claude Code generates content based on your prompt, so the exact wording may vary slightly. The important thing is that all five standards are present. If any are missing, ask Claude Code to add them.

Help me fix my CLAUDE.md so it has the correct project standards

✔️ Awesome, I've got everything!

Great. Make sure you've approved all file changes Claude Code proposed.

ⓧ I'd like to double check the full code

Your CLAUDE.md should look like this:

# Portfolio Website

## Project Standards
- Use semantic HTML5
- Mobile-first responsive CSS
- No frameworks or libraries
- 2-space indentation
- Color palette: dark navy (#1a1a2e), white content sections, accent (#e94560)

If yours looks different, ask Claude Code: "Update CLAUDE.md to match this exactly" and paste the content above.

Make your first commit through Claude Code

Claude Code can make Git commits for you. Instead of running git add and git commit yourself, you describe what you want to commit in plain English.

  • Ask Claude Code to commit your file by typing:
commit the CLAUDE.md file with a descriptive message

What happens next?

Claude Code stages the file and proposes a commit message. It then asks for your permission before running the Git command. Approve the operation when prompted.

This is how Claude Code handles all Git operations. It always asks before making changes to your repository.

  • Approve the Git operation when Claude Code asks for permission.
  • You should see a confirmation that the commit was created, with a commit hash and the message Claude Code chose.

Commit failed or permission denied?

If Claude Code says it cannot run git commands, make sure you initialized the repository with git init earlier. You can check by asking Claude Code: "is this a git repository?"

If Git asks for your name and email, run these commands when prompted (you can ask Claude Code to set them for you): git config user.name "Your Name" and git config user.email "you@example.com".

Help me fix my Git commit in Claude Code

Your project is set up and Claude Code knows your standards. Next up, you'll watch Claude Code build an entire portfolio website from a single natural language prompt.

Build the Portfolio Website

Your project is set up with a Git repository and a CLAUDE.md that tells Claude Code exactly how to build your site. Now it's time to put Claude Code to work on the actual website.

In this step, you'll prompt Claude Code to generate a full portfolio website from scratch using nothing but natural language descriptions. You'll describe what you want, review the code Claude generates, and approve the changes.

In this step, get ready to:
  • Generate a complete HTML structure with natural language.
  • Add responsive CSS styling through a conversational prompt.
  • Commit the website files using Claude Code's Git integration.
Generate the HTML structure

A portfolio website needs several sections: a navigation bar, a hero area, an about section, a projects showcase, and a contact form. Instead of writing all that HTML yourself, you'll describe the structure to Claude Code and let it generate everything.

  • In your Claude Code session, type this prompt and press Enter:
Create an index.html file with a portfolio website. Include a navigation bar, a hero section with my name and a tagline, an About Me section, a Projects section with 3 placeholder project cards, and a Contact section with a simple form. Use semantic HTML5.

What happens when you send this prompt?

Claude Code reads your CLAUDE.md for project standards (semantic HTML5, no frameworks, 2-space indentation), then generates an index.html file that follows those rules.

It shows you the proposed file as a diff. You'll see the full HTML structure with all the sections you asked for.

  • Review the proposed changes that Claude Code displays.
  • Approve the changes when prompted.
  • Open index.html in your browser by double-clicking the file in File Explorer (navigate to your project folder on the Desktop).

You should see the page content rendered as plain, unstyled text with the navigation links, hero heading, project cards, and form fields visible.

Don't see your HTML file?

Make sure you approved the changes when Claude Code prompted you. If you accidentally declined, just type the same prompt again.

If the file exists but the browser shows a blank page, check that the file has the .html extension and not .txt.

Ask Claude Code for help: Why isn't my index.html rendering in the browser?

Add responsive CSS styling

Your HTML has the structure, but it looks like plain text because there's no styling yet. Now you'll ask Claude Code to create a CSS file and connect it to your HTML.

  • Type this prompt into Claude Code and press Enter:
Create a styles.css file and link it to index.html. Style the portfolio with a modern, clean design. Use a color palette with dark navy (#1a1a2e) for the nav and hero, white for content sections, and an accent color (#e94560). Make it responsive with a mobile-first approach.

What does Claude Code do with this?

Claude Code creates styles.css with CSS custom properties (variables) for the color palette, a fixed navbar, full-height hero section, card layouts for projects, and responsive breakpoints.

It also modifies index.html to add the <link rel="stylesheet" href="styles.css"> tag in the head. You'll see both file changes in the diff.

  • Review the proposed CSS styling and the index.html update.
  • Approve the changes when prompted.
  • Switch to your browser and refresh the page.

You should see a dark navy hero section with your name highlighted in red-pink, white content sections, project cards in a grid, and a styled contact form at the bottom.

Still seeing unstyled text?

Check that styles.css exists in the same folder as index.html. Ask Claude Code: "show me the files in this directory" to confirm both files are there.

If the CSS file exists but styling doesn't show, verify the <link> tag is in the <head> of your HTML. Ask Claude Code: "check that styles.css is properly linked in index.html".

Get help: Why isn't my CSS styling showing up?

Commit the website files

Your portfolio is looking good. Time to save this progress to Git so you have a checkpoint to return to.

  • Ask Claude Code to commit your work by typing:
commit all changes with a descriptive message

What happens with Git commits in Claude Code?

Claude Code stages your files, writes a commit message describing what changed, and runs the Git commit. It asks for your approval before executing the Git operation.

You'll see the proposed commit message and which files are being staged. Approve it to finalize the commit.

  • Approve the Git operation when Claude Code asks for permission.
  • Confirm the commit succeeded by checking that Claude Code displays a commit hash (a short string like a1b2c3d).

Commit failed?

If Claude Code reports a Git error, it's usually because Git needs your name and email configured. Ask Claude Code: "set my git username to My Name and email to my@email.com, then try the commit again".

Get help: Why did my Git commit fail in Claude Code?

✔️ Awesome, I've got everything!

Great. Make sure both files are committed before moving on.

ⓧ I'd like to double check the full code

Claude Code's output may vary slightly from the reference below, but the structure and features should match. Compare your index.html against this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <div class="nav-container">
      <a href="#" class="nav-logo">Portfolio</a>
      <ul class="nav-links">
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>

  <section class="hero">
    <div class="hero-content">
      <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
      <p class="tagline">A developer building things for the web.</p>
    </div>
  </section>

  <section id="about" class="about">
    <div class="container">
      <h2>About Me</h2>
      <p>I'm a passionate developer who loves creating clean, functional, and beautiful web experiences. I enjoy learning new technologies and solving problems through code.</p>
    </div>
  </section>

  <section id="projects" class="projects">
    <div class="container">
      <h2>Projects</h2>
      <div class="project-grid">
        <article class="project-card">
          <h3>Project One</h3>
          <p>A brief description of your first project and what technologies you used to build it.</p>
          <a href="#" class="project-link">View Project &rarr;</a>
        </article>
        <article class="project-card">
          <h3>Project Two</h3>
          <p>A brief description of your second project and the problems it solves.</p>
          <a href="#" class="project-link">View Project &rarr;</a>
        </article>
        <article class="project-card">
          <h3>Project Three</h3>
          <p>A brief description of your third project and what you learned building it.</p>
          <a href="#" class="project-link">View Project &rarr;</a>
        </article>
      </div>
    </div>
  </section>

  <section id="contact" class="contact">
    <div class="container">
      <h2>Get in Touch</h2>
      <form class="contact-form">
        <input type="text" name="name" placeholder="Your Name" required>
        <input type="email" name="email" placeholder="Your Email" required>
        <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
        <button type="submit" class="btn-submit">Send Message</button>
      </form>
    </div>
  </section>

  <footer class="footer">
    <p>&copy; 2026 Your Name. Built with Claude Code.</p>
  </footer>
</body>
</html>

And compare your styles.css against this:

:root {
  --color-primary: #1a1a2e;
  --color-accent: #e94560;
  --color-white: #ffffff;
  --color-light: #f5f5f5;
  --color-text: #333333;
  --color-text-light: #666666;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Navigation */
.navbar {
  background: var(--color-primary);
  padding: 15px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  color: var(--color-white);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: var(--color-white);
  text-decoration: none;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--color-accent);
}

/* Hero Section */
.hero {
  background: var(--color-primary);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.highlight {
  color: var(--color-accent);
}

.tagline {
  font-size: 1.25rem;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* About Section */
.about {
  padding: 80px 0;
  background: var(--color-white);
}

.about h2,
.projects h2,
.contact h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--color-primary);
}

.about p {
  font-size: 1.1rem;
  color: var(--color-text-light);
  max-width: 700px;
}

/* Projects Section */
.projects {
  padding: 80px 0;
  background: var(--color-light);
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 30px;
}

.project-card {
  background: var(--color-white);
  padding: 30px;
  border-radius: 8px;
  transition: var(--transition);
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.project-card h3 {
  margin-bottom: 10px;
  color: var(--color-primary);
}

.project-card p {
  color: var(--color-text-light);
  margin-bottom: 15px;
}

.project-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.project-link:hover {
  color: var(--color-primary);
}

/* Contact Section */
.contact {
  padding: 80px 0;
  background: var(--color-white);
}

.contact-form {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  transition: var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.btn-submit {
  padding: 14px 28px;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
}

.btn-submit:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}

/* Footer */
.footer {
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: 20px;
}

/* Responsive */
@media (min-width: 768px) {
  .hero h1 {
    font-size: 3.5rem;
  }

  .tagline {
    font-size: 1.5rem;
  }

  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Your output doesn't need to match word-for-word. The key features to check: a navbar, hero section, about section, 3 project cards, contact form, responsive grid, and the color palette using #1a1a2e and #e94560.

Your portfolio website is live and committed. Next up, you'll iterate on the design by asking Claude Code to add animations, hover effects, and visual polish.

Iterate and Refine with Claude Code

In the previous step, you got Claude Code to build a complete portfolio website from scratch. The files exist, but the site could use some polish.

One of the most powerful things about Claude Code is that you can iterate on existing code just by describing what you want changed. In this step, you'll refine your portfolio by talking to Claude Code about improvements, fixes, and enhancements.

In this step, get ready to:
  • Ask Claude Code to explain the code it wrote.
  • Request visual improvements through natural language.
  • Fix a specific issue by describing it conversationally.
Ask Claude Code to explain what it built

Before making changes, it helps to understand what you're working with. Claude Code can read your entire project and summarize it for you.

  • In your Claude Code session, type the following prompt and press Enter:
explain the folder structure and the main components of the website

What does Claude Code do here?

Claude Code reads all your project files and gives you a structured summary. It describes each file's role, the HTML sections, and the CSS organization.

This is useful when you're returning to a project after a break, or when you want to confirm Claude Code understands your codebase before making changes.

You should see Claude Code print a breakdown of your project, listing CLAUDE.md, index.html, and styles.css with explanations of what each file contains.

Claude Code not responding?

Make sure you're inside an active Claude Code session (you should see the Claude Code prompt in your terminal). If the session ended, restart it by running claude in your project folder.

help me troubleshoot my Claude Code session

Request specific improvements

Now that you understand the structure, you can ask Claude Code to improve the website's interactivity and visual polish. You describe what you want in plain English and Claude Code figures out which files to edit.

  • Type this prompt into Claude Code:
Add smooth scroll behavior to the navigation links, add hover effects to the project cards with a subtle box shadow transition, and add a simple CSS animation to the hero section tagline that fades it in on page load

What will Claude Code change?

Claude Code will propose edits to styles.css to add these three enhancements. It may note that some features (like smooth scrolling or the animation) already exist from the initial generation.

The key pattern here is that you can describe multiple improvements in one prompt. Claude Code coordinates the changes across your codebase.

  • Review the proposed changes that Claude Code shows you.
  • Approve the changes when prompted.

How do approvals work?

Claude Code always asks for permission before modifying files. It shows you the proposed changes, then waits for your approval. You can approve individual changes or enable an "Accept all" mode for the session.

After approving, your styles.css should include smooth scrolling via html { scroll-behavior: smooth; }, a hover effect on .project-card with box-shadow, and a fadeIn animation on .tagline.

Claude Code says these features already exist?

That's fine. Claude Code may detect that some of these styles were included in the initial CSS generation. If it says no changes are needed for certain items, that means the styles are already in place. You can verify by opening styles.css in your editor.

help me understand what Claude Code changed in my CSS file

Fix an intentional issue

Real development involves identifying problems and fixing them. You can describe issues to Claude Code in natural language and it will figure out the solution.

  • Type this prompt into Claude Code:
The contact form doesn't have any visual feedback. Add a styled submit button with a hover state, and make the form inputs have a focus style that matches the accent color

What does this demonstrate?

Instead of specifying exact CSS properties, you described the problem ("no visual feedback") and the desired outcome ("focus style that matches the accent color"). Claude Code translates your intent into concrete code changes.

This is the core workflow of agentic coding: describe what you want, review what the AI proposes, approve or iterate.

  • Review the proposed changes and approve them.
  • Ask Claude Code to commit all changes by typing this prompt:
commit all changes with a descriptive message
  • Approve the Git operation when prompted.

Claude Code stages your files and writes a commit message that summarizes the improvements you made.

Why commit through Claude Code?

Claude Code writes descriptive commit messages based on what actually changed. It stages the right files and handles the Git workflow for you. This is faster than switching to a terminal and writing commit messages manually.

Git commit failed?

Make sure you initialized a Git repository in your project folder during Step 2. If Claude Code shows an error about Git not being configured, ask it: "initialize git in this folder and set up a default user name and email."

help me fix a Git error in Claude Code

To verify your files are correct, open styles.css in your code editor. You should see .btn-submit:hover styles and .contact-form input:focus styles with border-color: var(--color-accent).

✔️ Awesome, I've got everything!

Great. Double check you've saved everything and the commit went through.

ⓧ I'd like to double check the full code

Here is the complete styles.css file for comparison:

:root {
  --color-primary: #1a1a2e;
  --color-accent: #e94560;
  --color-white: #ffffff;
  --color-light: #f5f5f5;
  --color-text: #333333;
  --color-text-light: #666666;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.navbar {
  background: var(--color-primary);
  padding: 15px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  color: var(--color-white);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: var(--color-white);
  text-decoration: none;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--color-accent);
}

.hero {
  background: var(--color-primary);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.highlight {
  color: var(--color-accent);
}

.tagline {
  font-size: 1.25rem;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.about {
  padding: 80px 0;
  background: var(--color-white);
}

.about h2,
.projects h2,
.contact h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--color-primary);
}

.about p {
  font-size: 1.1rem;
  color: var(--color-text-light);
  max-width: 700px;
}

.projects {
  padding: 80px 0;
  background: var(--color-light);
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 30px;
}

.project-card {
  background: var(--color-white);
  padding: 30px;
  border-radius: 8px;
  transition: var(--transition);
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.project-card h3 {
  margin-bottom: 10px;
  color: var(--color-primary);
}

.project-card p {
  color: var(--color-text-light);
  margin-bottom: 15px;
}

.project-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.project-link:hover {
  color: var(--color-primary);
}

.contact {
  padding: 80px 0;
  background: var(--color-white);
}

.contact-form {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  transition: var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.btn-submit {
  padding: 14px 28px;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
}

.btn-submit:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}

.footer {
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  padding: 20px;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 3.5rem;
  }

  .tagline {
    font-size: 1.5rem;
  }

  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

And here is the complete index.html for reference:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <div class="nav-container">
      <a href="#" class="nav-logo">Portfolio</a>
      <ul class="nav-links">
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>

  <section class="hero">
    <div class="hero-content">
      <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
      <p class="tagline">A developer building things for the web.</p>
    </div>
  </section>

  <section id="about" class="about">
    <div class="container">
      <h2>About Me</h2>
      <p>I'm a passionate developer who loves creating clean, functional, and beautiful web experiences. I enjoy learning new technologies and solving problems through code.</p>
    </div>
  </section>

  <section id="projects" class="projects">
    <div class="container">
      <h2>Projects</h2>
      <div class="project-grid">
        <article class="project-card">
          <h3>Project One</h3>
          <p>A brief description of your first project and what technologies you used to build it.</p>
          <a href="#" class="project-link">View Project &rarr;</a>
        </article>
        <article class="project-card">
          <h3>Project Two</h3>
          <p>A brief description of your second project and the problems it solves.</p>
          <a href="#" class="project-link">View Project &rarr;</a>
        </article>
        <article class="project-card">
          <h3>Project Three</h3>
          <p>A brief description of your third project and what you learned building it.</p>
          <a href="#" class="project-link">View Project &rarr;</a>
        </article>
      </div>
    </div>
  </section>

  <section id="contact" class="contact">
    <div class="container">
      <h2>Get in Touch</h2>
      <form class="contact-form">
        <input type="text" name="name" placeholder="Your Name" required>
        <input type="email" name="email" placeholder="Your Email" required>
        <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
        <button type="submit" class="btn-submit">Send Message</button>
      </form>
    </div>
  </section>

  <footer class="footer">
    <p>&copy; 2026 Your Name. Built with Claude Code.</p>
  </footer>
</body>
</html>

You've just experienced the core iteration loop of agentic coding: explain, improve, fix, commit. Next up, you'll explore some advanced Claude Code features like session management and non-interactive mode.

Explore Advanced Claude Code Features

Your portfolio website is built, styled, and refined. Every change happened through conversation with Claude Code.

In real development, you don't sit in one continuous session forever. You close your laptop, come back the next day, and need to pick up where you left off. Claude Code has features designed for exactly this workflow.

In this step, get ready to:
  • Resume a previous Claude Code session.
  • Query your project without starting an interactive session.
  • Review your Git commit history through Claude Code.
Use the resume and session commands

When you exit Claude Code and come back later, it can pick up right where you left off. The claude -c flag continues your most recent conversation in the current directory.

  • Exit your current Claude Code session by pressing Ctrl+C or typing /quit.
  • Resume the session by running this command:
claude -c

What does this command do?

The -c flag tells Claude Code to continue the most recent conversation in your current directory. Claude remembers everything you discussed, the files you edited, and the context of your project.

Claude Code should respond as if you never left. You can verify this by asking it a follow-up question about your project, like "what color is the accent in our portfolio?" and it will answer from memory.

Not seeing your previous conversation?

Make sure you're running claude -c from inside your project folder. Claude Code matches sessions to directories.

If you've navigated elsewhere, cd back into your portfolio project folder first.

Help me resume my Claude Code session.

Try non-interactive mode

Sometimes you need a quick answer from Claude Code without starting a full interactive session. The claude -p flag lets you send a one-off query that prints the answer and exits immediately.

  • Exit your current Claude Code session by pressing Ctrl+C or typing /quit.
  • From your regular terminal prompt, run this command to query your project without entering interactive mode:
claude -p "list all CSS custom properties used in styles.css"

Claude Code reads your styles.css file, lists out the custom properties (like --color-primary, --color-accent, etc.), and returns you straight to your terminal prompt.

Why use non-interactive mode?

Non-interactive mode is perfect for quick lookups, code reviews, or generating documentation snippets. You get the answer without the overhead of managing a session.

Think of it like asking a colleague a quick question in passing versus scheduling a meeting.

Command not returning any output?

Make sure you're running the command from inside your project folder where styles.css exists. Claude Code needs to be able to find the file you're asking about.

Help me use Claude Code's non-interactive mode.

Review your Git history

Throughout this project, you've been committing changes through Claude Code. Now you can ask Claude Code to summarize your entire commit history so you can see the full story of how your portfolio was built.

  • Start a new Claude Code session by running:
claude
  • Once inside Claude Code, type this prompt:
show me a summary of all commits we've made in this project

Claude Code runs git log behind the scenes and summarizes each commit with its message and what changed. You should see entries for your CLAUDE.md commit, your initial website commit, and your refinements commit.

What does this demonstrate?

Claude Code's Git integration goes beyond just committing. It can read your project history, compare branches, show diffs, and explain what changed between commits. You never need to memorize Git commands.

You've now experienced Claude Code's three main interaction modes: full interactive sessions, resumed sessions with claude -c, and quick one-off queries with claude -p. These patterns cover everything from building features to checking facts.

Secret mission

Add a Dark Mode Toggle

Your portfolio looks great, but what about visitors who prefer dark backgrounds? In this secret mission, you'll prompt Claude Code to add a fully functional dark mode toggle. This means Claude Code will coordinate changes across HTML, CSS, and JavaScript simultaneously.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely locally, so there are no ongoing cloud costs. Claude Code usage counts against your Claude Pro subscription limits or Anthropic Console API balance.

Resources you used:

  • Portfolio project folder on your Desktop (index.html, styles.css, script.js, CLAUDE.md, and the Git repository).
  • Claude Code CLI installed on your machine.
  • Claude Code configuration files (settings, session history).

Keep everything running

No action needed. Choose this if you plan to keep building on this portfolio or want to use Claude Code for other projects.

  • Your project folder stays on your Desktop, ready to edit anytime.
  • Claude Code remains installed and authenticated for future use.
  • Your CLAUDE.md file stays in the project as persistent context for Claude Code.

Pause - I'll come back to this later

Nothing to pause. Since this project has no running processes or cloud services, your files simply sit on disk until you return.

  • Your project folder stays on your Desktop at no cost.
  • Claude Code stays installed but uses no resources when idle.
  • When you come back, start Claude Code in the project folder with claude and it will pick up right where you left off.

Delete - I don't want to use this again

Remove all project files, Claude Code, and its configuration from your machine.

  • Delete the project folder by opening PowerShell and running:
Remove-Item -Path "$env:USERPROFILE\Desktop\portfolio" -Recurse -Force
  • Uninstall Claude Code. If you installed using the PowerShell script, run:
Remove-Item -Path "$env:USERPROFILE\.local\bin\claude.exe" -Force
Remove-Item -Path "$env:USERPROFILE\.local\share\claude" -Recurse -Force
  • If you installed using WinGet instead, run:
winget uninstall Anthropic.ClaudeCode
  • Remove Claude Code configuration files and session history by running:
Remove-Item -Path "$env:USERPROFILE\.claude" -Recurse -Force
Remove-Item -Path "$env:USERPROFILE\.claude.json" -Force

Nice Work!

Nice Work!

You just built an entire portfolio website without writing a single line of code yourself. Every piece of HTML, CSS, and JavaScript was generated by Claude Code through natural language conversation.

You've learned how to:

  • Install and authenticate Claude Code, then use CLAUDE.md to give it persistent project memory and coding standards.
  • Build a complete multi-file website through natural language prompts, iterating on design and functionality by describing improvements in plain English.
  • Use Claude Code's Git integration to commit changes conversationally, and explore session management features like resuming conversations and running non-interactive queries.
  • Added a dark mode toggle with JavaScript, having Claude Code coordinate changes across HTML, CSS, and JS files simultaneously.

Ready to quiz yourself?