Make header linkable + fix bug
This commit is contained in:
hossainemruz
parent
6cc935dfbc
commit
b57d2bcf52
13 changed files with 124 additions and 163 deletions
|
|
@ -5,13 +5,11 @@ company:
|
|||
name: Example Co.
|
||||
url: "https://www.example.com"
|
||||
|
||||
# your resume
|
||||
# your resume. this file path should be relative to you "static" directory
|
||||
resume: "files/resume.pdf"
|
||||
|
||||
# a summary about you
|
||||
summary: 'I am a passionate software engineer with x years of working
|
||||
experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools helps people to
|
||||
deploy their workloads in Kuberenetes. Sometimes, I work on some fun projects such as writing a theme etc.'
|
||||
summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.'
|
||||
|
||||
# your social links
|
||||
# give as many as you want. use font-awesome for the icons.
|
||||
|
|
@ -38,9 +36,10 @@ socialLinks:
|
|||
|
||||
- name: Facebook
|
||||
icon: "fab fa-facebook"
|
||||
url: "#"
|
||||
|
||||
# your soft skills
|
||||
# give the percentage between 50 to 100 with 5 interval.
|
||||
# give the percentage between 50 to 100 with 5 intervals.
|
||||
# currently supported color: blue, yellow, pink, green
|
||||
softSkills:
|
||||
- name: Leadership
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
|
||||
{{ define "scripts" }}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
|
||||
<script src="/assets/js/single.js"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,41 @@
|
|||
<div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
|
||||
<div class="container">
|
||||
<div class="row pt-sm-2 pt-md-4 align-self-center">
|
||||
<!-- summery -->
|
||||
<div class="col-md-6">
|
||||
<h3 class="p-1">{{ .Site.Data.home.author.name }}</h3>
|
||||
<h5 class="p-1">
|
||||
{{ .Site.Data.about.designation }} at
|
||||
<a href="{{ .Site.Data.about.company.url }}"
|
||||
>{{ .Site.Data.about.company.name }}</a
|
||||
{{ if .Site.Data.about }}
|
||||
<!-- summery -->
|
||||
<div class="col-md-6">
|
||||
<h3 class="p-1">{{ .Site.Data.home.author.name }}</h3>
|
||||
<h5 class="p-1">
|
||||
{{ .Site.Data.about.designation }} at
|
||||
<a href="{{ .Site.Data.about.company.url }}"
|
||||
>{{ .Site.Data.about.company.name }}</a
|
||||
>
|
||||
</h5>
|
||||
<p class="p-1 text-justify">
|
||||
{{ .Site.Data.about.summary | markdownify }}
|
||||
</p>
|
||||
<div class="text-container ml-auto">
|
||||
<ul class="social-link d-flex">
|
||||
{{ range .Site.Data.about.socialLinks }}
|
||||
<li>
|
||||
<a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ .Site.Data.about.resume }}" target="#"
|
||||
><button class="btn btn-dark">My Resume</button></a
|
||||
>
|
||||
</h5>
|
||||
<p class="p-1 text-justify">
|
||||
{{ .Site.Data.about.summary | markdownify }}
|
||||
</p>
|
||||
<div class="text-container ml-auto">
|
||||
<ul class="social-link d-flex">
|
||||
{{ range .Site.Data.about.socialLinks }}
|
||||
<li>
|
||||
<a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
|
||||
</li>
|
||||
</div>
|
||||
<!-- soft skills circular-progressbar -->
|
||||
<div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
|
||||
<div class="row">
|
||||
{{ range .Site.Data.about.softSkills }}
|
||||
{{ partial "progress/soft-skills" . }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ .Site.Data.about.resume }}" target="#"
|
||||
><button class="btn btn-dark">My Resume</button></a
|
||||
>
|
||||
</div>
|
||||
<!-- soft skills circular-progressbar -->
|
||||
<div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
|
||||
<div class="row">
|
||||
{{ range .Site.Data.about.softSkills }}
|
||||
{{ partial "progress/soft-skills" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
|
||||
<h1 class="text-center">Achievements</h1>
|
||||
{{ if .Site.Data.achievements }}
|
||||
<h1 class="text-center">Achievements</h1>
|
||||
|
||||
<div class="container">
|
||||
<div class="row" id="gallery">
|
||||
<div class="container">
|
||||
<div class="row" id="gallery">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- achievements-holder holds achievement-entry -->
|
||||
<div class="d-none" id="achievements-holder">
|
||||
{{ range .Site.Data.achievements.achievements }}
|
||||
{{ partial "misc/achievement.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- achievements-holder holds achievement-entry -->
|
||||
<div class="d-none" id="achievements-holder">
|
||||
{{ range .Site.Data.achievements.achievements }}
|
||||
{{ partial "misc/achievement.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<a href="{{ .RelPermalink }}" class="post-card-link">
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<img class="card-img-top" src='{{ partial "helpers/get-hero.html" .Params }}'
|
||||
<img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'
|
||||
alt="Card image cap"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<div class="container-fluid experiences bg-white anchor" id="experiences">
|
||||
<h1 class="text-center">Experiences</h1>
|
||||
<div class="container timeline text-justify">
|
||||
{{ if .Site.Data }}
|
||||
{{ if .Site.Data.experiences }}
|
||||
<h1 class="text-center">Experiences</h1>
|
||||
|
||||
<div class="container timeline text-justify">
|
||||
{{ $total:= len .Site.Data.experiences.experiences }}
|
||||
{{ range $idx,$val:= .Site.Data.experiences.experiences }}
|
||||
{{ if eq (mod $idx 2) 0 }}
|
||||
|
|
@ -22,6 +23,6 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@
|
|||
<div class="row text-left">
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<h5>Navigation</h5>
|
||||
<ul>
|
||||
{{ range .Site.Data.site.menus }}
|
||||
<li class="nav-item">
|
||||
<a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ if .Site.Data.site }}
|
||||
<ul>
|
||||
{{ range .Site.Data.site.menus }}
|
||||
<li class="nav-item">
|
||||
<a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<h5>Contact Me</h5>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="container-fluid home" id="home">
|
||||
<div
|
||||
class="background container-fluid"
|
||||
style="background-image: url('{{ .Site.Data.site.background }}');"
|
||||
style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
|
||||
></div>
|
||||
<div class="container content text-center">
|
||||
<img
|
||||
src="{{ .Site.Data.site.author.image }}"
|
||||
<img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
|
||||
class="rounded-circle mx-auto d-block img-fluid"
|
||||
/>
|
||||
<h1 class="greeting">Hi, I am {{ .Site.Data.site.author.name -}}</h1>
|
||||
<h1 class="greeting">Hi, I am {{ if .Site.Data.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }}
|
||||
</h1>
|
||||
<div class="typing-carousel">
|
||||
<span id="ityped" class="ityped"></span>
|
||||
<span class="ityped-cursor"></span>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
<div class="container-fluid projects bg-dimmed anchor pb-5" id="projects">
|
||||
<h1 class="text-center">Projects</h1>
|
||||
<div class="container ml-auto text-center">
|
||||
<div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
|
||||
{{ range .Site.Data.projects.buttons }}
|
||||
<button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
|
||||
{{ .name }}
|
||||
</button>
|
||||
{{ end }}
|
||||
{{ if .Site.Data.projects }}
|
||||
<h1 class="text-center">Projects</h1>
|
||||
<div class="container ml-auto text-center">
|
||||
<div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
|
||||
{{ range .Site.Data.projects.buttons }}
|
||||
<button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
|
||||
{{ .name }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container filtr-projects">
|
||||
<div class="row" id="project-card-holder">
|
||||
{{ range .Site.Data.projects.projects }}
|
||||
{{ partial "cards/project" . }}
|
||||
{{ end }}
|
||||
<div class="container filtr-projects">
|
||||
<div class="row" id="project-card-holder">
|
||||
{{ range .Site.Data.projects.projects }}
|
||||
{{ partial "cards/project" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<h1 class="text-center">Recent Posts</h1>
|
||||
<div class="container">
|
||||
<div class="row" id="recent-post-cards">
|
||||
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "!=" "section" )}}
|
||||
{{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
|
||||
{{ partial "cards/recent-post.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
|
||||
<h1 class="text-center">Skills</h1>
|
||||
{{ if .Site.Data.skills }}
|
||||
<h1 class="text-center">Skills</h1>
|
||||
|
||||
<div class="container d-flex-block">
|
||||
<div class="row" id="primary-skills">
|
||||
{{ range .Site.Data.skills.skills }}
|
||||
{{ partial "cards/skill.html" . }}
|
||||
{{ end }}
|
||||
<div class="container d-flex-block">
|
||||
<div class="row" id="primary-skills">
|
||||
{{ range .Site.Data.skills.skills }}
|
||||
{{ partial "cards/skill.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -136,6 +136,24 @@ pre>code {
|
|||
padding: 10px !important;
|
||||
}
|
||||
|
||||
a.header-anchor{
|
||||
text-decoration: none;
|
||||
color: #1c2d41;
|
||||
}
|
||||
|
||||
a.header-anchor i{
|
||||
font-size: 10pt;
|
||||
color: #3c4858;
|
||||
display: none;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
a.header-anchor:hover i{
|
||||
display: inline-block;
|
||||
}
|
||||
a.header-anchor code{
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,87 +19,19 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
}
|
||||
}
|
||||
detectDevice();
|
||||
console.log(isMobile);
|
||||
|
||||
// ======= Add table wrapper ===========
|
||||
function adjustPostCardsHeight() {
|
||||
if (!isMobile) { // no need to adjust height for mobile devices
|
||||
let el = document.getElementById("post-cards").children;
|
||||
let maxHeight = 0;
|
||||
for (let i = 0; i < el.length; i++) {
|
||||
if (el[i].children[0].clientHeight > maxHeight) {
|
||||
maxHeight = el[i].children[0].clientHeight;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < el.length; i++) {
|
||||
el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
|
||||
}
|
||||
// =========== Add anchor to the headers ================
|
||||
function addAnchor(element) {
|
||||
element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link"></i></sup></a>`;
|
||||
}
|
||||
|
||||
var headerTypes = ["h1", "h2", "h3", "h4", "h5", "h6"];
|
||||
for (var i = 0; i < headerTypes.length; i++) {
|
||||
var headers = document.querySelectorAll(headerTypes[i]);
|
||||
if (headers) {
|
||||
headers.forEach(addAnchor);
|
||||
}
|
||||
}
|
||||
adjustPostCardsHeight();
|
||||
|
||||
// ============= Sidebar Tre ================
|
||||
function buildSidebarMenu() {
|
||||
var openedClass = "fa-minus-circle";
|
||||
var closedClass = "fa-plus-circle";
|
||||
// initialize top level
|
||||
var tree = $("#tree");
|
||||
// add expand icon to those li who has ul as children
|
||||
tree.find("li").has("ul").each(function () {
|
||||
var branch = $(this);
|
||||
branch.prepend('<i class="fas ' + closedClass + '"></i>');
|
||||
branch.on('click', function (e) {
|
||||
if (this.children[1] == e.target) {
|
||||
// toggle "expand" class and icon
|
||||
branch.toggleClass("expand");
|
||||
var icon = $(this).children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// remove "expnad" class from siblings of the clicked item
|
||||
tree.find("li").on("click", function () {
|
||||
var item = $(this);
|
||||
var shiblings = item.siblings().each(function () {
|
||||
var sibling = $(this);
|
||||
if (sibling.hasClass("expand")) {
|
||||
sibling.removeClass("expand");
|
||||
var icon = sibling.children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// focus the cliked item
|
||||
tree.find("a").on("click", function () {
|
||||
// clear other focused link
|
||||
tree.find("a.focused").each(function () {
|
||||
$(this).removeClass("focused");
|
||||
});
|
||||
// focus cliked link
|
||||
$(this).addClass("focused");
|
||||
});
|
||||
}
|
||||
|
||||
buildSidebarMenu();
|
||||
// initialize filterizr
|
||||
filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
// toggle sidebar on click
|
||||
function toggleSidebar() {
|
||||
document.getElementById("sidebar").classList.toggle("hide");
|
||||
document.getElementById("content").classList.toggle("overley");
|
||||
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && $("#sidebar").hasClass("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
filterizd.filterizr('sort');
|
||||
}, 300);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue