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

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ธ.ค. 2024

ความคิดเห็น • 57

  • @SimonHoiberg
    @SimonHoiberg 8 หลายเดือนก่อน +16

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

  • @ashishrai2315
    @ashishrai2315 6 หลายเดือนก่อน +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 3 หลายเดือนก่อน +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 15 วันที่ผ่านมา

    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 5 หลายเดือนก่อน +10

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

  • @ericthomasington
    @ericthomasington 5 หลายเดือนก่อน +3

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

  • @myhificloud
    @myhificloud 8 หลายเดือนก่อน +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  8 หลายเดือนก่อน +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!

  • @JimmyCortes-td9tp
    @JimmyCortes-td9tp 4 หลายเดือนก่อน

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

  • @flashamm
    @flashamm 4 หลายเดือนก่อน +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 3 หลายเดือนก่อน

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

    • @flashamm
      @flashamm 3 หลายเดือนก่อน

      @@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 3 หลายเดือนก่อน

    This looks amazing, thanks.❤

  • @PeterBardenhagen
    @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?

  • @SurajMurari02
    @SurajMurari02 5 หลายเดือนก่อน +2

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

  • @asdfg1346on
    @asdfg1346on 7 หลายเดือนก่อน +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..

    • @AdrianTwarog
      @AdrianTwarog  7 หลายเดือนก่อน +1

      Can do!

    • @asdfg1346on
      @asdfg1346on 6 หลายเดือนก่อน

      @@AdrianTwarog did you make?

  • @sushi-yu
    @sushi-yu 7 หลายเดือนก่อน +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  7 หลายเดือนก่อน +1

      There is a nodejs rates limiter npm module worth installing!

  • @booney87
    @booney87 3 หลายเดือนก่อน

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

  • @javierramirezmoral5415
    @javierramirezmoral5415 8 หลายเดือนก่อน

    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

  • @BrianLeithead
    @BrianLeithead 7 หลายเดือนก่อน

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

  • @Saurav55678
    @Saurav55678 4 หลายเดือนก่อน +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 4 หลายเดือนก่อน +1

      same error for me too

    • @buddyhumphries7331
      @buddyhumphries7331 3 หลายเดือนก่อน

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

    • @Saurav55678
      @Saurav55678 3 หลายเดือนก่อน

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

    • @khushiupadhyay3231
      @khushiupadhyay3231 2 หลายเดือนก่อน +1

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

    • @wenbopeng7862
      @wenbopeng7862 2 หลายเดือนก่อน +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,
      });

  • @PoppingPaathshala
    @PoppingPaathshala 7 หลายเดือนก่อน +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?

    • @goodnewsnelson
      @goodnewsnelson 18 วันที่ผ่านมา

      Create one with your information

  • @adi5180
    @adi5180 5 หลายเดือนก่อน +1

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

  • @shaswatvendr5887
    @shaswatvendr5887 5 หลายเดือนก่อน

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

  • @Kanna4ever
    @Kanna4ever หลายเดือนก่อน

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

  • @Tausif_Khan_07
    @Tausif_Khan_07 8 หลายเดือนก่อน +3

    Assets link is not working 😢

    • @AdrianTwarog
      @AdrianTwarog  8 หลายเดือนก่อน +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 4 หลายเดือนก่อน +2

      @@AdrianTwarog Doesnt work :(

    • @AdrianTwarog
      @AdrianTwarog  4 หลายเดือนก่อน +1

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

  • @siviwe78
    @siviwe78 4 หลายเดือนก่อน

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

  • @sephirsart7823
    @sephirsart7823 7 หลายเดือนก่อน

    thank you for this!

  • @rhea2811
    @rhea2811 5 หลายเดือนก่อน +1

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

    • @AdrianTwarog
      @AdrianTwarog  5 หลายเดือนก่อน +1

      Will do now!

    • @omtomar6818
      @omtomar6818 4 หลายเดือนก่อน

      @@AdrianTwarog still not working

  • @leestanford2452
    @leestanford2452 4 หลายเดือนก่อน

    Assets link is not working, fyi :)

  • @hamroprint-p9z
    @hamroprint-p9z หลายเดือนก่อน

    Could you please provide figma file ?

  • @KarthikeyanShanmugam-t9q
    @KarthikeyanShanmugam-t9q 6 หลายเดือนก่อน +3

    Source code

  • @naturespeace8236
    @naturespeace8236 5 หลายเดือนก่อน

    Unable to open Link please provide direct github link

  • @padasaatitu
    @padasaatitu 7 หลายเดือนก่อน

    Waaw!

  • @GlennBoumen
    @GlennBoumen 5 หลายเดือนก่อน

    Can you update the link?

  • @jonasbingil9899
    @jonasbingil9899 7 หลายเดือนก่อน

    Ty

  • @huzaifamohd8177
    @huzaifamohd8177 5 หลายเดือนก่อน

    1:15:10

  • @iTechWau
    @iTechWau 8 หลายเดือนก่อน

    ❤🎉

  • @ssaai
    @ssaai หลายเดือนก่อน

    wow

  • @out-of-sight
    @out-of-sight 7 หลายเดือนก่อน

    👌