Convert homepage into hugo templates

This commit is contained in:
hossainemruz 2020-04-14 21:35:57 +06:00
parent 7b25c40baa
commit 3873876e35
27 changed files with 317 additions and 982 deletions

View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>.Sites.name</title>
<title>{{- .Site.Title -}}</title>
{{- partial "head.html" . -}}
</head>
<body data-spy="scroll" data-target="#top-navbar" data-offset="50">
@ -11,9 +11,9 @@
{{- partial "navbar.html" . -}}
<!--- NAVBAR END ---->
<!--- LANDING SECTION START ---->
{{- partial "landing.html" . -}}
<!--- LANDING SECTION END ---->
<!--- Home SECTION START ---->
{{- partial "home.html" . -}}
<!--- Home SECTION END ---->
<!--- ABOUT SECTION START --->
{{- partial "about.html" . -}}

View file

@ -1,96 +1,39 @@
<!-- ABOUT START -->
<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-5 align-self-center">
<!-- summery -->
<div class="col-md-6">
<h3 class="p-1">Md: Emruz Hossain</h3>
<h5 class="p-1">
Software Engineer at
<a href="https://www.appscode.com">AppsCode Inc.</a>
</h5>
<p class="p-1 text-justify">
I am a passionate software engineer with 2 years of working
experience. I built OSS tools for Kubernetes using GO for
deploying database in Kubernetes and for disaster recovery. I am
working as team lead of AppsCodes
<a href="https://appscode.com/products/stash/" target="/">Stash</a>
project. Enjoy interacting with end users.
</p>
<div class="text-container ml-auto">
<ul class="social-link d-flex">
<li>
<a href="#" target="/"><i class="fas fa-envelope"></i></a>
</li>
<li>
<a href="#" target="/"><i class="fab fa-github"></i></a>
</li>
<li>
<a href="#" target="/"><i class="fab fa-stack-overflow"></i></a>
</li>
<li>
<a href="#" target="/"><i class="fab fa-linkedin"></i></a>
</li>
<li>
<a href="#" target="/"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#" target="/"><i class="fab fa-facebook"></i></a>
</li>
</ul>
</div>
<a href="assets/files/resume.pdf" target="#"><button class="btn btn-dark">My Resume</button></a>
<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-5 align-self-center">
<!-- summery -->
<div class="col-md-6">
<h3 class="p-1">{{ .Site.Data.about.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>
<!-- soft skills circular-progressbar -->
<div class="col-md-6 pt-5 pl-4 pt-md-0 ">
<div class="row">
<div class="col-6 col-lg-4 p-2">
<div class="circular-progress blue">
<span class="circular-progress-left">
<span class="circular-progress-bar circular-progress-percentage-85"></span>
</span>
<span class="circular-progress-right">
<span class="circular-progress-bar"></span>
</span>
<div class="circular-progress-value">Leadership</div>
</div>
</div>
<div class="col-6 col-lg-4 p-2">
<div class="circular-progress yellow">
<span class="circular-progress-left">
<span class="circular-progress-bar circular-progress-percentage-90"></span>
</span>
<span class="circular-progress-right">
<span class="circular-progress-bar"></span>
</span>
<div class="circular-progress-value">Team Work</div>
</div>
</div>
<div class="col-6 col-lg-4 p-2">
<div class="circular-progress pink">
<span class="circular-progress-left">
<span class="circular-progress-bar circular-progress-percentage-75"></span>
</span>
<span class="circular-progress-right">
<span class="circular-progress-bar"></span>
</span>
<div class="circular-progress-value">Comunication</div>
</div>
</div>
<div class="col-6 col-lg-4 p-2">
<div class="circular-progress green">
<span class="circular-progress-left">
<span class="circular-progress-bar circular-progress-percentage-85"></span>
</span>
<span class="circular-progress-right">
<span class="circular-progress-bar"></span>
</span>
<div class="circular-progress-value">Hard Working</div>
</div>
</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-4 pt-md-0">
<div class="row">
{{ range .Site.Data.about.softSkills }}
{{ partial "progress/soft-skills" . }}
{{ end }}
</div>
</div>
</div>
</div>
<!-- ABOUT END -->
</div>

View file

@ -1,103 +1,14 @@
<!-- ACHIEVEMENTS START -->
<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
<h1 class="text-center">Achievements</h1>
<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
<h1 class="text-center">Achievements</h1>
<div class="container">
<div class="row" id="gallery">
</div>
</div>
<!-- achievements-holder holds achievement-entry -->
<div class="d-none" id="achievements-holder">
<div class="achievement-entry text-center" style="background-image: url(assets/images/achievements/1.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="achievement-entry text-center" style="background-image: url(assets/images/achievements/2.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="achievement-entry text-center" style="background-image: url(assets/images/achievements/3.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="achievement-entry text-center" style="background-image: url(assets/images/achievements/4.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="achievement-entry text-center" style="background-image: url(assets/images/achievements/5.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="achievement-entry text-center" style="background-image: url(assets/images/achievements/6.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="achievement-entry text-center" style="background-image: url(assets/images/achievements/7.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="achievement-entry img-type-1 text-center"
style="background-image: url(assets/images/achievements/7.jpg);">
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">UAP IUPC 2017</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
Quibusdam
quis corrupti soluta sed quos cumque veritatis reiciendis dicta culpa fugit illum atque facilis, eos
provident?</p>
</div>
</div>
<div class="container">
<div class="row" id="gallery">
</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 END -->
</div>

View file

@ -0,0 +1,17 @@
<div class="col-lg-4 col-md-6 pt-2">
<div class="card">
<div class="card-head">
<img class="card-img-top" src="{{ .Params.hero }}"
alt="Card image cap"
/>
</div>
<div class="card-body">
<h5 class="card-title">{{ .Title }}</h5>
<p class="card-text post-summery"> {{ .Summary }}</p>
</div>
<div class="card-footer">
<span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
<a href="{{ .RelPermalink }}" class="float-right btn btn-outline-info btn-sm">Details</a>
</div>
</div>
</div>

View file

@ -0,0 +1,43 @@
<div
class="col-md-6 col-lg-4 p-2 filtr-item"
data-category='all, {{ delimit .tags ","}}'
>
<div class="card mt-1">
<div class="card">
<div class="card-header">
<div class="d-flex">
{{ if .logo }}
<img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
{{ end }}
<h5 class="card-title mb-0">{{ .name }}</h5>
</div>
<div class="sub-title">
<span>{{ .role }}</span>
<span>{{ .timeline }}</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>{{ .summary }}</p>
<span class="float-right">
{{ if .repo }}
<a
class="github-button-inactive"
href="{{ .repo }}"
data-icon="octicon-standard"
data-show-count="true"
aria-label="Star {{ .name }}"
>Star</a
>
{{ else if .url }}
<a
class="btn btn-outline-info btn-sm mb-2"
href="{{ .url }}"
target="#"
>Details</a
>
{{ end }}
</span>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,15 @@
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card">
<div class="card-head d-flex">
{{ if .icon }}
<img class="card-img-sm" src="{{ .icon }}" alt="{{ .name }}" />
{{ else }}
<i class="fas fas fa-tools"></i>
{{ end }}
<h4 class="card-title">{{ .name }}</h4>
</div>
<div class="card-body">
<p class="card-text">{{ .summary }}</p>
</div>
</div>
</div>

View file

@ -1,235 +1,25 @@
<!-- EXPERIENCES START -->
<div class="container-fluid experiences bg-white anchor" id="experiences">
<h1 class="text-center">Experiences</h1>
<div class="container timeline text-justify">
<!--first section-->
<div class="row align-items-center d-flex pt-2">
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
<div class="circle font-weight-bold">1</div>
<div class="container-fluid experiences bg-white anchor" id="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 }}
<div class="row align-items-center d-flex">
{{ partial "experiences/left-v-line.html" $idx }}
{{ partial "experiences/experience-info.html" $val }}
</div>
<div class="col-10 col-lg-8">
<div class="experience-entry-heading">
<h5>Software Engineer</h5>
<h6><a href="https://www.appscode.com">AppsCode Inc.</a></h6>
<p class="text-muted">Nov 2017 - Present, Dhaka Branch</p>
</div>
<p>
AppsCode Ltd. is a subsidiary company of AppsCode Inc. USA. An
Integrated platform for collaborative coding, testing & deploying
containerized apps.
</p>
<h6 class="text-muted">Responsibilities:</h6>
<ul class="justify-content-around">
<li>
Design, develop and manage disaster recovery tool Stash that
backup Kubernetes volumes, databases and cluster's resource
definition.
</li>
<li>
Worked on database operator KubeDB that deploy and manages most
popular databases inside Kubernetes cluster in Kubernetes native
way.
</li>
<li>
Added support for Prometheus monitoring in various AppsCode's
tools.
</li>
<li>Provide support to the users of our various tools.</li>
</ul>
{{ if lt $idx (sub $total 1) }}
{{ partial "experiences/left-to-right-h-line.html" $idx }}
{{ end }}
{{else}}
<div class="row align-items-center justify-content-end d-flex">
{{ partial "experiences/experience-info.html" $val }}
{{ partial "experiences/right-v-line.html" $idx }}
</div>
</div>
<!--path between 1-2-->
<div class="row horizontal-line">
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
<div class="col-10 col-lg-8">
<hr />
</div>
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
</div>
<!--second section-->
<div class="row align-items-center justify-content-end d-flex">
<div class="col-10 col-lg-8">
<div class="experience-entry-heading text-right">
<h5>Software Engineer</h5>
<h6><a href="https://www.appscode.com">AppsCode Inc.</a></h6>
<p class="text-muted">Nov 2017 - Present, Dhaka Branch</p>
</div>
<p>
AppsCode Ltd. is a subsidiary company of AppsCode Inc. USA. An
Integrated platform for collaborative coding, testing & deploying
containerized apps.
</p>
<h6 class="text-muted">Responsibilities:</h6>
<ul class="justify-content-around">
<li>
Design, develop and manage disaster recovery tool Stash that
backup Kubernetes volumes, databases and cluster's resource
definition.
</li>
<li>
Worked on database operator KubeDB that deploy and manages most
popular databases inside Kubernetes cluster in Kubernetes native
way.
</li>
<li>
Added support for Prometheus monitoring in various AppsCode's
tools.
</li>
<li>Provide support to the users of our various tools.</li>
</ul>
</div>
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
<div class="circle font-weight-bold">2</div>
</div>
</div>
<!--path between 2-3-->
<div class="row horizontal-line">
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
<div class="col-10 col-lg-8">
<hr />
</div>
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
</div>
<!--third section-->
<div class="row align-items-center d-flex">
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
<div class="circle font-weight-bold">3</div>
</div>
<div class="col-10 col-lg-8">
<div class="experience-entry-heading">
<h5>Software Engineer</h5>
<h6><a href="https://www.appscode.com">AppsCode Inc.</a></h6>
<p class="text-muted">Nov 2017 - Present, Dhaka Branch</p>
</div>
<p>
AppsCode Ltd. is a subsidiary company of AppsCode Inc. USA. An
Integrated platform for collaborative coding, testing & deploying
containerized apps.
</p>
<h6 class="text-muted">Responsibilities:</h6>
<ul class="justify-content-around">
<li>
Design, develop and manage disaster recovery tool Stash that
backup Kubernetes volumes, databases and cluster's resource
definition.
</li>
<li>
Worked on database operator KubeDB that deploy and manages most
popular databases inside Kubernetes cluster in Kubernetes native
way.
</li>
<li>
Added support for Prometheus monitoring in various AppsCode's
tools.
</li>
<li>Provide support to the users of our various tools.</li>
</ul>
</div>
</div>
<!--path between 3-4-->
<div class="row horizontal-line">
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
<div class="col-10 col-lg-8">
<hr />
</div>
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
</div>
<!--4th section-->
<div class="row align-items-center justify-content-end d-flex">
<div class="col-10 col-lg-8">
<div class="experience-entry-heading text-right">
<h5>Software Engineer</h5>
<h6><a href="https://www.appscode.com">AppsCode Inc.</a></h6>
<p class="text-muted">Nov 2017 - Present, Dhaka Branch</p>
</div>
<p>
AppsCode Ltd. is a subsidiary company of AppsCode Inc. USA. An
Integrated platform for collaborative coding, testing & deploying
containerized apps.
</p>
<h6 class="text-muted">Responsibilities:</h6>
<ul class="justify-content-around">
<li>
Design, develop and manage disaster recovery tool Stash that
backup Kubernetes volumes, databases and cluster's resource
definition.
</li>
<li>
Worked on database operator KubeDB that deploy and manages most
popular databases inside Kubernetes cluster in Kubernetes native
way.
</li>
<li>
Added support for Prometheus monitoring in various AppsCode's
tools.
</li>
<li>Provide support to the users of our various tools.</li>
</ul>
</div>
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
<div class="circle font-weight-bold">4</div>
</div>
</div>
<!--path between 4-5-->
<div class="row horizontal-line">
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
<div class="col-10 col-lg-8">
<hr />
</div>
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
</div>
<!--5th section-->
<div class="row align-items-center d-flex">
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
<div class="circle font-weight-bold">5</div>
</div>
<div class="col-10 col-lg-8">
<div class="experience-entry-heading">
<h5>Software Engineer</h5>
<h6><a href="https://www.appscode.com">AppsCode Inc.</a></h6>
<p class="text-muted">Nov 2017 - Present, Dhaka Branch</p>
</div>
<p>
AppsCode Ltd. is a subsidiary company of AppsCode Inc. USA. An
Integrated platform for collaborative coding, testing & deploying
containerized apps.
</p>
<h6 class="text-muted">Responsibilities:</h6>
<ul class="justify-content-around">
<li>
Design, develop and manage disaster recovery tool Stash that
backup Kubernetes volumes, databases and cluster's resource
definition.
</li>
<li>
Worked on database operator KubeDB that deploy and manages most
popular databases inside Kubernetes cluster in Kubernetes native
way.
</li>
<li>
Added support for Prometheus monitoring in various AppsCode's
tools.
</li>
<li>Provide support to the users of our various tools.</li>
</ul>
</div>
</div>
</div>
{{ if lt $idx (sub $total 1) }}
{{ partial "experiences/right-to-left-h-line.html" $idx }}
{{ end }}
{{ end }}
{{ end }}
</div>
<!-- EXPERIENCES END -->
</div>

View file

@ -0,0 +1,14 @@
<div class="col-10 col-lg-8">
<div class="experience-entry-heading">
<h5>{{ .designation }}</h5>
<h6><a href="{{ .company.url }}">{{ .company.name }}</a></h6>
<p class="text-muted">{{ .start }} - {{ if .end }} {{ .end }} {{ else }}Present{{ end }}, {{ .company.location }}</p>
</div>
<p>{{ .company.overview }}</p>
<h6 class="text-muted">Responsibilities:</h6>
<ul class="justify-content-around">
{{ range .responsibilities }}
<li>{{ . }}</li>
{{ end }}
</ul>
</div>

View file

@ -0,0 +1,11 @@
<div class="row horizontal-line">
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
<div class="col-10 col-lg-8">
<hr />
</div>
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
</div>

View file

@ -0,0 +1,3 @@
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
<div class="circle font-weight-bold">{{ add . 1 }}</div>
</div>

View file

@ -0,0 +1,11 @@
<div class="row horizontal-line">
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
<div class="col-10 col-lg-8">
<hr />
</div>
<div class="col-1 col-lg-2 timeline-side-div">
<div class="corner"></div>
</div>
</div>

View file

@ -0,0 +1,3 @@
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
<div class="circle font-weight-bold">{{ add . 1 }}</div>
</div>

View file

@ -5,34 +5,19 @@
<div class="col-md-4 col-sm-12">
<h5>Navigation</h5>
<ul>
{{ range .Site.Menus.main }}
<li class="nav-item">
<a class="smooth-scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="smooth-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="smooth-scroll" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="smooth-scroll" href="#experiences">Experiences</a>
</li>
<li class="nav-item">
<a class="smooth-scroll" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="smooth-scroll" href="#recent-posts">Recent Posts</a>
</li>
<li class="nav-item">
<a class="smooth-scroll" href="#achievements">Achievements</a>
<a class="smooth-scroll" href="#{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
</div>
<div class="col-md-4 col-sm-12">
<h5>Contact Me</h5>
<ul>
<li><span>Email: </span> <span>hossainemruz@gmail.com</span></li>
<li><span>Phone: </span><span>+8801770582121</span></li>
{{ range $key,$value:=.Site.Params.contactInfo }}
<li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
{{ end }}
</ul>
</div>
<div class="col-md-4 col-sm-12">
@ -61,7 +46,7 @@
<div class="row text-left">
<div class="col-md-4">
Theme:
<a id="theme" href="https://github.com/hossainemruz" target="#">XS2</a>
<a id="theme" href="https://github.com/hossainemruz/toha" target="#">Toha</a>
</div>
<div class="col-md-4">© 2019 Copyright.</div>
<div class="col-md-4">
@ -87,4 +72,4 @@
<script src="assets/js/navbar.js"></script>
<script src="assets/js/home.js"></script>
<script src="assets/js/jquery.filterizr.min.js"></script>
<!-- Scripts Ends -->
<!-- Scripts Ends -->

View file

@ -14,7 +14,7 @@
<link rel="stylesheet" href="assets/css/achievements.css" />
{{/* <link rel="stylesheet" href="assets/css/blog.css" /> */}}
{{/* <link rel="stylesheet" href="assets/css/read.css" /> */}}
<link rel="icon" type="image/png" href="assets/images/logos/project-default.png" />
<link rel="icon" type="image/png" href="{{ .Site.Params.logo }}" />
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />

View file

@ -0,0 +1,26 @@
<!-- HOME START -->
<div class="container-fluid home" id="home">
<div
class="background container-fluid"
style="background-image: url('assets/images/background/flower.jpg');"
></div>
<div class="container content text-center">
<img
src="assets/images/profile-image.jpg"
class="rounded-circle mx-auto d-block img-fluid"
alt=""
/>
<h1 class="greeting">{{- .Site.Data.home.greeting -}}</h1>
<div class="typing-carousel">
<span id="ityped" class="ityped"></span>
<span class="ityped-cursor"></span>
</div>
<ul id="typing-carousel-data">
{{ range .Site.Data.home.typeWriter }}
<li>{{ . }}</li>
{{ end }}
</ul>
<a href="#about"><i class="arrow bounce fa fa-chevron-down"></i></a>
</div>
</div>
<!-- HOME END -->

View file

@ -1,19 +0,0 @@
<!-- HOME START -->
<div class="container-fluid home" id="home">
<div class="background container-fluid" style='background-image: url("assets/images/background/flower.jpg");'></div>
<div class="container content text-center">
<img src="assets/images/profile-image.jpg" class="rounded-circle mx-auto d-block img-fluid" alt="" />
<h1 class="greeting">Hi, I'm Emruz Hossain</h1>
<div class="typing-carousel">
<span id="ityped" class="ityped"></span>
<span class="ityped-cursor"></span>
</div>
<ul id="typing-carousel-data">
<li>I am a Kubernetes developer</li>
<li>I write controller for Kubernetes</li>
<li>I work in Go</li>
</ul>
<a href="#about"><i class="arrow bounce fa fa-chevron-down"></i></a>
</div>
</div>
<!-- HOME END -->

View file

@ -0,0 +1,11 @@
<div
class="achievement-entry text-center"
style="background-image: url({{ .image }});"
>
<i class="fas fa-search-plus" id="enlarge-icon"></i>
<h4 class="title" id="achievement-title">{{ .title }}</h4>
<div class="caption hidden col-lg-6 text-left" id="caption">
<h4>{{ .title }}</h4>
<p>{{ .summary }}</p>
</div>
</div>

View file

@ -1,40 +1,28 @@
<!-- NAVBAR START -->
<nav class="navbar navbar-expand-lg top-navbar initial-navbar" id="top-navbar">
<div class="container">
<a class="navbar-brand" href="#">Toha</a>
<button class="navbar-toggler navbar-dark" id="navbar-toggler",type="button" data-toggle="collapse" data-target="#top-nav-items">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar navbar-expand-lg top-navbar initial-navbar" id="top-navbar">
<div class="container">
<a class="navbar-brand" href="#">{{- .Site.Title -}}</a>
<button
class="navbar-toggler navbar-dark"
id="navbar-toggler"
,type="button"
data-toggle="collapse"
data-target="#top-nav-items"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-nav-items">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#experiences">Experiences</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#recent-posts">Recent Posts</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#achievements">Achievements</a>
</li>
<div class="dropdown-divider" id="top-navbar-divider"></div>
<li class="nav-item">
<a class="nav-link" id="blog-link" href="blog.html">Blog</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="top-nav-items">
<ul class="navbar-nav ml-auto">
{{ range .Site.Menus.main }}
<li class="nav-item">
<a class="nav-link smooth-scroll" href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
<div class="dropdown-divider" id="top-navbar-divider"></div>
<li class="nav-item">
<a class="nav-link" id="blog-link" href="blog.html">Blog</a>
</li>
</ul>
</div>
</nav>
<!-- NAVBAR END -->
</div>
</nav>

View file

@ -0,0 +1,13 @@
<div class="col-6 col-lg-4 p-2">
<div class="circular-progress {{ .color }}">
<span class="circular-progress-left">
<span
class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
></span>
</span>
<span class="circular-progress-right">
<span class="circular-progress-bar"></span>
</span>
<div class="circular-progress-value">{{ .name }}</div>
</div>
</div>

View file

@ -1,267 +1,18 @@
<!-- PROJECTS START -->
<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">
<button type="button" class="btn btn-dark" data-filter="all">All</button>
<button type="button" class="btn btn-dark" data-filter="professional">Professional</button>
<button type="button" class="btn btn-dark" data-filter="academic">Academic</button>
<button type="button" class="btn btn-dark" data-filter="hobby">Hobby</button>
</div>
</div>
<div class="container filtr-projects">
<div class="row">
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,profess">
<div class="card mt-1">
<div class="card">
<div class="card-header">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/stash.png" alt="Card image cap" />
<h5 class="card-title mb-0">Stash</h5>
</div>
<div class="sub-title">
<span>Team Lead</span>
<span>March 2018 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
A tool to backup Kubernetes volumes, StatefulSet application,
databases etc.
</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/stashed/stash" data-icon="octicon-standard"
data-show-count="true" aria-label="Star stahsed/stash">Star</a>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,professional">
<div class="card mt-1" data-category="professional">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/kubedb.png" alt="Card image cap" />
<h5 class="card-title mb-0">KubeDB</h5>
</div>
<div class="sub-title">
<span>Developer</span>
<span>Jan 2019 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>KubeDB by AppsCode simplifies and automates routine database tasks such as provisioning, patching,
backup, recovery, failure detection, and repair for various popular databases on private and public
clouds.</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/kubedb/cli" data-icon="octicon-standard"
data-show-count="true" aria-label="Star kubedb/cli">Star</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,professional">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/kubed.png" alt="Card image cap" />
<h5 class="card-title mb-0">Kubed</h5>
</div>
<div class="sub-title">
<span>Developer</span>
<span>Oct 2018 - Dec 2018</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>A tool to sync Kubernetes ConfigMap, Secret across namespaces and clusters.</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/appscode/kubed" data-icon="octicon-standard"
data-show-count="true" aria-label="Star appscode/kubed">Star</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,academic">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<h5 class="card-title mb-0">Riverine Vehicle Tracking System with Overload Detection</h5>
</div>
<div class="sub-title">
<span>Owner</span>
<span>Jan 2017 - Nov 2017</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
This project aims to develop a monitoring and overload detection system for riverine vehicles.
Here, we have built an Ardunio based GPS tracking system, an ultrasonic sensor based overload
detector. We have also built a mobile based user application as well as an emergency notification
system.
</p>
<span class="float-right">
<a class="btn btn-outline-info btn-sm mb-2"
href="https://drive.google.com/open?id=0BwCjE-AXb1mjT1ExczBuMjk1aTQ" target="#">Details</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,hobby">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/project-default.png" alt="Card image cap" />
<h5 class="card-title mb-0">Project 1</h5>
</div>
<div class="sub-title">
<span>Team Lead</span>
<span>March 2018 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero velit soluta vitae rem nihil neque,
similique repellendus, recusandae in harum rerum nisi doloremque eius debitis ex atque alias voluptatem
ratione?
</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/stashed/stash" data-icon="octicon-standard"
data-show-count="true" aria-label="Star stahsed/stash">Star</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,hobby">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/project-default.png" alt="Card image cap" />
<h5 class="card-title mb-0">Project 2</h5>
</div>
<div class="sub-title">
<span>Team Lead</span>
<span>March 2018 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
This is a placeholder card.
</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/stashed/stash" data-icon="octicon-standard"
data-show-count="true" aria-label="Star stahsed/stash">Star</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,hobby">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/project-default.png" alt="Card image cap" />
<h5 class="card-title mb-0">Project 3</h5>
</div>
<div class="sub-title">
<span>Team Lead</span>
<span>March 2018 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
Yet another placeholder card.
</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/stashed/stash" data-icon="octicon-standard"
data-show-count="true" aria-label="Star stahsed/stash">Star</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,hobby">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/project-default.png" alt="Card image cap" />
<h5 class="card-title mb-0">Project 4</h5>
</div>
<div class="sub-title">
<span>Team Lead</span>
<span>March 2018 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
This is in flex 4.
</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/stashed/stash" data-icon="octicon-standard"
data-show-count="true" aria-label="Star stahsed/stash">Star</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,hobby">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/project-default.png" alt="Card image cap" />
<h5 class="card-title mb-0">Project 5</h5>
</div>
<div class="sub-title">
<span>Team Lead</span>
<span>March 2018 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita provident vero accusantium sed error,
modi nisi illo commodi repellat dolor quisquam obcaecati quae enim eveniet nostrum autem ipsum qui
molestiae!
</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/stashed/stash" data-icon="octicon-standard"
data-show-count="true" aria-label="Star stahsed/stash">Star</a>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 p-2 filtr-item" data-category="all,hobby">
<div class="card mt-1">
<div class="card-header pb-1">
<div class="d-flex">
<img class="card-img-xs" src="assets/images/logos/project-default.png" alt="Card image cap" />
<h5 class="card-title mb-0">Project 6</h5>
</div>
<div class="sub-title">
<span>Team Lead</span>
<span>March 2018 - Present</span>
</div>
</div>
<div class="card-body text-justify pt-1 pb-1">
<p>
This suppose to be last card.
</p>
<span class="float-right">
<a class="github-button-inactive" href="https://github.com/stashed/stash" data-icon="octicon-standard"
data-show-count="true" aria-label="Star stahsed/stash">Star</a>
</span>
</div>
</div>
</div>
</div>
<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.filters }}
<button type="button" class="btn btn-dark" data-filter="{{ .tag }}">
{{ .name }}
</button>
{{ end }}
</div>
</div>
<!-- PROJECTS END -->
<div class="container filtr-projects">
<div class="row">
{{ range .Site.Data.projects.projects }} {{ partial "cards/project" . }}
{{ end }}
</div>
</div>
</div>

View file

@ -1,72 +1,10 @@
<!-- RECENT POSTS START -->
<div class="container-fluid recent-posts bg-white anchor pb-5">
<h1 class="text-center">Recent Posts</h1>
<div class="container">
<div class="row" id="recent-posts">
<div class="col-lg-4 col-md-6 pt-2">
<div class="card">
<div class="card-head">
<img class="card-img-top" src="assets/images/background/bird.jpg" alt="Card image cap" />
</div>
<div class="card-body">
<h5 class="card-title">
How to Build Multi-stage Docker Image
</h5>
<p class="card-text post-summery">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
<div class="card-footer">
<span class="float-left">November 12, 2019</span>
<a href="#" class="float-right btn btn-outline-info btn-sm">Details</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pt-2">
<div class="card">
<div class="card-head">
<img class="card-img-top" src="assets/images/recent-posts/docker-2.png" alt="Card image cap" />
</div>
<div class="card-body">
<h5 class="card-title">
How to Build Multi-stage Docker Image
</h5>
<p class="card-text post-summery">
Some quick example text to build on the card title and make up
the bulk of the card's content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
corporis sint voluptates maiores expedita, id ullam, maxime sit eaque eius earum, consectetur blanditiis
nulla ex aliquam dolor libero. Inventore, maiores.
</p>
</div>
<div class="card-footer">
<span class="float-left">November 12, 2019</span>
<a href="#" class="float-right btn btn-outline-info btn-sm">Details</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pt-2">
<div class="card">
<div class="card-head">
<img class="card-img-top" src="assets/images/recent-posts/kubernetes.png" alt="Card image cap" />
</div>
<div class="card-body">
<h5 class="card-title">
How to Build Multi-stage Docker Image
</h5>
<p class="card-text post-summery">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis veritatis sapiente fuga
aspernatur adipisci dolor, et doloremque quos eos incidunt? Earum, debitis explicabo. Obcaecati eligendi
placeat eos quod laboriosam quia.
</p>
</div>
<div class="card-footer">
<span class="float-left">November 12, 2019</span>
<a href="#" class="float-right btn btn-outline-info btn-sm">Details</a>
</div>
</div>
</div>
</div>
<div class="container-fluid recent-posts bg-white anchor pb-5">
<h1 class="text-center">Recent Posts</h1>
<div class="container">
<div class="row" id="recent-posts">
{{ range first 3 .Site.RegularPages }}
{{ partial "cards/post.html" . }}
{{ end }}
</div>
</div>
<!-- RECENT POSTS END -->
</div>

View file

@ -1,142 +1,13 @@
<!-- SKILLS START -->
<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
<h1 class="text-center">Skills</h1>
<!-- SKILLS START -->
<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
<h1 class="text-center">Skills</h1>
<div class="container d-flex-block">
<div class="row " id="primary-skills">
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/kubernetes.png" alt="Card image cap" />
<h4 class="card-title">Kubernetes</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of tlsdfjlsdjflsdfhe card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/go.png" alt="Card image cap" />
<h4 class="card-title">Go Development</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card ">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/cloud.png" alt="Card image cap" />
<h4 class="card-title">Cloud Computing</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/docker.svg" alt="Card image cap" />
<h4 class="card-title">Docker</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card ">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/linux.png" alt="Card image cap" />
<h4 class="card-title">Linux</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card ">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/prometheus.png" alt="Card image cap" />
<h4 class="card-title">Prometheus</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class=" col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/git.png" alt="Card image cap" />
<h4 class="card-title">Git</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card ">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/c++.png" alt="Card image cap" />
<h4 class="card-title">C++</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class=" col-sm-12 col-md-6 col-lg-4 pt-2">
<div class="card">
<div class="card-head d-flex">
<img class="card-img-sm" src="assets/images/skills/gopher.png" alt="Card image cap" />
<h4 class="card-title">Gopher</h4>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<div class="container d-flex-block">
<div class="row" id="primary-skills">
{{ range .Site.Data.skills.skills }}
{{ partial "cards/skill.html" . }}
{{ end }}
</div>
</div>
<!-- SKILLS END -->
</div>
<!-- SKILLS END -->

View file

@ -93,7 +93,7 @@
transition: all 0.3s ease-out;
}
#gallery .caption h3 {
#gallery .caption h4 {
color: #e5e9f2;
}

View file

@ -2,6 +2,10 @@
padding-bottom: 1rem;
}
.experiences .timeline{
margin-top: 2rem!important;
}
.text-muted {
color: #e5e9f2;
}

View file

@ -2,6 +2,12 @@
margin: 10px;
}
.skills .card .card-head i{
font-size: 1.5rem;
margin: 10px;
margin-top: 15px;
}
.skills .card {
margin-top: 10px;
margin-bottom: 10px;

View file

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before After
Before After