Version 1

En septembre 2022, j'ai voulu personnaliser mon site de travaux pour y accueillir une présentation de moi, ainsi que quelques projets que j'avait déjà fait jusque là.

Lorsqu'on nous a parlé de réaliser un portfolio universitaire, je me suis rendu compte que ce site ne me convenait plus et j'ai commencé à réfléchir à la réalisation d'un nouveau site personnel.

Version 2

Sur ce nouveau site, je me suis créé un "CMS" très simple pour pouvoir éditer mon portfolio très facilement et rapidement en utilisant la librairie "EditorJS", la propriété "contenteditable" et en stockant les données dans un fichier JSON.

Les pages de mon portfolio sont donc générées automatiquement et je peux également ajouter du contenu très rapidement.

Bout du code JavaScript permettant la sauvegarde

const name = nameElement.innerHTML;
const description = descriptionElement.innerHTML;
const presentation = presentationElement.innerHTML;
const color = document
    .querySelector(".heading")
    .style.getPropertyValue("--project_color");
const buttons = document.querySelectorAll(".btn-list > *");
const buttonsArray = [];
for (const button of buttons) {
    if (button.id === "btn_plus") continue;
    buttonsArray.push({
        text: button.innerText,
        href: button.getAttribute("href"),
        target: button.getAttribute("target"),
        class: button.getAttribute("class").replace("btn ", ""),
        style: button.getAttribute("style"),
    });
}

const formData = new FormData();
formData.append(
    "data",
    JSON.stringify({
        name,
        description,
        color,
        presentation,
        buttons: buttonsArray,
        tags: getSelectValues(tags),
        ac: getSelectValues(selectAc),
        date: monthDate.value,
        elements,
    })
);

if (uploadThumbnail.files[0]) {
    formData.append(
        "thumbnail",
        uploadThumbnail.files[0],
        uploadThumbnail.files[0].name
    );
}

fetch("/api/admin/projects/update.php", {
    method: "POST",
    body: formData,
}).then((r) => {
    if (r.status === 200) {
        alert("Projet mis à jour !");
        leaveEditMode();
    } else {
        alert("Une erreur est survenue");
    }
});

Morceau du code PHP permettant la sauvegarde

$formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::LONG, IntlDateFormatter::NONE, pattern: 'MMMM yyyy');
foreach ($project as $key => $value) {
    if ($key === 'date')
        $value = ucfirst($formatter->format(strtotime($value)));
    if ($key === 'presentation')
        $value = html_entity_decode($value);

    $projects[$projectKey][$key] = $value;
}
file_put_contents($_SERVER['DOCUMENT_ROOT'] . '/api/projects.json', json_encode($projects, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE));