VERONIKA'S PORTFOLIO
Projects

Portfolio

Portfolio website built with Hugo and Bootstrap.

Languages

  • Go HTML Template
  • HTML
  • SCSS
  • JavaScript
  • Markdown

Technologies

  • Bootstrap

    CSS framework directed at responsive, mobile-first front-end web development.

  • Hugo

    SSG (Static Site Generator). The world’s fastest framework for building websites.

  • Disqus

    Comment hosting service.

  • Lunr

    Full-text search library.

  • Axios

    Promise based HTTP client.

  • htmx

    A JavaScript library that gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML so you can build modern user interfaces with the simplicity and power of hypertext.

  • GitHub

    Used for the project's continuous integration.

Description

Bootstrap

The main learning point of the project is to use Bootstrap library for the front end development.

Disqus

Practicing integration of an external service: Disqus for commenting on /education page.

Lunr, Axios

Also learning to integrate Javascript libraries, Lunr and Axios. Here to implement the site search.

htmx

Incorporating htmx for active search and using hx-boost.

  • Basically
    Using hx-boost to AJAX-ify the website (prevents reloading of the whole page and re-interpreting the head element).

  • Details
    Htmx then swaps the inner content of the <body> into the existing pages <body> tag. Boosts all anchor tags (links) and forms on the website.

  • Implementation
    In the baseof.html we add

<body hx-boost="true"></body>
  • Notes
    We then need to remember to override for the elements that we don’t want to be boosted, like a link to a pdf file. For example:
<a href="/help/documentation.pdf" hx-boost="false">Download Docs</a>

Or to prevent an unwanted behavior for some front-end elements. E.g. I had to disable htmx boost on links within the Bootstrap accordion element (because otherwise all accordion tabs appeared open). The following will correct the situation in taxonomy.html:

<div class="accordion shadow" id="accordionTags">
  <!--...-->
  {{ range .WeightedPages }}
  <li><a href="{{ .RelPermalink }}" hx-boost="false">{{ .LinkTitle }}</a></li>
  {{ end }}
</div>

hx-boost offers a “No JS” fallback (site will continue to work for users who turn off JS). This is what is called a progressive enhancement.

Screenshot of the project