📋 What You'll Learn
Install and use Ollama (free local AI)
Use Claude Code to customize your portfolio
Connect the AI chat widget to real Ollama
Generate content with AI prompts
Install Ollama
🦙 What is Ollama?
Ollama is a free tool that runs AI locally on your computer — no internet needed after installation, no subscriptions, completely private.
Free Forever
No payments, no subscriptions
Private
Your conversations stay on your computer
Works Offline
No internet needed after install
📥 Step 1.1 — Download & Install
Download Ollama
Go to ollama.com and click Download for your OS
Run the installer
Open the downloaded file and follow the steps — it's like any other app
Open your terminal
Windows: search "Command Prompt" · Mac: search "Terminal"
🤖 Step 1.2 — Download an AI Model
AI models are the "brains" that Ollama uses. This downloads about 2–4 GB — grab a snack while you wait!
ollama pull llama3.2🧪 Step 1.3 — Test Ollama
ollama --versionThen start the server:
ollama serveInstall Claude Code (Optional)
🧠 What is Claude Code?
Claude Code is an AI coding assistant that lives in your terminal. You talk to it in plain English and it edits your code for you!
Install
Run in your terminal:
npm install -g @anthropic-ai/claude-codeSign in
Run claude and follow the sign-in link
Try it!
Navigate to your project folder and ask Claude to help
Customize with AI
💬 Method A — Claude Code
Open terminal in your portfolio folder and describe what you want:
Update my portfolio with:
- Name: "Alex Chen"
- Location: "Tokyo, Japan"
- Skills: Python, JavaScript, Unity, Blender
- Projects:
1. "TaskMaster" - React todo app
2. "GameAI" - Python game
3. "Portfolio" - Personal site
- Colors: Purple theme (#a855f7, #8b5cf6) Claude edits your HTML file automatically!
🦙 Method B — Ollama in Terminal
ollama run llama3.2Then ask it anything, like:
Generate HTML for a skill card with icon 🎮,
title 'Game Dev', description 'Creating games with Unity' 📋 Method C — Copy-Paste AI Prompts
Use these ready-made prompts with any AI:
Change colors:
Replace the :root CSS variables in portfolio-basic/index.html with:
- --accent: #a855f7 (purple)
- --accent-secondary: #8b5cf6 (light purple)
- --bg-primary: #0f0f1a (dark purple bg)
- --bg-card: #1a1a2e (card bg) Add projects:
Generate HTML for 3 project cards:
1. "Weather App" - React weather app - tags: React, API
2. "Chat Bot" - Python Discord bot - tags: Python, AI
3. "Portfolio" - This portfolio - tags: HTML, CSS Generate a bio:
Write a 2-paragraph developer bio for someone who:
- Is named [YOUR NAME] from [YOUR CITY]
- Knows [YOUR SKILLS]
- Loves [YOUR INTERESTS] Connect AI Chat Widget
🔌 Link Ollama to Your Portfolio Chat
The AI portfolio template has a built-in chat widget. Here's how to connect it to your local Ollama!
Open portfolio-ai/index.html
Use VS Code or any text editor
Find the sendMessage function
Search for async function sendMessage
Replace the fetch call
Use the code below to connect to Ollama:
const response = await fetch('http://localhost:11434/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
model: 'llama3.2',
prompt: `You are a portfolio AI for ${portfolioData.name}.
Skills: ${portfolioData.skills.join(', ')}.
User asked: ${text}
Give a friendly, helpful answer:`,
stream: false
})
});
const data = await response.json();
addMessage(data.response); ollama serve is running before testing the chat!🔧 Troubleshooting
Ollama not starting?
tasklist | findstr ollamaCheck if it's already running in the background
Chat not connecting?
1. Make sure ollama serve is running
2. Check URL is http://localhost:11434
3. Try: curl http://localhost:11434
Claude Code not working?
Make sure you're in the project folder:cd path/to/your/portfolio
Then try: claude "help me"
🎉 You're All Set!
Now you can use AI to build and customize anything. Next step — pick a template and make it yours!