Customize Your Homepage

Customizing the homepage of Jack Creative is a simple and direct procedure that enables you to personalize the content and design elements according to your brand and business needs. The required code has already been included from the components folder. Now, all that remains is to modify our data.

Finding Homepage

To locate the homepage components, navigate to the app/page.js folder. In this file, you will find all the necessary components for the homepage. Here is the code snippet:

Customize Sections

In the components folder, you will find the individual components that make up the sections of the homepage. These components contain the HTML markup and logic for rendering the specific section. Examples of such components are Hero, Services, ProjectArea, Resume, Counters and FeedBack.

Hero Section

To customize the data in the Hero section, you can modify the following properties in the components/Hero.jsx file:

Title

To change the Hero title, locate the following code and update the text within the <h1> tags:

<h1 className="mb-6">
  👋 Hey there, <br />
  It’s Jack Downey.
</h1>

Description

To change the Hero description, find the following code and update the text within the <p> tags:

<p className="mb-md-7 mb-6 w-xxl-85 w-100">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  eiusmod tempor incididunt ut labore et dolore.
</p>

Button

To modify the links on the button, locate the code for the button and update the href and button text accordingly:

<a
  href="/contact"
  className="btn btn-primary btn-lg mb-6 mb-lg-0"
>
  <span className="position-relative">
    Say Hello
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5 15L15 5"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M6.875 5L15 5L15 13.125"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  </span>
  <span className="position-relative">
    Say Hello
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5 15L15 5"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M6.875 5L15 5L15 13.125"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  </span>
</a>

Image

To change the Hero image, you can replace the image files located in the specified paths. You can also adjust the width, height attributes as per your requirements.

<motion.img
  variants={{
    hidden: {opacity: 0, x: 75},
    visible: {opacity: 1, x: 0},
  }}
  initial="hidden"
  animate="visible"
  transition={{duration: 0.5, delay: 0.25}}
  src="/images/hero/hero-image.png"
  height={675}
  width={804}
  className="z-100"
  alt="hero images"
/>

Note: When making changes, ensure that the JSX syntax is maintained and that the modifications are within the appropriate tags and attributes.

Services

To configure the Services section, follow these steps:

Section Title

Open the components/Services.jsx file.
Locate the following code:

<div className="section-header">
  <h2>Provide Services 🛠</h2>
</div>

Update the text within the <h2> tags to set the desired title for the section.

Services Cards

Open the data/data.js file.
Look for the serviceCardData array.
Modify the array to include the Services items you want to display.
Each object in the serviceCardData array represents a Service item. You can add or remove objects as needed.
Update the id, title, description, and img properties of each object with the desired values for the services.
Example:

export const serviceCardData = [
  {
    id: 1,
    title: "UX, UI Design",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/images/service/services-icon-1.svg",
  },
  {
    id: 2,
    title: "Web Design",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/images/service/services-icon-2.svg",
  },
  {
    id: 3,
    title: "UX Research",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    img: "/images/service/services-icon-3.svg",
  },
  // Add more objects for additional Services
];

Replace /images/service/services-icon-1.svg, /images/service/services-icon-2.svg, etc. with the paths to your service icon files.
Customize the title and description values to reflect your services.

Note: Ensure that the image files you reference for icons exist in the specified paths and are of the correct file format (e.g., SVG, PNG).

Note: By default, the page displays three services. If you want to change the number of services displayed, go to app/page.jsx and set the limit value in the following code:

<Services limit={5} />

Adjust the limit value according to your desired number of services to be displayed.

Resume

To configure the Resume section, follow these instructions:

Section Title

Open the components/Resume.jsx file.
Locate the following code:

<div className="section-header">
  <h2>Resume</h2>
</div>

Update the text within the <h2> tags to set the desired title for the section.

Work Experience

Open the components/Resume.jsx file.
Find the following code and customize it to include the work experience you want to display:

<div className="experience">
  <div className="title">
    <h5>Work Experience</h5>
  </div>
  <div className="content">
    <h4>Exclusive Addons</h4>
    <p>
      Lead Designer <br />
      August 2018 - December 2019
    </p>
  </div>
  <div className="content">
    <h4>Statimania Institute</h4>
    <p>
      Designer Officer <br />
      December 2019 - Current
    </p>
  </div>
  // Add more experiences
</div>

Duplicate and customize the code for each work experience you want to include.

Education

Open the components/Resume.jsx file.
Find the following code and customize it to include the educational qualifications you want to display:

<div className="education">
  <div className="title">
    <h5>Education</h5>
  </div>
  <div className="content">
    <h4>Graphic Arts Institute</h4>
    <p>
      MS • Information Design &amp; Technology <br />
      2016 – 2017
    </p>
  </div>
  <div className="content">
    <h4>Florida Gulf Coast University</h4>
    <p>
      BA • Psychology <br />
      2014 – 2015
    </p>
  </div>
  // Add more educational qualifications
</div>

Duplicate and customize the code for each educational qualification you want to include.

Clients

Open the components/Resume.jsx file.
Find the following code and customize it to include the clients you have worked with:

<div className="freelance">
  <div className="title">
    <h5>Freelance Clients</h5>
  </div>
  <div className="freelance-wrapper">
    <div className="item">
      <Image
        src="/images/resume/client-logo-5.svg"
        alt="client"
        height={33}
        width={162}
      />
    </div>
    <div className="item">
      <Image
        src="/images/resume/client-logo-2.svg"
        alt="client"
        height={33}
        width={162}
      />
    </div>
    // Add more clients
  </div>
</div>

Duplicate and customize the code for each client logo you want to include.

Skills

Open the components/Resume.jsx file.
Find the following code and customize it to include your skills:

<div className="skills">
  <div className="title">
    <h5>Skills</h5>
  </div>
  <div className="d-flex justify-content-center justify-content-lg-start mb-4 mb-xl-0">
    <div className="content me-xxl-8 me-0">
      <ul className="list-unstyled">
        <li>HTML, CSS</li>
        <li>Front-end Development</li>
        <li>Back-End Development</li>
        <li>JavaScript, PHP</li>
        // Add more skills
      </ul>
    </div>
  </div>
</div>

Add more <li> items to include additional skills.

Tools

Open the components/Resume.jsx file.
Find the following code and customize it to include the tools you use:

<div className="tools">
  <div className="title">
    <h5>Tools I use every day</h5>
  </div>
  <div className="tools-wrapper">
    <div className="item">
      <Image
        src="/images/resume/client-logo-21.svg"
        alt="client"
        height={60}
        width={61}
      />
    </div>
    <div className="item">
      <Image
        src="/images/resume/client-logo-22.svg"
        alt="client"
        height={60}
        width={61}
      />
    </div>
    // Add more tools
  </div>
</div>

Duplicate and customize the code for each tool logo you want to include.
Make sure to replace the image paths with the actual paths to your images.

By customizing the Resume section, you can showcase your work experience, education, skills, and tools to highlight your expertise as a web Developer.

Projects

To configure the Projects section, follow these steps:

Section Title

Open the app/homeTwo/page.js file.
Locate the following code:

<div className="section-header">
  <h2>Latest projects</h2>
</div>

Update the text within the <h2> tags to set the desired title for the section.

Project Items

Open the data/data.js file.
Find the projectsData array.
Modify the array to include the projects you want to display.
Each object in the projectsData array represents a project item. You can add or remove objects as needed.
Update the id, title, subtitle, and imgSrc properties of each object with the desired values for the project.
Example:

export const projectsData = [
   {
    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: 2,
    title: "Datasoft Web <br> &amp; Application Design",
    subtitle: "Product Design",
    imgSrc: "/images/project/project-2.png",
    category: ["Design"],
    description:
      'Strategy formulation is built on "the match between all organisation resources and skills based program. ',
  },
  {
    id: 3,
    title: "Movie Time <br> IOS App Development",
    subtitle: "Mobile App",
    imgSrc: "/images/project/project-3.png",
    category: ["UI"],
    description:
      'Strategy formulation is built on "the match between all organisation resources and skills based program. ',
  },
  {
    id: 4,
    title: `User Data Collects <br/> for Movie App`,
    subtitle: "UI, UX Project",
    imgSrc: "/images/project/project-4.png",
    category: ["UI"],
    description:
      'Strategy formulation is built on "the match between all organisation resources and skills based program. ',
  },
  {
    id: 5,
    title: " Jewelry Website <br> Redesign.",
    subtitle: "Web Site Design",
    imgSrc: "/images/project/project-5.png",
    category: ["Web"],
    description:
      'Strategy formulation is built on "the match between all organisation resources and skills based program. ',
  },
  // Add more Projects as needed...
];

Replace /images/project/project-1.png, /images/project/project-2.png, etc. with the paths to your project item images.
Customize the title and subtitle values to describe each project.

Note: Ensure that the image files you reference for the project items exist in the specified paths and are of the correct file format (e.g., PNG, JPEG).

By customizing the Projects section, you can showcase your latest projects with their titles, subtitles, and corresponding images.

Counter

To customize the counter options in the components/Counter.jsx file, follow these steps:

Open the data/data.js file.
Locate the counterData array.
Modify the objects within the counterData array to set the desired counter options.
Each object represents a counter option with the following properties:
- id: Unique identifier for the counter option.
- number: The number to be displayed by the counter.
- title: The name or description of the counter item.
Update the number and title properties with your desired values for each counter option.
Example:

export const counterData = [
  { id: 1, number: 150, title: "PROJECTS COMPLETED" },
  { id: 2, number: 6, title: "DESIGN AWARDS" },
  { id: 3, number: 12, title: "YEARS EXPERIENCE" },
  { id: 4, number: 72, title: "HAPPY CLIENTS" },
];

Save the changes to the data/data.js file.

By modifying the counterData array, you can customize the counter options displayed in the components/Counter.jsx file according to your preferences.

Feedbacks

To configure the testimonials section in the components/FeedBack.jsx file, you need to update the sliderData array in the data/data.js file. Here's how:

Open the data/data.js file.
Locate the sliderData array.
Modify the objects within the sliderData array to set the desired feedbacks.
Each object represents a testimonial with the following properties:
- id: Unique identifier for the feedback.
- icon: Icon for the feedback.
- content: The feedback provided by the user.
- user: An object containing the user details.
  - name: The name of the user.
  - img: The image of the author.
  - address: The address of the author.
Update the properties with your desired values for each testimonial.
Example:

export const sliderData = [
  {
    id: 1,
    icon: "/images/feedback/icon.svg",
    content:
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...",
    user: {
      name: "Jenny Wilson",
      img: "/images/feedback/profile.png",
      address: "L'Oréal",
    },
  },
  // Add more feedbacks here
];

Save the changes to the data/data.js file.

By updating the sliderData array, you can customize the testimonials section in the components/FeedBack.jsx file to display the desired feedbacks with their corresponding user information.

Animation

The animation effects in this section are achieved using the framer-motion animation library. If you want to modify the animation, follow the instructions below.

The animation code for the hero text involves the use of the variants object, which defines the initial and target states of the animation. The animation is applied to the opacity and y properties to control the opacity and vertical position of the text.

If you want the text to animate from left/right instead of top/bottom, you can change the y property to x. Additionally, you can adjust the duration and delay of the animation by modifying the duration and delay values, respectively.

<motion.div
    variants={{
        hidden: { opacity: 0, y: 75 },
        visible: { opacity: 1, y: 0 },
    }}
    initial="hidden"
    animate="visible"
    transition={{ duration: 0.5, delay: 0.1 }}
    className="hero-content pb-6 text-center text-lg-start"
>
 
// CONTENT
 
</motion.div>

Feel free to customize the hero section, including the text, image, and animation, to create a unique and engaging home page for your website.

Footer Homepage-2