Giter VIP home page Giter VIP logo

nicolaslougecom's Introduction

Nicolas Louge Icon

Personal website powered by Hugo, Netlify, and the Academic ResumΓ© Template from Wowchemy.

nicolaslougecom's People

Contributors

anish-d avatar cfroehli avatar gcushen avatar github-actions[bot] avatar jpawlowski avatar mrueg avatar napulen avatar nicolaslouge avatar

Watchers

 avatar

nicolaslougecom's Issues

How to add a "Certifications" section in the "About" widget

Hi! πŸ‘‹

For the past few days, I've been looking on how to add a "Certifications" section in the "About" widget of the Wowchemy Academic Resume theme and the entire process wasn't as obvious as I first imagined.

πŸ‘©β€πŸ’» If you'd like another example of how this is done I recommend Rohit Salecha's website which is where I borrowed the code from!

You can find the specific commits that incorporates these details on my site at commit f6a2801, 6047df4, 239294, 43501de, 842895b. The layout of this issue was inspired by spcanelon/silvia#19.

Step 1: Create the layouts/partials/widgets folders and an about.html file

If you created your Hugo website using the latest template from Wowchemy, you'll need to create two folders under the root directory of your site.

The first one is called layouts and contains another folder called partials which itself contains another folder called widgets. You have to manually create all of them.

In the last folder (so under layouts/partials/widgets), create an about.html file and paste the following code in it.

{{ $ := .root }}
{{ $page := .page }}

{{ $author := "" }}
{{ if .author }}
  {{ $author = .author }}
{{ else }}
  {{ $author = $page.Params.author }}
{{end}}

{{ $person_page_path := (printf "/authors/%s" $author) }}
{{ $person_page := site.GetPage $person_page_path }}
{{ if not $person_page }}
  {{ errorf "Could not find an author page at `%s`. Please check the value of `author` in your About widget and create an associated author page if one does not already exist. See https://wowchemy.com/docs/page-builder/#about " $person_page_path }}
{{end}}
{{ $person := $person_page.Params }}
{{ $avatar := ($person_page.Resources.ByType "image").GetMatch "*avatar*" }}
{{ $avatar_shape := site.Params.avatar.shape | default "circle" }}

<!-- About widget -->
<div class="row">
  <div class="col-12 col-lg-4">
    <div id="profile">

      {{ if site.Params.avatar.gravatar }}
      <img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=270')" alt="{{$person_page.Title}}">
      {{ else if $avatar }}
      {{ $avatar_image := $avatar.Fill "270x270 Center" }}
      <img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="{{$person_page.Title}}">
      {{ end }}

      <div class="portrait-title">
        <h2>{{ $person_page.Title }}</h2>
        {{ with $person.role }}<h3>{{ . | markdownify | emojify }}</h3>{{ end }}

        {{ range $person.organizations }}
        <h3>
          {{ with .url }}<a href="{{ . }}" target="_blank" rel="noopener">{{ end }}
          <span>{{ .name }}</span>
          {{ if .url }}</a>{{ end }}
        </h3>
        {{ end }}
      </div>

      <ul class="network-icon" aria-hidden="true">
        {{ range $person.social }}
        {{ $pack := or .icon_pack "fas" }}
        {{ $pack_prefix := $pack }}
        {{ if in (slice "fab" "fas" "far" "fal") $pack }}
          {{ $pack_prefix = "fa" }}
        {{ end }}
        {{ $link := .link }}
        {{ $scheme := (urls.Parse $link).Scheme }}
        {{ $target := "" }}
        {{ if not $scheme }}
          {{ $link = .link | relLangURL }}
        {{ else if in (slice "http" "https") $scheme }}
          {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
        {{ end }}
        <li>
          <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} aria-label="{{ .icon }}">
            <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }} big-icon"></i>
          </a>
        </li>
        {{ end }}
      </ul>

    </div>
  </div>
  <div class="col-12 col-lg-8">

    {{/* Only display widget title in explicit instances of about widget, not in author pages. */}}
    {{ if and $page.Params.widget $page.Title }}<h1>{{ $page.Title | markdownify | emojify }}</h1>{{ end }}

    <div class="article-style">
      {{ $person_page.Content }}
    </div>

    <div class="row">

      {{ with $person.interests }}
      <div class="col-md-5">
        <div class="section-subheading">{{ i18n "interests" | markdownify }}</div>
        <ul class="ul-interests">
          {{ range . }}
          <li>{{ . | markdownify | emojify }}</li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

      <!-- CERTIFICATIONS -->
      <!-- Inspired by rohitsalecha.com -->
      {{ with $person.certification }}
      <div class="col-md-6">
        <h3>{{ i18n "certification" | markdownify }}</h3>
        <ul class="ul-edu fa-ul">
          {{ range .certificates }}
          <li>
            <i class="fa-li fas fa-award"></i>
            <div class="description">
              <p class="course"><a href="{{ .link }}" target="_blank">{{ .certificate }}</a></p>
              <p class="institution">{{ .validity }}</p>
              <p class="institution">{{ .institution }}</p>
            </div>
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

      {{ with $person.education }}
      <div class="col-md-7">
        <div class="section-subheading">{{ i18n "education" | markdownify }}</div>
        <ul class="ul-edu fa-ul">
          {{ range .courses }}
          <li>
            <i class="fa-li fas fa-graduation-cap"></i>
            <div class="description">
              <p class="course">{{ .course }}{{ with .year }}, {{ . }}{{ end }}</p>
              <p class="institution">{{ .institution }}</p>
            </div>
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

    </div>
  </div>
</div>

Partials are used to break down Hugo pages into smaller β€œcomponents”. To learn more about it, read the Partial Templates on the Hugo website and the Partial Tutorial on CloudCannon.

What we did here is telling Hugo to generate the About section as it normally would but in between the Interests and the Education section we added the Certifications section.

The original html template code for the About widget can be found in the /wowchemy-hugo-theme/ repository.

Step 2: Create the i18n folder and an en.yaml file

In the code above, you can see that the copy for the h3 titles are not in the about.html file itself but in another file that we have to create.

<h3>{{ i18n "certification" | markdownify }}</h3>

Create an i18n folder under the root directory of your site and in this new folder, create an en.yaml file with the following code in it.

# Navigation

- id: toggle_navigation
  translation: Toggle navigation

- id: table_of_contents
  translation: Table of Contents

- id: on_this_page
  translation: Contents

- id: back_to_top
  translation: Back to top

# General

- id: related
  translation: Related

- id: minute_read
  translation: min read

- id: previous
  translation: Previous

- id: next
  translation: Next

- id: figure
  translation: "Figure %d:"

- id: edit_page
  translation: Edit this page

# Buttons

- id: btn_preprint
  translation: Preprint

- id: btn_pdf
  translation: PDF

- id: btn_cite
  translation: Cite

- id: btn_slides
  translation: Slides

- id: btn_video
  translation: Video

- id: btn_code
  translation: Code

- id: btn_dataset
  translation: Dataset

- id: btn_project
  translation: Project

- id: btn_poster
  translation: Poster

- id: btn_source
  translation: Source Document

- id: btn_copy
  translation: Copy

- id: btn_download
  translation: Download

# About widget

- id: interests
  translation: Interests

- id: education
  translation: Education
  
  # Certification section inspired by rohitsalecha.com
- id: certification
  translation: Certifications

- id: user_profile_latest
  translation: Latest

# Accomplishments widget

- id: see_certificate
  translation: See certificate

# Experience widget

- id: present
  translation: Present

# Pages widget

- id: more_pages
  translation: See all

- id: more_posts
  translation: See all posts

- id: more_talks
  translation: See all talks

- id: more_publications
  translation: See all publications

# Contact widget

- id: contact_name
  translation: Name

- id: contact_email
  translation: Email

- id: contact_message
  translation: Message

- id: contact_send
  translation: Send

- id: book_appointment
  translation: Book an appointment

# Publication/Talk details

- id: abstract
  translation: Abstract

- id: publication
  translation: Publication

- id: publication_type
  translation: Type

- id: date
  translation: Date

- id: last_updated
  translation: Last updated on

- id: event
  translation: Event

- id: location
  translation: Location

- id: pub_uncat
  translation: Uncategorized

- id: pub_conf
  translation: Conference paper

- id: pub_journal
  translation: Journal article

- id: pub_preprint
  translation: Preprint

- id: pub_report
  translation: Report

- id: pub_book
  translation: Book

- id: pub_book_section
  translation: Book section

- id: pub_thesis
  translation: Thesis

- id: pub_patent
  translation: Patent

# Project details

- id: open_project_site
  translation: Go to Project Site

# Default titles for archive pages

- id: posts
  translation: Posts

- id: publications
  translation: Publications

- id: talks
  translation: Talks

- id: projects
  translation: Projects

# Search

- id: search
  translation: Search

- id: search_placeholder
  translation: Search...

- id: search_results
  translation: results found

- id: search_no_results
  translation: No results found

# Error 404

- id: page_not_found
  translation: Page not found

- id: 404_recommendations
  translation: Perhaps you were looking for one of these?

# Cookie consent

- id: cookie_message
  translation: This website uses cookies to ensure you get the best experience on our website.

- id: cookie_dismiss
  translation: Got it!

- id: cookie_learn
  translation: Learn more

Step 3: Add your certification(s)

In the content/authors/admin/_index.md file, create a new section below education to add your certification(s) with the following code.

# Certification to show in About widget
certification:
  certificates:
  - certificate: Project Management Professional (PMP)
    institution: Project Management Institute
    validity: December 2021
    link: https://www.credly.com/badges/4768fdc4-a22e-43b3-bf48-973eeb1bebc4/linked_in_profile

And that's it, you're done! πŸŽ‰

References

  1. Rohit Salecha's website
  2. About widget: add more flexibility to Education section Github issue
  3. Silvia's Github issue

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.