diff options
author | Sam Robbins <samrobbinsgb@gmail.com> | 2020-06-07 18:10:17 +0300 |
---|---|---|
committer | Sam Robbins <samrobbinsgb@gmail.com> | 2020-06-07 18:10:17 +0300 |
commit | 46173c5f77bd72d2d5c9300d652e3e788607f602 (patch) | |
tree | a0737cecf89d4c566ae0265e9b51d2892677744f | |
parent | cff80cd0b48b6115a11bb86156a1d622b5e7a832 (diff) |
Update homepage to work without Bootstrap
-rw-r--r-- | assets/js/script.js | 129 | ||||
-rw-r--r-- | layouts/_default/baseof.html | 1 | ||||
-rw-r--r-- | layouts/index.html | 367 | ||||
-rw-r--r-- | layouts/partials/footer.html | 18 | ||||
-rw-r--r-- | layouts/partials/header.html | 8 | ||||
-rw-r--r-- | layouts/partials/preloader.html | 7 |
6 files changed, 185 insertions, 345 deletions
diff --git a/assets/js/script.js b/assets/js/script.js deleted file mode 100644 index bd33343..0000000 --- a/assets/js/script.js +++ /dev/null @@ -1,129 +0,0 @@ -(function ($) { - 'use strict'; - - // Preloader js - $(window).on('load', function () { - $('.preloader').fadeOut(100); - }); - - - // Sticky Menu - $(window).scroll(function () { - if ($('.navigation').offset().top > 100) { - $('.navigation').addClass('nav-bg'); - } else { - $('.navigation').removeClass('nav-bg'); - } - }); - - // Background-images - $('[data-background]').each(function () { - $(this).css({ - 'background-image': 'url(' + $(this).data('background') + ')' - }); - }); - - // background color - $('[data-color]').each(function () { - $(this).css({ - 'background-color': $(this).data('color') - }); - }); - - // progress bar - $('[data-progress]').each(function () { - $(this).css({ - 'bottom': $(this).data('progress') - }); - }); - - - - - // testimonial-slider - $('.testimonial-slider').slick({ - dots: true, - infinite: true, - speed: 300, - slidesToShow: 1, - arrows: false, - adaptiveHeight: true - }); - - - // clients logo slider - $('.client-logo-slider').slick({ - infinite: true, - slidesToShow: 5, - slidesToScroll: 1, - speed: 10, - autoplay: true, - dots: false, - arrows: false, - responsive: [{ - breakpoint: 1024, - settings: { - slidesToShow: 3, - slidesToScroll: 1 - } - }, - { - breakpoint: 600, - settings: { - slidesToShow: 3, - slidesToScroll: 1 - } - }, - { - breakpoint: 480, - settings: { - slidesToShow: 2, - slidesToScroll: 1 - } - }, - { - breakpoint: 400, - settings: { - slidesToShow: 1, - slidesToScroll: 1 - } - } - ] - }); - - // Shuffle js filter and masonry - var containerEl = document.querySelector('.shuffle-wrapper'); - if (containerEl) { - var Shuffle = window.Shuffle; - var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), { - itemSelector: '.shuffle-item', - buffer: 1 - }); - - jQuery('input[name="shuffle-filter"]').on('change', function (evt) { - var input = evt.currentTarget; - if (input.checked) { - myShuffle.filter(input.value); - } - }); - } - - - -})(jQuery); - - -// Get the container element -var btnContainer = document.getElementById("navigation"); - -// Get all buttons with class="btn" inside the container -var btns = btnContainer.getElementsByClassName("a"); - -// Loop through the buttons and add the active class to the current/clicked button -for (var i = 0; i < btns.length; i++) { - btns[i].addEventListener("click", function() { - var current = document.getElementsByClassName("active"); - current[0].className = current[0].className.replace(" active", ""); - this.className += " active"; - }); -}
\ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4db8c51..556e38b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,7 +2,6 @@ <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}"> {{- partial "head.html" . -}} <body class="{{.Section}}"> - {{- partial "preloader.html" . -}} {{- partial "header.html" . -}} {{- block "main" . }}{{- end }} {{- partial "footer.html" . -}} diff --git a/layouts/index.html b/layouts/index.html index 3134fe3..a6c6eab 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -15,18 +15,13 @@ |_| |_| \___| |_| \___/ /_/ \_\ |_| \___| \__,_| --> - <section class="hero-area bg-primary overflow-hidden" id="parallax"> - <div class="container"> - <div class="row"> - <div class="col-lg-11 mx-auto"> - <h1 class="text-black">{{ .Site.Data.homepage.banner.title | safeHTML }}</h1> - </div> - </div> - </div> - +<section> + <div class="uk-container uk-margin-xlarge-top uk-margin-xlarge-bottom"> - </section> + <h1 class="uk-heading-large">{{ .Site.Data.homepage.banner.title | safeHTML }}</h1> + </div> +</section> <!-- _____ _ _ _ _ _ / ____| (_) | | | | (_) | | @@ -37,32 +32,31 @@ --> -<div class="text-center"> +<div class="uk-text-center uk-margin-xlarge-bottom uk-margin-xlarge-top"> <ul id="social-media" 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 }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/twitter.svg" ></a></li> - {{ end }} {{ if .Site.Data.homepage.social.linkedin }} - <li><a href="https://www.linkedin.com/in/{{ .Site.Data.homepage.social.linkedin }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/linkedin.svg"></a></li> - {{ end }} {{ if .Site.Data.homepage.social.github }} - <li><a href="https://github.com/{{ .Site.Data.homepage.social.github }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/github-icon.svg"> </a></li> - {{ end }} {{ if .Site.Data.homepage.social.gitlab }} - <li><a href="https://gitlab.com/{{ .Site.Data.homepage.social.gitlab }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/gitlab.svg"></a></li> - {{ end }} {{ if .Site.Data.homepage.social.facebook }} - <li><a href="https://www.facebook.com/{{ .Site.Data.homepage.social.facebook }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/facebook.svg"></a></li> - {{ end }} {{ if .Site.Data.homepage.social.instagram }} - <li><a href="https://instagram.com/{{ .Site.Data.homepage.social.instagram }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/instagram-icon.svg"></a></li> - {{ end }}{{ if .Site.Data.homepage.social.gmail }} - <li><a href="mailto:{{ .Site.Data.homepage.social.gmail }}@gmail.com" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/google-gmail.svg"></a></li> - {{ end }} + {{ 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 }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/twitter.svg" ></a></li> + {{ end }} {{ if .Site.Data.homepage.social.linkedin }} + <li><a href="https://www.linkedin.com/in/{{ .Site.Data.homepage.social.linkedin }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/linkedin.svg"></a></li> + {{ end }} {{ if .Site.Data.homepage.social.github }} + <li><a href="https://github.com/{{ .Site.Data.homepage.social.github }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/github-icon.svg"> </a></li> + {{ end }} {{ if .Site.Data.homepage.social.gitlab }} + <li><a href="https://gitlab.com/{{ .Site.Data.homepage.social.gitlab }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/gitlab.svg"></a></li> + {{ end }} {{ if .Site.Data.homepage.social.facebook }} + <li><a href="https://www.facebook.com/{{ .Site.Data.homepage.social.facebook }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/facebook.svg"></a></li> + {{ end }} {{ if .Site.Data.homepage.social.instagram }} + <li><a href="https://instagram.com/{{ .Site.Data.homepage.social.instagram }}" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/instagram-icon.svg"></a></li> + {{ end }}{{ if .Site.Data.homepage.social.gmail }} + <li><a href="mailto:{{ .Site.Data.homepage.social.gmail }}@gmail.com" aria-hidden="true"></i> <img class="contain" src="https://cdn.svgporn.com/logos/google-gmail.svg"></a></li> + {{ end }} </ul> </div> - <!-- _ _ /\ | | | | @@ -72,24 +66,26 @@ /_/ \_\ |_.__/ \___/ \__,_| \__| --> - {{ if .Site.Data.homepage.about.enable }} - <!-- about --> - <section class="section"> - <div class="container"> - <div class="row"> - <div class="col-lg-10 mx-auto text-center"> - {{ with .Site.Data.homepage.about }} - <p class="lead text-dark">{{.content | markdownify}}</p> - {{ with .button }} - <a href="{{ .URL | absURL }}" class="btn btn-transparent">{{.btnText}}</a> - {{ end }} - {{ end }} +{{ 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> </div> - </section> - <!-- /about --> - {{ end }} + +</section> + + +<!-- /about --> +{{ end }} <!-- @@ -107,52 +103,42 @@ {{ if .Site.Data.homepage.skill.enable }} {{ range .Site.Data.homepage.skill.item }} -<div class="modal fade" id="{{ replace (replace .title " " "_") "." "_" }}" tabindex="-1" role="dialog" aria-labelledby="{{ replace (replace .title " " "_") "." "_" }}" aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="title_{{ replace (replace .title " " "_") "." "_" }}">{{.title}}</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - +<div id="{{ replace (replace .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 class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> - </div> </div> - </div> </div> {{ end }} - <!-- skills --> - <section class="section"> - <div class="container"> - <div class="row"> - <div class="col-lg-12 text-center"> - <h2 class="section-title">Skills</h2> - </div> - </div> - <div class="container"> - <h4 class="text-center"><i>Click the images below to find out more</i></h4> - <div class="row justify-content-center"> - {{ range .Site.Data.homepage.skill.item }} - <div class="imagemargin col-lg-2 col-md-4 col-sm-6 col-6 text-center"> - <img class="contain lazy skills" src="" data-src="{{.logo}}" alt="{{.company}}" data-toggle="modal" data-target="#{{ replace (replace .title " " "_") "." "_" }}"> - <h4>{{.title }}</h4> - </div> - {{ end }} +<section class="uk-margin-large-top uk-margin-large-bottom"> + <div class="uk-container"> + <h1 class="uk-heading-line uk-text-center"><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 lazy skills" src="" data-src="{{.logo}}" alt="{{.company}}" uk-toggle="target: #{{ replace (replace .title " " "_") "." "_" }}"> + <h4>{{.title }}</h4> + </div> + {{ end }} </div> - </div> + </div> - </section> - <!-- /skills --> - {{ end }} +</section> + + + + + + +<!-- /skills --> +{{ end }} <!-- @@ -170,35 +156,34 @@ - {{ if .Site.Data.homepage.experience.enable }} - <!-- experience --> - <section class="section"> - <div class="container"> - <div class="row justify-content-around"> - <div class="col-lg-12 text-center"> - <h2 class="section-title">Experience</h2> - </div> +{{ if .Site.Data.homepage.experience.enable }} +<!-- experience --> +<section class="uk-margin-large-bottom"> + + <div class="uk-container"> + <h1 class="uk-heading-line uk-text-center"><span>Experience</span></h1> + <div class="uk-child-width-1-4@l uk-child-width-1-2 uk-text-center uk-flex-between" 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"> - </div> - <div class="uk-card-body" style="padding-top: 0"> - <div style="height: 5em"> - <h3 class="uk-card-title">{{.title}}</h3> - </div> - <p style="height: 4em">{{.company}}</p> - <p>{{.duration}}</p> - </div> + {{ 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"> + </div> + <div class="uk-card-body" style="padding-top: 0"> + <div style="height: 5em"> + <h3 class="uk-card-title">{{.title}}</h3> + </div> + <p style="height: 4em">{{.company}}</p> + <p>{{.duration}}</p> + </div> + </div> + </div> + {{ end }} </div> - </div> - {{ end }} - </div> @@ -206,44 +191,39 @@ - </section> - <!-- ./experience --> - {{ end }} +</section> +<!-- ./experience --> +{{ end }} <!--Hackathons--> -<section class="section" > - <div class="container"> - <div class="row justify-content-around"> - <div class="col-lg-12 text-center"> - <h2 class="section-title">Hackathons</h2> - </div> - +<section class="uk-margin-large-bottom"> + <div class="uk-container"> + <h1 class="uk-heading-line uk-text-center"><span>Hackathons</span></h1> </div> - </div> </section> -<div class="text-center container"> - <ul id="hexGrid"> - {{range .Site.Data.homepage.hackathons.item}} - <li class="hex"> - <div class="hexIn"> - <div class="hexLink"> - <img src="{{.image}}" alt="{{.title}}" /> - - <a href="{{.url}}" class="text unset"> - - <h1> - {{.title}}</h1></a> - - <a href="{{.url}}" class="text unset"> - <p> - {{.description}}</p></a> - </div> - </div> - </li> - {{end}} - </ul> +<div class="uk-container uk-margin-large-bottom"> + <ul id="hexGrid"> + {{range .Site.Data.homepage.hackathons.item}} + <li class="hex"> + <div class="hexIn"> + <div class="hexLink"> + <img src="{{.image}}" alt="{{.title}}" /> + + <a href="{{.url}}" class="text unset"> + + <h1> + {{.title}}</h1></a> + + <a href="{{.url}}" class="text unset"> + <p> + {{.description}}</p></a> + </div> + </div> + </li> + {{end}} + </ul> </div> <!-- @@ -258,37 +238,34 @@ --> - {{ if .Site.Data.homepage.education.enable }} - <!-- education --> - <section class="section position-relative"> - <div class="container"> - - <div class="row justify-content-around"> - <div class="col-lg-12 text-center"> - <h2 class="section-title">Education</h2> - </div> - - - <div class="uk-child-width-1-2@l uk-child-width-1-2 uk-text-center uk-flex-between" 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"> - </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> +{{ if .Site.Data.homepage.education.enable }} +<!-- education --> +<section class="uk-margin-xlarge-bottom"> + <div class="uk-container"> + + <h1 class="uk-heading-line uk-text-center 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"> + </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> </div> - {{ end }} - </div> - </div> @@ -308,6 +285,8 @@ + + <!--Handle the lazy loading--> @@ -317,29 +296,29 @@ <script> - document.addEventListener("DOMContentLoaded", function() { - var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); - - if ("IntersectionObserver" in window) { - let lazyImageObserver = new IntersectionObserver(function(entries, observer) { - entries.forEach(function(entry) { - if (entry.isIntersecting) { - let lazyImage = entry.target; - lazyImage.src = lazyImage.dataset.src; - lazyImage.srcset = lazyImage.dataset.src; - lazyImage.classList.remove("lazy"); - lazyImageObserver.unobserve(lazyImage); - } - }); - }); - - lazyImages.forEach(function(lazyImage) { - lazyImageObserver.observe(lazyImage); - }); - } else { - // Possibly fall back to a more compatible method here - } - }); + document.addEventListener("DOMContentLoaded", function() { + var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); + + if ("IntersectionObserver" in window) { + let lazyImageObserver = new IntersectionObserver(function(entries, observer) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + let lazyImage = entry.target; + lazyImage.src = lazyImage.dataset.src; + lazyImage.srcset = lazyImage.dataset.src; + lazyImage.classList.remove("lazy"); + lazyImageObserver.unobserve(lazyImage); + } + }); + }); + + lazyImages.forEach(function(lazyImage) { + lazyImageObserver.observe(lazyImage); + }); + } else { + // Possibly fall back to a more compatible method here + } + }); </script> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 7ed4440..335715e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,15 +1,15 @@ <!-- footer --> <footer class="footer-section"> <div class="section-footer"> - <div class="container"> + <div class="uk-container"> <div class="contact" style="padding-bottom: 50px"> - <div class="row"> - <div class="col-md-4"> - <h5 class="text-light">Email</h5> + <div class="uk-grid-large text-center uk-flex-center" uk-grid> + <div> + <h5>Email</h5> <a href="mailto:{{.Site.Params.footer.email}}">{{.Site.Params.footer.email}}</a> </div> - <div class="col-md-4"> - <h5 class="text-light">Address</h5> + <div> + <h5>Address</h5> <div uk-lightbox> <a href="{{.Site.Params.footer.googlemaps}}" data-caption="{{.Site.Params.footer.address}}" data-type="iframe">{{.Site.Params.footer.address}}</a> </div> @@ -17,7 +17,7 @@ </div> </div> </div> - <div class="footer-copyright text-center py-3"> + <div class="footer-copyright uk-text-center" style="padding-bottom: 1rem"> <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="height: 1.2em; width: 1.2em;"> <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" style="height: 1.2em; @@ -38,8 +38,6 @@ {{ range .Site.Params.plugins.js}} <script src="{{ .URL | absURL }}"></script> {{ end }} -{{ "<!-- Main Script -->" | safeHTML }} -{{ $script := resources.Get "js/script.js" | minify}} -<script src="{{ $script.Permalink }}"></script> + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index f4d4dd6..6a5b31b 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -7,9 +7,9 @@ <div class="uk-navbar-right"> <ul class="uk-navbar-nav uk-visible@s"> {{if .IsHome}} - <li class="uk-active"><a style="font-size: 18px" href="/">{{ with .Site.Params.Home }} {{ . }} {{ end }}</a></li> + <li class="uk-active "><a style="font-size: 18px; text-transform: none" href="/">{{ with .Site.Params.Home }} {{ . }} {{ end }}</a></li> {{else}} - <li><a style="font-size: 18px" href="/">{{ with .Site.Params.Home }} {{ . }} {{ end }}</a></li> + <li><a style="font-size: 18px; text-transform: none" href="/">{{ with .Site.Params.Home }} {{ . }} {{ end }}</a></li> {{end}} {{ range .Site.Menus.main }} @@ -20,9 +20,9 @@ {{$aURL3 := index $aURL2 1}} {{$page3 := index $page2 1}} {{if eq $aURL3 $page3}} - <li class="uk-active"><a style="font-size: 18px" href="{{ .URL | relURL }}">{{.Name}}</a></li> + <li class="uk-active"><a style="font-size: 18px; text-transform:none" href="{{ .URL | relURL }}">{{.Name}}</a></li> {{else}} - <li><a style="font-size: 18px" href="{{ .URL | relURL }}">{{.Name}}</a></li> + <li><a style="font-size: 18px; text-transform: none" href="{{ .URL | relURL }}">{{.Name}}</a></li> {{end}} {{end}} </ul> diff --git a/layouts/partials/preloader.html b/layouts/partials/preloader.html deleted file mode 100644 index b84ee0e..0000000 --- a/layouts/partials/preloader.html +++ /dev/null @@ -1,7 +0,0 @@ -{{ if .Site.Params.preloader.enable }} -{{ "<!-- preloader start -->" | safeHTML }} -<div class="preloader"> - -</div> -{{ "<!-- preloader end -->" | safeHTML }} -{{ end }}
\ No newline at end of file |