From 3cff1e41cf53683034bb3654eeae09835e7e985d Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Sat, 6 Jan 2024 00:34:06 +0600 Subject: [PATCH] Update section configuration guides for v4 version Signed-off-by: hossainemruz --- .../configuration/sections/about/index.md | 110 +++------------- .../sections/achievements/index.md | 48 +++---- .../configuration/sections/education/index.md | 48 ++++++- .../sections/experiences/index.md | 117 +++++++----------- .../configuration/sections/projects/index.md | 83 +++---------- .../sections/recent-posts/index.md | 12 +- .../configuration/sections/skills/index.md | 72 ++++------- 7 files changed, 169 insertions(+), 321 deletions(-) diff --git a/content/posts/configuration/sections/about/index.md b/content/posts/configuration/sections/about/index.md index ce63a458..8c750a1f 100644 --- a/content/posts/configuration/sections/about/index.md +++ b/content/posts/configuration/sections/about/index.md @@ -9,15 +9,12 @@ menu: weight: 110 --- -{{< alert type="danger" >}} -This doc is outdated. For up-to-date examples, please follow this sample [repo](https://github.com/hugo-toha/hugo-toha.github.io). -{{< /alert >}} +The purpose of the `About` section is to provide a brief introduction about yourself on your website. In this post, we will guide you on how to configure the `About` section. For a complete reference, please check out the sample [about.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/about.yaml) file. -The `About` section should give the viewer a brief idea about yourself. In this post, we are going to configure the `About` section of your website. - -At first, create `about.yaml` file in the `data/en/sections` directory of your site. Then, follow the following instructions. +To get started, create an `about.yaml` file in the `data/en/sections` directory of your website. Then, follow the instructions below. ### Add Section information + ```yaml section: name: About # Title of section (default: "") @@ -29,11 +26,12 @@ section: ``` #### Template setting -It is possible to overwrite which partial this section is grabbed from using the template property. The new template should be saved in your `layout/partials` directory. + +You have the option to customize the partial used for this section by specifying the `template` property. Simply save the new template in your `layout/partials` directory. ### Add Your Work Information -Let's add some information about your current job. Add the following section in your `about.yaml` file, +To include details about your current job, you can add the following section to your `about.yaml` file: ```yaml # your designation @@ -46,7 +44,7 @@ company: ### Add a Summary About Yourself -Now, let's add a summary of what you do. The purpose of this section is to give the viewer an idea about your professional expertise at a glance. Add the following section in your `about.yaml` file, +To provide a concise overview of your professional expertise, let's add a summary section. This will give viewers a quick glimpse into what you do. Add the following section to your `about.yaml` file: ```yaml # a summary about you @@ -59,7 +57,7 @@ Try to make it as brief as possible. Don't make it too wordy. We have other sect ### Add Your Social Links -Now, we are going to add some links to your various profiles such as `LinkedIn`, `Twitter`, `Github` etc. Add the following `socialLinks` section in your `about.yaml` file, +To add links to your various profiles such as LinkedIn, Twitter, and Github, include the following `socialLinks` section in your `about.yaml` file: ```yaml # your social links @@ -94,16 +92,18 @@ You can use any [Font Awesome](https://fontawesome.com/icons?d=gallery) free ico ### Add a Resume -Now, let's add your resume. Put the resume pdf file in any folder under `static` directory. Then, add the following section in your `about.yaml` file, +To add your resume, place the PDF file in `files` folder within the `static` directory. Then, include the following section in your `about.yaml` file: ```yaml # your resume. this file path should be relative to you "static" directory -resume: "files/resume.pdf" +resourceLinks: +- title: "My Resume" + url: "files/resume.pdf" ``` ### Add badges -Now, let's add your badges and strength indicator on various soft skills such as leadership, communication, teamwork, etc. Add the following section in your `about.yaml` file, +Now, let's add your badges and a strength indicator for various soft skills such as leadership, communication, teamwork, etc. Include the following section in your `about.yaml` file: ```yaml # Show your badges @@ -141,95 +141,17 @@ badges: color: orange ``` -Currently, the skill percentage should be between 50 and 100 and should be divisible by 5. The following colors are available for skills percentage indicator, +Currently, the skill percentage should be between 0 and 100 and should be divisible by 5. The following colors are available for skills percentage indicator, - blue - yellow - pink - green +>You can also use any HEX color code in the `color` field. + {{< vs 2 >}} The following image shows how the contents of `about.yaml` are mapped into the `About` section. (The configuration portion of the image is outdated and softSkills section has been replaced with badges) {{< img src="images/about.png" >}} - -### Example `about.yaml` File - -Here, is the `about.yaml` file that has been used to create the `About` section of this site. - -```yaml -# your designation -designation: Software Engineer -# your company information -company: - name: Example Co. - url: "https://www.example.com" - -# your resume. this file path should be relative to you "static" directory -resume: "files/resume.pdf" - -# a summary about you -summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.' - -# your social links -# give as many as you want. use font-awesome for the icons. -socialLinks: -- name: Email - icon: "fas fa-envelope" - url: "example@gmail.com" - -- name: Github - icon: "fab fa-github" - url: "https://www.github.com/example" - -- name: Stackoverflow - icon: "fab fa-stack-overflow" - url: "#" - -- name: LinkedIn - icon: "fab fa-linkedin" - url: "#" - -- name: Twitter - icon: "fab fa-twitter" - url: "#" - -- name: Facebook - icon: "fab fa-facebook" - url: "#" - -# Show your badges -# You can show your verifiable certificates from https://www.credly.com. -# You can also show a circular bar indicating the level of expertise on a certain skill -badges: -- type: certification - name: Certified Kubernetes Security Specialist - url: "https://www.credly.com/org/the-linux-foundation/badge/exam-developer-certified-kubernetes-security-specialist" - badge: "https://images.credly.com/size/680x680/images/f4bf92ed-8985-40b2-bc07-2f9308780854/kubernetes-security-specialist-logo-examdev.png" - -- type: certification - name: Istio and IBM Cloud Kubernetes Service - url: "https://www.credly.com/org/the-linux-foundation/badge/exam-developer-certified-kubernetes-security-specialist" - badge: "https://images.credly.com/size/680x680/images/8d34d489-84bf-4861-a4a0-9e9d68318c5c/Beyond_basics_of_Istio_on_Cloud_v2.png" - -- type: certification - name: Artificial Intelligence and Machine Learning - url: "https://www.credly.com/org/grupo-bancolombia/badge/artificial-intelligence-and-machine-learning" - badge: "https://images.credly.com/size/680x680/images/e027514f-9d07-4b29-862f-fe21a8aaebf1/ae.png" - -- type: soft-skill-indicator - name: Leadership - percentage: 85 - color: blue - -- type: soft-skill-indicator - name: Team Work - percentage: 90 - color: yellow - -- type: soft-skill-indicator - name: Hard Working - percentage: 85 - color: orange -``` diff --git a/content/posts/configuration/sections/achievements/index.md b/content/posts/configuration/sections/achievements/index.md index 753a70a0..2624bdc9 100644 --- a/content/posts/configuration/sections/achievements/index.md +++ b/content/posts/configuration/sections/achievements/index.md @@ -8,17 +8,30 @@ menu: parent: sections weight: 160 --- -{{< alert type="danger" >}} -This doc is outdated. For up-to-date examples, please follow this sample [repo](https://github.com/hugo-toha/hugo-toha.github.io). -{{< /alert >}} -The `Achievements` section has been designed to showcase your achievements in a gallery view. This post will show how to configure the `Achievements` section of your site. +The `Achievements` section is designed to display your accomplishments in a visually appealing gallery format. This guide will walk you through the process of configuring the `Achievements` section on your website. For a complete reference, you can refer to the sample [achievements.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/achievements.yaml) file. -At first, create an `achievements.yaml` file in the `data` directory of your site. Then, follow the following instruction. +To begin, create a new file named `achievements.yaml` in the `data/en/sections` directory of your website. Then, follow the instructions below. + +### Add Section Information + +Add the following section metadata to your `achievements.yaml` file: + +```yaml +# section information +section: + name: Achievements + id: achievements + enable: true + weight: 9 + showOnNavbar: true + # Can optionally hide the title in sections + # hideTitle: true +``` ### Add Your Achievements -Now, add your achievements under the `achievements` section in your `achievements.yaml` file as below, +To add your achievements, open the `achievements.yaml` file and include the following entries under the `achievements` section: ```yaml achievements: @@ -27,7 +40,7 @@ achievements: summary: Best presenter in the 2020 XYZ conference. ``` -Each achievements entry should have the following fields, +Each achievements entry should have the following fields, - **title**: The title of the achievement. - **image**: An image of the achievement. @@ -40,24 +53,3 @@ Each achievements entry should have the following fields, The following image shows how the contents of `achievements.yaml` are mapped into the `Achievements` section. {{< img src="images/achievements.png" >}} - -### Example `achievements.yaml` File - -Here, is the `achievements.yaml` file that has been used to create the `Achievements` section of this site. - -```yaml -# Your achievements achievements -achievements: -- title: Best Presenter - image: images/achievements/presenter.jpg - summary: Best presenter in the 2020 XYZ conference. -- title: Champion - image: images/achievements/sport.jpg - summary: Champion in cycling inter-city cycling championship 2020. -- title: Graduation - image: images/achievements/graduation-cap.jpg - summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University. -- title: Award Winner - image: images/achievements/woman-winner.jpg - summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero? -``` diff --git a/content/posts/configuration/sections/education/index.md b/content/posts/configuration/sections/education/index.md index 88d16685..f27484bb 100644 --- a/content/posts/configuration/sections/education/index.md +++ b/content/posts/configuration/sections/education/index.md @@ -9,4 +9,50 @@ menu: weight: 135 --- -### Post coming soon......... \ No newline at end of file +The `Education` section is designed to showcase your academic background. In this post, we will guide you on how to configure the `Education` section of your site. For a complete reference, you can refer to the sample [education.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/education.yaml) file. + +To begin, create a new file named `education.yaml` in the `data/en/sections` directory of your site. Then, follow the instructions below. + +### Add Section Information + +Add the following section metadata to your `education.yaml` file: + +```yaml +# section information +section: + name: Education + id: education + template: sections/education.html # Use "sections/education-alt.html for alternate template. + enable: true + weight: 4 + showOnNavbar: true + # Can optionally hide the title in sections + # hideTitle: true +``` + +### Add Your Academic Degrees + +To add an education, include the respective information under `degrees` section in the `education.yaml` file as below: + +```yaml +degrees: +- name: Ph.D in Quantum Cryptography + icon: fa-microscope + timeframe: 2016-2020 + institution: + name: ABC University of Technology + url: "#" + grade: #(optional) + scale: CGPA + achieved: 3.6 + outOf: 4 + publications: #(optional) + - title: Lorem ipsum dolor sit amet, consectetur adipiscing elit. + url: "#" + - title: Fusce eu augue ut odio porttitor pulvinar. + url: "#" + - title: Nullam vitae orci tincidunt purus viverra pulvinar. + url: "#" +``` + +Make sure the icon you are using is available in [Font Awesome](https://fontawesome.com/icons?d=gallery&m=free). diff --git a/content/posts/configuration/sections/experiences/index.md b/content/posts/configuration/sections/experiences/index.md index 50c4587b..aed51e7c 100644 --- a/content/posts/configuration/sections/experiences/index.md +++ b/content/posts/configuration/sections/experiences/index.md @@ -9,100 +9,73 @@ menu: weight: 130 --- -{{< alert type="danger" >}} -This doc is outdated. For up-to-date examples, please follow this sample [repo](https://github.com/hugo-toha/hugo-toha.github.io). -{{< /alert >}} +The `Experiences` section is designed to showcase your career background and highlight the responsibilities you have handled throughout your professional journey. In this post, we will guide you on how to configure the `Experiences` section of your site. For a complete reference, you can refer to the sample [experiences.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/experiences.yaml) file. -The `Experiences` section has been designed to truly reflect your career background. It should give the viewer an idea about the responsibilities you have handled in various stages of your career. In this post, we are going to configure the `Experiences` section of your site. +To begin, create a new file named `experiences.yaml` in the `data/en/sections` directory of your site. Then, follow the instructions below. -At first, create an `experiences.yaml` file in the `data` directory of your site. Then, follow the following instruction. +### Add Section Information + +Add the following section metadata to your `experiences.yaml` file: + +```yaml +# section information +section: + name: Education + id: education + template: sections/education.html # Use "sections/education-alt.html for alternate template. + enable: true + weight: 4 + showOnNavbar: true + # Can optionally hide the title in sections + # hideTitle: true +``` ### Add Your Experiences -Now, let's add an `experiences` section in the `experiences.yaml` file as below, +To add an experience, include the respective information under `experiences` section in the `experiences.yaml` file as below: ```yaml # Your experiences experiences: -- designation: Software Engineer - company: +- company: name: Example Co. url: "https://www.example.com" location: Dhaka Branch # company overview overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes. - start: Nov 2017 - # don't provide end date if you are currently working there. It will be replaced by "Present" - end: Dec 2020 - # give some points about what was your responsibilities at the company. - responsibilities: - - Design, develop and manage disaster a recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition. - - My another responsibility. - - My more responsibilities. + positions: + - designation: Senior Software Engineer + start: Nov 2019 + # don't provide end date if you are currently working there. It will be replaced by "Present" + # end: Dec 2020 + # give some points about what was your responsibilities at the company. + responsibilities: + - Design and develop XYZ tool for ABC task + - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition. + - Lead backend team. + + - designation: Junior Software Engineer + start: Nov 2017 + end: Oct 2019 + responsibilities: + - Implement and test xyz feature for abc tool. + - Support client for abc tool. + - Learn k,d,w technology for xyz. ``` Each entry in the `experiences` section should have the following information, -- **designation**: Represents your position at the company. - **company**: Some information about your company. You should provide `name`, `url`, `location`, and a brief `overview` of the company. -- **start**: Time when you had joined the company. -- **end**: Time when you have left the company. If you are currently working in the company, don't provide this field. -- **responsibilities**: A list of responsibilities you handled in the company. This section is very important as it will give the viewer an idea about the professional responsibilities you are capable to deal with. +- **positions**: A list of positions you have held in the company. You can provide multiple positions if you have changed your position in the company. +- **designation**: Represents the role that you were playing at the position. +- **start**: Time when you had joined at the position. +- **end**: Time when you have left the position. If you are currently working at the position, don't provide this field. +- **responsibilities**: A list of responsibilities you handled at that position. This section is very important as it will give the viewer an idea about the professional responsibilities you are capable to deal with. > You can use markdown syntax in `overview` field of `company` section and `responsibilities` field. -{{< vs 2 >}} + diff --git a/content/posts/configuration/sections/projects/index.md b/content/posts/configuration/sections/projects/index.md index 62b560fd..4e84c80f 100644 --- a/content/posts/configuration/sections/projects/index.md +++ b/content/posts/configuration/sections/projects/index.md @@ -9,13 +9,25 @@ menu: weight: 140 --- -{{< alert type="danger" >}} -This doc is outdated. For up-to-date examples, please follow this sample [repo](https://github.com/hugo-toha/hugo-toha.github.io). -{{< /alert >}} +The purpose of the `Projects` section is to effectively showcase your projects. In this post, we will guide you on how to configure the `Projects` section on your site. For a complete reference, please refer to the sample [projects.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/projects.yaml) file. -The `Projects` section has been designed to showcase your projects in a meaningful way. In this post, we are going to configure the `Projects` section of your site. +To begin, create a new file named `projects.yaml` in the `data/en/sections` directory of your website. Then, follow the instructions below. -At first, create a `projects.yaml` file in the `data` directory of your site. Then, follow the following instructions. +### Add Section Information + +Add the following section metadata to your `projects.yaml` file: + +```yaml +# section information +section: + name: Projects + id: projects + enable: true + weight: 5 + showOnNavbar: true + # Can optionally hide the title in sections + # hideTitle: true +``` ### Add Project Filtering Buttons @@ -71,64 +83,3 @@ You can specify the following field for a project, The following image shows how the contents of `projects.yaml` are mapped into the `Projects` section. {{< img src="images/projects.png" >}} - -### Example `projects.yaml` File - -Here, is the `projects.yaml` file that has been used to create the `Projects` section of this site. - -```yaml -# filter buttons -buttons: -- name: All - filter: "all" -- name: Professional - filter: "professional" -- name: Academic - filter: "academic" -- name: Hobby - filter: "hobby" - -# your projects -projects: -- name: Kubernetes - logo: images/projects/kubernetes.png - role: Contributor - timeline: "March 2018 - Present" - repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count. - #url: "" # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously. - summary: Production-Grade Container Scheduling and Management. - tags: ["professional", "kubernetes", "cloud"] - -- name: Tensorflow - logo: images/projects/tensorflow.png - role: Developer - timeline: "Jun 2018 - Present" - repo: https://github.com/tensorflow/tensorflow - #url: "" - summary: An Open Source Machine Learning Framework for Everyone. - tags: ["professional", "machine-learning","academic"] - -- name: A sample academic paper - role: Team Lead - timeline: "Jan 2017 - Nov 2017" - url: "https://www.example.com" - summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi. - tags: ["academic","iot"] - -- name: Nocode - logo: images/projects/no-code.png - role: Nothing - timeline: "Oct 2019 - Dec 2019" - repo: https://github.com/kelseyhightower/nocode - #url: "" - summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere. - tags: ["hobby", "fun"] - -- name: Toha - logo: images/projects/toha.png - role: Owner - timeline: "Jun 2019 - Present" - repo: https://github.com/hossainemruz/toha - summary: A Hugo theme for personal portfolio. - tags: ["hobby","hugo","theme","professional"] -``` diff --git a/content/posts/configuration/sections/recent-posts/index.md b/content/posts/configuration/sections/recent-posts/index.md index 597690d5..bf6524e5 100644 --- a/content/posts/configuration/sections/recent-posts/index.md +++ b/content/posts/configuration/sections/recent-posts/index.md @@ -9,15 +9,7 @@ menu: weight: 150 --- -{{< alert type="danger" >}} -This doc is outdated. For up-to-date examples, please follow this sample [repo](https://github.com/hugo-toha/hugo-toha.github.io). -{{< /alert >}} - -The `Recent Posts` section will display the most recent posts from your content. The configuration is simple, and should be stored in `data/en/sections`. - -### Configuration - -After you have created the file `recent-posts.yaml`, the configuration is very simple, +The `Recent Posts` section is used to showcase the latest posts from your content. To enable this section, create a `recent-posts.yaml` file in the `data/en/sections` directory and include the following content: ```yaml # section information @@ -31,5 +23,3 @@ section: numShow: 4 # Can optionally increase the number of posts to display (default: 3) showMoreButton: false #Can optionally show 'More Posts' button (default: false) ``` - -{{}} diff --git a/content/posts/configuration/sections/skills/index.md b/content/posts/configuration/sections/skills/index.md index 6709db89..347463b6 100644 --- a/content/posts/configuration/sections/skills/index.md +++ b/content/posts/configuration/sections/skills/index.md @@ -9,72 +9,46 @@ menu: weight: 120 --- -{{< alert type="danger" >}} -This doc is outdated. For up-to-date examples, please follow this sample [repo](https://github.com/hugo-toha/hugo-toha.github.io). -{{< /alert >}} +The `Skills` section is designed to showcase your skills and provide insights into your expertise in each skill. In this post, we will guide you on how to configure the `Skills` section of your site. For a complete reference, please check out the sample [skills.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/skills.yaml) file. -The `Skills` section should give the viewer an idea about not only the list of skills you have but also an idea of the depth of your knowledge on a particular skill. In this post, we are going to configure the `Skills` section of your site. +To begin, create a `skills.yaml` file in the `data/en/sections` directory of your site. Then, follow the instructions below. -At first, create `skills.yaml` files in the `data` directory of your site. Then, follow the following instruction. +### Add Section Information -### Add Your Skills - -Now, let's add a `skills` section in your `skills.yaml` file as bellow, +Add the following section metadata to your `skills.yaml` file: ```yaml -skills: -- name: Kubernetes - icon: "images/skills/kubernetes.png" - summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs." +# section information +section: + name: Skills + id: skills + enable: true + weight: 2 + showOnNavbar: true + # Can optionally hide the title in sections + # hideTitle: true ``` -Here, you have to provide `name`, `icon`, and `summary` fields for a skill. The `summary` field should provide an idea about your depth of knowledge of this particular skill. - ->You can use markdown syntax in the `summary` field. - -{{< vs 2 >}} - -The following image shows how the content of `skills.yaml` files are mapped into the `Skills` section. - -{{< img src="images/skills.png">}} - -### Example `skills.yaml` File +### Add Your Skills -Here, is the `skills.yaml` file that has been used to create the `Skills` section of this site. +To add a `skill` add it's information under `skills` section in your `skills.yaml` file as bellow: ```yaml # Your Skills. # Give a summary of you each skill in the summary section. skills: - name: Kubernetes - icon: "images/skills/kubernetes.png" + logo: /images/sections/skills/kubernetes.png summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs." + url: "https://kubernetes.io/" +``` -- name: Go Development - icon: "images/skills/go.png" - summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program." - -- name: Cloud Computing - icon: "images/skills/cloud.png" - summary: "Worked with most of the major clouds such as GCP, AWS, Azure etc." - -- name: Docker - icon: "images/skills/docker.svg" - summary: "Write most of the programs as dockerized container. Experienced with multi-stage, multi-arch build process." +Here, you have to provide the `name`, `log`, and `summary` fields for a skill. The `summary` field should provide an idea about your depth of knowledge of this particular skill. -- name: Prometheus - icon: "images/skills/prometheus.png" - summary: "Capable of setup, configure Prometheus metrics. Experienced with PromQL, AlertManager. Also, experienced with writing metric exporters." +>You can use markdown syntax in the `summary` field. -- name: Linux - icon: "images/skills/linux.png" - summary: "Using as the main operating system. Capable of writing bash/shell scripts." +{{< vs 2 >}} -- name: Git - icon: "images/skills/git.png" - summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab." +The following image shows how the content of `skills.yaml` files are mapped into the `Skills` section. -- name: C++ - icon: "images/skills/c++.png" - summary: "Know basic C/C++ programming. Used for contest programming and problem solving." -``` +{{< img src="images/skills.png">}}