Customize Homepage for Developers

Customizing the homepage for the Developer template is a straightforward process that allows you to personalize the content and design elements to suit your brand and business requirements. The necessary code has already been included in the components and pages folders. Now, let's explore how you can customize each section of the homepage.

Finding the Homepage Components

To locate the homepage components, navigate to the app/homepage-2/page.js file. This file contains all the necessary components for the homepage.

Customize Sections

In the components folder, you'll find individual components that make up each section of the homepage. These components contain the HTML markup and logic for rendering their respective sections. Here are some examples of these components: Hero, Counters, Projects, Experiences, and FeedBack.

Hero Section

To customize the data in the Hero section, you can modify the following properties in the Hero component.

Title

Locate the code block containing the <h1> tags and update the text to reflect your desired Hero title:

<h1>
  👋 Hey there, <br />
  It’s Jack Downey.
</h1>

Description

Find the code block containing the <p> tags and update the text to customize the Hero description:

<p className="hero-two-desc">
  Sr. Wordpess Developer. <br />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br />
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Image

To change the Hero image, replace the image file located at the specified path. You can also adjust the width and height attributes to fit your desired dimensions:

<Image
  src="/images/hero/hero-image-2.png"
  className="z-100"
  alt="hero images"
  height={239}
  width={186}
/>

Make sure to maintain the JSX syntax and modify the appropriate tags and attributes when customizing the Hero section. Repeat this process for other sections as well, such as Counters, Projects, Experiences, and FeedBack, by locating their respective components and making the necessary modifications.

Feel free to explore the components and update the content, styles, and images according to your preferences to create a personalized and unique homepage for your Developer website.

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.

Projects

To configure the Projects section, follow these steps:

Section Title

Open the components/projectOne.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/ProjectOne.jsx file, follow these steps:

Open the data/data.js file.
Locate the projectsCategory array.
Modify the objects within the projectsCategory array to set the desired counter options.
Each object represents a counter option with the following properties:
- id: Unique identifier for the counter option.
- category: The category name.
Update the id and category properties with your desired values for each category option.
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, description, 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, description 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, descriptions, and corresponding images.

Experiences

To configure the experience section, follow these instructions:

Section Title

Open the app/homeOne/page.jsx file.
Locate the following code:

<div className="section-header">
  <h2>Experiences 💪</h2>
</div>

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

Work Experience

Open the app/homeOne/page.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 app/homeOne/page.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 app/homeOne/page.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 app/homeOne/page.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 experience section, you can showcase your work experience, education, skills, and tools to highlight your expertise as a Graphic Designer.

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.

Homepage Homepage-3