Portfolio
📊 Get dashboard (projects, packages...) csv files from my Google Drive and display cool stats
| Status | 🟢 ACTIVE 🔒 PRIVATE |
|---|---|
| URL | https://p.clementbarbaza.com |
| Created | February 27, 2024 |
| Language | JavaScript |
| Topics | clean-css commander csv-parse csv-parser github-api google-drive html-minifier markdown-it markdown-it-anchor markdown-it-table-of-contents nunjucks octokit-rest slugify uglify-js |
The portfolio project generates 3 static websites:
- the public portfolio
- the private portfolio (which is a dashboard)
- my teaching experiences
Public portfolio
It's a project based on plain-text files.
How it works?
- Get data from local csv files
- Retrieve projects information using Github API
- Calculate statistics
- Generate website (HTML pages)
Previously, it downloads csv files (projects, packages...) directly from Google Drive.
Database
The projects are stored in CSV files. Each CSV file is a category: projects, websites, guides, etc.
I list the projects I did and I’m actually maintaining by editing these CSV files, and I indicate for each project its GitHub repository.
Github API
Each time I generate the portfolio, I retrieve projects information from the GitHub repository directly using the GitHub API.
I store Github informations retrieved in the CSV files.
The description, the topics (or tags), the URL, the language, etc. come directly from GitHub. This forces me to have clean and complete repositories.
Github Topics
I use Github API to list project dependencies based on package.json file for Node or composer.json for PHP.
The project will automatically update GitHub repositories by applying the topics that correspond to the dependencies.
Project details
The portfolio automatically calculates statistics about the projects I have made.
Inside a dedicated projects/ folder, I may had manually created a README.md file that contains a description how the project works. Yes, like the one you are reading now.
And then automatically, a HTML page that corresponds to the project will be generated combining the README.md and project information contained its CSV file.
Private portfolio (dashboard)
The private portfolio looks like the public portfolio, except nothing is censored.
Other information stored in the CSV is listed such as the server, domain name, attached emails, etc.
The project also includes a page that allows me to list, sort and organize the projects by server, domain name, etc.
This allows me to have a dashboard which is a static website and which is based on a CSV database automatically updated with Github information.
Teaching experiences
This project is also based on a database made up of plain-text, markdown and CSV files.
All I have to do is update these files and generate the website regularly, so that it presents my teaching experience in the most complete and transparent way possible.
Database
A file lists all the courses I’ve made and another list lists all the classes I’ve had.
I use these two files as a relational database. This is done using a virtual index made up of three columns: year, city and name of the school.
I use 2 others Portfolio files for statistics: exercises and guides.
Content
The content is written in Markdown. Because that website is multilingual, I have two files, one in English and one in French.
Each file generates a Nunjucks file (e.g. en.njk). Then this file is rendered in HTML.
That means I use the Nunjucks template system inside a markdown file.
Statistics
This project lists and calculates statistics on training, classes, and also on exercises and guides.