MY PERSONAL WEBSITE

My personal website, built with zola.

Architecture

The website has the following sections:

• blog
• lists
• wiki
• portfolio
• cv

Blog section

This is the classic text oriented section. Each file is a blog post.

List section

The list section is a bit special. It originaly was a way for me to make lists, because I like doing that. Things of interest, things I found online, etc. Each list is ongoing unless stated otherwise.

Wiki section

This section is my personnal knowledge base. It's my personnal wiki. NOT WORKING RIGHT NOW.

Portfolio and CV

Those two are distinct from the previous ones. They are not generated by zola as of now. Might have fun with templates at a later date.

Templates

Shortcode

aside

{% aside() %}
{% end %}

audio

{{ audio(url="https://samplelib.com/lib/preview/mp3/sample-3s.mp3") }}

video

{{ video(url="media/BigBuckBunny_320x180.mp4") }}

Bookmarklets

javascript:(function(){const d=new Date().toISOString();const u=window.location.href;const t=document.title;let desc='';const m=document.querySelector('meta[name="description"]')||document.querySelector('meta[property="og:description"]');if(m){desc=m.getAttribute('content').substring(0,100)}const toml='[[entries]]\n'+'date = "'+d+'"\n'+'url = "'+u+'"\n'+'title = "'+t+'"\n'+'description = "'+desc+'"';navigator.clipboard.writeText(toml).then(()=>alert('Copied!')).catch(e=>alert('Failed: '+e))})();

it should copy something exactly like this:

[[entries]]
date = "2025-01-02T15:35:46.054Z"
url = "https://example.com"
title = "Page Title"
description = "Page description"

Security

The initial theme template I was using, zola-bearblog had this snippet to set some meta tags for security:

<!-- These tags are here for demostration. It's recommended to send them via HTTP headers instead. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'unsafe-inline'">

As recommended, I set the im my Caddy server so as to optimize

Content-Security-Policy:
  default-src 'none';
  img-src 'self';
  style-src 'self';
  object-src 'none';
  report-uri /csp-violation-report-endpoint;

---

TODO

• sidebar system
• responsive version
• simplify design ( colors, fonts, custom components)
• fix footer
• toc stays with scroll
• fix section list style (-> miniflux)
• fix overflowing checkbox boxes
• force clip in toc
• better quote styling
• better margin/padding on headings
• generic url_list compotent, usoing extra url element in metadata
• get the wiki sections and pages to render.
• wiki nested section fixed
• finish .top-button responsive styling and positionning
• responsive .main-nav and .social-media elements