Heidelberg AICurriculum

Why I Use Claude Code to Build Every Portfolio Now

Leon van Zyl ·2026-05-19 ·1 min read

Summary written by us from the video's transcript. The video, and everything in it, is Leon van Zyl's work.

Learn how Leon builds a Claude Code‑styled interactive portfolio using Next.js, adds streaming UI effects, a simple Q&A chatbot, and deploys it in minutes.

Takeaways

  • Start a Next.js project with `npx create-next-app` and enhance it using Claude Code skills for best practices and UI design.
  • Use structured prompts to generate streaming CLI animations and faux tool‑call displays that run once per session.
  • Implement a lightweight Q&A widget by storing pairs in JSON and matching queries with regex, avoiding heavy inference costs.
  • Deploy directly from GitHub to a hosting service; pushes trigger automatic builds, making updates instantaneous.

Initialize the project with Next.js and skills

Leon starts by creating an empty folder and runs `npx create-next-app@latest .` to install Next.js. He then installs the **next‑best‑practices** skill and a front‑end design skill using Claude Code, which sets up project‑level tooling and improves the UI experience.

Prompt setup for Claude Code

In pattern mode, Leon pastes a prepared prompt from the *resources/prompts* folder. The prompt tells Claude to build a terminal‑like interface that displays his personal information, pulling in images and GitHub links automatically. He approves the generated implementation plan before proceeding.

Add streaming animations and tool‑call UI

Leon expands the prompt to include sections that generate typing animations, response streaming, and faux tool‑call visuals. After Claude generates the code, he refreshes the page to see each line stream in sequentially, creating a dynamic CLI feel without replaying on every visit unless a new session starts.

Create a simple Q&A chat widget

Instead of a real AI backend, Leon adds a `q8.json` file containing question‑answer pairs and uses regex matching to return answers. This lightweight approach provides an interactive chatbot‑like experience for visitors.

Commit, push, and prepare for deployment

Leon commits all changes with the message “final” and pushes the repository named *portfolio‑website‑tutorial* to GitHub, making the code ready for hosting.

Deploy with a hosting service

Using a hosting platform’s business plan ($4/month), Leon connects the GitHub repo, selects either a temporary or custom domain, and deploys the Next.js app. He demonstrates that changes (e.g., switching text color from orange to purple) automatically trigger new deployments via the integrated CI/CD pipeline.

Finalize and iterate

Leon shows how to adjust environment variables if needed, though none are required for this portfolio. He emphasizes the ease of updating the site—any push to GitHub results in an instant live update on the hosted domain.