Adrian Twarog
Adrian Twarog
  • 111
  • 33 565 705
Create a Responsive Portfolio Website with HTML CSS JS AI from scratch
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
Переглядів: 6 920

Відео

How to use Microsoft Azure AI Studio and Azure OpenAI models
Переглядів 36 тис.Місяць тому
You can now interact with OpenAI directly through Azure AI Studio. Learn more about Microsoft Azure AI Studio here: aka.ms/AdrianAI In this video I’m going to cover Azure AI Studio, which will be useful if you’re looking to build something a bit more complex as either a beginner or professional developer at a company. There will be 5 parts to this video: 1. What is Azure AI Studio 2. Create a m...
How to build a PDF summarizer using AI - React JS Next.js
Переглядів 16 тис.2 місяці тому
I'll show how you can build a PDF summary App using AI. I'll use a plain CLI with Node JS and then I'll add a user interface with Next.js and React JS. The PDFs can have multiple pages and can summarize large documents with large language models using Octo AI. Check out the full project at: github.com/octoml/octoai-textgen-cookbook Give OctoAI a try at: (Thanks to Octo AI for sponsoring the vid...
37 x Interactive React JS Components to Try - Aceternity UI
Переглядів 104 тис.3 місяці тому
If you want to make your websites look 10x awesome, try Aceternity UI. You can copy paste the most trending components and use them in your websites without having to worry about styling and animations. Reference: ui.aceternity.com/ 00:00 - React JS Interactive Animated Components 00:29 - What is Aceternity UI 00:51 - 3D Card 01:32 - 3D Animated Pin 02:03 - Hero Parallax 02:18 - Google Gemini E...
YouTube Clone with A.I. Next.js 14, React JS, Mongo, OpenAI
Переглядів 8 тис.4 місяці тому
I've been working on a special MVP project called the UA-cam Analytics AI, which takes youtube studio analytics and adds AI features on top to analysis thumbnails, videos and content. Here is my progress on it so far. In this video I added Cloudinary detection, analysis and editing tools! Cloudinary AI: (todays sponsor) cloudinary.com/products/cloudinary_ai? Check out the UA-cam Analytics AI pr...
You must try this Visual Editor for building React JS Apps
Переглядів 184 тис.5 місяців тому
Codux is a Visual IDE for React, and a revolutionary one at that! It can render any react project quickly and in real-time. In this video I’m going to take a look and what makes it so special, including how it includes built-in CSS, SASS and Tailwind styling options. There are now components and boards that let you use and reuse component templates you’ve created, and it makes the process for b...
How I Create and Code AI Startup Ideas in 24 hours - OpenAI
Переглядів 61 тис.6 місяців тому
I've had this idea I wanted to build for quite a while, so I decided to not have any more excuses and build the whole MVP idea out in a single day. I built this AI start up in just 24 hours. I used simple Javascript code, with some basic HTML, CSS and Node JS, with a backend database of Astra DB since it now includes Vector Databases! I used OpenAI for the Artifical Intelligence together with C...
I don't need Firebase anymore! I use Appwrite Cloud Functions
Переглядів 29 тис.7 місяців тому
I managed to create a cloud function on GitHub using Node JS that has CI CD in less than 5 minutes, and you can do this too! Finally, I don't have to use services like Firebase and complicated setups with a worry that the pricing might break my wallet. Appwrite and it's new cloud beta is now available. It has cool things like cloud functions that are easy to implement using templates that are r...
ChatGPT for Automation in Business and Personal Tasks Easily
Переглядів 32 тис.7 місяців тому
ChatGPT Automation - Tutorial on How to Automate Tasks with AI, I'll show how to integrate GPT4 with Applications and Workflows. Make: (Todays Sponsor) Get 1 month of Make's Pro plan with 10,000 operations for free using this link: www.make.com/en/register?promo=adrian-twarog& OpenAI: openai.com/ 00:00 - OpenAI Automation 01:00 - OpenAI Account Setup 01:13 - Make Account Setup 01:50 - Gmail AI ...
ChatGPT Functions - Full Tutorial for using OpenAI Functions
Переглядів 82 тис.8 місяців тому
Learn OpenAI ChatGPT Functions and how to properly integrate them. In this video I'll cover Chat GPT functions and how to integrate ai into function calling. ChatGPT Function can be used to talk directly between your terminal and request Open AI to call specific commands based on what is written. Bright Data: (free $15 credit when using link below) Proxy Network and Scraping Tool brdta.com/adri...
ChatGPT Code Interpreter Tutorial - New Open AI GPT Model!
Переглядів 148 тис.10 місяців тому
ChatGPT Code Interpreter Tutorial - Data Uploads and Analysis. The latest Code Interpreter Chat GPT model has new features that previous Ai models didn't have. OpenAI have done a really fantastic job allowing you to run python inside of ChatGPT to do interactive things. This crash course is a guide for code interpreter. #chatgpt #codeinterpreter #openai Want to learn more? ⭐ Check out my course...
OpenAI Embeddings and Vector Databases Crash Course
Переглядів 370 тис.10 місяців тому
Embeddings and Vectors are a great way of storing and retrieving information for use with AI services. OpenAI provides a great embedding API to do this. Postman lets you make these with easy at www.postman.com/ (today's sponsor) In this video we will explore how to create a Vector Database by creating embeddings using the OpenAI API and then storing them in SingleStore. The first part of the vi...
How I used AI to Automate YouTube Shorts - ChatGPT OpenAI
Переглядів 46 тис.11 місяців тому
AI automation is making its way into designing, coding and even video production. I'm going to explore how videos can be fast-tracked and automated using AI services! I try to create a new youtube channel scripted by ChatGPT, edited with Text to Video AI, and voiced over too. OpenAI has really changed how many things are done. This video was sponsored by InVideo! If you want to try inVideo with...
I used AI to Automatically Generate Websites Without Coding
Переглядів 79 тис.Рік тому
Not everyone can code, and while ChatGPT is great at giving you the code for a site, there are tools out there now that generate websites using ai without writing code. In this video I'll cover 10web which has a new AI Website Builder that automates Ai Generation tools like OpenAI provides to create a website in just minutes! Check out 10Web AI Builder: (also today's sponsor) 10web.io/ai-websit...
How to integrate OpenAI GPT3 with a Databases - Crash Course
Переглядів 280 тис.Рік тому
Databases can be connected to an AI through an API. In this tutorial, I'll show the practical uses of creating a simple connection from OpenAI to a new Database built on Singlestore. 00:00 - Introduction 01:00 - Project Plan 01:32 - Accessing UA-cam API 01:59 - Connecting to the UA-cam API 03:07 - Retrieving Comments from UA-cams API 04:16 - Setting up a Database on SingleStore 05:01 - Connecti...
How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
Переглядів 37 тис.Рік тому
How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
Beginners Guide to GPT4 API & ChatGPT 3.5 Turbo API Tutorial
Переглядів 292 тис.Рік тому
Beginners Guide to GPT4 API & ChatGPT 3.5 Turbo API Tutorial
What is GPT4 and How You Can Use OpenAI GPT 4
Переглядів 590 тис.Рік тому
What is GPT4 and How You Can Use OpenAI GPT 4
What is Bing AI (in 120 seconds) & How to start using Bing Chat
Переглядів 188 тис.Рік тому
What is Bing AI (in 120 seconds) & How to start using Bing Chat
Top 10 AI Tools Like ChatGPT You Must Try in 2023
Переглядів 1,1 млнРік тому
Top 10 AI Tools Like ChatGPT You Must Try in 2023
How to use ChatGPT to Make Money Real World AI Opportunities
Переглядів 159 тис.Рік тому
How to use ChatGPT to Make Money Real World AI Opportunities
My Full Web Design Process
Переглядів 30 тис.Рік тому
My Full Web Design Process
How to use ChatGPT on Discord - AI Chatbot Tutorial
Переглядів 275 тис.Рік тому
How to use ChatGPT on Discord - AI Chatbot Tutorial
Chromebooks for Coding - Are they worth it?!
Переглядів 38 тис.Рік тому
Chromebooks for Coding - Are they worth it?!
Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!
Переглядів 479 тис.Рік тому
Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!
Advanced ChatGPT Guide - How to build your own Chat GPT Site
Переглядів 1,1 млнРік тому
Advanced ChatGPT Guide - How to build your own Chat GPT Site
How to use ChatGPT to build Business Ideas, Sites & Personal Projects
Переглядів 1,5 млнРік тому
How to use ChatGPT to build Business Ideas, Sites & Personal Projects
ChatGPT Tutorial - A Crash Course on Chat GPT for Beginners
Переглядів 6 млнРік тому
ChatGPT Tutorial - A Crash Course on Chat GPT for Beginners
What is ChatGPT and How You Can Use It
Переглядів 1,4 млнРік тому
What is ChatGPT and How You Can Use It
You're not using these Console Logging Tricks... Yet!!!
Переглядів 13 тис.Рік тому
You're not using these Console Logging Tricks... Yet!!!

КОМЕНТАРІ

  • @DiegoSantos-pe9by
    @DiegoSantos-pe9by 3 хвилини тому

    Primeira rotina de engenheiro que realmente se aproxima da realidade, sem ser aqueles coda fofo gourmet.

  • @joycegreer9391
    @joycegreer9391 Годину тому

    Very helpful!

  • @narendratati723
    @narendratati723 4 години тому

    Hi, Thank you for this video. I'm facing an issue when I try to install the next js. I tried all the possible ways.

  • @user-fu6he8sf8d
    @user-fu6he8sf8d 7 годин тому

    we didnt as for a biographie

  • @jackf6622
    @jackf6622 10 годин тому

    20 mins for you lol

  • @joannehottendorf1908
    @joannehottendorf1908 День тому

    This instructor is a speed talker.

  • @abrahamouattara8757
    @abrahamouattara8757 День тому

    😭very good thank .....................

  • @MyGeorge1964
    @MyGeorge1964 День тому

    Codux is created WIX an Israeli CO and yes they are known for creating spyware - No thank you!

  • @MyGeorge1964
    @MyGeorge1964 День тому

    What is a bottom down app?

  • @shakkirptb
    @shakkirptb День тому

    working from a dark room! bad idea

  • @chrismckinney8243
    @chrismckinney8243 День тому

    Is it possible for me to get this app this would really help with motivation

  • @ChatGPt2001
    @ChatGPt2001 2 дні тому

    Building your own Chat GPT site can be an exciting project that allows you to interact with users using the power of language processing. To help you get started, I'll provide a high-level guide that outlines the general steps involved in creating a Chat GPT site. Keep in mind that this guide assumes you have basic web development knowledge and experience. Let's dive in! 1. Define Your Project Scope: - Determine the purpose of your Chat GPT site. Is it for customer support, entertainment, education, or something else? - Identify the target audience and their expectations. - Define the key features and functionalities you want to include. 2. Choose a Web Development Stack: - Select a programming language and framework for your web application. Common choices include Python with frameworks like Flask or Django, or JavaScript with frameworks like Node.js or React. 3. Set Up the Development Environment: - Install the necessary tools and dependencies for your chosen programming language and framework. - Set up a local development server to test your application. 4. Acquire or Train a Language Model: - Decide whether you want to use a pre-trained language model like GPT-3 or if you want to train your own model. - If you choose to use a pre-trained model, sign up for an API key from the relevant provider (e.g., OpenAI). - If you decide to train your own model, you'll need a significant amount of training data, computational resources, and expertise in machine learning. 5. Integrate the Language Model: - Set up the necessary API connections to interact with the language model. - Handle authentication and API rate limiting, if applicable. - Implement code to transform user inputs into appropriate API requests and handle responses from the model. 6. Design the User Interface: - Create a user-friendly interface for users to interact with your Chat GPT system. - Use HTML, CSS, and JavaScript (or your chosen web development stack) to build the frontend. - Consider using frameworks or libraries to simplify the UI development process. 7. Implement Chat Functionality: - Integrate the frontend with the backend logic that interacts with the language model. - Handle user inputs, send requests to the language model API, and process the responses. - Implement logic for handling conversations, context, and maintaining session state. 8. Deploy Your Application: - Set up a hosting environment to make your Chat GPT site accessible on the internet. - Choose a hosting provider that suits your needs (e.g., AWS, Google Cloud, Heroku, etc.). - Configure your domain, SSL certificate, and any other necessary settings. 9. Test and Refine: - Thoroughly test your Chat GPT site to ensure it functions as expected. - Collect user feedback and make iterative improvements based on user needs and expectations. - Monitor and address any performance or stability issues. 10. Scale and Maintain: - Deploy performance optimizations as needed to handle increased traffic or usage. - Regularly update and maintain your language model, backend code, and dependencies. - Keep an eye on security vulnerabilities and apply necessary patches and updates. Remember, this guide provides a high-level overview of the process, and each step may require further exploration and research based on your specific requirements and technical expertise. Additionally, consider reviewing the terms and conditions of any language model provider you plan to use to ensure compliance and adherence to usage policies. Good luck with your Chat GPT site development!

  • @s_sattu_s
    @s_sattu_s 2 дні тому

    how can i give you unlimited likes and subscribes

  • @SatyaHyderabad
    @SatyaHyderabad 2 дні тому

    Make it slow

  • @SatyaHyderabad
    @SatyaHyderabad 2 дні тому

    Its too fast explanation,

  • @samirkha
    @samirkha 3 дні тому

    Love you, sir. thanks for making this video so easy and fast. Very helpful, and easy to understand in fast-paced learning. Lots of love and support.

  • @padasaatitu
    @padasaatitu 3 дні тому

    Waaw!

  • @helium73
    @helium73 4 дні тому

    I'm confused. RPG Application? Sounds like you're talking about an RPG game. You mention experience, leveling up, world building. I suppose gaming terms are creeping into business apps. Although I'm not even sure you're talking about a business app.

  • @chriserony
    @chriserony 5 днів тому

    You need to go outside to stretch your retinas in the other direction... Plants aren't going to help you. Look out the window

  • @mitsuman5555
    @mitsuman5555 5 днів тому

    It seems that the Azure OpenAI services are locked behind a subscription that requires enterprise enrollment. I was not able to enroll with a personal email address.

  • @madhav5446
    @madhav5446 6 днів тому

    as a beginner, this was very cool

  • @josep5840
    @josep5840 7 днів тому

    Basicamente, no puedes hacer codigos en Ipads jajajaja

  • @savagemotiv
    @savagemotiv 8 днів тому

    Short and precise

  • @realvirtualdemand4222
    @realvirtualdemand4222 8 днів тому

    Great method od me using CHATGPT. Can I find a way to use it for OTP dictation? Please let me know

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

    Very helpful. I’d like to see a deeper dive into how the prices are calculated. In other words how to quantify? Thanks!!!

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

    Did this project survive?

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

    Yeah a lot of this info is kind of not backed up by anything

  • @jeetray11
    @jeetray11 10 днів тому

    I have been looking for courses to learn react-bootstrap library all day today but didn't bother to come to YT. In 15 minutes you gave me a solid idea on what it can do and how to use it. Thank you! Where can I get/buy a comprehensive training material on this CSS library?

  • @notgaybear5544
    @notgaybear5544 10 днів тому

    Just ask it how to go about doing what you want

  • @ElijahDaggs
    @ElijahDaggs 12 днів тому

    Ayo this actually works

  • @ElijahDaggs
    @ElijahDaggs 12 днів тому

    Bro created a whole movie

  • @ahmednofal3865
    @ahmednofal3865 12 днів тому

    thanks

  • @HarishDarapu-df1ul
    @HarishDarapu-df1ul 12 днів тому

    @adrian - Great video. This is really helpful. i am looking for a usecase in data analysis where Open AI has to do a set of predefined actions/analysis on my data. Is this possible? Like in your case, identify all the years where you got comments & see which ones are abusive. See if there is a repeated user who is doing this

  • @bradye21playsIndieHorror
    @bradye21playsIndieHorror 13 днів тому

    Just got the ad, the link wasn't to download the app so I went looking. Disappointing if there is no app.

  • @riseandgrind575
    @riseandgrind575 14 днів тому

    how do i get the bot

  • @ThatScaterDude
    @ThatScaterDude 14 днів тому

    I just used Sea bios and put Ubuntu on it

  • @ElectrifyThunder
    @ElectrifyThunder 14 днів тому

    Publish this app please.

  • @rajandangi
    @rajandangi 15 днів тому

    @AdrianTwarog Along with the starter kit templates, can you also create premium video content that explains how to develop them?

  • @gwolojulius4135
    @gwolojulius4135 15 днів тому

    Great video. I was looking forward to see you extending from mobile design to desktop design in one video

  • @ivyunicorn8160
    @ivyunicorn8160 17 днів тому

    27💀

  • @user-sk4gj3ji3o
    @user-sk4gj3ji3o 17 днів тому

    I think people are more interested to know about how they can implement chat gpt in their respective bussines. Weather its API or the concept itself in order to be more productive and serve the communities in a better way . so we are looking forward to see some more case studies.

  • @have_noodle
    @have_noodle 17 днів тому

    exactly what i wanna watch if i wanna start learning appwrite! like your showcase of usage!

  • @2TSHA-TechTamil
    @2TSHA-TechTamil 19 днів тому

    ua-cam.com/video/in1AQYO_FKk/v-deo.html

  • @gabrielhenrique073
    @gabrielhenrique073 19 днів тому

    I’m trying appwrite and it sounds waaaaay better than firebase or even gcp. Its interface is a lot better. Let’s see in the future how its infra is going to behave

  • @out-of-sight
    @out-of-sight 19 днів тому

    👌

  • @ammaraamir4441
    @ammaraamir4441 19 днів тому

    Can you make the video how to connect llm with mongodb?

  • @sikwaTV
    @sikwaTV 21 день тому

    very good ad

  • @niyaziozturk3967
    @niyaziozturk3967 21 день тому

    Fruit salads is healthy, but it also contains lots of sugar, and that will race your mind and your concentration will drop. Try more less sugar stuff, for me, when I have rolled oats (coarse type) yogurt etc (less sugar type) gives me a more calm mind and I concentrate more. Try meditation in the morning..!

  • @user-rb4hl2fm6k
    @user-rb4hl2fm6k 22 дні тому

    Love my Chromebook. ❤❤❤

  • @Mibo759
    @Mibo759 22 дні тому

    Please publish this it would help so much