Customization

Particle JS

If you want to use particle js for your background add the code below into the home section.

<!--Particle Background-->
<div class="background-particle" id="particlebackground" data-config="./assets/pj-config.json"></div>
<!--End of Particle Background-->

To set the Dark layout use “pj-config.json” config file. To set the Light layout use “pj-config-light.json” config file.

You can customize the particle js yourself. For more information visit Particle JS website

About Section

The about section contains two columns. In the left column add the avatar-area sticky element with the image.

<!--About Section-->
<section class="about" id="about">
    <div class="container">
        <div class="row">
            <!--Left Part ( Sticky )-->
            <div class="column column-6 column-mobile-12">
                <div class="avatar-area">
                    <div class="avatar-st">
                        <img src="./assets/images/avatar.jpg" class="res-image" alt="">
                    </div>
                </div>
            </div>

The right column contains the units.

<!--Right Part -->
<div class="column column-6 column-mobile-12">
    <!--Right Part Unit-->
    <div class="personal-information personal-part">

Slider Portfolio

If you want to use the slider portfolio copy-paste the code below.

<!--Portfolio Slider-->
<div class="portfolio-slider owl-carousel">
    <!--Portfolio Slider Item-->
    <div class="tpsingle-item" data-aos-id="portfolio-slider">
        <div class="tps-image tps-zoom-onhover">
            <a href="./assets/images/sculpture1.jpg" class="ts-link portfolio-image">
                <img src="./assets/images/sculpture1.jpg" alt="">
            </a>
            <div class="tps-heading">
                <h2 class="split-animation">Sculpture</h2>
            </div>
            <div class="tps-desc">
                <div class="tps-number">01</div>
                <div class="tsp-category">Branding</div>
                <div class="tsp-category">Typography</div>
                <div class="tsp-category">Design</div>
            </div>
        </div>
    </div>
</div>

Grid Portfolio

If you want to use the grid portfolio copy-paste the code below.

<div class="section-body">
    <!--Portfolio Grid-->
    <div class="portfolio-items portfolio-items-1 portfolio-items-mobile-4 item-gap-20">
      <!--Portfolio Grid Item-->
        <div class="portfolio-item">
            <a href="./assets/images/portfolio1.jpg" class="portfolio-single portfolio-image" data-portfolio="image">
                <div class="item-box">
                    <div class="item-image">
                        <img src="./assets/images/portfolio1.jpg" class="res-image" alt="">
                    </div>
                    <div class="item-details">
                        <div class="item-details-headings">
                            <div class="item-title">
                                <h3>Project Title</h3>
                            </div>
                            <div class="item-category">
                                <p>Category</p>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </a>
        </div>
    </div>

Grid Portfolio Columns

portfolio-items-* indicates the number of columns you should use out of the possible 8 per row.

For example if you want to create a portfolio with 4 columns, use the portfolio-items-4 classname.

Portfolio items grid breakpoints based on minimum width of the media queries. ( portfolio-items-mobile-4 applies to mobile(768px <) sizes, but not the smaller sizes).

Breakpoints

• mobile ( 768px < ) (e.g. portfolio-items-mobile-x)
• small (1000px <) (e.g. portfolio-items-small-x)
• middle (1200px <) (e.g. portfolio-items-middle-x)
• large (1600px <) (e.g. portfolio-items-large-x)

Items spans

If you want to create a grid that spans 2 or more columns, just use the item-span-x classnames. See example below:

<!--Portfolio Grid Item-->
<div class="portfolio-item item-span-2">

Possible 1 to 6 item-span classes.

How to add Item in Portfolio Section

You can add images, embed videos (YouTube, Vimeo), and links in the portfolio section.

If you want to add images, use the portfolio-image classname:

<!--Link of item. Image type. Use portfolio-image classname-->
<a href="./assets/images/portfolio-single.jpg" class="portfolio-single portfolio-image">

If you want to show embedded links, use the portfolio-ifram classname:

<!--Copy-Paste embedded link here -->
<a href="link" class="portfolio-single portfolio-iframe">

If you want to add a permalink, no need to create an additional classname:

<!--Copy-Paste link here -->
<a href="https://themeforest.net/user/theproger" target="_blank" class="portfolio-single">

Contact Form

Open the form.php file and modify your email here.

<?php
$email_host = ''; // SMTP host ex. smtp.gmail.com for gmail mailserver
$email = ''; // Your Email Address
$email_passsword = ''; //  Password

$welcome_subject = "Thank you for getting in touch!"; //Success Message Subject

$successTemplate = 'success-message.html'; // Success Template uri here
$messageTemplate = 'message.html'; // Message Template uri here