diff options
| author | hossainemruz <emruz@appscode.com> | 2020-04-14 18:35:57 +0300 |
|---|---|---|
| committer | hossainemruz <emruz@appscode.com> | 2020-04-14 18:35:57 +0300 |
| commit | 3873876e35d16c4f0567a81af4e1ecf7ba350df4 (patch) | |
| tree | 2726b6110c08549680af6708022bc98c29813042 /layouts | |
| parent | 7b25c40baade969ca46267d79d002b7c49233b67 (diff) | |
Convert homepage into hugo templates
Diffstat (limited to 'layouts')
23 files changed, 308 insertions, 983 deletions
diff --git a/layouts/index.html b/layouts/index.html index 0e27ec0..69a58b9 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -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" . -}} diff --git a/layouts/partials/about.html b/layouts/partials/about.html index 8faf693..73b14f9 100644 --- a/layouts/partials/about.html +++ b/layouts/partials/about.html @@ -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 AppsCode’s - <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 -->
\ No newline at end of file +</div> diff --git a/layouts/partials/achievements.html b/layouts/partials/achievements.html index 698e08c..30cebc4 100644 --- a/layouts/partials/achievements.html +++ b/layouts/partials/achievements.html @@ -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 -->
\ No newline at end of file +</div> diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html new file mode 100644 index 0000000..a20f003 --- /dev/null +++ b/layouts/partials/cards/post.html @@ -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> diff --git a/layouts/partials/cards/project.html b/layouts/partials/cards/project.html new file mode 100644 index 0000000..dfb16f7 --- /dev/null +++ b/layouts/partials/cards/project.html @@ -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> diff --git a/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html new file mode 100644 index 0000000..5345440 --- /dev/null +++ b/layouts/partials/cards/skill.html @@ -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> diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html index 83ba9ac..e7c17a4 100644 --- a/layouts/partials/experiences.html +++ b/layouts/partials/experiences.html @@ -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> - <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 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> +<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> + {{ 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> + {{ if lt $idx (sub $total 1) }} + {{ partial "experiences/right-to-left-h-line.html" $idx }} + {{ end }} + {{ end }} + {{ end }} </div> - <!-- EXPERIENCES END -->
\ No newline at end of file +</div> diff --git a/layouts/partials/experiences/experience-info.html b/layouts/partials/experiences/experience-info.html new file mode 100644 index 0000000..39c7989 --- /dev/null +++ b/layouts/partials/experiences/experience-info.html @@ -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> diff --git a/layouts/partials/experiences/left-to-right-h-line.html b/layouts/partials/experiences/left-to-right-h-line.html new file mode 100644 index 0000000..95f13ae --- /dev/null +++ b/layouts/partials/experiences/left-to-right-h-line.html @@ -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> diff --git a/layouts/partials/experiences/left-v-line.html b/layouts/partials/experiences/left-v-line.html new file mode 100644 index 0000000..7d8b74b --- /dev/null +++ b/layouts/partials/experiences/left-v-line.html @@ -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> diff --git a/layouts/partials/experiences/right-to-left-h-line.html b/layouts/partials/experiences/right-to-left-h-line.html new file mode 100644 index 0000000..95f13ae --- /dev/null +++ b/layouts/partials/experiences/right-to-left-h-line.html @@ -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> diff --git a/layouts/partials/experiences/right-v-line.html b/layouts/partials/experiences/right-v-line.html new file mode 100644 index 0000000..7d8b74b --- /dev/null +++ b/layouts/partials/experiences/right-v-line.html @@ -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> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 6e318c7..c7bb533 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -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 -->
\ No newline at end of file +<!-- Scripts Ends --> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 60cd99d..708e822 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -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" /> diff --git a/layouts/partials/header.html b/layouts/partials/header.html deleted file mode 100644 index e69de29..0000000 --- a/layouts/partials/header.html +++ /dev/null diff --git a/layouts/partials/home.html b/layouts/partials/home.html new file mode 100644 index 0000000..fb58a5e --- /dev/null +++ b/layouts/partials/home.html @@ -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 --> diff --git a/layouts/partials/landing.html b/layouts/partials/landing.html deleted file mode 100644 index 3e15873..0000000 --- a/layouts/partials/landing.html +++ /dev/null @@ -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 --> diff --git a/layouts/partials/misc/achievement.html b/layouts/partials/misc/achievement.html new file mode 100644 index 0000000..61a6d39 --- /dev/null +++ b/layouts/partials/misc/achievement.html @@ -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> diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 50dc451..6c2deda 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -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 -->
\ No newline at end of file + </div> +</nav> diff --git a/layouts/partials/progress/soft-skills.html b/layouts/partials/progress/soft-skills.html new file mode 100644 index 0000000..4c32067 --- /dev/null +++ b/layouts/partials/progress/soft-skills.html @@ -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> diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html index 65bb7ef..62c556c 100644 --- a/layouts/partials/projects.html +++ b/layouts/partials/projects.html @@ -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 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 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> + <div class="container filtr-projects"> + <div class="row"> + {{ range .Site.Data.projects.projects }} {{ partial "cards/project" . }} + {{ end }} </div> </div> - <!-- PROJECTS END -->
\ No newline at end of file +</div> diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html index feeca20..9b57286 100644 --- a/layouts/partials/recent-posts.html +++ b/layouts/partials/recent-posts.html @@ -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 -->
\ No newline at end of file +</div> diff --git a/layouts/partials/skills.html b/layouts/partials/skills.html index 73f588e..dd7f456 100644 --- a/layouts/partials/skills.html +++ b/layouts/partials/skills.html @@ -1,142 +1,13 @@ - <!-- 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> +<!-- 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"> + {{ range .Site.Data.skills.skills }} + {{ partial "cards/skill.html" . }} + {{ end }} </div> </div> - <!-- SKILLS END -->
\ No newline at end of file +</div> +<!-- SKILLS END --> |