Build and Deploy a Portfolio App With React And Typescript

1. Promo Video Your Portfolio Project in Action: Hi. This is honey. A full stack web and mobile developer. In this course, I will guide you step by step through creating and deploying your own professional portfolio website. This course is project based, so you won't just learn the theory. You'll actually build real world portfolio. By completing this course, you will gain the confidence to create responsive web applications, showcase your skills, and deploy your work live on the web for everyone to see. Here is what you learn in this course, how to set up the project with React, TypeScript, and Tailwind CSS building a landing section for your profile and intro, creating an interactive skills section with Tick icons Clouds. Designing a project grid with live preview links, adding a contact form that sends message to your email. And finally, deploying your portfolio online. This course is designed for beginner to intermediate developers who want to hands on project to showcase their abilities, whether you are a student, job seeker or freelancer, if your goal is to create a modern portfolio and stand out, this course is for you. So if you are ready to build your own professional portfolio, let's get started CU inside. 2. Software Prerequisites For This Course VS Code, Git Bash and Node js: Welcome to this lictor. Before we dive into building our portfolio project, I want to quickly go over the software tools that we will using throughout the course. Having the setup will make sure you can follow along smoothly. So for the coding, we will use Visual Studio Code as our main code editor, so make sure you download it from this link, as you see right here. And also for the terminal, I will use Git Bash to run the command and install our project with Vite plus three Act. And later on, we will upload the project in the Github. Finally, you have to install Nod Gs in your device in order to execute the code outside the web browser. Make sure you install all these and let's get started. 3. Getting Started with a Portfolio Project using Vite and configure Tailwind CSS: Hi, everyone. In this lecture, we will kick off building our portfolio project step by step using modern tools. We will be using VT as our built tool, React with TypeScript for strong typing and Ta CSS for fast and clean styling. First of all, let's open Git Bash. In order to install our Vite project, we will change the directory to DiskTop. So write CD Disktop like this, at Enter or whatever path you want, install the project. Then right here, we will add the command MPM create VT at latest to get the latest version, and also we will add a project name which is portfolio. It Enter. Now let's select our framework which is React, so select down, React, and the variant of TypeScript. Use Roll down VT. No, and install with MPM and the Start now, yes. Click Inter. We will wait until it is installed. After the app installed, let's close Lepage now, and here it is our project. So write a click and open with VS Code in order to run our app, you can select three dots here, terminal, new terminal to hit the command MPM run Dev to run our VT project. As you see, here is our local link. So control and click. Okay, here's our default project. Now, let's go back to our VS Code to clean it. So in the source folder, let's remove Assets folder and App CSS as well. Let's make index CSS empty for now and app of TypeScript, let's remove all imports, and we will keep just the fragment, which is react fragment right here, and let's remove this. Here, we will add paragraph, so P tag with some text. And go back to our rowser as you see, here it is. And now we will install and configure Twin CSS or the styling. In the web browser, search for VT, react Tailwind, and choose this link, installing Ton TSS with VT. In order to install Twin CSS, let's copy this command and back right here. Keep this terminal. Or the run, we can go here and click on the Plus. And here it is, we are in the new terminal. So paste it right here, and we will go to web browser. Scroll down with configure the t plugin. So let's copy this link, and also we will add in the plugins, Tailwind CSS. So go right here, config TypeScript and paste it. And in the plugins, we will add Tailwind CSS. And finally, we will copy this import and add it in our tile file. So in index CSS, let's paste it. And now let's test our theory on CSS. Right here, let's add class name. We will add text, dash red 500, and let's make it. Explor text, Excel, and also underline. Let's go back to our web browser. As you see, it is work very well. That's it. For this lecture, C in the next one. 4. Organizing Global Styles and Tailwind Utilities: Welcome back. In this lecture, we will focus on setting up our global styles and organizing our Tailwind utilities. These styles will give our project a consistent look and feel with custom colors, fonts section layouts, buttons, and reusable utilities. So let's open, first of all, our index CSS. I will provide all the styles we need in the lecture resources so we don't have to write it line by line. Okay? The first line represent that we import Google fonts, which is play fair display, and we add font weight of 600 and 709 hundred. Also, import TO CSS from the last lecture. And right here, we have the height of 100% and the background color of our app like this. Also, right here, we add layer base because we have to define CSS variables for all our brand colors. Also, we set variables for fonts, then we create utility classes, which is font Playfair and font Open Sans, so we can easily apply these fonts in our components. Then using Amedia, we will define custom breakpoints, so our app will be fit in all screens, mobile screen and also desktop screens. Okay. After that, I will provide another file, this file with name of TW. Styles TypeScript. This file have all our styles that we would use in our project. In order to focus on react and TypeScript, I think it is the best to implement the whole pile style like this and upload it as resource, so you can install it and don't care about the style. So in the next lecture, we will start write code with build a custom React Hoc in order to useMediaQuery for responsive design. 5. Building a Custom React Hook_ useMediaQuery for Responsive Design: Welcome back. In this lecture, we are going to build a customary Act hook called useMediaQuery. This hook will allow us to detect the screen size dynamically and make our responsive. For example, we can change the yout depending on whether the user is on mobile, tablet or desktop screen. By the end of this lecture, you will understand how to use, react, use the State and use victHk work with the browser window dot Match Media API. And create a usable hook that listen for the screen size changes. So first of all, let's go right here in the source folder. We will add a new folder with the name of hooks and inside it. UseMediaQuery dots. Okay. First of all, we will import the React hooks. We need U State to hold the data and use ICT to run the code when something changes. Import use State and also useEffect. And now we will define our custom hook that called useMediaQuery. So const, useMediaQuery. Equal query with type of string and boolean that will return like this. So take a string called query like minimum width of 768 and return it as boolean. We use U state to store whether the query currently matches or not. So at first, we'll start with false so const matches and set matches equal use state of Pollan, and it will start with force. Then we will add useEffect. This effect will let us run some code whenever match or query changes. So useEffect. Like this. First of all, we will create a media query object using the browser match media function. So const, media, equal window dot match Media with our query. So if the current state match doesn't equal the media query result, we will update it so it is accurate. So if media dot matches, not equal matches like this, we will set matches to be media dot match. After that, right here, we will define a listener function that update the state whenever the window is resized and the media query changes. The const listener. Equal it matches with media dot Match. Okay. Then we will add the listener to the Window resize event, so it is run whenever the screen size changes. Window addevent listener. The mode is resize, and right here we will put our listener function. Should be dot right here. Finally, we will return a cleanup function that removes the listener. So when this hook is no longer used, this prevent memo relakRturn window dot remove listener with size mode, and right here, the listener function itself. And for the useEffect, we will add dependency array with match and query. So this effect will run again whenever match or query changes. And at the end, we return the current match value, which is true or false. So return, match like this. And finally, we will export the hook so we can use it in our component. So export, default, useMediaQuery. That's it for this lecture, and the next one, we will start with our Navbar component. 6. Building a Reusable Navbar Component part 1: Hello, everyone. In this lecture, we are going to build a reusable and responsive Navbar component and react. You'll learn how to structure navigation links, manage state for mobile Mnutagle and apply styling with Tailwind CSS. By the end, you will have a fully working navigation bar that adapts beautifully to both desktop and mobile screens. So in the source folder, let's add new folder with name of scenes and inside it, we will add Navbar dot TSX. Okay, let's add React component snippet, which is RFC, like this. And we will import React use State Hook to manage component state. So let's add here, use State. Also, we will install a package called anchor link for smooth scrolling navigation. So let's open the terminal and hit the command NPM, I s. Dash, div like this, at types,hRact, dash, anchor, dash. Link, dash, smooth, dash, crawl like this, and we use this way in order to avoid some issues. So hit Enter. Okay, and import it right here. Import, anchor link, React, anchor link smooth. After that, we will import our custom hook to check screen sizes that we implement in the last lecture. So import, useMediaQuery. And also, we will import all Tailwind classes styles from our TW styles file. So import, we will add star for all as rename it to TW from TW should be closed. Styles file. And also, we will install another package called React icons in order to add some icons in our NAF. So in the terminal also, let's add MBM Install, React icons. Enter. Okay, from this package, we will import two icons, import if pars from React icons FA or font osm and also FA window close. Okay. Then we will impart type to help TypeScript understand our props. Importe type of dispatch. Also set state action. And we will import type should be type section from our file. Now we will define the probes for our link component, right here, let's add type of link Props equal. First of all, the name of the page, for example, um, skills or project or whatever. So page, which will be type of string. Also, the currently active page, so selected. Page type of section and also set selected big. We will dispatch and add that action for our section. Let's remove these signs and add space like this. And now we will create the link component using a function declaration. So function, link. This is the name of our function. And right here, it will accept page, elected page, and also TitlectedPage, like this with Link props the type. And now, first of all, we will convert the page name to lower case to match our section type. So const, lower case, page, equal page to lower case like this and as section like this. And we will return now. We will return anchor link smoothly scroll to the section when clicked, and we will apply active styles if the link is selected page. So we will add here class name equal. It should be in curly bracket like this and add Bactik. The first variable will be inside Dollar sign and Bact. So selected page if it is selected page, equal, lower case page. We will add If statement. It will take a style of tw dot Nerve Link Active. Okay. Otherwise, it will take empty string. The second class will be or in each. So add awtNav Link Bs. Okay. And also, we will set the HRF to the section ID, for example, hash home or hash skills. So let's add HRF tag will be equal also in curly bracket and backtick hash, first of all, and right here, we will add lowercase page just like that. Then we will add n click handler. This n click will hire a function of that selected page should be set selected page of lower case page like this. And right here, we will display the link text, for example, home skills project and contact like this. And right here, we will define now the props or the Navbar component, the type of Navbar props equal the first thing is top of page and its value of lean to indicate if the user is at the top of the page. Also, we will add elected page. So this is the currently selected page or section. And also, we will hire a function to update the selected page. So elected pad. And right here, we'll add this patch of set state action with section. Okay? 7. Building a Reusable Navbar Component part 2: And now we will create the nav bar component. So right here, we will add or accept this top of page. And also DelectedPage, and t Delected page. And right here, we will add our Navbar props like this. First of all, we will track whether the mobile menu is open or close by using US State. So BST is menu. Tuggle and set is Minot geld. The first value will be the default of false. Then we will detect if we are on distob screen. So cost is Disk to equal. We will use useMediaQuery with minimum width of 768. After that, we will change the nerve bar background when scrolling down. So const, nerve bar background. Equal. We will use if statement if it is top of page. If it is or we are on top of page, it will be empty string. Otherwise, it will take PG rid of background of writ. And right here in the return, first of all, we will return main navigation wrapper with conditional background. So right here, we will use NAF tag with class name and add Kelly bracket and backtick. The first class will be nav bar. Like a ground. Also, right here, we will add another variable, which is from Tw dot Nerve Min. Inside the nerve tag, we will add a Div the class name equal Kelly bracket of Aw Nav inner. And right here, we will put the logo section, so H four tag with class name equal w Nav logo. And right here, we will add text like this. Then for the desktop navigation links, we will use a f statement. So if it is desktop, if it is true, we will return this, otherwise, return this. So if it is true, we will show all links to TV with class name equal should be inside Kali bracket of w dot Nervink right here and here, we will render links for each section that implemented here. Okay? So let's add ink as self closing. And this link will accept this page equal. Home, the first section will be home and selected page equal, selected page, and also set selected page will be equal set selected page. We will copy this link multiple times, three times, actually. So it's paced three times. And right here, we will add now skills or skill section. And right here, we will add projects and finally, contact section. All right. Otherwise, if the screen is mobile, we will add menu button, which is Hamburger icon, or FA bars. So right here, we will add button tag, with class name equal tw dot Nav BTN and also on click handler. Right here, we will add a function of set Tuggle, to be not a menu as menu tagled. And inside the button, we will add FA bars icon with size of 25. Okay. After that, right next to here or the mobile minu overlay. So if the screen is not desktop, so if is not desktop. Also, if the minu bar tugled and is Mino tagled, then we will show right here, D with class name equal w dot NavMbile and first of all, we will add a close button in order to close this menu to Dv with class name equal aw dot Nav Mobile Close. And inside it, we will add our button. So button of actually, there is no class name only on click handler. So we will add our function of set is tagled to be not as tagled like this. And inside this button, we will have this if a window close with size of 25. Okay. After that, right next to this closing div, we will add our mobile menu links. So div with class name equal aw dot NAV Mobile Minu right here, we will add also the links, which is the same as these. So let's copy them all and paste them right here. Okay? So, that's it. In this lecture. In the next one, we will implement or start to integrate our Navbar into our React app and show it in the UI. 8. Integrating Navbar into Our React App: We'll come back. In this lecture, we will integrate our nerve bar into the main app component. You will learn how to manage the selected section state, detect whether the user is at the top of the page, and pass these values down into our NAP bar. By the end, our Navbar will be fully functional inside the application. So let's go now to our app file and first of all, let's import react hooks for state and life cycle management. So useEffect and also use State from React. Also, we will import TypeScript helpers for managing state updates. So import type of dispatch. Also, set state action. And we will import our Navbar component. So import Navbar scenes Navbar. After that, we will define all possible section names in our app. We will have four sections with name of home, skills, projects and contact. So export type section, and equal, the first one will be home and second one. Skills and projects. And the last one is contact like this. Okay. And in our app, first of all, we will track which page is currently selected. The default will be home. So let's add use state. Cost selected page and set selectedPage equal user state of section and the default will be home. And we will track if the user is at the top of the page. So Cost is top of page, and also set is top of page equal stat of boolean and through as default value. And we will implement useEffect to detect Scroll position, so useEffect. And first of all, we will implement a function to update state based on scroll position. So const and the Scroll equal set is at the top of the page. We will add right here window dot Scroll y equal zero at the beginning. And also, we will attach the Scroll listener. So Window add event listener with Scroll and handle Scroll function. And we will clean up the event listener when the component amount. So return y. Return right here, window dot, remove should be dot event listener with Scroll and handle Scroll. And right here, we will add dependency array as it is right here. Okay? And in the return, we will add right here main proper with background color. So v with class name of ab and also big big like this. And we will remove this paragraph and add our Navbar component. Then we will pass to page equal a top of page, and also selected page equal. DelectedPage, and set selected page will be equal set selected page like this as dispatch set state action with our action like this. Here it should be Scroll Y with Y like this. It seems that we have here ansie section is a type and must be imported using type only. We have to add right here, type in order to prevent any issue. Okay, now let's test our app. So let's refresh. Alright. As you see right here, here is our nav bar. Let's test if it is responsive. Let's collapse. This app, Okay as you see it show now the Hamburger menu. And if you click, you will see these tabs right here. Okay. And as you see, here we have home selected because we add it as default value. So we can also for example, change it to be There it is. Yes, right here. Skills. For example, let's go back. As you see it highlighted now at the skills. Okay? That's it. For this lecture, see you in the next one. 9. Creating a Stylish Social Media Icons Component and start with home section part 1: This lecture, we are going to build the landing section of our project, which is also home section. You will learn how to display a profile image that adapts to different screen sizes, add smooth animation with framer motion, and include call to action buttons that link to other sections of the site. You will also integrate social media icons to make the section more interactive. So in the scenes folder, let's add New file with name of landing TSX and start with our Snippet RFC. Let's remove this. And first of all, we will import dispatch and set state action types from React. These types will help us correctly define the sitter function for our state to import Dispatch and also Tet state action. After that, we will import the custom hook that help us to detect screen sizes based on the media query. So import useMediaQuery from our HC. And now we will install a package called Ramer Motion to apply animations to the elements. So let's open the terminal, add a new one, and right here, hit the command pm I Ramer motion like this. Enter. Okay. And we will import it right here, import. We will import motion from mar motion, and also we will import anchor link to allow smooth scrolling two sections of the page. So import, anchor link from react anchor link, and import T one CSS styles stored in our file. So import r as AW from our tiles TW styles like this. And also, we will import the section type from the app, which defines possible sections of our site. So import type, and right here, we will add section from the app. And finally, we will import another component that we will implement now, which is name, social media icons. We will create a new folder name components, social media icons. Let's implement it now. So in the source folder, add a new folder with name of components, and inside it, we will add this name of our file dot TSX like this and add our Snippet. So let's build social media icons component using React, then TSS and React icons package. So first of all, we will import or let's keep React as itself like this. And then we will import specific icons from React icons library. These will be represent different social media platforms. So import if Facebook from React icons FA and also if Instagram and if LinkedIn and from also this library, we will import a square x Twitter from React icons FA six font oesom six and also import our style file like this, inside this component, we will create a variable to hold a unique gradient ID. This will be used to apply a gradient color effect to all icons. Right here, we will initialize const gradient. ID equal social gradient like this. And in the TN, we will add a container of Dev. The class name is coming from Tent style. So right here, we will add TN and W dot SEC, social, let's remove this text. And right here, we will add an invincible SVG element. It will define a linear gradient that we will later apply to our icons. So SVG, Let's add it like this and close it. This will have a width equal zero and also the height will be equal zero and inside it, we will add DEFs like this. Right here, we'll add linear gradient. Let's close it, and this linear gradient will have an ID equal gradient ID, and also X one equal 0%. Y one, equal. 0% as well. And also X two equal 100%, and Y two equal 0%. Okay. And inside it, we will add the gradient, start with a purple color at 0%. So let's add stop and it is self closing. Right here, we'll add offset equal 0% and stop color. Will be this purple one of nine, three, three, two of two like this, and the gradient will end with a dark purple, black color at 100%. So top at offset, 100 and right here, we will add this dark purple like this and right next to this closing SVG, we will add first LinkedIn icon. So a tag with HRF of HCTBs we will add LinkedIn URL. Dot com. And then you can add your profile, so slash and your username. I will keep it like this, and I will add a target in order to add it or open it in the blank tab and RL equal nPr, this security measure to avoid leaking refer info, and also it will have a class name equal of Tw TSL Link. Okay. And right here, we will add the linked in icon from the act icons, should be named FA linked N, and we will assign a size of 35 and fill. We will add gradient. So let's add Kelly bracket inside it, backtick of URL and normal bracket inside it with hash, and we will add a variable of gradient ID like. And also, we will add now the Twitter icon. After this closing I, we will add a tag with XF of TBS and x.com, add ww dot and here as well. And also, we will add the attributes right here. So let's copy it and paste it right here. And let's add the icon itself of a square X Twitter with the same size of 35 and also with this film, let's copy it and put it right here. Then for the Facebook icon, I will copy this one and paste it right here. Let's change RL to Facebook, and here it should be if a Facebook like this and finally for the Instagram icon. So right here, it's a instagram.com, and here FA Instagram. Okay. So that's it for this lecture, and the next one, we will continue with our landing file. 10. Impleminting landing section part 2: All right. Now we will continue with our landing file, but before that, let's go back right here in the app file and we will import the landing component in order to see the results. Let's make sure it is imported. Yes, it is right here. And we will pass also Sitelected page, which is this one. Equal Set selected page. Okay. Let's close it now and back again to our landing file, we will define the props type for this component. The component expect a function which is set selected page that changes the selected section. So we would add interface with landing props. So we will add set selected page two. This page set state action with section. And now we will declare the landing component as a function declaration. I will receive set selected page as apps. So right here, we will add set selected page and here we will add the landing props like this. And right here, using the custom hook to check if the screen width is larger than 1060 Bexl, this will help us to decide which version of the profile image to show. So const is above large and with type of bullion equal, use media query with minimum of 1060 Bixil and right here in the return, we will render our JSX for the landing section. So here we will add section DAG, and it will have an ID equal home, and also class name. Last name will be w dot. Second landing like this. And for the image section, we will add div with class name equal w dot IMG wrapper. And if the screen is large, we will wrap the image in extratyle DIV. So right here, we will add F is above large F statement. Then right here, we will add extra Div. So DIV should be closed as well. And this will have class name equal w dot Image Large wrapper. And inside it, we will add image tag with Alt of profile and also class name equal. W dot IMG main LT. And for the source, we will add in the public boulder asset of image, I will provide it in the picture resources so you can see it. This one, have this profile image. And so let's copy the whole name and back again of our landing page. In the source, we will add the source of assets profilemage dot png. Okay? And in the s right here. Otherwise, we just show a smaller version of the image. So right here, we will add IMG DAG with source of assets slash profile image dot PNG. As you see, it is shown now and with L of profile. Also class name of EW IMG Small. Like this. Okay. Then right after this closing div, now we will implement the main text section. So let's add a div with class name equal w dot Texapper we will add headings with animation. So right here, let's add motion Dev and close it. This will have a tribute of starting state of the animation will be hitting, so initial equal heading. And while in view, we will state when the element comes into the view visible. So while in view, we will make it equal visible. And we will ensure the animation run only once at least half the element is visible. So viewport once equal true amount 0.5. Also, transition duration for the smoothness will be equal 0.5 and also for the variants, we will define how hidden and visible states look. So variant equal double calibrat or the hidden. We will add opacity of zero and X of -15. So we will add fade in from the left, and also we will add end at normal position, the visible opacity one and X of zero. Okay. And inside it, we will add main heading with the name. So right here, we will add P tag with class name equal w dot. Text main name. And inside it, we will have the name and span tag inside it, the second name. Okay. Then we will add short description about the developer. So right here, we will add ETag. This will have class name equal W dot text description, ESC, and we would add some text like this. And also right next to this closing div we will add another motion. Dive make this, close it. And this will be for call to action buttons. So we will add CN last name of W dot EX column and also at the initial, it will be hidden while in a view, it will be visible for the viewport, once through and amount 0.5, and for the transition, we will delay makes this animation start after the heading animation. So we'll add delay of 0.2 and duration of 0.5 and also we will add variants, is close it. And right here, the heading will start with opacity of zero and X of -15 and visible, it will become normal like this. Okay. And right here, we will add primary button linking to the contact section that we will implement later. Let's add anchor link, like this. This will have class name equal dw dot ETN primary and on click handler, we will add here that selected page to the Contact section. And right here, also, we have to add a if attribute equal contact. And as a text, we will add contact me like this. And also, we will have secondary button with different styling. So it's copy this anchor link and paste it as well, right here. So this will have PTN secondary. And it also will direct us to contact Badge. But right here, we will add a div with class name equal w dot PTN canday winner. And we will add text of its stroke for example. Okay. And for the social media icons right after this, we would add motion DV add closing this will have class name equal. EW dot x column A initial will be hidden and while in view visible and the viewport as well, like we implemented earlier. And now we will add a delay of 0.4 and duration of 0.5 to make it different from here. Okay. And the variant, we will make it the same as we implement last time and Let's implement it right here, variants. And we will copy it from here. Okay. All right. And inside this motion dip, we will render social media icons that we implemented, and it is SylvClosing, as well. Let's see now our page, how show. So as you see right here, it is show but there is an issue right here. Let's go back to the code. Okay, let's remove this line. And right here, we should add type. Okay. Yes. Here in the sections, we should add main tag. And this landing should be right here, and the main tag will have class name equal W, which is stand for width will be 5/6 and also margin on its direction will be auto. Let's tick it now. All right, as you see right here, it is work and also the animation, it's Work, fine. Let's test now responsive. All right, as you see in the smaller screen, all it is good, without any problem. Okay, that's it. For this lecture, see you in the next one. 11. Building a Dynamic Skills Section with 3D Icon Cloud part 1: Come back. In this lecture, we are going to create a skills section for our portfolio. You will learn how to display both static and interactive three D icons that showcase your technical stack. We will use React components, LO CSS styling and a special library called React icons Cloud to create a rotating icon Cloud effect. By the end of this lecture, you will have a professional looking section where your skill are both clearly listed and visually engaging. First of all, let's go to the scenes. Add a new file with name of my skills dot SX. And also, we will add our Snippet. Then we will go to the app file and import it right here. So let's add my skills, and it is also self closed. Let's go now right here for text. And now we will import motion from frame or motion for smooth animation. So import motion from framer motion. Also, we will import our tern style file. And now we will install two packages. The first one is React icon Cloud to build rotating three D account Cloud and also simple icons to add this icon inside our three D icon Cloud. Okay? So let's add a new terminal and right here, write MBI, React icon, Cloud. Also, simple dash icons like this at Enter and everything is very well. Now we will import them. So import Cloud, from React icon Cloud and also render simple icon. Also, we will import skill icons from simple icons Library. So import and you can add your own skills. First one is SI HTML five and CSS. Would be DSS. And also is JavaScript and nods and express ds is I express. Would be SI express like this and also is Mongo DB, SI, React is I, Tailwind CSS make it down right here and also Si postman, and SIG SI TypeScript. And also SI Pigma. Okay. Also, we will import a simple icon for type safety when working with icons. So right here, import type with icon from simple icons. And in our function, step number one, we will create an array that hold all skills icons we want to display. So right here, let's add const icons. Mam Nimble icon array equal, array of SI, SGML, five, and SI CSS Andi JavaScript. Or actually, let's copy them all and paste it right here. Let's make sure they are mol No. And also from here, you can press on Control plus Alt plus key down, and you can remove it, and that is like this. Okay, Tep number two, we will convert each icon into a react node so it can be used inside the three D cloud. Cost, Cloud icons will be react React Node with array equal icons dot MP method on each icon, not icons. And right here, we will add render symbol icon. With we will pass the icon object, so add icon, and the size will be 15. Also, we will add accessibility and external link props for the icon. So a props right here, add a trif and I will keep it as you can add the links, and target will be underscore blank. To open it in a new tab. And also, well, it will be no referrer. Okay? 12. Building a Dynamic Skills Section with 3D Icon Cloud part 2: Step number three, we will return the GS Axle out for the skills section. So right here, let's remove all of this and return sctionT section will have class name of w dot. Column. Or it should be Ls like this and also ID of GLS. And inside it, we will have our header section. So D with class name of w dot Hear Box. And now we will use a framer motion for animation when the header scrolls into view. Okay? In order to get it, let's copy the one we implemented in the landing, this one, and we will put it right here. But let's remove this content and inside it, we will add the main title text for the skills section. Okay. So PTAG with className of w dot ED title and inside it, we will add M and span with class name of wan. Side, we will add skills like this. After that, we will add subtitle description under the header P with class name equal wt header description. Should be disk like this. And I will add these are technologies I work with. And then right after disclosing DIV we will implement the main skills layout. So Div with class name equal w dot KILLS Layout. And inside it, we will add static icons grid. So Div with class name equal wt Kells grid, and we will map through each icon and render it as an image inside a styled wrapper. So we will add icons Map right here we will add icon. Then we will return this so we will return a DIV. And right here, we will add a class name equal Ew Kells icon Rabber also we will add a unique key for react rendering key equal icon title because the title is unique and also the title equal icon dot title. Okay. And right here, we will render each icon from the CDN using its slug IMG, TAG, and the source will be equal curly Bracket, dactik with the URL dn dot MMPL icons.org icon dot LAG. And the Alt will be icon Ital also the class name would be class name equal wt K icon image. Seems that we have an error here, let's chick Duplicate Okay, here, there is no need of this, and let's add. This one from simple icons. Okay, right here should be from simple icons icons. All right. As you see, it is work now. And here's our icons, go without any problem. Alright. Let's continue now. Then we will implement the Cloud icons. So right next to this closing div, we will add now. Another div with class name of Will Cloud books, and inside it, another div class name of EW Kills Cloud. And right here, we will render the Cloud component from React icon cloud. So let's add Cloud component and add its closing. And this cloud should have children. First of all, we will pass in configuration options or how the cloud will behave. So options equal to curly brackets. First of all, we will make the cloud rotate in opposite direction. So we will set reverse to be true. Also, we will control the depth illusion for the three D rotation. So air will feel more three D. So dips will be 0.8. You can change it if you want. Also, we will allow zooming in and out with the mouse scroll wheel. So wheel Zoom set to be true and also the scale, the size of the icons in the cloud. So image, scale, we will make it two, and also we will change the cursor to pointer when hover over an icon. So active cursor to be pointer. And also tool tip. So we will enable native Tooltip, show icon titles when hoovered tool tip to be Native. And we will bring click icon smoothly to the front with 500 millisecond animation. So click the front end will be 500 and also we will set the initial rotation position of the cloud in two direction of X and Y. So initial to be from 0.1 to -0.1. And we will render all the icon elements inside the cloud, which is right here. So right here, we will pass them cloud icons like this. And now it should show this cloud. Okay, as you see, it is work very well and it is rotating in you hover on an icon, it will be cursor. Also, when you hover on the icon from the back, it will be in the front, as you see with our set speed. And also now if you click on the skills in the Navbar, it will navigate us to the skill section. But for now, the highlight, since we move, it is not implemented, and we will implement it in the next lecture. 13. Implementing a Scroll Spy with React’s useEffect: Welcome to this lecture. Now we will build a Scroll Spy feature in our reactor project. Scroll Spy automatically detect which section of the page is currently closest to the center of the viewport and updates the navigation state accordingly. This is a powerful UX pattern that we implement in our project. So let's go now to the app TypeScript app. And right next to this ending useEffect, we will add a new effect. So it will run our Scroll Spy logic. UseEffect. It's close it. First of all, we will define the section IDs we want to watch on the page. So const fiction IDs with our section, empty array equal. We have multiple sections, as you see right here. So we will add first the home, then skills, then projects, and finally contact action. And right after here, we will add plag that will help us optimize performance by avoiding repeated calculations in the same frame. So let licking equal false. After that, we will implement a function to calculate which section is closest to the viewport center st compute and sit equal or function and we will find the vertical center of the view port. So on view port, enter equal window inner height divided by two to be in the center. After that, we will start with no best section selected. So let best ID section or null, equal null. Okay? After that, we will initialize this distance with infinity, so any real distance will be smaller. So let this distance equal. We will make sure it is number, so number that is positive underscore infinity. After that, we will loop through each section ID. So four const ID of section IDs. We will grab the dome element for this section. So const, L equal document. D get element by ID. If you remember we add an ID above with each wrapper div or section, and we will add if statement. So if the element doesn't exist, we will skip it. So if no element, then we will continue. And we will get the sections position relative to the view port. Cost Rect equal element dot Git bounding client Rick like this. And we will calculate the sections vertical center. So const section, center, equal c, top plus t divided by two, like this. And we will find how far this section center is from viewports center. So const, distance equal math Absolute method with section should be inside. Bracket section center minus viewport center and if the section is closer than our current best, we will update our tracking variables. So if distance is the best distance, then the best distance will be equal distance, and best ID will be equal ID. Okay. Then right after this closing curly bracket, we will add IE statement. If we found a new closet section that is different from currently selected one, we will update the state. So let's add if statement if we have Bist ID and Bist ID. No equal selected page. Then we will sit selected page to be our best ID. Okay? After that, this closing, we will implement a function that will run on Scroll or resize events. So const on Scroll or resize equal or function. So we will only allow one calculation pre animation frame. So if there is no ticking, then we will request animation frame, so window dot request animation frame like this. And right here, we will add arrow function also. And here we will add compute and set function. We will call this function, and also we will reset picking after calculation is done like this. And after this, we will make it through then right after this closing bracket, we will add Scroll and resize event listeners to trigger our function. So window dot add event listener on Scroll or resize. Also, we will add here passive of True. And the same line except we don't want this. And right here, we will run and calculation immediately when the component mounts. So compute and set. And for cleanup, we will remove event listeners when the component unmounts or dependencies change. So return right here. We will add indo dot remove event listener, so nscroll or resize. And here as event listener. And also on the resize, like this. And for dependency array for this effect, we will add here selected page. So this effect will run on each change of the page. Let's test our app now. So right now we are in the home. So if we scroll down on the skills, as you see, it is changed to be highlighted as this. Okay? Let's go up now, okay, everything is very well. That's it. For this lecture, see you in the next one. 14. Building an Animated Projects Section part 1: Hello, everyone. In this lecture, we will build a project section for our portfolio. You will learn how to display projects in a grid, animate them with framer motion and make them interactive with the preview links. So it's open or add a new file right here with name of projects ESX, and we will add our react function component. First, we will import motion from primer motion. And also we will import variants from framer motion. Variant will help us define different animation states like hidden and visible in a clean, reusable way. So import type variants from our framer motion. And also, we will import our Helwnd styles oil. So import star as EW from EW styles. And finally, we will bring the I icon for previewing import FA, I React icons FA. Then we will implement animation variants. So here we will define the container animation. So const container with our variants equal, first of all, the hidden it will be empty grabact and also visible with transition and stagger children of 0.2. So here, hidden means the container start with no visible effect. Visible will applies a stagger children transition which make child elements appear on after another delay of 0.2 seconds. Okay. Then we will add variant will be applied to each individual project card. So const project. Variant with variance equal right here, we will add hidden. So when hidden, the card is faded out with opacity of zero and slightly smaller with scale of 0.8. And for the visible with opacity one, scale and one, let's remove these. So when visible, it fades with opacity one and grow back to normal size in the scale of one like this. Let's define the types of props that each project will receive. Type Project ops equal. The title will be string and text string as well. And also the link will be string. So the title is required, which is the name of the project and text. It is a short description for our project, and the link is also the URL to review the project. Now, we will declare our reusable project component to function. Project. And it will accept title text, and also the link from Project Woops. And inside, we will convert the project title into lowercase hyphen separated string. So Ctject Title equal title dot let method. With space. And also join, we will add hyphen dot to lowercase. So this is useful because our images are saved with that naming convention. So as you see right here, in the assets, each image is saving with this formula, and it is very important to add it like this. And in the return, we will return GSX for how each project card look. So return. And right here, we will wrap the card inside motion div to apply project variant animation. So motion dot div right here, we will add variants equal variant and class name of DW dot project item style, and inside it, we will add overlay that show project details when hovering. Div with class name equal w dot Project Olay and inside this div we will display the project title. P with class name equal pw dot Project Project text like this. And here we will pass the title. So if the text is provided, we will show the project description. So right here, we will add text and we will add paragraph a paragraph tag with class name of EW project. Paragraph, and we will pass the text right here. Okay. And also, we will add a clickable link that opens the project in the new tab with Target of blank. So right here, a tag with href equal. Link and target of underscore, Bank and class name of tw dot Project, Link. And right here, we will display the icon, followed by the word review text. So if A, I, and right here, we will add review as text. Okay? Finally, we will show the project image. We will dynamically create the path using the project title variable. So right next to this closing div, we will add image tag with source equal. Kelly Bracket inside it pactik and the source will be Assets Project title dot EPG, and the Alt will be project title. 15. Building an Animated Projects Section part 2: Now let's build them in project section that will hold all project cards. But before that, let's import this project section in the app. Well, right here, let's add projects and make sure it is imported. Yes, here it is. And here, let's remove this and in the return, we will use section to wrap everything, give it an ID or navigation, and apply tailwinds styles from TW styles. So action. Let's close it and give it an idea of projects for navigation, and also class name equal Wect book. First, we will add a header. So let's add motion. Di And this will have class name equal w dot Project Head books. And also the initial will be hidden while in a view of visible. So we will start invisible and become visible when we are in the viewport. And also for the viewport, we will add once equal true and amount of 0.5. So we will animate once when 50% visible, and we will add transition. So it will be duration is a half second, so transition with duration of 0.5. Also, we will add variance. And right here, we will add Eden with opacity of zero and on Y -15 to start faded and moved upward. And we will end with fully visible and in place. Okay. And inside it, we will add fiction. Title, so div paragraph with class name, w dot Project. Title and inside it. We will add projects like this. And right after this one, we will add section description. So B with class name equal w dot Project description. And let's add some text. Yes, something like this. And as you see right here. Okay. And next to this closing div motion. We will add projects grid, let's add div with class name equal w dot Project Grid books, and inside it, we will wrap all project inside a motion Div so they can animate as one group. So motion div Let's close it. And right here, we will add class name equal wt Project Grid. Also, variants of container that we implement right up here. And also initial will be hidden. Then while any view will be visible, trigger once at 20% visibility. View port once with amount of 0.2 then inside here, we will render multiple project components, each one with a unique title, description, and also link. Let's render project component. And right here, we will add title equal. Get up binder and make sure it is name convention like this, the text will be this is Github Finder app likes that allow users to search on Github profile and view their details with HTML, SS, and Java Script. Also, I will add link of deployed project for this Github finder, and later on we will deploy this portfolio in order to see you how to deploy a project in Vercel. Also, I will provide the link of these projects in the resources so you can add it and see how it is work. So let's now test it out. Okay, I see there is an issue in the styles. So let's go up here. This section would have style of SEC projects. Okay, here it is, work very well. And once we hover, it will show the title of this project and the description and also reviewing. So if you click in this preview, you will see this project live deployed in Vercel. Okay. Let's now back right here and implement the other projects. The second one will be for QuizUp. Title will be quiz, and also text Okay, let's add this description with HTML, CSS, and you have a script. Also, I will add a link for deployment. Let's see it now also. Okay, here it is. Yes, everything is very well. And we will do it for other projects. So the next one with title of to do List, and the title or text description will be this one and also the link of this to do. Then we will add or typing text. And with text of let's add this one with deployed URL. And finally, the UR code generator. So title will be RcdGenerator. The text, let's add this text and we will add the link as well. Okay, I think everything is good now. But we have Okay, it's already exported. Let's see it now. Let's check also the highlight. Okay, it is highlighted. And as you see, there is a delay in the review for framer motion. Let's review this project. Okay. I think now it is all is good. So that's it for this lecture, see you in the next one. 16. Building an Animated Contact Form with Validation in React Part 1: Welcome to this lecture. Now, we will start to build a fully functional contact form using react, react HC form, and framer motion. You will learn how to validate user input like name, email, and message. Display error messages and create smooth animations for the form and contact image. By the end, you will learn how to combine form handling, validation, and animation to make your project both interactive and professional. So right here, let's add a new file with Contact TSX, and we will start with our functional component. First of all, we will install React hug form package, so it's open the terminal, add new one, and right here, BMI React Hugh form, et Enter. After that, we will import use form in order to manage form, state, and validation. Right here, import use form from React hoc form. Make sure it is the same. Yes. And also, we will import the field value type to define the type or form data. So import type field values from reactor form and also our motion from frame or motion to import motion. From Framer motion package and impart our Tailwind file DW styles. And inside our contact function, we will initialize the Act HOC form to register fields, validate them, and capture errors. Const register, and trigger no. And also form state with errors will be equal, use form, and right here, we will add field values. So the register will be used to connect input fields with the ActcFm. This trigger function is to manually trigger validation, and this object will store validation errors as you see, like this. After that, we will define our form submit handler so const on submit will be equal async function that will take E for event. And right here, we will add React dot form event with HTML for element. Let's add return with curly bracket. First of all, we will log event for debugging. So console log should be like this. With this sign and also E and event like this. After that, we will trigger validation on submit, so const is valid, equal at trigger function. And we will prevent form submission if validation fails. So if there is no validation, so if not is valid, we will add E prevent default. Okay. And in the return right here, let's first of all, go to the app file and at our contact section right next to projects. Should we contact. Let's see if it is imported. Yes, here it is. Okay, it is right here, rendered. And we will remove this div and return siction with ID of contact in order to use navigation and style applied from our Tailwind style. So siction tag with ID equal contact and also class name with section contact like this. And first of all, we will implement heading section, add motion dot dip. This will take initial animation state of hidden. So initial will be hidden and define state element is visible on the screen while in view will be visible. And also, we will trigger animation only once and when 15% of the element is visible. So view board once true and amount 0.5, and we will set animation duration to be 0.5. After that, we will define animation, variants for hidden and visible states. So variants right here, we will add once on the start, we will fade out and move right. And in the visible, we will add opacity of one and on the X of zero, so we will fade in and move to normal position like this. After this, we will add our class name, the equal Tw dot Legend. And inside it, we will add a DIV. And right here, we will add heading text PTAG with class name equal Tw dot TXT heading and inside it a span with class name of w dot TXT violet to take this violet color. And right here, we will add Contact me, see it. As you see right here, then we will have after this closing motion Div, we will add a div for form and image wrapper. So div with class name of tw dot x between and right here, we'll add motion dot div or image wrapper with initial of hidden while in view of visible view port True and amount would be 0.5. Transition with duration of 0.5. And for variant, we will add the hidden value and also visible with opacity and fed in to move to normal path. And after this curly bracket, we would add class name of dw dot flex Center half. Like this and inside it, we will add image for contact section. So IMG tag with source from our assets Contactmage dot Ng. And the art will be contact shodbGg like this. Okay, now it is rendered, as you see, I think that's it for this lecture, in the next one, we will start to implement the contact form with animation, and also we will use actual form element. 17. Building an Animated Contact Form with Validation in React Part 2: All right. Now let's continue with our contact le. So right after this motion div, we will add another motion div. And this will be for the form with initial of heading. And also while in view will be visible, and the view poard will be once through amount 0.5 and also transition with duration of 0.5 and also we will add some delay with 0.2 0.2, like this. After that, we will add variants with the same values as we implement earlier and visible as well with opacity of one. Then right here we will add last name of tw dot H Cl spacing, right here, we will add actual form element. So form tag. Let's leave the action for now. We will add target to open it in blank tab. Also submit with our submit handler that we implemented. And also we will add method will be post in order to submit data using post method. And for the action, we will add form submission endpoint. So in order to do it, we will go to Web Browser and search for Form submit and click in this link. After that, select Email Link. And you have to add your email address and click on create email link. I already did it. So after that, you will receive an email with this formula and this endpoint. So you can copy it and back again right here and add it in the action. So this is your email address, but in sort of numbers and editors, and it is for security in order to prevent any spam emails. Okay? So right here, we will add now name field. So input tag with type of text, and also placeholder will be name, and we will add register field with validation rules. So let's add D dot register with name. And also right here, we will set some validation. So we will set required to be true, so to indicate this field is required, and also we will add maximum length of 100 character like this. Okay. And also, it will have class name of w dot input field. Okay. And after this closing, input, it is self closing, by the way, we will add or show error message or name field if it exists. So errors dot Name and we will add right here, B tag with class name of w TXT error, and right here, we will show error name type, if the type equal required. And we will show this message of this field is required. And also, if it is exceed maximum length, we will add message of maximum length is 100 characters. After that, we would add the email field. So after disclosing curly bracket, we will add another input, and it is self closing with class name equal tw dot input field mt. And type will be text, placeholder, email, and register. Would be three dots. Will add email and also right here, we will set some validation with required to be true and we will add pattern with these values. So I will copy it and best it and provide it in the resources in order to prevent any error. Okay? And right here, we will show error message for email field, so errors dot email and we will show ETag with text error. Let's close it. And here we will show errors dot email dot type. If it is equal required. We will add message of this field is required, and also for the pattern error, we will add message of invalid email address. After that, let's implement now text area for message field. As you see right here, here is our two inputs and text area, this text area will have class name equal TW input field, would be input field and T with margin and placeholder of message. And we will add rows of four and columns of 15. And we will add register with validation or required and maximum linked. So let's add register message, and register message, and also right here, we will sit required to be true and also the maximum length of characters to be 2000 character like this. And also, we will show error message for message field. So errors dot message, and we will show right here or a graph with class name of text error. Let's close it and let's add if the message type required, we will add this message of this field is required. Okay, let's see what's the error. Yes, here, it should be outside the text area, let's add it right here in order to prevent any error. Okay. Also, we will add error of type maximum linked. So right here, let's add if we have errors dot MX Linked, we will display maximum link is 2000 character. Okay. And finally, we will implement submit button right after this closing Kelly bracket will be button with last name of w dot PTN primary, and the type will be submit in order to submit this form. And right here we will add a message as text. Okay. Let's test our form submit now. First of all, let's test if all input fields is empty. Click on send message. You will see this field is required as validation. Let's add just the name. It will disappear from here and still show in here. And also, let's add Diemail and the input, you will see invalid email address. Let's add correct one and add a message. All right. Let's show an error message. Let's try to fix it. First of all, let's go back right here. And instead of this text until you reach.com slash past your actual email, a correct one. And let's try now. Hopefully, it will work. In the message? Yes, send check your email. So we need to activate our account. Let's go to the Gmail. As you see, you will receive this email and also send this string. You can copy it and replace it with email address. But first of all, let's activate form. Okay, form is activated. Let's go back to our VS Code and add it instead our actual email address, paste it. Let's test our app now. But first of all, let's refresh the page, add this data. And hopefully it will work now. Okay, now you have to click on recapture. The form is submitted, so let's go. In the email. Okay, as you see right here, here is a message with name of John and email and the text. Let's try it again. Change the email Okay. Okay, here is received with the new name and email and also the message. That's it. For this lecture, in the next one, we will start to implement Photo section. 18. Footer Section: Welcome to this lecture. Now we are going to build a simple Footer component for our portfolio project. So let's create a new file in the scenes with name of pooter dot TSX. And we will add our functional component and import it in the app. File right next to this main or closing main tag. Let's add Footer. Okay. And it is imported successfully. First of all, we will initialize a variable called currantier. We will use JavaScript date object to get the currentier dynamically. So in this way, our potter will always stay up to date without manual edit. Okay? So right here, const, caranter equal new date Get foliar. Okay. And in the return, we will use Potter tag. Right here, let's add Potter. And this full Potter will have class name of EW. We should import it. So import star as EW from tiles. So TW dot R. We will addhe a container div to control spacing and layouts. So div with class name equal w dot R container. And inside it, another div, this will be for class name of EW or Bx. And finally, we will display a paragraph with styled text. And also, we will add the currenti variable inside curly Bracket. So let's add paragraph, last name of W dot Text outer up. And right here, we will add icon of copyright. And after that, click on backspace in order to make it like this. Okay. And we will add current here, variable, and all writes s like this. And as you see, it is a simple footer without an issue. Okay? That's it. For this lecture. In the next one, we will deploy our portfolio project into Vercel in order to make it live. 19. Upload the app on Github and deploy it in Vercel (End of course): Hello, everyone. Now it is time to deploy our portfolio project in Versal. But first of all, we have to upload it in Github in order to connect our Versal app with Github. Okay? So I will do it in the simple way. After you registered in Github, you can go to repositories and click here in New. Then you have to add ponem. So let's make it my portfolio and click on Create Repository. You will see link like this, copy it. And let's go right here in the Git Bash, open it and change directory to be in the that you want, I will make it in the desktop, and I will add command, get clone, space, and I will paste the link I copy and hit Enter. Okay. After that, I will go to my project already implemented. I will copy all files, except node modules, copy it, and go right here and paste it like this. I will open it with VS Code. And let's test it first. If everything is very well, so make sure you are in the correct path and hit the command MBI for install or packages. Now it's done. So just go right here in the Potter, and we will remove this used link or line. And also, let's run or portfol now. Okay. Now we will change this fav icon to add Nice icon. So let's go to Index HTML. And right here in this link with RL icon, we will change it to be this image. You will find it in the resources with name of favicon dot ng. I will copy the whole path and go right here with the Atif dot slash assets v icon dot png. Hopefully, now, as you see, it is now added in nice way. And now we will upload this project to Github. So right here, you can click on this dropdown and click on Git Bash So first of all, we will add command of G, add dot to add all files. After that, we will commit, so get commit space, and we will add here a command of upload portfolio like this. Let Enter. And finally, we will add Get Bosh in order to push our project. All is done now. Let's go right here in the portfolio and refresh the page. You will see the project is uploaded. Now let's go to Vercel. So search for versal.com. And if you don't have an account, you can sign up. I will login. I have already one. And please make sure you sign up with Github. Continue. Okay. And here in the overview, you will see Add New. Once you click on it, you can check or choose Project, and you will see your all projects. So here I will choose my portfolio, click Import and click Deploy. It may take some time, and now it is done. As you see, you just deployed a new project to click on Continue to dashboard. And here is the domain of this portfolio. You can visit it as you see, it is deployed now on Vercel without any problem. And with all functionality with ilight and also Hover, you can review the project without any problem. And also, let's test contact. And send the message. Okay, we need to activate it. So let's go right here. Activate Okay, let's try again. End message and add recapture. It should now send an email. It is new one like this. This is the last lecture for our project. Thank you so much for joining me in this course. I truly hope you enjoy learning and building alongside me. If you found value in this course, please leave a review. Until then, keep learning and see you next time with different courses.