Take them from https://fffuel.co/

• vvvortex #7
• rrrainbow
• bbburst
• ffflurry
• ttten
• bbblurry swirling around, like the old proton
• dddynamite replicated, if possible
• rrreflection
• wwwhirl
• hhhorizon
• sssurface squeezing and bouncing around
• ggglitch
• llleaves
• gggyrate
• gggrain
• cccoil
• oooscillate
• cccircular pulsing
• ssspiral
• tttwinkle multi-pulsing, if possible
• ooorganize just static, with inner drawer for the pattern
• ccchaos

It is possible to animate them both with SVG.animate or direct CSS (for large number of pieces prefer second option, possibly applied on the bulk).

Make CV from yaml:

• create a yaml file with sections and contents
• load the yaml from jekyll filling a template page
• load the yaml with jinja and filling a proper pandoc markdown
  • make a Makefile that: compile the yaml data with jinja template (running python script), right after runs pandoc on the compiled file generating
  • important: keep the intermediate markdown for ad hoc quick fixes (that at the end should always be incorporated in the pipeline, but can be comfortable for temporary check)
  • maybe: add also a check that if the compiled it is manually modified won't be overwritten

Complete ts setup:

• scripts all in _ts
• gulp should make all compilation steps and generate the js
  • don't use gulp, if ever ➡️ webpack
• the final js should be completely independent of everything else (i.e. if any script is loaded from any webpage it's able to run, without requiring to load other scripts before)

Even to store some preferences (like the background, or theme later), would be handy to have RxDB in place.

Just because I love them. Here the simplest: Mousetrap

• use on home to implement Ctrl+Z (pause), see #5

• make it disappear with clicks
• make it appear again on desktop (Ctrl+Z, terminal meaning of "pause", in the spirit of #5)
• make it appear again on mobile
  • maybe the easiest is a button in the top left corner

Currently it's almost fine, but:

• all the elements scale bad for wide screens, put some limits for breakpoints (exploit bulma ones)
• for small screens the white box is too thin
• for small screens the indentation inside the white box should be removed

Final goal: make it a game!

For the time being:

• drop video (maybe save somewhere for legacy)
• replace with a faster loading background
• add some extremely basic interaction
• the first time you make presentation disappear, add "Start" glowing button
  • glowing with different colors then "Enter"
  • adjacent on top of enter, slightly left (end touching half) for desktop
  • left with space (add margin to both) on mobile

Something like a nice picture (landscape or abstract better, adapts by cutting on mobile, without major pain) add on top https://vincentgarreau.com/particles.js/ (for basic interaction).

Best probably an svg pattern: extremely tiny and fancy enough. Check https://fffuel.co/

More on games

Starting

Just a character that can move on the background, and has to reach a goal.

Use a JS game engine like https://phaser.io/

Mobile

Add controllers on screen. Better if moved by touch native controls (swipe, touch on side

Showcase

Even more than a game: make it a game showcase. Every time you complete a level, you unlock next one.

• save a single integer in some store (level reached), such that it works as a checkpoint.
• add a dropdown drawer (access button visible in top right corner, only when presentation invisible), to go back to old levels
  • the number is not updated in that case, you should be able to still access old levels

• add a search bar (to be found).
• kbar, for inner navigation
  • no actual use case for commands (but if any, why not)
  • still need search provider, isn't it?

I'd like to move everything that can be integrated here, keeping everything else in subdomains.
The main advantages are:

• no need any longer to install in folders different from root
• share most of the style and components
• less workflows to maintain

In particular, pages that can be moved here are:

• cv (pulling data)
• projects
  • reserved to side projects
• logbook (pulling data)
• knowledge (pulling data)
• swtools (pulling data)
  • mount this in knowledge
• work

I will keep separated, but linked:

• slides
  • already at https://slides.annibale.dev/, but unlinked
• teaching
  • already at https://teaching.annibale.dev/, but unlinked

I'm not sure about:

• phd
  • already at https://phd.annibale.dev/ but most likely good as a subsection of "work"
  • most likely it should build and deploy pdfs, but delegate pages here

To improve discovery (even for myself), label everything deployed with website and annibale :)