A React application, deployed using Netlify, which uses WordPress as a storage system for information which is called using an API to render a webpage. We have used this to generate an agency website which will show information about the company, what services it can provide, and information about the individual team members.
The website will contain 4 pages:
- The homepage:
- Short subtitle about the company.
- An image with a css animation.
- The 'About us' page:
- More information about the company rendered using the WordPress API.
- The 'Services' page
- Contains cards showing services provided rendered using the WordPress API.
- Each card opens up into a new page also rendered using the WordPress API.
- The 'Team' page
- Contains cards showing the team members rendered using WordPress API.
- These cards are animated using the npm package 'react-parallax-tilt'.
- Each card opens to a different page for each team member with more information, also rendered using WordPress API.
The navigation bar and footer will be rendered to every page.
Deployed site: https://frontenders.netlify.app/
The website will open into this homepage. The icon and the 'Home' link in the navigation bar will take the user to the page below.
The 'About us' link in the navigation bar will take the user to the page below. This information is rendered using the WordPress API.
The 'Services' link in the navigation bar will take the user to the page below. These cards are rendered using the WordPress API.
From the 'Services' page, if the user clicks on any of the pages, the user will be sent to a page with contains more information about the service chosen. This is rendered using the WordPress API. The example below is shown when the 'Web Maintenance' card is chosen.
The 'Team' link in the navigation bar will take the user to the page below. These team member cards are rendered using the WordPress API. These cards use the React-parallax-tilt npm package to be animated when the user's mouse hovers.
When one of the team members card is clicked, the page below is shown, generated using the WordPress API. The example below is shown when 'Flavio Oliveira' card is chosen.
Deployed site: https://frontenders.netlify.app/
- Clone the repo
- To install thee npm packages, on the terminal type:
- Start the react app locally:
git clone https://github.com/fl4viooliveira/FrontEnders.git
npm install
npm start
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have any suggestions to improove this website, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Install the project (as shown in the installation section)
- Fork the Project
- Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
- Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
- Push to the Branch (`git push origin feature/AmazingFeature`)
- Open a Pull Request
None
None
Contact the developers with any questions at the GitHub repository: fl4viooliveira/FrontEnders.
Or, contact the contributors via their GitHub repositories: