June 2020

ortfo

A system for generating homemade portfolios.

Having a large number of projects (more than 200), I needed a solution to easily add them to my portfolio.
I wanted a system that would allow me to have the entry in my portfolio of a project stored with the project itself, in the same folder, for organization purposes.
I also wanted a fully generated site, as it would result in a very fast and easier to maintain site.

ortfo/db

I had the idea to store the portfolio entry of a project in a sub-folder .portfoliodb inside the project folder, to describe each project with markdown.
These markdown description files use the front-matter syntax, which allows to describe metadata such as the year of creation of a project with YAML.
Then, there are 3 types of blocks: paragraphs, isolated links (useful to highlight a link to the site or the source code, for example) and media (videos, images, PDFs, etc.).
You can also, with a custom syntax extension, translate the articles into several languages

A sample portfolio description file

Afterwards, these entries are collected into a JSON file constituting the portfolio database: this is the ‘db’ part of ortfo

A database after analysis of the different markdown files
source code of ortfo/db
github.com

ortfo/mk

Then finally, from this JSON file and templates HTML (written in Pug), all the pages of the site are generated, and there is only to deploy a folder of HTML files, it’s the ‘mk’ part (for make) of ortfo

A Pug template example

It includes the notions of:
- tags (categories),
- technologies used for each project,
- collections of several projects according to certain criteria,
- external sites (such as a link to a Spotify account, for example),
- thumbnails, automatically generated for each media in the project
- colors extracted from the media, useful to have the main colors of a project

An example of a file listing tags
An example file listing the technologies
source code of ortfo/mk
github.com

I decided after all to leave that solution behind, as it was a lot of custom code, and crippled my portfolio for a little while since there was some bugs that I did not solve. I turned to go templ for site generation and plan to make a new version of ortfo/mk that includes templ, an internationalization system for multilingual portfolios as well as some useful functions that are for now directly in the source code of my own portfolio

ortfo/gui

Finally, I wanted to make this tool accessible to everyone, not just developers. So I created a desktop application allowing the creation of portfolio entries without having to write code or even files with markdown syntax.

Application home page
desktop application source code
github.com

Time spent

156 hours 41 minutes

made with

  • Go
  • Svelte
  • JSON
  • YAML
  • Markdown