{{ partial "header.html" . }}
<body>

<div id="top"> <!-- Where all the awesome begins -->

<div class="hero is-{{ .Site.Params.introHeight | default "fullheight" }}">
<!-- Possible hero-head not used -->
    <!-- Super sweet Hero body title -->
    <div class="hero-body">
        <div class="container has-text-centered">
            <!-- Title and tagline -->
            <h1 class="bold-title {{ if .Site.Params.fadeIn | default true }}fade-in one{{ end }}">
                Hi, I'm {{ .Site.Params.firstName | default "Introduction" }}.
            </h1>
            <h3 class="subtitle is-3 {{ if .Site.Params.fadeIn | default true }}fade-in two{{ end }}">
                {{ .Site.Params.tagLine }}
            </h3>
            <!-- End title and tagline -->
            <!-- Some social icons -->
            <div class=" {{ if .Site.Params.fadeIn | default true }}fade-in three{{ end }}">
                {{ partial "social.html" . }}
            </div>
            <!-- End top social icons -->
        </div>
    </div> <!-- Hero body title end -->
    <!-- Hero foot has nav bar -->
    <div class="hero-foot {{ if .Site.Params.fadeIn | default true }}fade-in three{{ end }}">
    <hr>
    <nav class="nav-center">
        {{ if (.Site.GetPage "page" "about") }}
        <a class="nav-item" href="#about">About</a>
        {{ end }}
        {{ if .Site.Params.showProjects }}
        <a class="nav-item" href="#projects">Projects</a>
        {{ end }}
        {{ if .Site.Params.showBlog }}
        <a class="nav-item" href="#blog">Blog</a>
        {{ end }}
        {{ if (.Site.GetPage "page" "contact") }}
        <a class="nav-item" href="#contact">Contact</a>
        {{ end }}
    </nav>
    <hr>
    </div><!-- Done with nav bar -->
</div><!-- Done with Hero -->

<!-- Everything below fades in three! -->
<div class="section no-padding {{ if .Site.Params.fadeIn | default true }}fade-in three{{ end }}">

<!-- Tell them all about it! -->
{{ if (.Site.GetPage "page" "about") }}
<div class="section" id="about">
    <div class="container">
    <h2 class="title is-2 has-text-centered">About</h2>

        <div class="columns"><!-- Avatar and about.md side by side except mobile -->
            {{ if .Site.Params.avatar }}
            <div class="column is-one-third has-text-centered">
              <img class="img-responsive avatar" src="{{ .Site.Params.avatar | relURL }}" alt="My profile picture.">
            </div>
            {{ end }}
            <div class="column markdown">
                {{ (.Site.GetPage "page" "about").Content }}
            </div>
        </div>
    </div><!-- End About container-->

<div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div>
</div><!-- End About section -->

<div class="container"><hr></div>
{{ end }}

<!-- Now for some cool projects -->
    {{ if .Site.Params.showProjects }}
    <div class="section" id="projects">
        {{ partial "projects.html" . }}
    </div><!-- End Projects section -->

    <div class="container"><hr></div>
    {{ end }}


<!-- Let's show some blog posts -->
    {{ if .Site.Params.showBlog }}
    <div class="section" id="blog">
        {{ partial "blogsection.html" . }}
    </div><!-- End Blog section -->

    <div class="container"><hr></div>
    {{ end }}

<!-- Let's chat, shall we? -->
{{ if (.Site.GetPage "page" "contact") }}
<div class="section" id="contact">
    <div class="container has-text-centered">
    <h2 class="title is-2">Contact</h2>
        <div class="markdown">
            {{ (.Site.GetPage "page" "contact").Content }}
        </div>

        {{ if .Site.Params.localTime }}
        <p>My current local time is <span id="time"></span>.</p>
        <script type="text/javascript" src="{{ "/js/moment.js" | relURL }}"></script>
        <script type="text/javascript" src="{{ "/js/moment-timezone.js" | relURL }}"></script>
        <script type="text/javascript" src="{{ "/js/moment-timezone-with-data-2012-2022.js" | relURL }}"></script>

        <script>
        $(document).ready(function() {
        var time = moment().tz("{{ .Site.Params.timeZone }}").format("h:mm A");
        $('#time').html(time);
        })
        </script>
        {{ end }}

        {{ if .Site.Params.email }}
        <h3 class="subtitle is-3 has-text-centered top-pad"><a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a></h3>
        {{ end }}

        {{ partial "social.html" . }}
    </div><!-- End Contact container -->

	<div class="container has-text-centered top-pad"><a href="#top"><i class="fa fa-arrow-up"></i></a></div>
</div><!-- End Contact section -->

<div class="container"><hr></div>
{{ end }}

<!-- Nice clean finish -->
{{ partial "footer.html" . }}
<!-- Footer done! -->
</div><!-- End of fade in three section -->
<!-- Where all the awesome ends. Aww. -->

<!-- Bitty scrolling links script -->
<script>
$('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $('html, body').animate({
    scrollTop: $(target).offset().top
    }, 500);
    return false;
})
</script>

</body>
