In this video I build a responsive portfolio website design from scratch using basic HTML, CSS, and JavaScript—beginner friendly, but still packed with modern techniques. I walk through setting up the project structure (index.html, styles.css, scripts.js), pulling in assets, adding Google Fonts (Open Sans), and using Live Server in VS Code so you can iterate fast. Then I code the header/nav, create a proper mobile hamburger menu with a simple JS class toggle, and style it all with CSS variables, Flexbox, media queries, and even CSS nesting (which is now supported across browsers). From there I start constructing the hero section with a two-column layout, CTA buttons (resume + contact), social links, and the kind of small UI details that make a portfolio feel “real” (hover states, spacing, border radii, and responsive behavior across desktop/tablet/mobile). After the vanilla build, I show how to migrate the same portfolio into a React project on Next.js so it’s easier to deploy and extend. And if you want the challenge mode: I integrate an Azure AI chatbot so visitors can literally chat with your resume—an awesome way to stand out while learning Next.js 14 + Azure OpenAI workflows.