Create a Responsive Portfolio Website with Azure AI Features
Learn how to build your own portfolio website from scratch with Microsoft Azure AI. Create a stunning portfolio website with the power of Azure AI. Learn how to build it from scratch with this comprehensive guide.
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
#portfolio #website #azure #ai
