Jack Creative
Nextjs
Project

Project Page

The Project page allows you to showcase and customize various elements to create a personalized experience for your website visitors.

Project Page customize

Here's how you can make specific changes:

Page Title

To edit the page title on the Project page, locate the following code in the app/project/page.jsx file:

<div className="row">
  <div className="col-lg-12">
    <div className="section-header">
      <h2>The work we do, <br />and the people we help.</h2>
    </div>
  </div>
</div>

Update the text inside the <h2> tags to customize the page title according to your preferences. Feel free to modify the text to align with the purpose or message you want to convey through the Project page.

Project List

The projects displayed on the Project page are sourced from the components/projects.jsx file. This component uses the project information stored in the data/data.js file.

To add, modify, or remove projects, you need to make changes in data/data.js file.

  1. In the data/data.js file, you'll find an array named projectsData. Each element in this array represents a project and contains properties such as id, title, subtitle, and imgSrc.

  2. To add a new project, append a new object to the projectsData array following the provided template:

{
  id: 1,
  title: "Fashion Blog <br> Website",
  subtitle: "UI, UX Project",
  imgSrc: "/images/project/project-1.png",
  category: ["UI"],
  description:
      'Strategy formulation is built on "the match between all organisation resources and skills based program. ',
}
  • id: Assign a unique number as the id for the project.
  • title: Set the title property to the name of your project.
  • subtitle: Specify the subtitle property to provide a brief description or category for the project.
  • imgSrc: Update the imgSrc property to point to the file path of your project's image.
  • category: Update the category property to point to add the project caegories.
  • description: Update the description property to update the project short description.
  1. Repeat the above steps to add additional projects, ensuring that each project object has a unique id.

By modifying the project data in data/data.js, you can manage the projects displayed on the Project page.

More Project

To add the "More Project" button functionality, follow these steps:

  1. Open the app/project/page.js file.
  2. Locate the following code snippet:
<div className="d-flex justify-content-center">
  <button
    onClick={() => setShowMoreProject(true)}
    className={`next-more border-0 bg-transparent mt-xxl-10 mt-lg-9 mt-md-7 mt-6 ${
      showMoreProject ? "d-none" : ""
    }`}
  >
    <ArrowDown size={32} weight="thin" />More Project
  </button>
</div>
  1. Add the necessary state variable to your component to handle the showMoreProject state. For example, you can add the following code before the return statement in your functional component:
const [showMoreProject, setShowMoreProject] = useState(false);
  1. Update the onClick event of the button to toggle the showMoreProject state to true when clicked:
onClick={() => setShowMoreProject(true)}
  1. Add conditional rendering to display the additional projects when showMoreProject is true. For example, you can wrap the Projects component with an if condition to show it when showMoreProject is true:
{showMoreProject && <Projects />}

Remember to import the necessary dependencies and adjust the code as needed to fit your component structure.

By adding this code, the "See More Project" button will show additional projects when clicked, allowing users to view more projects on the homepage.

Remember to save the modified files after making the desired changes. These adjustments will ensure that the Project page reflects your customized content and showcases your projects accurately.

Homepage-3Blogs