Next.js is the framework I picked because of the chatbot

For a portfolio I could have used a simple website builder, plain HTML, or a lightweight framework. I picked Next.js because of the chatbot. The moment your site needs to make live calls to an AI service, you need a framework that handles both static content (the blog, the about page) and dynamic server calls (the chatbot) in the same project. Next.js does both without juggling two separate systems.

Most of this site sends zero code to the visitor's browser. The blog posts, the about page, the portfolio items are all pre-built as plain HTML at deploy time. Only the interactive parts (the chatbot, the 3D hero, the animations) send any code to the browser. This means the site loads fast by default, and you only pay the performance cost for the parts that actually need interactivity.

The URL structure is based on how you organize your files. Put a file in the right folder and it automatically becomes a page at that URL. This portfolio's blog, for example, has one template that powers every post across three different content sources.

Create a new project with the Next.js starter. It sets up everything: the file-based routing, the build system, TypeScript, and styling. From there, every file you add to the app folder becomes a page. Pages are server-rendered by default (fast, no JavaScript sent to the browser). When you need interactivity, you mark a file as a client component and it gets the browser features it needs.

The build is slower than I'd like, and the error messages when something goes wrong can be confusing. I shipped one broken page because a warning during development looked harmless but turned out to be a real problem. Now I treat every build warning as a bug, even when the framework says it's fine.