Make a portfolio site with an AI chat
A designer used Claude Code to publish a personal portfolio and add a question-answering chat about their work.
- What they did
- Felix Lee, who works as a designer, had Claude Code draft a plan.md for a portfolio project. They checked that plan, replaced the stack with plain HTML and CSS, and then used the agent to build the site before making more changes through prompts. They put the result on GitHub and Vercel, then set up Supabase for data storage, Google sign-in, and OpenAI for the chat.
- How it went
- They say the site was finished in 48 hours. Three days later, they launched a growth design tool that they say now has over 500 users. The post does not describe the chat’s performance.
- Tips
- Start with a plan and review it before asking for implementation. Keep any deployment, account setup, or secret-handling steps paused until you explicitly approve them.
Try it yourself with Claude Code
I’m a [role] with no coding experience. Build me a portfolio site for [my background, projects, or services], and include a chat feature that can answer questions only from a facts document you create from my input. First, give me a clear plan and wait for my approval before writing code. Use simple HTML and CSS unless I ask for another approach. Explain what to do in plain language, help me test it locally, and stop before any step that publishes, deletes, submits, or costs money so you can ask for confirmation. Also remind me to keep secrets out of version control.
Fill in the [brackets]. Agents can make mistakes, so review anything before it is sent, paid or deleted.
Get 3 agent uses like this every morning
With the day's top AI news. Free, and one click to unsubscribe.
Related agent uses
Use Claude Code to spot macOS layout bugs
A developer let Claude Code compile a Mac app, open it, and click through screens to find visual problems.
Guide an AI to move your SaaS between cloud providers
A developer used Claude Code to help shift a product from AWS to DigitalOcean, handling infrastructure, data migration, certificates, and launch-day fixes.
Let an agent turn browser edits into code
A designer changed a local site in the browser while a coding agent wrote the matching CSS updates into the codebase.
Scan commits for security bugs before they land
Use Claude Code to inspect each commit for secrets, injection flaws, and migration risks before it reaches the repository.
Match a pull request to repo style
A developer used Claude Code to bring a pull request in line with a repo’s style, but it only altered comments and left the code unchanged.
Let Claude work from GitHub code and pause before posting
A commenter gives Claude source code and a feature brief, then reviews the draft only when PR review begins.