Welcome to part-3 of the series. In the previous part we have created a common footer in the layout component.
Let us first create a Header with Navigation.
Let’s add some styles now in styled-components.
We now get a header with Menu.
Next, we will create our Works page. Create a new file works.js inside pages folder.
New Works page
Let’s add some Styles for the same in IndexStyles.js
We will soon create a new component Project in which will pass each project. Let’s create an Array of Object containing some projects.
Next, let’s create the Project component inside components folder.
Let’s add some styles for the component in global.css
This shows our Works page.
We have missed one thing and that is to make the header fixed, so that if we scroll then also the header remains. For this in IndexStyles.js add the following.
This was causing issues with Our Works text, because the margin: 0 for GenericH2
Let’s edit it using props, so that it can be used in works.js without effecting others.
Now, in works.js we just need to add some
We will next create a new page about.js inside pages folder.
Here, we are reusing most of the part from our index.js, but using a different Banner image. We are doing this again with the help of props of styled components.
Let’s make SectionTwo now. Here we will again reuse a styled component.
We made the below changes in the SectionTwo styled component, to include a white background.
We have also added two new styled components.
New Styled components
Now our About page looks like below.
We will now deploy our site to netlify. We already have a form submission setup in the index.js page with netlify.
If you want to know in details of form submission setup, go through this youtube video by Traversy media.
I have already pushed all my code to github. Now, let’s deploy to netlify. Open your netlify account.
Now, click on New Site from Git
And then choose the provider. I have choose Github as my code is there. Once you authorize, it will show you list of all your Github repositories.
Click on the repo to deploy. In my case it was AgencyDemo
Keep the defaults and click on Deploy Site
And the site will be deployed within minutes.
Our site is deployed. It’s time to check the form submission feature of netlify. Go to the form in home page and add content.
The form submission didn’t went as expected and gave me a lot of error. After searching found that form handling in site generated through gatsby is a bit different in netlify. Found these two links to solve the issue.
So, we will change our functional component to class based component and do the following changes.
Class based component
And these changes also.
We also need to add thanks.js file inside pages folder
Now, when we submitted the form we receive the message in our netlify console.
You can find the complete code for the project here https://github.com/nabendu82/AgencyDemo
The netlify deployment is here https://priceless-panini-95d866.netlify.com/