To receive these form submissions, we will use the tool Netlify Forms to very easily take care of saving those messages. This form will have 3 inputs: a name, email, and message input. Import from "./data" ĪDVERTISEMENT How to Build the Contact ComponentĪt the end of our landing page, we're going to include our contact form to allow potential employers to reach out to us. It'll have the title of the project, along with the technologies we use to make it, and a link to it (if it is deployed). This will feature a gallery of all the projects that we've built, which will include images. Our projects section will consist of a section element with an id of "projects". I would highly recommend using an actual image of yourself. This image serves merely as a temporary placeholder. Laborum quasi, incidunt dolore iste nostrum cupiditate voluptas?įor the image on the righthand side of the section, I am using an svg file from the public folder, coding.svg. Lorem ipsum dolor sit amet, consectetur adipisicing elit. To make these links work and to be able to jump to each section, we will set the id attribute of the projects section to "projects" and those of the contact section to "contact". Since these links will be to different parts of the same page, we can use the hashes: "/#projects" and "/#contact".
It's also going to include some links to the contact form as well as our past projects. This will consist of a basic introduction to ourselves and what skills we specialize in. Let's start on our first section, the about section. All we have to do is combine multiple classes to create the appearance that we want.įor example, to give our portfolio a dark background with gray text applied to all of our child components, you can add the following classes to our main element: // src/App.jsĪDVERTISEMENT How to Build the About Component The benefit of using Tailwind CSS is that we don't have to write any styles manually in a CSS stylesheet. Once that's done, we can start working with Tailwind CSS, in order to start to give our app a basic appearance. Note that there should be six components in total. Import Testimonials from "./components/Testimonials" Import Skills from "./components/Skills" Import Projects from "./components/Projects" Import Navbar from "./components/Navbar" Import Contact from "./components/Contact" repeat the same basic structure for all 6 componentsĪnd finally make sure to import it back in App.js: // src/App.js Then we will create the basic structure of each React component and export it from that file with export default: // src/components/About.js Within our source (src) folder, we're going to create a folder called components with all of the files that we need: my-portfolio Now that we have all these components listed out we need to go ahead and create them. We can go ahead and add all of them to our App.js file (in src): // src/App.jsĪDVERTISEMENT How to Create our Components This quick planning allows us to figure out what our components should be named and in what order. We will have a Navbar on top with all of the links to jump to different sections of our portfolio.Īfter that, we will include an about section, a section for our projects, testimonials, and finally our contact form. However, since we're just working with one page, we can within our app component figure out the different components that we need very quickly. The benefit of using React is that we could expand our app to as many pages as we like, very simply, and add a lot of additional content. I would recommend using VS Code as your code editor.To go through the entire process of creating our app from start to deployment, you will need to have the following: ADVERTISEMENT What Tools Do I Need to Build my Portfolio?
0 kommentar(er)
