hugo-theme-introduction/layouts/index.html

150 lines
4.9 KiB
HTML

{{ partial "header.html" . }}
<body>
<div class="section" id="top"> <!-- Where all the awesome begins -->
<div class="hero is-{{ .Site.Params.introheight }}">
<!-- 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 }}fade-in one{{ end }}">
Hi, I'm {{ .Site.Params.firstname }}.
</h1>
<h3 class="subtitle is-3 {{ if.Site.Params.fadein }} fade-in two{{ end }}">
{{ .Site.Params.tagline }}
</h3>
<!-- End title and tagline -->
<!-- Some social icons -->
<div class="{{ if .Site.Params.fadein }}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 }}fade-in three{{ end }}">
<hr>
<nav class="nav-center">
<a class="nav-item" href="#about">About</a>
{{ 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 }}
<a class="nav-item" href="#contact">Contact</a>
</nav>
<hr>
</div><!-- Done with nav bar -->
</div><!-- Done with Hero -->
</div><!-- End of top section -->
<!-- Everything below fades in three! -->
<div class="section no-padding {{ if .Site.Params.fadein }}fade-in three{{ end }}">
<!-- Tell them all about it! -->
<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 }}" alt="My profile picture.">
</div>
{{ end }}
<div class="column markdown">
{{ range .Data.Pages }}
{{if eq .Title "About" }}
{{.Content}}
{{end}}
{{ end }}
</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>
<!-- 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? -->
<div class="section" id="contact">
<div class="container has-text-centered">
<h2 class="title is-2">Contact</h2>
<div class="markdown">
{{ range .Data.Pages }}
{{if eq .Title "Contact" }}
{{.Content}}
{{end}}
{{ end }}
</div>
{{ if .Site.Params.localtime }}
<p>My current local time is <span id="time"></span>.</p>
<script type="text/javascript" src="/js/moment.js"></script>
<script type="text/javascript" src="/js/moment-timezone.js"></script>
<script type="text/javascript" src="/js/moment-timezone-with-data-2012-2022.js"></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>
<!-- 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>