Jack Creative
Nextjs
Homepage-3

Customize Homepage For Graphic Designer

Customizing the homepage for the Graphic Designer is a simple process that allows you to personalize the content and design elements according to your brand and business needs. Follow the steps below to customize your homepage.

Finding Homepage Components

To locate the homepage components, navigate to the app/homepage-3/page.js folder in your project. This file contains all the necessary components for the homepage.

Customize Sections

In the components folder, you will find individual components that make up the sections of the homepage. Each component contains the HTML markup and logic for rendering a specific section.

Customizing the Hero Section

To customize the data in the Hero section, open the Hero component file.

Title

Update the text within the <h1> tags to change the Hero title. This is the main heading that introduces the designer to the visitors.

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

Description

Update the text within the <p> tags to change the Hero description. This is a brief paragraph that provides additional information about the designer or their services.

<p className="mb-6 w-100 w-lg-90">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Button

Modify the link and button text to direct visitors to a desired page, such as a contact form or portfolio. Adjust the href attribute 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"
    >
      <!-- SVG path code -->
    </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"
    >
      <!-- SVG path code -->
    </svg>
  </span>
</a>

Image

Replace the image file with your own image to represent the designer. Adjust the height and width attributes as needed to ensure proper display.

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

Note: Make sure to maintain the JSX syntax and modify the appropriate tags and attributes when customizing other sections as well.

Feel free to repeat these steps for other sections/components such as Counters, Projects, Resume, and Feedback to customize the entire homepage according to your preferences.

By customizing the sections, you can create a unique and personalized homepage that showcases your skills and reflects your branding as a Graphic Designer.

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 five 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.

Projects

To configure the Projects section, follow these steps:

Section Title

  • Open the components/projectTwo.jsx 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.

Adding Project Filter Button

To customize the Project filter Button options in the components/ProjectTwo.jsx file, follow these steps:

  1. Open the data/data.js file.
  2. Locate the projectsCategory array.
  3. Modify the objects within the projectsCategory array to set the desired counter options.
  4. Each object represents a counter option with the following properties:
    • id: Unique identifier for the counter option.
    • category: The category name.
  5. Update the id and category properties with your desired values for each category option.
  6. Example:
export const projectsCategory = [
  {id: 1, category: "All project"},
  {id: 2, category: "Design"},
  {id: 3, category: "UI"},
  {id: 4, category: "Web"},
];

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, category, 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, category and img 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, category, and corresponding images.

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 Graphic Designer.

Counter

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

  1. Open the data/data.js file.
  2. Locate the counterData array.
  3. Modify the objects within the counterData array to set the desired counter options.
  4. 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.
  5. Update the number and title properties with your desired values for each counter option.
  6. 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" },
];
  1. 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:

  1. Open the data/data.js file.
  2. Locate the sliderData array.
  3. Modify the objects within the sliderData array to set the desired feedbacks.
  4. 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.
  5. Update the properties with your desired values for each testimonial.
  6. 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
];
  1. 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.

Homepage-2Project