{{ define "main" }}
{{ "<!-- Hexagon Stylesheet -->" | safeHTML }}
{{ $hexagons := resources.Get "css/hexagon.css" | minify }}
<link rel="stylesheet" href="{{ $hexagons.Permalink | relURL}}">

{{ "<!-- Index -->" | safeHTML }}
{{ $index := resources.Get "css/index.css" | minify }}
<link rel="stylesheet" href="{{ $index.Permalink | relURL}}">
<!--
  _    _
 | |  | |                             /\
 | |__| |   ___   _ __    ___        /  \     _ __    ___    __ _
 |  __  |  / _ \ | '__|  / _ \      / /\ \   | '__|  / _ \  / _` |
 | |  | | |  __/ | |    | (_) |    / ____ \  | |    |  __/ | (_| |
 |_|  |_|  \___| |_|     \___/    /_/    \_\ |_|     \___|  \__,_|

 -->
<section>
    <div class="uk-container uk-margin-xlarge-top uk-margin-xlarge-bottom">

        <h1 class="uk-heading-large">{{ .Site.Data.homepage.banner.title | safeHTML }}</h1>
    </div>


</section>
<!--
   _____                  _           _     _        _           _
  / ____|                (_)         | |   | |      (_)         | |
 | (___     ___     ___   _    __ _  | |   | |       _   _ __   | | __  ___
  \___ \   / _ \   / __| | |  / _` | | |   | |      | | | '_ \  | |/ / / __|
  ____) | | (_) | | (__  | | | (_| | | |   | |____  | | | | | | |   <  \__ \
 |_____/   \___/   \___| |_|  \__,_| |_|   |______| |_| |_| |_| |_|\_\ |___/


-->
<div class="uk-text-center uk-margin-xlarge-bottom uk-margin-xlarge-top">
    <ul id="links" class="icons">
        {{ range .Site.Languages -}}
        {{ if ne .LanguageName $.Site.Language.LanguageName }}
        <li><a href="/{{ .Lang }}">{{ .LanguageName }}</a></li>
        {{ end }}
        {{ end }}
        {{ if .Site.Data.homepage.social.twitter }}
        <li><a href="https://twitter.com/{{ .Site.Data.homepage.social.twitter }}" > <img
                    class="contain" src="https://cdn.svgporn.com/logos/twitter.svg" alt="Twitter" loading="lazy"></a></li>
        {{ end }} {{ if .Site.Data.homepage.social.linkedin }}
        <li><a href="https://www.linkedin.com/in/{{ .Site.Data.homepage.social.linkedin }}">
            <img class="contain" src="https://cdn.svgporn.com/logos/linkedin-icon.svg" alt="LinkedIn" loading="lazy"> </a></li>
        {{ end }} {{ if .Site.Data.homepage.social.bitbucket }}
        <li><a href="https://bitbucket.org/{{ .Site.Data.homepage.social.bitbucket }}"> <img
                    class="contain" src="https://cdn.svgporn.com/logos/bitbucket.svg" alt="Bitbucket" loading="lazy"> </a></li>
        {{ end }} {{ if .Site.Data.homepage.social.github }}
        <li><a href="https://github.com/{{ .Site.Data.homepage.social.github }}"> <img
                    class="contain" src="https://cdn.svgporn.com/logos/github-icon.svg" alt="GitHub" loading="lazy"> </a></li>
        {{ end }} {{ if .Site.Data.homepage.social.gitlab }}
        <li><a href="https://gitlab.com/{{ .Site.Data.homepage.social.gitlab }}"> <img
                    class="contain" src="https://cdn.svgporn.com/logos/gitlab.svg" alt="GitLab" loading="lazy"></a></li>
        {{ end }} {{ if .Site.Data.homepage.social.facebook }}
        <li><a href="https://www.facebook.com/{{ .Site.Data.homepage.social.facebook }}"> <img
                    class="contain" src="https://cdn.svgporn.com/logos/facebook.svg" alt="Facebook" loading="lazy"></a></li>
        {{ end }} {{ if .Site.Data.homepage.social.instagram }}
        <li><a href="https://instagram.com/{{ .Site.Data.homepage.social.instagram }}"> <img
                    class="contain" src="https://cdn.svgporn.com/logos/instagram-icon.svg" alt="Instagram" loading="lazy"></a></li>
        {{ end }}{{ if .Site.Data.homepage.social.gmail }}
        <li><a href="mailto:{{ .Site.Data.homepage.social.gmail }}@gmail.com" > <img
                    class="contain" src="https://cdn.svgporn.com/logos/google-gmail.svg" alt="Gmail" loading="lazy"></a></li>
        {{ end }}{{ if .Site.Data.homepage.social.hotmail }}
        <li><a href="mailto:{{ .Site.Data.homepage.social.hotmail }}@hotmail.com" > <img
                    class="contain" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/microsoftoutlook.svg" alt="Hotmail" loading="lazy"></a></li>
        {{ end }} {{ if .Site.Data.homepage.social.telegram }}
        <li><a href="https://t.me/{{ .Site.Data.homepage.social.telegram }}"> <img
                    class="contain" src="https://cdn.svgporn.com/logos/telegram.svg" alt="Telegram" loading="lazy"></a></li>
        {{ end }} {{ if .Site.Data.homepage.social.whatsapp }}
        <li><a href="https://wa.me/{{ .Site.Data.homepage.social.whatsapp}}"> <img
                    class="contain" src="https://cdn.svgporn.com/logos/whatsapp.svg" alt="Whatsapp" loading="lazy"></a></li>
        {{ end }}
    </ul>


</div>

<!--
             _                       _
     /\     | |                     | |
    /  \    | |__     ___    _   _  | |_
   / /\ \   | '_ \   / _ \  | | | | | __|
  / ____ \  | |_) | | (_) | | |_| | | |_
 /_/    \_\ |_.__/   \___/   \__,_|  \__|

-->
{{ if .Site.Data.homepage.about.enable }}
<!-- about -->

<section class="uk-margin-large-top">
    <div class="uk-container">
        <div class="uk-text-center">
            {{ with .Site.Data.homepage.about }}
            <p class="uk-text-lead">{{.content | markdownify}}</p>
            {{ with .button }}
            <a class="uk-button uk-button-text" href="{{.URL| absURL}}">{{.btnText}}</a>
            {{end}}
            {{end}}
        </div>
    </div>

</section>


<!-- /about -->
{{ end }}




<!-- portfolio -->
{{ if .Site.Data.homepage.portfolio.enable }}

<section class="uk-margin-large-bottom uk-margin-large-top">
    <div class="uk-container">
        <h1 class="uk-heading-line  uk-heading-medium"><span>Portfolio</span></h1>
        {{ range .Site.Data.homepage.portfolio.item }}
        <div>
        <h2 class="uk-text-center uk-text-bold uk-margin-large-top"> {{.title}} </h2>
        <div class="uk-flex uk-flex-center">
        <img src="{{.image}}" class="uk-width-medium uk-width-large@s uk-height-large contain" >
        </div>
        <p class="uk-text-center">{{.description}}</p>  
        <div class="uk-flex uk-flex-center">
            <div uk-grid>
                {{ range .tools}}
            <div>
                <img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/{{.}}.svg" />
            </div>
            {{end}}
            </div>
        </div>
        <div class="uk-flex uk-flex-center uk-margin-medium-top"> 
        <a href="{{.link}}" class="uk-text-center">Find out more</a>
        </div>
        </div>
        {{end}}

</section>
{{ end }}


<!--

   _____   _      _   _   _
  / ____| | |    (_) | | | |
 | (___   | | __  _  | | | |  ___
  \___ \  | |/ / | | | | | | / __|
  ____) | |   <  | | | | | | \__ \
 |_____/  |_|\_\ |_| |_| |_| |___/



-->
{{ if .Site.Data.homepage.skill.enable }}

{{ range .Site.Data.homepage.skill.item }}
<div id="modal_{{cond (isset . "titlealt") .titlealt (replaceRE "\\W" "_" .title) }}" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">{{.title}}</h2>
        </div>
        <p>{{.description | safeHTML}}</p>
    </div>
</div>
{{ end }}

<section class="uk-margin-large-top uk-margin-large-bottom">
    <div class="uk-container">
        <h1 class="uk-heading-line uk-text-center uk-heading-medium"><span>Skills</span></h1>

        <p class="uk-text-center uk-text-lead"><i>Click the images below to find out more</i></p>
        <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-3@s uk-child-width-1-2 uk-text-center uk-flex-center"
            uk-grid>
            {{ range .Site.Data.homepage.skill.item }}
            <div class="imagemargin">
                <img class="contain skills" src="{{.logo}}" alt="{{.company}}" loading="lazy" style="cursor: pointer"
                    uk-toggle="target: #modal_{{cond (isset . "titlealt") .titlealt (replaceRE "\\W" "_" .title) }}">
                <h4>{{.title }}</h4>
            </div>
            {{ end }}
        </div>

    </div>

</section>






<!-- /skills -->
{{ end }}



<!--

  ______                                _
 |  ____|                              (_)
 | |__    __  __  _ __     ___   _ __   _    ___   _ __     ___    ___
 |  __|   \ \/ / | '_ \   / _ \ | '__| | |  / _ \ | '_ \   / __|  / _ \
 | |____   >  <  | |_) | |  __/ | |    | | |  __/ | | | | | (__  |  __/
 |______| /_/\_\ | .__/   \___| |_|    |_|  \___| |_| |_|  \___|  \___|
                 | |
                 |_|

-->




<!-- experience -->
{{ if .Site.Data.homepage.experience.enable }}

<section class="uk-margin-large-bottom">
    <div class="uk-container">
        <h1 class="uk-heading-line  uk-heading-medium"><span>Experience</span></h1>

        <div class="uk-child-width-1-4@m uk-child-width-1-2  uk-text-center uk-flex-center" uk-grid
            style="padding-left: 20px; padding-right: 20px">

            {{ range .Site.Data.homepage.experience.item }}
            <div>
                <div class="uk-card uk-card-default uk-height-large">
                    <div class="uk-card-media-top">
                        <img class="contain experience" src="{{.logo}}" alt="" style="padding: 20px" loading="lazy">
                    </div>
                    <div class="uk-card-body" style="padding: initial">
                        <div style="height: 5em">
                            <h3 class="uk-card-title uk-heading-small">{{.title}}</h3>
                        </div>
                        <p style="height: 4em">{{.company}}</p>
                        <p>{{.duration}}</p>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
</section>
{{ end }}

<!-- ./experience -->






<!-- Certifications -->
{{ if .Site.Data.homepage.certifications.enable }}


<section class="uk-margin-large-top uk-margin-medium-bottom">
    <div class="uk-container">
        <h1 class="uk-heading-line  uk-heading-medium"><span>Certifications</span></h1>

        <p class="uk-text-center uk-text-lead"><i>Click the images below to view the proof</i></p>
        <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-3@s uk-child-width-1-2 uk-text-center uk-flex-center"
             uk-grid >
            {{ range .Site.Data.homepage.certifications.item }}
            <a href="{{.url}}" class="imagemargin">
                <img class="contain certs" src="{{.image}}" alt="{{.title}}" loading="lazy" style="cursor: pointer">
                {{.title}}
            </a>

            {{ end }}
        </div>

    </div>

</section>





{{ end }}

<!-- /Certifications -->



<!-- Awards -->
{{ if .Site.Data.homepage.awards.enable }}


<section class="uk-margin-large-top uk-margin-medium-bottom">
    <div class="uk-container">
        <h1 class="uk-heading-line uk-heading-medium"><span>Awards and Achievements</span></h1>

        <div class="uk-child-width-1-6@l uk-child-width-1-3@m uk-child-width-1-3@s uk-child-width-1-2 uk-text-center uk-flex-center"
            uk-grid uk-height-match="target: > div > h4">
            {{ range .Site.Data.homepage.awards.item }}
            <div class="imagemargin">
                <img class="contain certs" src="{{.image}}" alt="{{.title}}" loading="lazy" >
                <h4>{{.title}}</h4>
                <p>{{.event}}</p>
                </div>

            {{ end }}
        </div>

    </div>

</section>





{{ end }}

<!-- /Awards -->

<!--Hackathons-->
{{ if .Site.Data.homepage.hackathons.enable }}

<section class="uk-margin-large-bottom">
    <div class="uk-container">
        <h1 class="uk-heading-line uk-heading-medium "><span>Hackathons</span></h1>
    </div>
    <p class="uk-text-center uk-text-lead"><i>Hover over the logos to find out more</i></p>
</section>
<div class="uk-container uk-margin-large-bottom uk-text-center">
    <ul id="hexGrid">
        {{range .Site.Data.homepage.hackathons.item}}
        <li class="hex">
            <div class="hexIn">
                <div class="hexLink">
                    <img src="{{.image}}" alt="{{.title}}" loading="lazy" />
                    {{if eq .url "none"}}
                    <div style="all:unset">

                        <h1>
                            {{.title}}</h1>
                    </div>
                    {{else}}
                    <a href="{{.url}}" class="text unset">

                        <h1>
                            {{.title}}</h1>
                    </a>

                    {{end}}
                    {{if eq .url "none"}}
                    <div style="all:unset">
                        <p>
                            {{.description}}</p>
                    </div>
                    {{else}}
                    <a href="{{.url}}" class="text unset">
                        <p>
                            {{.description}}</p>
                    </a>
                    {{end}}
                </div>
            </div>
        </li>
        {{end}}
    </ul>
</div>
{{end}}


<!--

  ______       _                          _     _
 |  ____|     | |                        | |   (_)
 | |__      __| |  _   _    ___    __ _  | |_   _    ___    _ __
 |  __|    / _` | | | | |  / __|  / _` | | __| | |  / _ \  | '_ \
 | |____  | (_| | | |_| | | (__  | (_| | | |_  | | | (_) | | | | |
 |______|  \__,_|  \__,_|  \___|  \__,_|  \__| |_|  \___/  |_| |_|



-->
{{ if .Site.Data.homepage.education.enable }}
<!-- education -->
<section class="uk-margin-xlarge-bottom">
    <div class="uk-container">

        <h1 class="uk-heading-line uk-heading-medium  uk-margin-large-bottom"><span>Education</span></h1>


        <div class=" uk-grid-large uk-child-width-1-3@s uk-child-width-1  uk-text-center uk-flex-center" uk-grid
            style="padding-left: 20px; padding-right: 20px">

            {{ range .Site.Data.homepage.education.item }}
            <div>
                <div class="uk-card uk-card-default uk-height-max-large">
                    <div class="uk-card-media-top">
                        <img class="contain experience" src="{{.image}}" alt="" style="padding: 20px" loading="lazy">
                    </div>
                    <div class="uk-card-body" style="padding-top: 0">
                        <div style="height: 5em">
                            <h3 class="uk-card-title">{{.academy}}</h3>
                        </div>
                        <p style="height: 4em">{{.title}}</p>
                        <p>{{.year}}</p>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
    </div>








</section>
{{ end }}


{{ end }}