\documentclass[9pt]{article}
\usepackage{extsizes}
\usepackage{graphicx}
\usepackage[T1]{fontenc}
\usepackage[english,french]{babel}
\usepackage{url,parskip} 	    % other packages for formatting
\usepackage[usenames,dvipsnames]{xcolor}
\usepackage{fullpage}
\usepackage[margin=2.5cm,top=1.5cm]{geometry}
\usepackage{hyperref}
\usepackage{titlesec}
\usepackage{array}
\usepackage{enumitem}
\usepackage{longtable} 	
\usepackage{etoolbox}
\usepackage{tikz}
\usepackage[skins]{tcolorbox}
\usepackage{fancyhdr}

\definecolor{basecolor}{HTML}{000066}       %BLUE
\definecolor{accentcolor}{HTML}{318440}
\definecolor{darkGrey}{HTML}{989898}
\definecolor{light}{HTML}{828282}


\fancyhf{}
\fancyhfoffset{0em}
% Remove head rule
\renewcommand{\headrulewidth}{0pt}
%\fancyfoot[C]{\thepage}
\pagestyle{fancy}

% Configure list
\setlist[itemize,1]{label=-, nosep, leftmargin=2em} 
\setlist[itemize,2]{label=-, nosep, leftmargin=1.5em} 

% Setup Array : new column type
\newcolumntype{R}[1]{>{\hfill}m{#1}}

%Italian hyphenation for the word: ''corporations''
\hyphenation{im-pre-se}

\newlength{\rightcolumnlength}
\setlength{\rightcolumnlength}{12.5cm}

\newlength{\leftcolumn}
\setlength{\leftcolumn}{3cm}


\newcommand{\cvtag}[1]{
    \tikz[baseline]\node[anchor=base,draw=darkGrey!70,rounded corners=0.5ex,inner xsep=1ex,inner ysep=0.55ex,text height=1.3ex,text depth=.25ex]{\color{light}#1};
}

% \newcommand{\sectionTitle}[1]{
%     \color{accentcolor}\textsc{\Large{#1}}
%     \\
%     \color{darkGrey}\rule{\textwidth}{0.4pt} 
%     \color{black}
% }

\titleformat{\section}{\Large\raggedright}{}{0em}{}[\titlerule]
\titlespacing{\section}{0pt}{2pt}{2pt}

% \newcommand\sectionTitle[2]{\section{\texorpdfstring{\color{accentcolor}#2\enspace \textsc{#1}}{#1}}}
\newcommand\sectionTitle[1]{\section{\texorpdfstring{\color{accentcolor}\textsc{#1}}{#1}}\vspace{5px}}

% Define the 'keywords' environment
\newenvironment{keywords}{%
  \renewcommand{\arraystretch}{1.1}

  \begin{tabular}{>{}r>{}p{13cm}} 
}{%
  \end{tabular}
}

\newcommand\keywordsentry[2]{
  \textbf{#1} &   #2\\ 
}


\def\@photo{/mnt/data/workspace/clean_portfolio/public/imgs/profile-512.jpg}

\newcolumntype{E}{>{\raggedright\arraybackslash}p{\rightcolumnlength}}

\newenvironment{experiences}{%
  \begin{longtable}{R{\leftcolumn}|E}
}{%
  \end{longtable}
}

\newcommand\experience[7]{
  Hello \\
  % \textbf{#1}    & \textbf{#2, \textsc{#3}, #4}   								\\* \textbf{#5}    & \begin{minipage}[t]{\rightcolumnlength}
  % 					         #6
  %                  \end{minipage}										\\*
  %                \vspace{5px}
  %                & \footnotesize{\foreach \n in {#7}{\cvtag{\n}}} 	\\
}

\newcommand\emptySeparator{\multicolumn{2}{c}{}\\}

\newcommand*{\makecvfooter}[3]{%
  \fancyfoot{}
  \fancyfoot[L]{#1}
  \fancyfoot[C]{#2}
  \fancyfoot[R]{#3}
}

\begin{document}
    % \section{\color{accentcolor} \textsc{Hello World}}{Hello world}
    \begin{minipage}{\dimexpr\linewidth-3cm}
        \noindent{\Large{Matthieu \textbf{Bessat}}}
        \vspace{5px}
        \\
        \noindent\color{accentcolor}\textbf{\large{Programmer}}\color{black}
        \\
        Website, Email, Location, Age
    \end{minipage}
    \begin{minipage}{3cm}
        \tikz\path[fill overzoom image={\@photo}]circle[radius=0.5\linewidth];
    \end{minipage}
    \par{Also known as lefuturiste, freelance web developer and like to mess arround with tech.}
    \\

    \sectionTitle{Skills}
    \begin{keywords}
                \keywordsentry{Front-end web development}{html, css, js, sass, vue, nuxt}
                \keywordsentry{Back-end web development}{php, symfony, apiplatform, node, graphql, rest}
                \keywordsentry{Databases}{mariadb, mongodb, elasticsearch, redis}
                \keywordsentry{Unix-like system administration}{linux, systemd, docker}
                \keywordsentry{Web-server administration}{nginx, caddy}
                \keywordsentry{System development}{c, go}
                \keywordsentry{Embedded system development}{arduino, i2c}
                \keywordsentry{Development tools}{git, nvim, vscode, composer}
                \keywordsentry{Others tools}{twig, latex, coreutils, bash}
            \end{keywords}
    
    \sectionTitle{Professional experiences}
    \begin{longtable}{R{\leftcolumn}|E}
        \textbf{September 2020
} & \textbf{Administered association directory} \\*
    \textbf{July 2020
} & \textsc{Espace Condorcet}, Gaillon, France \\*
                          & \par{Web application of collaborative association management with administration interface for the Espace Condorcet} \\
         & \begin{minipage}[t]{\rightcolumnlength}
                    \begin{itemize}
                        \item{hello}
                        \item{hello}
                        \item{hello}
                    \end{itemize}
                   \end{minipage} \\
              & plus \\*
              & \footnotesize{\cvtag{node}\cvtag{typescript}\cvtag{express}\cvtag{vue}\cvtag{vuetify}\cvtag{mongodb}} \\
        \emptySeparator
        \textbf{April 2022
} & \textbf{Tracklift} \\*
    \textbf{December 2021
} & \textsc{Socobat Environnement},  \\*
                          & \par{Business management application: management of the recovering, the processing and the revaluation of wastes from elevator's worksite.} \\
         & \begin{minipage}[t]{\rightcolumnlength}
                    \begin{itemize}
                        \item{hello}
                        \item{hello}
                        \item{hello}
                    \end{itemize}
                   \end{minipage} \\
              & plus \\*
              & \footnotesize{\cvtag{vue}\cvtag{vuetify}\cvtag{symfony}\cvtag{api-platform}\cvtag{php}\cvtag{mariadb}} \\
        \emptySeparator
        \end{longtable}

    \sectionTitle{Highlighted side projects}
    \par{Entrepreneurship projects, volunteering projects or just for fun projects.}
    Hello
    \sectionTitle{Volunteering experiences}
    Hello

    \fancyfoot{}
    \fancyfoot[L]{Jul 4, 2022}
    \fancyfoot[C]{Matthieu Bessat - CV}
    \fancyfoot[R]{\thepage}
\end{document}