path: root/layouts/index.html

{{ define "main" }}

{{ $data := index .Site.Data .Site.Language.Lang }}

<!-- =============================
      Start Menu
    =============================== -->
<section class="menu menu-fix" id="menu">
  <nav>
    <!-- desktop-menu -->
    <div class="menu-container">
        <div class="desktop-menu-logo"><a href="{{.Site.BaseURL | relLangURL }}"><img class="img-fluid"
              src="{{ .Site.Params.logo_light | absURL }}" alt="{{ .Site.Title }}" id="desktop-logo"></a>
        </div>
      <ul class="desktop-menu list-inline mb-0" id="desktop-menu">
        {{ range .Site.Menus.main }}
        <li class="menu-item hvr-underline-from-left {{ .Weight }}"><a href="{{ .URL }}">{{ .Name }}</a></li>
        {{ end }}
      </ul>
      <!-- Language List -->
      {{- if .Site.IsMultiLingual }}
      <select id="select-language" onchange="location = this.value;">
        {{ $siteLanguages := .Site.Languages}}
        {{ $pageLang := .Page.Lang}}
        {{ range .Page.AllTranslations }}
        {{ $translation := .}}
        {{ range $siteLanguages }}
        {{ if eq $translation.Lang .Lang }}
        {{ $selected := false }}
        {{ if eq $pageLang .Lang}}
        <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}
        </option>
        {{ else }}
        <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
        {{ end }}
        {{ end }}
        {{ end }}
        {{ end }}
      </select>
      {{ end }}
      <!-- /desktop-menu -->

      <!-- mobile-menu -->
      <div class="mobile-menu">
        <a class="menu-link">
          <div class="mobile-menu-nav">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </a>
        <div class="mobile-menu-logo"><a href="{{.Site.BaseURL | relLangURL }}"><img class="img-fluid"
              src="{{ .Site.Params.logo_dark | absURL }}" alt="{{ .Site.Title }}"></a>
        </div>
        <div class="menu-slider">
          <nav>
            <ul class="mobile-menu-list">
              {{ range .Site.Menus.main }}
              <li class="hvr-shutter-out-vertical mobile-menu-item 1"><a href="{{ .URL }}">{{ .Name }}</a></li>
              {{ end }}
            </ul>
            <!-- Language List -->
            {{- if .Site.IsMultiLingual }}
            <select class="ml-4" id="select-language" onchange="location = this.value;">
              {{ $siteLanguages := .Site.Languages}}
              {{ $pageLang := .Page.Lang}}
              {{ range .Page.AllTranslations }}
              {{ $translation := .}}
              {{ range $siteLanguages }}
              {{ if eq $translation.Lang .Lang }}
              {{ $selected := false }}
              {{ if eq $pageLang .Lang}}
              <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}
              </option>
              {{ else }}
              <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
              {{ end }}
              {{ end }}
              {{ end }}
              {{ end }}
            </select>
            {{ end }}
            <ul class="mobile-menu-icons list-inline">
              {{ range .Site.Params.social }}
              <li><a href="{{ .link | safeURL }}"><i class="fa {{ .icon }}"></i></a></li>
              {{ end }}
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </nav>
</section>
<!-- =============================
      End Menu
    =============================== -->

<!-- =============================
      Start Header
    =============================== -->
<section class="header" id="home">
  {{ if .Site.Params.enable_logo }}
  <div class="logo">
    <img class="img-fluid" src="{{ .Site.Params.logo_light | relURL }}" alt="{{ .Site.Title }}">
  </div>
  {{ end }}
  <div class="slider-prev-button slider-button">
    <i class="fa fa-angle-left"></i>
  </div>
  <div class="slider-next-button slider-button">
    <i class="fa fa-angle-right"></i>
  </div>
  {{ with $data.homepage.hero }}
  <div class="owl-carousel owl-full-width owl-theme" id="background-slide">
    {{ range .slider_image }}
    <div class="slider"><img class="img-fluid" src="{{ . | absURL }}" alt="slider-background"></div>
    {{ end }}
  </div>
  <div class="container">
    <div class="row content">
      <div class="col-lg-8 col-lg-offset-2 col-sm-8 col-sm-offset-2 head-container">
        <div class="head-holder">
          <h1 class="introduction">{{ .title | markdownify | emojify }}</h1>
          <div class="animated-text">
            <strong class="cd-headline clip">
              <span class="cd-words-wrapper">
                {{ range $index, $elements:= .occupations }}
                <b {{ if eq $index 0 }} class="is-visible" {{ end }}>{{ . }}</b>
                {{ end }}
              </span>
            </strong>
          </div>
          {{ if .button.enable }}
          {{ with .button }}
          <a class="hireMe" href="{{ .link }}">{{ .label }}</a>
          {{ end }}
          {{ end }}
        </div>
      </div>
    </div>
  </div>
  {{ end }}

  {{ if $data.homepage.fullscreen_nav.enable }}
  <div class="navigation-icon">
    <input id="burger" type="checkbox" />
    <label for="burger" class="burger-menu">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  <div class="fullscreen-nav-container"
    style="background-image: url('{{ $data.homepage.fullscreen_nav.bg_image | absURL }}');">
    <div class="container-fluid">
      <div class="full-nav-container row">
        <div class="full-nav-holder">
          <div class="full-nav-content">
            <div class="name">
              {{ with $data.homepage.fullscreen_nav.first_name }}<div class="first-name">{{ . }}</div>{{ end }}
              {{ with $data.homepage.fullscreen_nav.last_name }}<div class="last-name">{{ . }}</div>{{ end }}
            </div>
            <div class="fulscreen-nav">
              <ul class="list-inline fullscreen-nav-holder">
                {{ range .Site.Menus.main }}
                <li><a class="text-uppercase" href="{{ .URL }}">{{ .Name }}</a></li>
                {{ end }}
              </ul>
            </div>
            <div class="full-nav-icon-holder">
              <ul class="full-nav-icons list-inline">
                {{ range .Site.Params.social }}
                <li><a href="{{ .link | safeURL }}"><i class="fa {{ .icon }}"></i></a></li>
                {{ end }}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ end }}
</section>
<!-- =============================
       End Header
    =============================== -->

<!-- =============================
      Start Services
    =============================== -->
<section class="services" id="service">
  {{ if $data.homepage.service.enable }}
  {{ with $data.homepage.service }}
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mx-auto col-sm-12">
        <div class="wow fadeInUp" data-wow-duration="1.5s">
          <div class="services-heading">
            <div class="bar"></div>
            <h1>{{ .title }}</h1>
            <p style="margin-bottom:50px">{{ .main_description | markdownify }}</p>
          </div>

          <div class="row">
            {{ range .service_list }}
            <!--<div class="col-lg-4 col-sm-4 col-12 services-icon">
              <div class="service-img">
                <img class="img-fluid" src="{{ .image | absURL }}" alt="{{ .name | markdownify }}">
              <div class="service-label">{{ .name | markdownify }}</div>
              </div>
              <div class="service-description">{{ .description | markdownify }}</div>
            </div>-->
            <div class="col-lg-3 col-sm-3">
                <div class="service-label">
                    <img class="service-img img-fluid" src="{{ .image | absURL }}" alt="{{ .name | markdownify }}">
                    <h4 style="margin-top:10px">{{ .name | markdownify }}</h4>
                </div>
                <p class="service-description">{{ .description | markdownify }}</p>
            </div>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ end }}
  {{ end }}

  {{ if $data.homepage.call_to_action.enable }}
  {{ with $data.homepage.call_to_action }}
  <div class="need-service wow fadeInUp" data-wow-duration="1.5s"
    style="background-image: url('{{ .bg_image | absURL }}');">
    <h1>{{ .title | markdownify }}</h1>
    {{ with .content }} <p class="text-white">{{ . | markdownify }}</p> {{ end }}
    {{ if .button.enable }}
    {{ with .button }}
    <a href="{{ .link }}">{{ .label }}</a>
    {{ end }}
    {{ end }}
  </div>
  {{ end }}
  {{ end }}
</section>
<!-- =============================
       End Services
    =============================== -->

<!-- =============================
       Start About Me
    =============================== -->
<section class="about-me" id="about">
  <div class="container">
    {{ if $data.homepage.about.enable }}
    {{ with $data.homepage.about }}
    <div class="row about-me-holder">
      <div class="col-lg-6 col-md-6 col-sm-6 about-me-text d-flex align-self-center">
        <div class="text-holder wow fadeInUp" data-wow-duration="1.5s">
          <h1>{{ .title | safeHTML }}</h1>
          <p>{{ .content | markdownify | emojify }}</p>
          {{ if .button.enable }}
          {{ with .button }}
          <a href="{{ .link | absURL }}" target="_blank" class="download-cv hvr-icon-hang"> {{ .label }} &nbsp; &nbsp; &nbsp;</a>
          {{ end }}
          {{ end }}
        </div>
      </div>
      {{ with .image }}
      <div class="col-lg-6 col-sm-6 col-9 about-me-images wow fadeInUp" data-wow-duration="1.5s">
        <img class="img-fluid" src="{{ . | absURL }}" alt="about-me">
      </div>
      {{ end }}
    </div>
    {{ end }}
    {{ end }}

    <div class="row experience-skill">
      {{ if $data.homepage.experience.enable }}
      {{ with $data.homepage.experience }}
      <div class="col-lg-6 col-sm-6 col-11 experience wow fadeInUp" data-wow-duration="1.5s">
        <h3>{{ .title }}</h3>
        <ul class="experience-chart">
          {{ range .experience_list }}
          <li>
            <div class="single-experience">
              <h4>{{ .name | markdownify }}</h4>
              {{ with .company }} <span>{{ . | markdownify }} |</span> {{ end }}
              {{ with .duration }} <span>{{ . | markdownify }}</span> {{ end }}
              {{ with .content }} <p>{{ . | markdownify}}</p> {{ end }}
            </div>
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}
      {{ end }}

      {{ if $data.homepage.skill.enable }}
      {{ with $data.homepage.skill }}
      <div class="col-lg-6 col-sm-6 col-11 skill wow fadeInUp" data-wow-duration="1.5s">
        <h3>{{ .title }}</h3>
        <div class="skill-progress-bar">
          {{ range .skill_list }}
          <div class="clearfix">
            <span class="skillbar-title">{{ .name }}</span>
            {{ if $data.homepage.skill.showpercent }}
            <span class="skill-bar-percent">{{ .parcentage }}</span>
            {{ end }}
            <div class="skillbar" data-percent="{{ .parcentage }}">
              <div class="skillbar-bar"></div>
            </div>
          </div>
          {{ end }}
        </div>
      </div>
      {{ end }}
      {{ end }}
    </div>
  </div>
</section>
<!-- =============================
      End About Me
    =============================== -->

<!-- =============================
      Start Certification
    =============================== -->
<section class="certifications" id="certification">
  {{ if $data.homepage.certification.enable }}
  {{ with $data.homepage.certification }}
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto col-sm-10">
        <div class="wow fadeInUp" data-wow-duration="1.5s">
          <div class="certifications-heading">
            <div class="bar"></div>
            <h1>{{ .title }}</h1>
          </div>
          <div class="row">
            {{ range .certification_list }}
            <div class="col-lg-4 col-sm-4 col-12 certifications-icon">
              <div class="certification-img">
                <img class="img-fluid" src="{{ .image | absURL }}" alt="{{ .name | markdownify }}">
              </div>
              <div class="certification-label">{{ .name | markdownify }}</div>
            </div>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ end }}
  {{ end }}

</section>
<!-- =============================
       End Certifications
    =============================== -->

<!-- =============================
       Start Portfolio
    =============================== -->
{{ if $data.homepage.portfolio.enable }}
{{ with $data.homepage.portfolio }}
<section class="portfolio" id="portfolio">
  <div class="container-fluid text-center">
    <div class="row portfolio-holder text-left">
      <div class="col-12 text-center">
        <h1 class="wow fadeInUp" data-wow-duration="1.5s">{{ .title }}</h1>
        <div class="filtering wow fadeInUp" data-wow-duration="1.5s">
          <ul class="portfolio-navigation">
            <li data-filter="all" class="hvr-sweep-to-right active">All Items</li>
            {{ $categories := slice }}
            {{ range .portfolio_list }}
            {{ $categories = $categories | append .category }}
            {{ end }}
            {{ range ( $categories | uniq ) }}
            <li data-filter="{{ . | urlize }}" class="hvr-sweep-to-right">{{ . | humanize }}</li>
            {{ end }}
          </ul>
        </div>
      </div>
      <div class="col-lg-10 col-md-10 col-sm-10 col-10 mx-auto">
        <div class="row filtr-container wow fadeInUp list" data-wow-duration="1.5s">
          {{ range .portfolio_list }}
          <div class="col-lg-4 col-md-6 col-sm-6 col-12 filtr-item" data-category="{{ .category | urlize }}">
            <div class="item-holder">
              <a href="{{ .image | absURL }}" title="{{ .name | safeHTML }}">
                  <img src="{{ .image | absURL }}" alt="{{ .name | safeHTML }}">
                <div class="item-caption">
                  <h2>{{ .name | safeHTML }}</h2>
                  <p>{{ .category | title }}</p>
                  <div class="item-created">{{ .date }}</div>
                </div>
              </a>
            </div>
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- =============================
       End Portfolio
    =============================== -->

<!-- =============================
       Start Testimonials
    =============================== -->
{{ if $data.homepage.testimonial.enable }}
{{ with $data.homepage.testimonial }}
<section class="testimonials" id="testimonial">
  <div class="container">
    <div class="row">
      <div class="testimonials-container col-lg-8 offset-lg-2">
        <h1 class="wow fadeInUp" data-wow-duration="1.5s">{{ .title }}</h1>
        <div class="owl-carousel owl-theme wow fadeInUp" data-wow-duration="1.5s">
          {{ range .testimonial_slider }}
          <div class="single-testimonial">
            <div class="testimonial-holder">
              <img class="img-fluid" src="{{ .image | absURL }}" alt="{{ .name }}">
              <h2>{{ .name }}</h2>
              <span>{{ .designation | markdownify }}</span>
              <p><i class="fa fa-quote-left"></i> {{ .content | markdownify }} <i class="fa fa-quote-right"></i></p>
            </div>
          </div>
          {{ end }}
        </div>
        {{ end }}
        {{ end }}

        {{ if $data.homepage.funfacts.enable }}
        {{ with $data.homepage.funfacts }}
        <div class="fun-facts wow fadeInUp" data-wow-duration="1.5s">
          {{ range .funfacts_list }}
          <div class="fun-fact-holder">
            <img class="img-fluid" src="{{ .image | absURL }}" alt="{{ .name }}">
            <p class="fact-counter count" data-count="{{ .count }}">0</p>
            <p>{{ .name }}</p>
          </div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- =============================
       End Testimonials
    =============================== -->

<!-- =============================
       Start Contact
    =============================== -->
{{ if $data.homepage.contact.enable }}
<section class="contact" id="contact">
  <div class="container">
    <div class="row">
      <div class="contact-holder col-lg-8 offset-lg-2 col-sm-8 offset-sm-2">
        <h1 class="wow fadeInUp" data-wow-duration="1.5s">{{ $data.homepage.contact.title }}</h1>
        <form method="POST" action="{{ .Site.Params.contact_form_action }}" data-toggle="validator">
          <div class="form-container row wow fadeInUp" data-wow-duration="1.5s">
            <div class="form-group col-lg-6">
              <input class="form-control" type="text" name="username" id="username" placeholder="Name" required>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group col-lg-6">
              <input class="form-control" type="email" id="email" name="email" placeholder="Email" required>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group col-lg-12">
              <textarea class="form-control" name="message" id="message" rows="12" placeholder="{{ i18n "message" }}"></textarea>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group col-lg-12 sub-button">
              <button class="submit form-control hvr-icon-push" type="submit" value="send"> {{ i18n "send" }} </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="footer col-lg-10 offset-lg-1">
        <hr>
        <ul class="footer-icons list-inline">
          {{ range .Site.Params.social }}
          <li><a href="{{ .link | safeURL }}" target="_blank"><i class="fa {{ .icon }}"></i></a></li>
          {{ end }}
        </ul>
        <div class="to-top">
          <a href="#home"><i class="fa fa-chevron-up"></i></a>
        </div>
        <div class="credit">
          <i class="fa fa-copyright"></i> {{ .Site.Params.copyright | markdownify }}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- =============================
       End Contact
    =============================== -->
<a href="#home" class="scroll-up hvr-icon-up"></a>

{{ end }}