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

[@SimonHoiberg]

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

[@AdrianTwarog]

🙌

[@ashishrai2315]

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!

[@Brawlstriker89]

just beginning. I like how youre being thorough explaining each aspect. Which is why one thing that was overlooked is your placement of the script tag. Being in the header not the body. If you put it in the header you should use defer: Loads the script in parallel and executes it after the DOM is fully loaded. Its best to use script tag in body unless you need to run script immediately. Otherwise its best to use async or defer if used in the head.

[@sanvyverma]

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

[@ericthomasington]

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

[@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.

[@AdrianTwarog]

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!

[@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.

[@IMRKdUde]

@flashamm do you know the costs? if so let me know

[@flashamm]

@@IMRKdUde The cost is based on usage. I am sure that if you get things setup properly, this probably falls under free usage, but if you ever accidentally call azure in a loop or get a lot of traffic, it could start costing money and Azure can get VERY expensive.

[@Code..188]

This looks amazing, thanks.❤

[@SurajMurari02]

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

[@GloriaChan-v6s]

Hi Adrian! thank you for your video! it is so helpful! However, I am not able to assess the Figma link. Would you mind updating it please? thanks!

[@booney87]

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

[@JimmyCortes-td9tp]

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

[@asdfg1346on]

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..

[@AdrianTwarog]

Can do!

[@asdfg1346on]

@@AdrianTwarog did you make?

[@Saurav55678]

Attempted import error: 'AzureKeyCredential' is not exported from '@azure/openai' (imported as 'AzureKeyCredential'). Import trace for requested module: ./app/api/route.js Error: TypeError: azure_openai__WEBPACK_IMPORTED_MODULE_0_.AzureKeyCredential is not a constructor Attempted import error: 'OpenAIClient' is not exported from '@azure/openai' (imported as 'OpenAIClient'). i have done everything but the problem still persists

[@ryangoh6074]

same error for me too

[@buddyhumphries7331]

any fix for this issue? I'm stuck on the same error.

[@Saurav55678]

@@buddyhumphries7331 yes it has changed the way of importing certain modules along with deprecating some modules...go through the documentation

[@khushiupadhyay3231]

did you guys figure out how to fix that error? I am facing the same issue here.

[@wenbopeng7862]

@azure/openai is deprecated. You have to use const { AzureOpenAI } = require("openai"); as import, it replaces OpenAIClient and AzureKeyCredential. Something like: export async function GET(req) { const client = new AzureOpenAI({ endpoint, apiKey, apiVersion, deployment }); const response = await client.chat.completions.create({ messages: [ { role: 'system', content: 'You are a helpful assistant', }, { role: 'user', content: 'What is the Best coding language in 2024?', } ], max_tokens: 128, });

[@PeterBardenhagen]

This is fantastic! Am I meant to rename Sample.env to .env? Nothing happens in the chat. Any specifics on where to get the 3 x values?

[@sushi-yu]

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?

[@AdrianTwarog]

There is a nodejs rates limiter npm module worth installing!

[@Tausif_Khan_07]

Assets link is not working 😢

[@AdrianTwarog]

It should be aka.ms/AdrianTwarogAI and it has all the other links on there to the Figma file, the github, etc!

[@ragnar_shot6670]

@@AdrianTwarog Doesnt work :(

[@AdrianTwarog]

@@ragnar_shot6670 I’ve updated the link in the description directly to the GitHub page

[@shaswatvendr5887]

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

[@Sireeshareddy3]

Bro , where I can get the icons that were not in your GitHub

[@javierramirezmoral5415]

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

[@adi5180]

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

[@motlalepula_s01]

my thoughts exactly

[@BrianLeithead]

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

[@sephirsart7823]

thank you for this!

[@siviwe78]

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

[@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?

[@goodnewsnelson]

Create one with your information

[@rhea2811]

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

[@AdrianTwarog]

Will do now!

[@omtomar6818]

@@AdrianTwarog still not working

[@usamafadhul5200]

The assets link doesnt work

[@hamroprint-p9z]

Could you please provide figma file ?

[@leestanford2452]

Assets link is not working, fyi :)

[@KarthikeyanShanmugam-t9q]

Source code

[@naturespeace8236]

Unable to open Link please provide direct github link

[@GlennBoumen]

Can you update the link?

[@padasaatitu]

Waaw!

[@huzaifamohd8177]

1:15:10

[@jonasbingil9899]

Ty

[@iTechWau]

❤🎉

[@ssaai]

wow

[@out-of-sight]

👌