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

Поділитися
Вставка
  • Опубліковано 19 січ 2025

КОМЕНТАРІ • 59

  • @SimonHoiberg
    @SimonHoiberg 9 місяців тому +17

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

  • @ashishrai2315
    @ashishrai2315 7 місяців тому +3

    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
    @helloworldcsofficial 4 місяці тому +1

    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
    @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
    @sanvyverma 6 місяців тому +11

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

  • @ericthomasington
    @ericthomasington 6 місяців тому +3

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

  • @myhificloud
    @myhificloud 9 місяців тому +3

    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
      @AdrianTwarog  9 місяців тому +2

      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
    @flashamm 5 місяців тому +3

    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
      @IMRKdUde 4 місяці тому

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

    • @flashamm
      @flashamm 4 місяці тому

      @@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
    @Code..188 4 місяці тому

    This looks amazing, thanks.❤

  • @SurajMurari02
    @SurajMurari02 6 місяців тому +2

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

  • @GloriaChan-v6s
    @GloriaChan-v6s 8 днів тому

    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
    @booney87 4 місяці тому

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

  • @JimmyCortes-td9tp
    @JimmyCortes-td9tp 5 місяців тому

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

  • @asdfg1346on
    @asdfg1346on 9 місяців тому +4

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

  • @Saurav55678
    @Saurav55678 5 місяців тому +3

    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
      @ryangoh6074 5 місяців тому +1

      same error for me too

    • @buddyhumphries7331
      @buddyhumphries7331 4 місяці тому

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

    • @Saurav55678
      @Saurav55678 4 місяці тому

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

    • @khushiupadhyay3231
      @khushiupadhyay3231 3 місяці тому +1

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

    • @wenbopeng7862
      @wenbopeng7862 3 місяці тому +1

      @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
    @PeterBardenhagen 2 місяці тому

    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
    @sushi-yu 9 місяців тому +2

    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
      @AdrianTwarog  8 місяців тому +1

      There is a nodejs rates limiter npm module worth installing!

  • @Tausif_Khan_07
    @Tausif_Khan_07 9 місяців тому +3

    Assets link is not working 😢

    • @AdrianTwarog
      @AdrianTwarog  9 місяців тому +1

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

    • @ragnar_shot6670
      @ragnar_shot6670 5 місяців тому +2

      @@AdrianTwarog Doesnt work :(

    • @AdrianTwarog
      @AdrianTwarog  5 місяців тому +1

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

  • @shaswatvendr5887
    @shaswatvendr5887 6 місяців тому

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

  • @Sireeshareddy3
    @Sireeshareddy3 2 місяці тому

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

  • @javierramirezmoral5415
    @javierramirezmoral5415 9 місяців тому

    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
    @adi5180 7 місяців тому +1

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

  • @BrianLeithead
    @BrianLeithead 8 місяців тому

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

  • @sephirsart7823
    @sephirsart7823 8 місяців тому

    thank you for this!

  • @siviwe78
    @siviwe78 5 місяців тому

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

  • @PoppingPaathshala
    @PoppingPaathshala 9 місяців тому +1

    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?

  • @rhea2811
    @rhea2811 6 місяців тому +1

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

  • @usamafadhul5200
    @usamafadhul5200 9 днів тому

    The assets link doesnt work

  • @hamroprint-p9z
    @hamroprint-p9z 2 місяці тому

    Could you please provide figma file ?

  • @leestanford2452
    @leestanford2452 5 місяців тому

    Assets link is not working, fyi :)

  • @KarthikeyanShanmugam-t9q
    @KarthikeyanShanmugam-t9q 7 місяців тому +3

    Source code

  • @naturespeace8236
    @naturespeace8236 6 місяців тому

    Unable to open Link please provide direct github link

  • @GlennBoumen
    @GlennBoumen 6 місяців тому

    Can you update the link?

  • @padasaatitu
    @padasaatitu 8 місяців тому

    Waaw!

  • @huzaifamohd8177
    @huzaifamohd8177 6 місяців тому

    1:15:10

  • @jonasbingil9899
    @jonasbingil9899 8 місяців тому

    Ty

  • @iTechWau
    @iTechWau 9 місяців тому

    ❤🎉

  • @ssaai
    @ssaai 2 місяці тому

    wow

  • @out-of-sight
    @out-of-sight 8 місяців тому

    👌