1 00:00:00,160 --> 00:00:01,930 Time to set up our components. 2 00:00:01,930 --> 00:00:04,790 Let's start off at the top of the page with the header. 3 00:00:04,790 --> 00:00:09,810 I'll create a new components directory and a new file called Header.jsx. 4 00:00:09,810 --> 00:00:13,565 Let's create a new component with the rafce snippet. 5 00:00:15,376 --> 00:00:18,040 We want our header component to return a header element. 6 00:00:19,420 --> 00:00:20,230 Inside it, 7 00:00:20,230 --> 00:00:25,669 we'll add a span with our name followed by a button with the class of menu-BTN. 8 00:00:33,574 --> 00:00:38,515 Inside the button, we'll set up an image tag with an src attribute of menu and 9 00:00:38,515 --> 00:00:39,512 an alt of menu. 10 00:00:42,164 --> 00:00:46,373 Don't forget to import the menu icon from our assets file at the top of the file. 11 00:00:51,793 --> 00:00:53,160 Let's have a look in the browser. 12 00:00:54,442 --> 00:00:55,450 Oops. 13 00:00:55,450 --> 00:00:59,191 Looks like I forgot to render the header in our App component. 14 00:00:59,191 --> 00:01:04,880 Let's fix that quickly by changing the text app to our new header component. 15 00:01:04,880 --> 00:01:06,700 Don't forget to import the component. 16 00:01:08,650 --> 00:01:09,860 That looks great. 17 00:01:09,860 --> 00:01:11,782 Now let's get the links to render for 18 00:01:11,782 --> 00:01:16,480 our desktop sized screens by adding the navigation back in our header component. 19 00:01:16,480 --> 00:01:18,750 I'll add a nav tag underneath the button. 20 00:01:18,750 --> 00:01:22,593 Let's give it the class name of nav to apply the styling. 21 00:01:22,593 --> 00:01:23,998 Inside the nav tag, 22 00:01:23,998 --> 00:01:28,882 we'll create a ul with an li containing the link to our about section. 23 00:01:30,911 --> 00:01:33,704 I'll copy that list item a couple of times and 24 00:01:33,704 --> 00:01:37,393 change the link to go to our projects and contact sections. 25 00:01:46,484 --> 00:01:51,192 In the browser, when I zoom out a little, we'll see our navigation pop up for 26 00:01:51,192 --> 00:01:52,865 desktop-sized screens. 27 00:01:52,865 --> 00:01:57,353 Perfect, we'll work on adding interactivity to our hamburger menu in 28 00:01:57,353 --> 00:01:59,060 the next video. 29 00:01:59,060 --> 00:02:02,090 Next, we'll create the hero section of our page. 30 00:02:02,090 --> 00:02:07,420 In the components folder, let's create a new file named hero.JSX. 31 00:02:07,420 --> 00:02:09,860 And bootstrap a new component using our snippet. 32 00:02:11,280 --> 00:02:16,040 This component should return a section tag with the class of hero and divider. 33 00:02:16,040 --> 00:02:20,590 The divider class will add the styles of the green squares in between the sections. 34 00:02:20,590 --> 00:02:22,636 This section will contain two dive, 35 00:02:22,636 --> 00:02:26,910 one for the profile image which will give the class name of image. 36 00:02:26,910 --> 00:02:31,002 In this wrapper, we'll place an image tag with a source attribute of profile image 37 00:02:31,002 --> 00:02:33,180 and an alt tag of photo of Chuck. 38 00:02:33,180 --> 00:02:37,259 We'll import the profile image up at the top of the file from our assets folder. 39 00:02:43,408 --> 00:02:49,180 Great, let's now give our section a second div to contain our content and 40 00:02:49,180 --> 00:02:52,076 give it an h1 with our fictive name. 41 00:02:52,076 --> 00:02:54,956 And I'll copy in the paragraphs containing our title and 42 00:02:54,956 --> 00:02:56,701 location from the project files. 43 00:03:00,068 --> 00:03:03,821 Finally, we'll add a link that navigates the visitor to our projects. 44 00:03:08,202 --> 00:03:11,003 I'll give the anchor tag a class name of BTN, 45 00:03:11,003 --> 00:03:13,743 which will apply the button-like styles. 46 00:03:15,208 --> 00:03:22,140 Now, in our App.jsx, we can render our new hero component within a set of main tags. 47 00:03:22,140 --> 00:03:25,658 Make sure to import the component at the top of the file. 48 00:03:25,658 --> 00:03:29,323 In the browser, we will see our component rendering as expected, 49 00:03:29,323 --> 00:03:32,750 including the divider at the bottom of the section. 50 00:03:32,750 --> 00:03:36,240 Awesome, next up is our About Me section. 51 00:03:36,240 --> 00:03:40,811 In the Components folder, I'll create a new file named about.jsx and 52 00:03:40,811 --> 00:03:42,650 bootstrap a new component. 53 00:03:43,740 --> 00:03:47,108 I'll copy over the HTML structure from the project files and 54 00:03:47,108 --> 00:03:50,028 update the class attributes to be named classname. 55 00:03:52,877 --> 00:03:55,880 In the App.jsx file, we can import and 56 00:03:55,880 --> 00:03:59,524 render our new component underneath the hero. 57 00:03:59,524 --> 00:04:01,146 Moving over to the browser, 58 00:04:01,146 --> 00:04:05,770 we'll see our about component being rendered just as expected. 59 00:04:05,770 --> 00:04:10,277 But scrolling down, you'll notice that we have the exact same button style link here 60 00:04:10,277 --> 00:04:12,590 as we had up in the hero section. 61 00:04:12,590 --> 00:04:15,170 Let's extract that logic into a separate component. 62 00:04:16,310 --> 00:04:21,295 Back in VS code, I'll create a new file called link.jsx and 63 00:04:21,295 --> 00:04:24,289 set up a new functional component. 64 00:04:24,289 --> 00:04:28,616 We want our link component to return an anchor tag which has an h ref attribute 65 00:04:28,616 --> 00:04:29,775 we'll set to h ref. 66 00:04:29,775 --> 00:04:35,536 And let's render the children pass to our component between these tags. 67 00:04:35,536 --> 00:04:38,258 These two properties will come in through the prompts. 68 00:04:38,258 --> 00:04:40,870 So let's destructure them right here. 69 00:04:40,870 --> 00:04:44,658 Also, let's not forget to apply the button styles by giving the tag 70 00:04:44,658 --> 00:04:45,797 a class name of BTN. 71 00:04:47,562 --> 00:04:52,290 Now let's update our existing links to use our reusable link component. 72 00:04:52,290 --> 00:04:58,676 In about.jsx, I'll remove the class name and change the tag to our link component. 73 00:04:58,676 --> 00:05:01,140 We'll do the same in our hero component. 74 00:05:01,140 --> 00:05:03,582 Make sure that the link component is being imported. 75 00:05:08,964 --> 00:05:13,818 In the browser, everything still looks the same, but our buttons are now reusable for 76 00:05:13,818 --> 00:05:15,450 future use. 77 00:05:15,450 --> 00:05:18,190 Our next component will be the project section. 78 00:05:18,190 --> 00:05:21,860 Let's clean up a little by closing the tabs we no longer need. 79 00:05:21,860 --> 00:05:25,100 Then create a new projects component in our components folder. 80 00:05:26,610 --> 00:05:30,090 I'll paste in an array containing the data for my projects. 81 00:05:30,090 --> 00:05:33,430 I'll share the snippet in the teacher's notes below this video. 82 00:05:33,430 --> 00:05:37,292 Each project has an ID, title, array of technologies used, 83 00:05:37,292 --> 00:05:42,400 a short description links to our Github and live page as well as an image. 84 00:05:42,400 --> 00:05:46,560 I've added some screenshots of my code adventure projects in the assets folder. 85 00:05:46,560 --> 00:05:49,860 So let's import those images at the top of the file. 86 00:05:49,860 --> 00:05:53,271 Copilot can be helpful with auto completing these suggestions, but 87 00:05:53,271 --> 00:05:57,637 the file names aren't quite right, so I'll manually adjust them to match our assets. 88 00:06:02,193 --> 00:06:06,939 Perfect, now, let's collapse our projects array and create our component. 89 00:06:10,287 --> 00:06:14,794 We want the component to return a section with the ID of projects and 90 00:06:14,794 --> 00:06:19,943 a class name of divider in there we'll add an h2 title saying my projects and 91 00:06:19,943 --> 00:06:22,534 a div that will contain our projects. 92 00:06:26,931 --> 00:06:30,711 Within the div tags, I'll map over the project list array, and 93 00:06:30,711 --> 00:06:34,700 for each project I want it to render a project component. 94 00:06:34,700 --> 00:06:37,520 We'll pass it a key, and the project object itself. 95 00:06:38,740 --> 00:06:43,366 Let's rename the project prop suggested by copilot to data to avoid confusion 96 00:06:43,366 --> 00:06:46,250 caused by multiple things having the same name. 97 00:06:47,300 --> 00:06:50,094 All right, let's create this component while we're at it. 98 00:06:55,581 --> 00:06:59,727 This component should return an article tag with the class name of project to 99 00:06:59,727 --> 00:07:01,229 apply the proper styling. 100 00:07:03,716 --> 00:07:07,854 In the article, we'll create a div with the class name of image, 101 00:07:07,854 --> 00:07:11,260 which will contain our actual image tag. 102 00:07:11,260 --> 00:07:15,276 Let's give the source attribute a value of data.image and 103 00:07:15,276 --> 00:07:18,416 the alt attribute to be the project's title. 104 00:07:21,348 --> 00:07:26,500 This data comes in from our props, so let's destructure it right away. 105 00:07:26,500 --> 00:07:31,100 Underneath the image div, we'll create a second div with the class of content. 106 00:07:31,100 --> 00:07:33,985 Inside that div, we'll render a level 3 heading and 107 00:07:33,985 --> 00:07:35,851 set it as the title of the project. 108 00:07:37,374 --> 00:07:41,850 Next, I'll create a ul and loop over the data.tech array. 109 00:07:41,850 --> 00:07:45,770 For each technology in the array, we'll create an li tag with a key and 110 00:07:45,770 --> 00:07:48,090 set its content to be the tech. 111 00:07:48,090 --> 00:07:52,820 After the URL, we'll add the description, copilot is being very helpful here. 112 00:07:52,820 --> 00:07:54,080 Thank you. 113 00:07:54,080 --> 00:07:57,010 Lastly, we'll set up a div containing our two links. 114 00:07:57,010 --> 00:08:01,240 We'll use our reusable link component, and pass it the href. 115 00:08:01,240 --> 00:08:05,191 Co pilot is trying to be helpful again but we don't have a text prop set up for 116 00:08:05,191 --> 00:08:08,039 our link, so let's just pass the content manually. 117 00:08:09,774 --> 00:08:11,978 Now that we've shown co pilot how it's done, 118 00:08:11,978 --> 00:08:15,010 it figured out how to set up the GitHub link. 119 00:08:15,010 --> 00:08:19,602 Beautiful, let's ensure that our new project component is being 120 00:08:19,602 --> 00:08:21,821 imported in our projects file. 121 00:08:24,110 --> 00:08:28,313 And that our app component renders the projects underneath our about section. 122 00:08:32,108 --> 00:08:35,080 Let's switch to the browser and examine the result. 123 00:08:36,190 --> 00:08:36,984 Look at that. 124 00:08:36,984 --> 00:08:39,947 All project components are being rendered as expected, 125 00:08:39,947 --> 00:08:42,450 complete with their images and data. 126 00:08:42,450 --> 00:08:44,929 Well done. 127 00:08:44,929 --> 00:08:49,530 Our next component is the contact section containing links to our socials. 128 00:08:49,530 --> 00:08:51,960 I'll create a new file and bootstrap the component. 129 00:08:53,750 --> 00:08:57,095 This component will render a section tag with class and 130 00:08:57,095 --> 00:08:58,993 id attributes set to contact. 131 00:09:00,835 --> 00:09:04,452 We'll give the section an h2 saying contact, and underneath, 132 00:09:04,452 --> 00:09:07,290 we have a paragraph asking the visitor to connect. 133 00:09:10,186 --> 00:09:15,360 For our icons, I'll create a wrapping div with the class of socials-container. 134 00:09:15,360 --> 00:09:18,420 Inside it, we'll create an A tag for each of our socials. 135 00:09:19,820 --> 00:09:23,140 Now for icons, I usually prefer creating a separate file. 136 00:09:23,140 --> 00:09:27,054 It might be excessive for this project, but when working on larger projects, 137 00:09:27,054 --> 00:09:30,980 you often need to reuse icons in multiple locations within the app. 138 00:09:30,980 --> 00:09:35,462 Having a separate icons file makes it easier to update them when redesigning 139 00:09:35,462 --> 00:09:38,823 the app or if Elon decides to change the name and icon of X, 140 00:09:38,823 --> 00:09:40,528 formerly known as Twitter. 141 00:09:40,528 --> 00:09:45,990 In our Icons.jsx file, I'll export an object named icons. 142 00:09:45,990 --> 00:09:50,788 This object will have properties for each social icon, where each property is 143 00:09:50,788 --> 00:09:54,720 a function that returns the corresponding SVG from our assets. 144 00:09:56,060 --> 00:09:57,410 Let's import our new icon. 145 00:09:58,630 --> 00:10:00,460 Oops, that's the wrong file. 146 00:10:00,460 --> 00:10:02,800 We should go to our Contact component. 147 00:10:02,800 --> 00:10:04,150 There we go. 148 00:10:04,150 --> 00:10:08,430 In our anchor tag, we can render out our icons.facebook icon. 149 00:10:08,430 --> 00:10:11,838 Make sure that the icons object is imported at the top of the file. 150 00:10:11,838 --> 00:10:16,899 In our app.jsx file, I'll import our contact component and 151 00:10:16,899 --> 00:10:19,925 add it in our JSX below our projects. 152 00:10:23,827 --> 00:10:25,960 Let's check it out in the browser. 153 00:10:25,960 --> 00:10:29,110 And there is our Facebook icon showing up as expected. 154 00:10:29,110 --> 00:10:34,310 Great, back in VS Code, we can finish up our other components. 155 00:10:34,310 --> 00:10:37,421 I'll add an Instagram property to our icons object and 156 00:10:37,421 --> 00:10:39,793 set it to be a function returning the SVG. 157 00:10:45,203 --> 00:10:48,143 There we go, and I'll paste in the same thing for 158 00:10:48,143 --> 00:10:51,302 the remaining three icons Twitter, LinkedIn, and 159 00:10:51,302 --> 00:10:57,451 GitHub Perfect, let's move back to our 160 00:10:57,451 --> 00:11:02,280 contact component and finish things up by adding these last couple of social links. 161 00:11:02,280 --> 00:11:06,931 Co pilot is very helpful here once again, I'll leave the href attributes blank, but 162 00:11:06,931 --> 00:11:10,111 you can of course update them to link to your own profiles. 163 00:11:13,262 --> 00:11:16,619 In the browser, all five of our icons are now being rendered, and 164 00:11:16,619 --> 00:11:19,790 they are easily maintained from a single location. 165 00:11:19,790 --> 00:11:22,882 Way to go. It's time for our final component, 166 00:11:22,882 --> 00:11:24,520 the footer. 167 00:11:24,520 --> 00:11:28,217 The footer will only include our name, and a copyright with the current year. 168 00:11:32,388 --> 00:11:37,006 To obtain the current year, I will use the date object and create a variable 169 00:11:37,006 --> 00:11:41,351 called current year to access the year using the getFullYear method. 170 00:11:43,286 --> 00:11:47,743 In the return statement, we will add a span containing our name, 171 00:11:47,743 --> 00:11:51,884 the current year variable we just created, and a copy icon. 172 00:11:53,634 --> 00:11:56,932 Let's import our footer in the app component and 173 00:11:56,932 --> 00:11:59,511 render it below our closing main tag. 174 00:12:04,474 --> 00:12:06,284 Now, at the bottom of our page, 175 00:12:06,284 --> 00:12:10,070 we have our nice green footer containing the current year. 176 00:12:10,070 --> 00:12:13,402 We won't have to come back and manually update this year after new year's, 177 00:12:13,402 --> 00:12:14,880 which is great. 178 00:12:14,880 --> 00:12:18,547 In the next video, we'll add some finishing touches like functionality to 179 00:12:18,547 --> 00:12:22,660 our hamburger menu and we'll deploy our portfolio to share with the world. 180 00:12:22,660 --> 00:12:23,780 Hope to see you there.