In the video, Leon demonstrates how he redesigned his portfolio website to mimic a coding agent CLI using Next.js and Claude Code, featuring interactive elements like simulated AI interactions and a chat window with predefined Q&A. He also guides viewers through deploying the site with Hosting Error, encouraging developers to create their own engaging, terminal-style personal websites quickly and easily.
In this video, Leon demonstrates how he redesigned his personal portfolio website to resemble a coding agent command-line interface (CLI), inspired by Claude Code. The site features interactive elements such as tool calls and response streaming, creating the illusion of a user interacting with an AI agent to learn about him. Additionally, visitors can ask questions that are answered from a pre-built knowledge base, enhancing user engagement. Leon invites viewers to explore his site, which includes various Easter eggs like keyboard shortcuts and slash commands.
Leon begins the tutorial by setting up a new Next.js project using the command line and installing helpful skills like “next best practices” and a front-end design skill to improve the UI. He uses Claude Code, a coding agent, to assist in building the portfolio by providing it with a prompt that instructs the agent to create a terminal-style page. This prompt includes links to his LinkedIn, YouTube, and GitHub, as well as an image of himself, allowing the agent to gather relevant information and generate the initial version of the site.
Next, Leon enhances the site by adding animations that simulate typing and streaming responses, mimicking real-time interaction with an AI agent. These animations play only once per session to avoid annoying repeat visitors but can be replayed on demand. He also implements a simple chat window at the bottom of the page, which is not a true AI chatbot but uses a JSON file with predefined questions and answers matched via regex. This feature adds a fun, interactive element without requiring complex AI inference.
Once the portfolio is complete, Leon walks through deploying the site to production using a hosting service called Hosting Error. He explains how to commit the project to GitHub, connect the repository to the hosting platform, and deploy the site with ease. He highlights the benefits of this setup, including automatic redeployment on code changes and the ability to manage environment variables if needed. He also mentions domain registration options, including a free first year and a discount code for viewers.
Finally, Leon encourages viewers to try building their own portfolio websites using the techniques shown. He emphasizes the simplicity and speed of the process, from project setup to deployment, and invites viewers to share their creations in the comments. The video serves as both a tutorial and inspiration for developers looking to create unique, interactive personal websites that showcase their skills in a modern, engaging way.