Claude Code Basics + Building Portfolio Website

Before We Start

Get these ready before the workshop so you can follow along smoothly.

1

Install Claude Code

Two ways to get started: CLI for terminal lovers, or VS Code extension.

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

Or install the VS Code Extension

Installation Guide →

2

Code Editor

Have VS Code or Cursor installed. Either works great with Claude Code.

VS Code → Cursor →

3

GitHub Desktop

We'll use GitHub Desktop to publish your code. Install it and sign in to your GitHub account before the workshop.

Download GitHub Desktop →

4

Create GitHub Repository

Do this before the workshop! Create a new empty repository called "portfolio" on GitHub. We'll push our code here.

Create Repository →

5

Good Terminal

A modern terminal makes a difference. We recommend Ghostty for the best CLI experience.

Download Ghostty →

6

Export LinkedIn PDF

Go to your LinkedIn profile → More → Save to PDF. Keep it handy for the demo.

Open LinkedIn →

Pricing & How It Works

Understand the costs before you start.

Pricing

Claude Code is included with your Claude subscription.

Claude Pro: $20/month

Claude Max: $100/month (5x more usage)

This workshop: Pro plan is plenty

Subscribe →

Context & Limits

How Claude remembers your conversation.

Context window: What Claude can "see" at once

When it fills up: Claude auto-summarizes

Manual reset: Use /compact command

💡 Don't worry about limits for this workshop. If context fills up, just run /compact to continue.

What We're Building

You have a LinkedIn profile. It's professional, but it's... LinkedIn. What if you could transform it into a beautiful, personal portfolio website in minutes?

That's exactly what we're doing today. We'll use Claude Code to read your LinkedIn PDF, generate a modern portfolio site, customize it to your style, and deploy it live — all without writing a single line of code manually.

By the end, you'll have:

A live portfolio website at your-name.vercel.app
Hands-on experience with Claude Code
Confidence to build more projects with AI

Act 1

Claude Code Basics

Get comfortable with the tool before we build.

1.1

Start Claude Code

Open your terminal and navigate to an empty folder. This is where we'll build everything.

claude

What you learned: Claude Code runs in your terminal. Just type claude to start a conversation.

1.2

Understanding Slash Commands

Slash commands are special instructions that control Claude Code itself (not prompts for Claude).

/help

What you learned: Slash commands start with / and control the CLI. Regular text is your prompt to Claude.

1.3

Essential Status Commands

These commands help you understand your current session state.

/login # Authenticate with Anthropic /status # Check connection status /model # See/change current model /usage # View token usage this session /config # View/edit configuration /stats # Detailed usage statistics

💡 Run /status anytime to check if you're connected and which model you're using.

1.4

Interaction Modes

Press Shift+Tab to cycle through three modes that change how Claude behaves.

Default Mode

Claude asks permission before each file change. Safest for learning.

Auto-Accept Mode

Claude makes changes without asking. Faster, but review carefully!

Plan Mode

Claude creates a plan first, then executes after your approval.

What you learned: Shift+Tab switches modes. Start with Default, use Auto-Accept when confident.

1.5

Context & Memory

Understanding how Claude remembers your conversation.

/context # See what's in Claude's context window /compact # Summarize conversation to free up space /init # Create CLAUDE.md for project memory

📖 Context is everything Claude can "see" right now. If it fills up, run /compact to continue.

1.6

Session Management

Save your work and pick up where you left off.

/resume # Resume a previous session /exit # End the session (or Ctrl+C)

What you learned: Your sessions can be saved and resumed. Use /resume to continue from where you left off.

1.7

Initialize Project Memory

Let's set up CLAUDE.md so Claude remembers your project preferences. Use this when you are opening any existing project.

/init

What you learned: /init creates a CLAUDE.md file. Claude reads this every session to understand your project.

1.8

Your First Prompt

Now let's actually talk to Claude. Ask it something simple.

What files are in this directory?

📖 Claude Code can read files, write code, run commands, and help you build entire projects through conversation.

1.9

Create Your First File

Let's make something. Ask Claude to create a simple file.

Create a file called hello.txt with the text "Hello from Claude Code!"

What you learned: Claude doesn't just suggest code — it actually creates files for you. Check your folder!

1.10

File Mentions with @

Use @ to reference files directly in your prompts. Claude can read PDFs, images, and code files.

@linkedin.pdf summarize my professional profile @screenshot.png what's in this image? @src/app.js explain this code

📖 The @ symbol tells Claude exactly which file to look at. Works with PDFs, images (PNG, JPG), code files, and more!

What you learned: Use @filename to reference specific files. Claude can read and understand PDFs, images, and code.

Get Inspired First

Before we build, let's look at what makes a great developer portfolio.

Developer Portfolios

A curated list of developer portfolios for your inspiration. Browse through hundreds of real examples to find styles you like.

Browse Portfolios →

Awwwards

Award-winning website designs. Great for finding modern design trends, animations, and creative layouts.

Explore Awwwards →

💡 Spend 5 minutes browsing these sites. Note what catches your eye — colors, layouts, animations. You can describe these to Claude later!

Act 2

Build Your Portfolio

Transform your LinkedIn into a stunning website.

2.1

Feed Your LinkedIn

Copy your LinkedIn PDF into the project folder, then let Claude read it using the @ mention.

@linkedin.pdf summarize my professional profile

What you learned: Claude can read PDFs! Use @filename to reference files directly. It extracts your experience, skills, and achievements automatically.

2.2

Add Your Profile Picture

Copy your profile photo into the project folder. Use a professional headshot for best results.

@profile.jpg add this as my profile picture in the hero section

📖 Supported formats: JPG, PNG, WebP. Aim for a square image around 400x400px for best quality.

What you learned: Claude can see images too! Use @image.jpg to reference photos and let Claude integrate them into your design.

2.3

Generate the Portfolio

Now the magic. Ask Claude to create your portfolio.

Create a minimal, modern portfolio website using this LinkedIn data. Single page HTML with inline CSS. Include: hero section with my name and title, about section, experience timeline, skills grid, and contact section with my LinkedIn link.

What you learned: Be specific about what you want. The more detail you give, the better the output.

2.4

Preview Your Site

Open index.html in your browser and see what Claude built!

Open index.html in browser (or right-click → Open with browser)

📖 Your first version is rarely perfect. That's okay — we'll iterate.

2.5

Switch to Dark Mode

Let's personalize it. Dark mode looks great for developer portfolios.

Make it dark mode with a purple accent color (#A78BFA). Keep it minimal and elegant.

What you learned: You can iterate on design through conversation. Claude remembers what it built and modifies it.

2.6

Add Personal Touch

LinkedIn doesn't show what you're excited about. Let's add that.

Add a "What I'm Building" section after the hero that mentions I'm currently working on [YOUR PROJECT]. Make it feel personal, not corporate.

What you learned: Your portfolio should show personality. Add sections that LinkedIn doesn't have.

2.7

Make it Mobile-Friendly

Most people will view on their phones. Let's ensure it looks good.

Make sure the site is fully responsive and looks great on mobile devices

📖 Always check mobile. Resize your browser window to test, or use browser dev tools.

2.8

Final Polish

Small touches make a big difference.

Add smooth scrolling, subtle hover effects on links, and a nice fade-in animation when the page loads

What you learned: Polish matters. These small details make your site feel professional.

Act 3

Ship It Live

Deploy your portfolio to the world using GitHub Desktop.

3.1

Open in GitHub Desktop

GitHub Desktop makes version control visual and easy — no commands needed.

1. Open GitHub Desktop 2. File → Add Local Repository 3. Select your portfolio folder 4. It will ask to "Create a Repository" — click yes

What you learned: GitHub Desktop handles Git for you. No terminal commands required.

3.2

Commit Your Changes

Save a snapshot of your work.

1. You'll see all your files listed as "Changes" 2. Type a summary: "Initial portfolio site" 3. Click "Commit to main"

3.3

Publish to GitHub

Push your code to GitHub so Vercel can access it.

1. Click "Publish repository" (top right) 2. Name it "portfolio" 3. Uncheck "Keep this code private" (optional) 4. Click "Publish Repository"

📖 Your code is now on GitHub! You can view it at github.com/your-username/portfolio

3.4

Deploy on Vercel

Vercel makes deployment incredibly simple.

1. Go to vercel.com and sign in with GitHub 2. Click "Add New Project" 3. Import your "portfolio" repo 4. Click "Deploy" 5. Wait ~30 seconds

What you learned: Modern deployment is this easy. Vercel auto-deploys whenever you push changes.

3.5

You Shipped!

Your portfolio is now live at your-name.vercel.app

🎉 Congratulations! You just built and deployed a portfolio website using AI. Share it with the world!

Quick Reference

Bookmark these for your future Claude Code sessions.

Status Commands

`/login`	Authenticate with Anthropic
`/status`	Check connection status
`/model`	View/change model
`/usage`	Token usage this session
`/stats`	Detailed statistics
`/config`	View/edit settings

Context Commands

`/init`	Create CLAUDE.md (use on existing projects)
`/context`	View context window
`/compact`	Summarize to free space
`/resume`	Resume previous session
`/exit`	End session

Modes (Shift+Tab)

Default	Asks permission for changes
Auto-Accept	Makes changes automatically
Plan	Shows plan before executing

Keyboard

`Shift+Tab`	Switch modes
`Ctrl+C`	Cancel response

FAQ

Do I need coding experience?

No. Claude Code writes the code for you. You just need to describe what you want in plain English.

How much does Claude Code cost?

Claude Code is included with your Claude subscription. Claude Pro is $20/month and Claude Max is $100/month. For this workshop, Pro is more than enough.

What if I get stuck during the workshop?

That's what live workshops are for! Ask questions in the chat, and we'll help you troubleshoot in real-time.

Can I customize my portfolio after the workshop?

Absolutely. That's the beauty of Claude Code — just describe the changes you want, and it'll update your site.

Will there be a recording?

Yes, registered attendees will receive the recording afterward.

Ready to Build?

Join us live and ship your portfolio in 60 minutes.

RSVP for Free

Jan 23, 2026 · 10:00 PM PKT