My personal Website

Informatique - 08-01-2017

Objectives and Requirements

When I started the code of this website, I had a fairly precise idea of what wanted to create. These were my constraints :

  • It has to be a mix between a CV website and a "blog" to showcase my DIY projects ;
  • It should look nice, modern and simple ;
  • It must be bilingual (at least), even though I mostly write articles in English, having not enough time to translate everything ;
  • Obviously, it should be responsive and accessible.

Technical Choices


For the page design, I use Bootstrap. This was an obvious choice as I already learned to master it in a previous internship. This time, I used a template to begin with, called "Creative".

To avoid having to use JQuery, I use Bootstrap.native javascript library.


This Javascript library I included in this website allow me to have easy syntax coloration. This is very practical as my projects often have code in them, and it makes it much more pleasant to use. This is an example :

var s = "JavaScript syntax highlighting";

Simply Appear

Simply Appear is my super lightweight CSS and native JS library to generate animations when elements gets into view-port. More about this...

Interact PHP

Interact is my simple PHP open-source comment system. Client-side, it is very lightweight (<6KB CSS and JS combined) and intuitive (no logins, no cookies,...). Server-side, it is very easy to setup, manage and even customize to fit your needs. More about this...

No database !

This is where things get interesting ! I originally used a database to store project, comments, etc. I even created the admin interface to manage the content. It worked, but I was a bit concerned about security issues, especially with less obvious ones... This is why I decided to delete all of this and use a folder based system. Not only is this way very secure (using SSH), but it is also practical to use. More about this in the following part.

The project management system


The problem was the following : how to handle data with no database ? My idea to solve this is very simple and efficient : I stored all of the projects in sub-folders of a main "Projects" folder. Every project must have three files :

  • A "meta.json" containing the project's metadata. For instance, it stores the language, category, title, etc.
  • A "img.jpg", the project thumbnail.
  • A "", the actual text of the project in markdown.

A folder is considered as a project as soon as these three files are available.

Implementation in PHP

Reading these directories to display the project is actually very easy. This is how it works in pseudo-code :

foreach folder in "/projects" {
  if( and meta.json exists in folder) {
    param = jsondecode(meta.js)
    if( param is valid) {
return array;

Project is a PHP class.


To access my projects, I only have to connect to my server in SFTP, using a client such as FileZilla. It is a secured protocol using SSH.



To host my website, I used a Raspberry Pi B+ that I had laying around. As it is low power, it is a very good choice. Not only does it only consumes about 5$ in electricity every year, but it also doesn't need cooling, making it completely silent.It is hooked up to my "Freebox Mini" ISP router both in power and Ethernet.


My Raspberry Pi is running the "lite" version of the Raspbian (based on Debian) GNU/Linux distribution. Software-wise it is very basic :

  • Apache2
  • PHP 7
  • A SSH server

I plan to add a private Cloud file service on this server later on.

My domain was bought on OVH.

Auteur : Charles Grassin

What is on your mind?

  • No comments yet!

  Retour aux projets

Projets connexes