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
https://github.com/adriantwarog/portf...

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:
https://aka.ms/AdrianTwarogAI'>https://aka.ms/AdrianTwarogAI

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

You can learn more about Microsoft Azure here: https://aka.ms/AdrianTwarogAI'>https://aka.ms/AdrianTwarogAI

#portfolio #website #azure

Want to learn more? ⭐ Check out my courses! ⭐
Teach Me Design Course: https://www.enhanceui.com/
OpenAI + GPT Course & Templates: https://enhanceui.gumroad.com/

Software & Discounts:
Admin Templates and UI Kits: https://bit.ly/themeselection15
Screen Recorder: https://screenstudio.lemonsqueezy.com?aff=po745
✖ Editor X: https://www.editorx.com/adriantwarog
Webflow: https://webflow.grsm.io/adrian
Envato: https://1.envato.market/yRZjz2
Envato Elements: https://1.envato.market/LP0OJZ
Elementor: https://elementor.com/adrian/?ref=23140

Computer Gear:
⬛ Monitor: https://amzn.to/3f9DOQI
⌨ Keyboard: https://amzn.to/3eA5UFD
Mouse: https://amzn.to/3xVJO8l
Mic: https://amzn.to/3hgCfms
Tablet: https://amzn.to/3ewt7sa
Lighting: https://amzn.to/3vOZeZY
Key Lighting: https://amzn.to/3f6qP2f

Camera Equipment:
Camera: https://amzn.to/3uCv4J9
Primary Lens: https://amzn.to/3vT6wMm
Secondary Lens: https://amzn.to/3tyqWIX
Secondary Camera: https://amzn.to/3o2zCGi
Camera Mic: https://amzn.to/33tCz9l
USB to HDMI: https://amzn.to/33yW9RE