Create a Responsive Portfolio Website with HTML CSS JS AI from scratch
Вставка
- Опубліковано 9 чер 2024
- In this video, I’m going to help you build your own portfolio website from scratch. You can access all the assets and Microsoft Azure here: aka.ms/AdrianTwarogAI
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:
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!!!
#portfolio #website #azure
Want to learn more? ⭐ Check out my courses! ⭐
📘 Teach Me Design - Course: www.enhanceui.com/
📚 OpenAI + GPT - Course & Templates: enhanceui.gumroad.com/
Software & Discounts:
📦 Admin Templates and UI Kits: bit.ly/themeselection15
💻 Screen Recorder: screenstudio.lemonsqueezy.com?aff=po745
✖ Editor X: www.editorx.com/adrian-twarog
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE - Наука та технологія
1.5 hours!! 😳
You're really going far to create value these days! Massive kudos 👏
🙌
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 🙌
thank you for this!
Very good portfolio ❤
Thanks mate!
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
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.
Yes, it would mean doing some additional prompt engineering.
For example, you could add as part of the system message "reference which part of the resume you extracted this from, include the line and page: eg. Page 1 Paragraph 4 Line 54 - Reference" It would also mean a bit more markup in the document itself. There are some good videos online for prompt engineering like this!
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?
Waaw!
Ty
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?
There is a nodejs rates limiter npm module worth installing!
are we supposed to put in company info for the Azure OpenAI? I don't have one currently
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..
Can do!
👌
❤🎉
Assets link is not working 😢
It should be aka.ms/AdrianTwarogAI and it has all the other links on there to the Figma file, the github, etc!