L'objectif était de traduire mon CV en page web de telle sorte que visuellement on soit très proche. Vous pouvez comparez :

CV web ancien modèle Par la suite, différents modèles de présentation sont apparus, avec des options pour changer dynamiquement (sans rafraichissement de la page) la taille du texte, la couleur, et bien d'autres détails.
D'un point de vue technique c'est entièrement généré par PHP avec une base de données. Le nom et l'entête sont stockés dans une ligne de la table de référence IDENTITY dont l'ID est celui d'une personne en particulier. Les sections sont définies pour tous les CV, et leur contenu est lié à l'ID du CV.
Ce qui fait qu'il est possible de définir et générer rapidement d'autres CV avec des structures et modèles radicalement différents, bien au‑delà d'un simple reformatage CSS, ou partager cette structure pour d'autres personnes qui souhaiteraient l'utiliser sans se casser la tête avec du code HTML/CSS.
Il y a aussi du contenu qui apparait dynamiquement en cas de survol, pour commenter des éléments sans alourdir l'aspect général de la page, qui reste conforme à l'esprit concis d'un CV papier.

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="CV.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="/Inc/frame.js"></script> </head> <body> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/CV/CV.inc.php'; if($MODEL==1) $MODEL_SRC='OldCV'; else if($MODEL==2) $MODEL_SRC='OldCV2'; else $MODEL_SRC='NewCV'; $MODEL_SRC.=".php?CV_ID=$CV_ID&CV_Model=$MODEL&Setup_ID=$SetupID&FontSize=$FontSize&Hue=$Hue&Details=$Details&Score=$Score&Links=$Links&InvChrono=$InvChrono"; ?> <script> function PrintFrame() { let iframe = document.getElementById('frameID'); let root = iframe.contentWindow.document.documentElement; let Links=$('#Links').val(); console.log('Links='+Links+' css='+$(root).find('LinkTable').css('display')); if (Links==1) $(root).find('LinkTable').css('display','block'); iframe.contentWindow.print(); if (Links==1) $(root).find('LinkTable').css('display','none'); } function ChangeCV(rb,ResetZoom) { if (ResetZoom) { $('#FontSize').attr('min','0'); $('#FontSize').attr('value','0'); } $('#ChangeCV').submit(); } function FontSizeChange(value) { $('#FontSizeZoom').html(value); let root = document.getElementById('frameID').contentWindow.document.documentElement; root.style.setProperty('--zoom-mod', value/100); } function HueChange(value) { $('#HueMod').html(value); let root = document.getElementById('frameID').contentWindow.document.documentElement; root.style.setProperty('--cb-hue-mod', value); } $( window ).on( "load", function() { <?php if (isset($Hue) && $Hue!=0) echo "HueChange($Hue);"; if (isset($FontSize) && $FontSize!=100) echo "FontSizeChange($FontSize);"; ?> } ); </script> <nav> <form action='/CV/' method='GET' id='ChangeCV'> <section_label>Choix du modèle</section_label> <section> <article> <cv_option><input type="radio" name="CV_Model" id="rbCV_Old" value="1" <?php if ($MODEL==1) echo 'checked="checked"';?> onclick="ChangeCV(this,true);"><Label for="rbCV_Old">Dynamique, Compact (Ancien design)</Label></cv_option> <p>Premier modèle de CV HTML/CSS, compact en 1 page, des détails s'affichent à l'écran en boites flottantes quand certaines zones sont survolées (compétences ou expériences).<br> Certaines sections peuvent êtres supprimées à l'impression pour rester sur une seule page (autant que possible). </p> </article> <article> <cv_option><input type="radio" name="CV_Model" id="rbCV_Old_Plus" value="2" <?php if ($MODEL==2) echo 'checked="checked"';?> onclick="ChangeCV(this,true);"><Label for="rbCV_Old_Plus">Dynamique, Aéré (Ancien design)</label></cv_option> <p>Basé sur le premier modèle, les expériences sont déportées sur les pages 2 et suivantes pour aérer l'affichage et l'impression.<br>Les détails peuvent être inclus de manière statique à l'écran et à l'impression ou rester sur un mode d'affichage dynamique quand certaines zones sont survolées.</p> </article> <article> <cv_option><input type="radio" name="CV_Model" id="rbCV_New" value="3" <?php if ($MODEL==3) echo 'checked="checked"';?> onclick="ChangeCV(this,true)"><Label for="rbCV_New">Moderne sur plusieurs pages</label></cv_option> <p>Design plus récent, non limité à une page d'impression. <br>Les mises en page à l'écran et à l'impression sont conçues pour être le plus proche possible, aérées tout en restant optimisée (peu de zones vides). <br>Les détails inclus statiquement sont plus nombreux. </p> </article> </section> <section_label>Options du modèle</section_label> <section> <article> <cv_option><Label for="Hue">Teinte <span id="HueMod" style="min-width:40px"><?=$Hue?></span>°</Label> <input type="range" name="Hue" id="Hue" min="-180" max="180" value="<?=$Hue?>" oninput="HueChange(value)" /*onchange="ChangeCV(this);"*/ /></cv_option> <cv_option><Label for="FontSize">Zoom <span id='FontSizeZoom' style="min-width:40px"><?=$FontSize?></span>%</Label> <input type="range" name="FontSize" id="FontSize" min="50" max="150" value="<?=$FontSize?>" oninput="FontSizeChange(value)" /*onchange="ChangeCV(this);"*/ /></cv_option> <cv_option><Label for="InvChrono">Ordre Chronologique</Label> <select name="InvChrono" id="InvChrono" onchange="ChangeCV(this);"> <option value='0' Label='Défaut modèle' <?php if ($InvChrono==0) echo 'selected';?> > <option value='1' Label='Inverse' <?php if ($InvChrono==1) echo 'selected';?> > </select> </cv_option> <cv_option><Label for="Details">Détails</Label> <select name="Details" id="Details" onchange="ChangeCV(this);"> <option value='-1' Label='Défaut modèle' <?php if ($Details==-1) echo 'selected';?> > <option value='0' Label='Survol' <?php if ($Details==0) echo 'selected';?> > <option value='1' Label='Affichés' <?php if ($Details==1) echo 'selected';?> > </select> </cv_option> <cv_option><Label>Type de score</Label> <select name="Score" id="Score" onchange="ChangeCV(this);"> <option value='-1' Label='Défaut modèle' <?php if ($Score<=0) echo 'selected';?> > <option value='1' Label='Star' <?php if ($Score==1) echo 'selected';?> > <option value='2' Label='Gauge' <?php if ($Score==2) echo 'selected';?> > </select> </cv_option> <cv_option><Label for="Links">Liens externes</Label> <select name="Links" id="Links" onchange="ChangeCV(this);"> <option value='-1' Label='Défaut modèle' <?php if ($Links==-1) echo 'selected';?> > <option value='0' Label='Aucun' <?php if ($Links==0) echo 'selected';?> > <option value='1' Label='Imprimés' <?php if ($Links==1) echo 'selected';?> > <option value='2' Label='Affichés' <?php if ($Links==2) echo 'selected';?> > </select> </cv_option> </article> </section> <section_label>Identité & Version</section_label> <section> <article> <p>Sélectionnez l'identité de la personne dont vous désirez le CV et la version du CV/</p> <cv_option><Label for="CV_ID">Identité</Label> <select name="CV_ID" id="CV_ID" onchange="ChangeCV(this,true);"> <?php $result=Query('SELECT ID,PRENOM,NOM FROM CV_IDENTITY ORDER BY ID'); foreach($result as $CV) { echo "<option value='$CV[ID]' Label='$CV[NOM] $CV[PRENOM]'"; if ($CV['ID']==$CV_ID) echo ' selected/>'; else echo '/>'; } ?> </select> </cv_option> <cv_option><Label for="Setup_ID">Version</Label> <select name="Setup_ID" id="Setup_ID" onchange="ChangeCV(this,true);"> <?php $result=QryAll("SELECT ID,VERSION FROM CV_TABLE_SETUP WHERE ID_CV=$CV_ID AND KIND=$MODEL ORDER BY PREF DESC"); if (empty($result)) $result=QryAll("SELECT ID,VERSION FROM CV_TABLE_SETUP WHERE ID_CV=$CV_ID ORDER BY PREF DESC"); // AND KIND=$MODEL foreach($result as $CV) { echo "<option value='$CV[ID]' Label='$CV[VERSION]'"; if ($CV['ID']==$SetupID) echo ' selected/>'; else echo '/>'; } if (empty($result)) echo "<option value='' Label='---'/>"; ?> </select> </cv_option> </article> </section> </form> <button onClick="PrintFrame()">Imprimer</button>  </nav> <main> <iframe src="<?=$MODEL_SRC?>" frameborder="0" marginheight="10" id="frameID"></iframe> </main> </body> </html>