Portfolio Page

Customize Page Header

Open the app/case-study/page.jsx file.
Locate the code block with the <PageHero> component.
Find the pageTitle attribute within the <PageHero> component.
Edit the value of the pageTitle attribute to customize the title. Here's an example of how you can customize the title:

<PageHero
 pageTitle={
   <>
     <span>Let’s See </span> <br /> <span> Our Recent Work </span>
   </>
 }
/>

In the above example, the title of the Portfolio page is customized to "Explore Our Portfolio." Feel free to modify the text or formatting according to your preference.

Case Studies

Adding Filter option.

To add filter buttons to the Portfolio page, you need to make changes in two files: app/case-study/page.jsx and data/data.js. Follow these steps:

Open the app/case-study/page.jsx file.
Find the categories variable declaration. It should look like this:

const categories = ["All project", "Design", "Development", "Marketing"];

Add the desired filter button names to the categories array. For example, to add two additional buttons, you can modify the array like this:

const categories = ["All project", "Design", "Development", "Marketing", "Photography", "Video"];

Feel free to add or remove buttons according to your requirements. 4. Save the changes in app/case-study/page.jsx.

Open the data/data.js file.
Locate the caseStudy array, which contains objects representing individual case studies.
Find the relevant case study object and its category field.
Modify the category field to include the added filter buttons. For example:

const caseStudy = [
  {
    category: ["Design", "Development", "Photography"],
    // Other fields of the case study object
  },
  // Other case study objects
];

In the above example, the case study object is associated with the "Design", "Development", and "Photography" filter buttons.

Save the changes in data/data.js.

After making these modifications, the new filter buttons should appear on the Portfolio page, and the case studies should be filtered accordingly when the buttons are clicked.

Case Study items

To add a new case study item, you need to make changes to the data/data.js file. Follow these steps:

Open the data/data.js file.
Locate the const caseStudy array, which contains objects representing individual case studies.

Add a new object inside the caseStudy array, following the provided code template.

const caseStudy = [
  {
    id: 1,
    slug: "exclusive-content-storage",
    title: "Exclusive Content Sources",
    date: "23 May 2023",
    thumbnail: "/images/project/project-1.png",
    tag: "Content",
    featureImage: "/images/project/feature-image.png",
    category: ["Design", "Development"],
    brandOverview:
      "If so, you know how amazing and attractive they look. Yes, it is a smart way to grow the reader’s attention, and the moving text inspires the users to concentrate on that specific part, especially. Don’t you apply this amazing thing on your website yet? Don’t worry; we are offering our helping hand, just hold.",
    services: [
      {
        item: "Research & Discovery",
      },
      {
        item: "Prototyping & Interactions",
      },
      {
        item: "Competitive Analysis",
      },
      {
        item: "Motion Graphics",
      },
      {
        item: "Front-End Development",
      },
    ],
    subFeatureImage: [
      {
        image: "/images/project/feature-image-sub1.png",
      },
      {
        image: "/images/project/feature-image-sub2.png",
      },
      {
        image: "/images/project/feature-image-sub3.png",
      },
      {
        image: "/images/project/feature-image-sub4.png",
      },
      {
        image: "/images/project/feature-image-sub5.png",
      },
      {
        image: "/images/project/feature-image-sub6.png",
      },
    ],
    visualIdentity:
      "A lot of font generators are there. Definitely, they also offer their own features. But we recommend exclusive Addons animated text generator widgets. Don’t you want to know why? Well, numerous reasons are there for choosing this widget. However, the followings are the primary reasons.You may have seen the animated text on many other websites, haven’t you?If so, you know how amazing and attractive they look. Yes, it is a smart way to grow the reader’s attention, and the moving text inspires the users to concentrate on that specific part, especially.Don’t you apply this amazing thing on your website yet? Don’t worry; we are offering our helping hand, just hold.",
    finalResult:
      "Within 30 days after the launch, A lot of font generators are there. Definitely, they also offer their own features. But we recommend exclusive Addons animated text generator widgets. Don’t you want to know why? Well, numerous reasons are there for choosing this widget. However, the followings are the primary reasons.You may have seen the animated text on many other websites, haven’t you?If so, you know how amazing and attractive they look. Yes, it is a smart way to grow the reader’s attention, and the moving text inspires the users to concentrate on that specific part, especially.If so, you know how amazing and attractive they look. Yes, it is a smart way to grow the reader’s attention, and the moving text inspires the users to concentrate on that specific part, especially.Do you apply this amazing thing on your website yet? Don’t worry; we are offering our helping hand, just hold.",
    author: [
      {
        name: "Kristin Bale",
        designation: "Co-founder and CDO",
        image: "/images/project/profile-picture.png",
        quote:
          "“Trust their process. They will provide a lot of different options, but generally, they’ve put a lot of thinking behind them.They’re very experienced and know what they’re doing as designers. Listen to them and they will help elevate your brand and achieve your goals.” 😍",
      },
    ],
    workDesription:
      " Within 30 days after the launch, A lot of font generators are there. Definitely, they also offer their own features. But we recommend exclusive Addons animated text generator widgets. Don’t you want to know why? Well, numerous reasons are there for choosing this widget. However, the followings are the primary reasons.",
    managementTeam: [
      {
        item: "Annette Black",
      },
      {
        item: "Devon Lane",
      },
      {
        item: " Floyd Miles",
      },
    ],
    developmentTeam: [
      {
        item: "Courtney Harry",
      },
      {
        item: "Courtney Harry",
      },
      {
        item: " Kristin Watson",
      },
      {
        item: "Davod lane",
      },
    ],
  },
  // Add more case study objects here
];

export default caseStudy;

Customize the values inside the object according to your new case study. You can add more case study objects by repeating the above code template.

Save the changes in data/data.js.

Case Study Details Page

Once you have added the new case study object, it will be available in the Portfolio and can be accessed on the case study details page based on the provided slug.

Job Page Blogs