Customization

Typed JS

To change subtitle options change the data-options attribute and type each word or sentence separately

<p class="welcome_text">I'm <span class="welcome-text-type" data-options="Web Developer, Graphic Designer" ></span></p>

Particle JS

If you want to use particle js for your background add bellow code in home section.

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

For Dark layout use “pj-config.json” config file. For Light layout use “pj-config-light.json” config file

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

Background Image

If you want to use background image for your home section, upload your image into assets/images folder and add bellow code in home section.

Then copy-paste your image url into src attribute of img tag.

<!--Start Background Image-->
<div class="mono-background">
  <div class="mono-background-inner" data-aos-duration="1200" data-aos-delay="450" data-aos="fade-left">
     <img src="" class="img-align-center" alt="">
   </div>
</div>
<!--End Background Image-->

Parallax JS

In home section you can find background-parallax element with 6 different colors elements inside

<main class="content center-main" >
    <!--INTRODUCTION SECTION START-->
    <section class="home d-flex" id="home">
        <!--Parallax Background-->
        <div class="background-parallax" id="parallaxbackground">
            <div class="element1 element red" data-depth="0.8"></div>
            <div class="element2 element green" data-depth="0.5"></div>
            <div class="element3 element blue" data-depth="0.2"></div>
            <div class="element4 element red" data-depth="0.4"></div>
            <div class="element5 element orange" data-depth="0.3"></div>
            <div class="element6 element blue" data-depth="0.2"></div>
        </div>
        <!--End of Parallax Background-->

For customization styles of circles, go to main.css -> HOME SECTION ( 465 – 537 lines ) dark.theme.css -> ( 231 – 249 lines ), light.theme.css -> ( 231 – 249 lines )

/*======================
    4. HOME SECTION
======================*/
section.home {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

section.home .background-parallax {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

section.home .background-parallax .element {
  width: 0;
  height: 0;
  position: absolute;
  -webkit-animation-name: background-animation;
          animation-name: background-animation;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  border-radius: 50%;
}

section.home .background-parallax .element.red {
  -webkit-box-shadow: 0px 0px 190px 260px rgba(229, 65, 68, 0.1);
          box-shadow: 0px 0px 190px 260px rgba(229, 65, 68, 0.1);
}

section.home .background-parallax .element.blue {
  -webkit-box-shadow: 0px 0px 160px 200px rgba(26, 123, 183, 0.1);
          box-shadow: 0px 0px 160px 200px rgba(26, 123, 183, 0.1);
}

section.home .background-parallax .element.green {
  -webkit-box-shadow: 0px 0px 145px 220px rgba(28, 186, 90, 0.1);
          box-shadow: 0px 0px 145px 220px rgba(28, 186, 90, 0.1);
}

section.home .background-parallax .element.orange {
  -webkit-box-shadow: 0px 0px 165px 210px rgba(240, 127, 129, 0.1);
          box-shadow: 0px 0px 165px 210px rgba(240, 127, 129, 0.1);
}

section.home .background-parallax .element.element1 {
  top: 24% !important;
  left: 78% !important;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

section.home .background-parallax .element.element6 {
  top: 80% !important;
  left: 22% !important;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

section.home .background-parallax .element.element3 {
  top: 61% !important;
  left: 57% !important;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

section.home .background-parallax .element.element4 {
  top: 79% !important;
  left: 88% !important;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

section.home .background-parallax .element.element5 {
  top: 23% !important;
  left: 18% !important;
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

section.home .background-parallax .element.element2 {
  top: 50% !important;
  left: 37% !important;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

Section with Graphic Background

If you want to use graphic pattern of rectcv template, just add “background_gpattern” classname to your section elements. See example bellow.

<!--ABOUT SECTION START-->
<section class="about background_gpattern" id="about">

Section with Background Images

To change background image of section go to html file. find the section with backgound-section classname and change image url inside of style attribute.

<!--FACTS SECTION START-->
<div class="section facts backgound-section" style="background-image: url(./assets/images/background_2.jpg)" data-aos-id="facts">

Shadow-Header

If you want to add shadow in the header part use shadow-header class name.

Example:

<header class="shadow-header rectcv_menu d-flex flex-column justify-content-between vertical_header">
---
</header>

How to add Item in Portfolio Section

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

If you want to add images, use portfolio-image class name:

<!--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 link, use portfolio-ifram classname

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

If you want to add permalink, no need to add additional classname

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

Contact Form

Open 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