Create a Responsive Portfolio Website with HTML CSS JS AI from scratch

In this video, I’m going to help you build your own portfolio website from scratch. You can use basic HTML CSS and JavaScript to use and create this!

Assets Updates

The first part of the video will allow anyone to create this web design using basic HTML, CSS and JavaScript. This will be beginner friendly. It will be a portfolio you can host yourself, and it will have a single page design that has some animation, with responsive design that will look good on a mobile device, and will teach some fundamentals for coding.

In the second part, I’ll show how to migrate this code into a React Project that is on top of Next JS. This can be automatically deployed in the cloud with ease, with some additional transition effects and features.

The final part of this video will feature some really interesting implementations of AI technology on top of Microsoft Azure, and some interactive elements. So whatever level you’re at you’ll learn something new and interesting.

00:00:00 - Create a Responsive Portfolio Website
00:00:42 - Website Portfolio Design Overview
00:02:57 - Setup Files and Folders
00:04:07 - Portfolio - Coding the HTML CSS JS
00:04:53 - Portfolio - Selecting a Font
00:00:05:55 - VS Code - Live Server Extension
00:06:34 - Portfolio - Adding a Favicon
00:07:14 - Portfolio - Header and Navigation
00:24:23 - Portfolio - Hero Section with Hero Image and Call to Action
00:36:49 - Portfolio - Logo Section
00:40:34 - Portfolio - About Section with Skills
00:46:56 - Portfolio - Articles Section with Work Experience
00:54:17 - Portfolio - Bento Grid with Recent Projects
01:04:00 - Portfolio - Azure AI Chatbot
01:12:55 - Portfolio - Resume and Contact Us
01:15:15 - Convert the Portfolio into NextJS and React JS
01:21:39 - Integrate AI Chatbot - Microsoft Azure AI OpenAI Studio
01:23:32 - Integrate AI Chatbot - Setup GPT3.5 API on Azure OpenAI
01:28:42 - Integrate AI Chatbot - Create Portfolio AI Chatbot
01:33:48 - Integrate AI Chatbot - Add Portfolio Resume to AI Assistant
01:35:30 - Completed and Summary of Portfolio Website

All the assets can be found here:

A big thanks to Microsoft for sponsoring todays video, you can learn more about Microsoft Azure OpenAI and their tools at the link about!!!

#portfolio #website #azure

Want to learn more? ⭐ Check out my courses! ⭐

Software & Discounts:

Computer Gear:

Camera Equipment:

[SimonHoiberg]

1.5 hours!! 😳
You're really going far to create value these days! Massive kudos 👏

[ashishrai]

This video is so underrated ! I'm sure with time this will get the attention it deserves .I just created a beautiful portfolio following you, Thank you 🙌

[helloworldcsofficial]

Great vid! There are a few instances where one cannot see what you are typing, but I believe this is where to source code can help. Thanks for for the vid!

[sanvyverma]

The assets link isn't working. Please can you upload again. Thank you.

[JimmyCortes-tdtp]

You are a really nice person. Great job. Thank you. 👍👍👍👍👍👍

[ericthomasington]

1:21:39 The link doesnt appear to work in the description. Is there another I can use?

[booney]

Thank you for the great video, May I know what VS theme are you using?

[Saurav]

Import trace for requested module: ./app/api/route.js Error: TypeError: is not a constructor


i have done everything but the problem still persists

[asdfgon]

Hey, im a bit late but love your videos. Can you please do a video on how to use AI models from huggingface in a react or next js app? Because they have a lot of models hosted there but a video on how to use a conversational model would be excelent please. i cant find anywhere on yt a video like that..

[flashamm]

Not trying to complain as this video was great: I will say I struggled to keep up with the video in terms of how fast you were implementing lines of code. It's not that I was trying to understand, just it was going so fast I just couldn't keep up, even at 0.75x speed. Another issue I noticed was several instance of code not actually showing on screen which made it hard to follow at times. Otherwise, loved the video and wish I could have implemented the AI, but just couldn't risk the costs of Azure.

[myhificloud]

When asking the AI chat bot a question regarding the resume, is there a method to highlight the exact location where the information is derived, as well as cite the source info in the chat bot response? Thank you for this.

[SurajMurari]

Hey Adrian, the assets link is not working.
Can you help with that..?

[YutingSwift]

Thank you for sharing. I've always wanted to create a portfolio like this!
Can you please suggest a way to prevent others from spamming the chat bot once we publish/deploy it on the internet?

[PoppingPaathshala]

I thoroughly enjoyed creating this project and the only problem I am facing is that I don’t have any card to sign up and create an account on Microsoft azure. Any suggestions?

[shaswatvendr]

Hey Adrian, Great Video! Assets are not available in the link you provided

[javierramirezmoral]

Hi Adrian, how can I access my website with the chatbot from the internet? Would it be with the NextJS and React JS part? Thank you very much for your work

[siviwe]

I'm loving this but the link is not working and style is not responding on my side

[BrianLeithead]

are we supposed to put in company info for the Azure OpenAI? I don't have one currently

[adi]

can I just skip to part integrate AI chatbot and not converting it into nextjs and reactjs? will the chatbot works?

[rhea]

i will be so happy if you update the link because it cant be accessed:(