About this website

I loved building this website from A to Z with my own two hands.

General Overview Summary

• For the pleasure;
• A site ex nihilo;
• The "déjà-vu";
• What's new;
• Your suggestions.

See also The Experts' Corner.

For the pleasure

I carried out this project for the joy of making and the love of a job well done that guide my every step.

I hope you enjoy browsing it as much as I enjoyed "cooking it up" for you.

This project serves to ensure that I master the technologies it uses. This helps me when working on existing codebases or managing web service providers for you.

You will find content here to help you understand what I can bring to your projects.

But first and foremost, it is a great pleasure for me to devote myself to this kind of creation.

A site ex-nihilo

I created this website from scratch, ex-nihilo, line by line, step by step.

In Project 1 ¹, I limited myself to "old-school" procedural methods and used only native HTML, PHP, CSS, and JavaScript.

On this project ², I use much more modern web development methods. I explain a bit more in The Experts' Corner.

The "déjà-vu"

These ideas were already implemented in Project 1. ¹

Responsive Presentation

This is a design approach where pages adapt to the available space in the web browser window. In English, we call this "fluid design".

I favor a fully adaptive approach ³ that gradually adjusts to the space you allocate to the site on your screen.

You can actually have fun resizing your browser window to see how it reacts.

I still use a few breakpoints ⁴, but I strive to keep them to a minimum.

I chose to offer large display fonts and use as much screen space as possible when the resolution allows. This reduces eye strain and feels much more relevant to me.

Theme Management

The themes of the pages you browse are managed dynamically:

• A theme is randomly selected at each page load;
• Pages are refreshed periodically:
  • Unless you lock the theme, or
  • If you are in the contact form, to avoid interrupting your input.

You can:

• Change the theme on the current page as many times as you like.
• Lock a theme to view all pages with that specific style.

If you keep site data on your machine, your preferences will be applied during your next visit and those following.

The million-euro question

In your opinion, what is the meaning behind these themes that you can change or lock?

What's new

This project features several new additions compared to the previous one. ¹ Here are a few.

Languages

The site is multilingual: it is available in French and English. Links are prefixed with fr/ and en/ respectively, then named in the chosen language. All content is translated on the website as well as in the emails sent to you.

If you visit the root address for the first time, the site tries to detect your language preferences and directs you to your language if available, or to the French version.

Hiding the footer

You can hide the footer using the button with the cross on the right of the screen. To show the footer again, simply click the same button when it displays an eye icon.

This frees up screen space. For example, it is useful to do this after choosing and locking your favorite theme.

Light and Dark modes

The site offers display mode management: light or dark.

The tool detects your browser preferences and provides a toggle button (top right).

Validation test

The anti-bot validation test (aka captcha) in the contact form is a personal creation.

Very lightweight, it runs on pure HTML / CSS (without JavaScript).

My entire website runs 100% on my server, without any third-party content. This validation test is no exception. See Terms of Use for more information.

Local storage

Your preferences are saved for your return if you do not clear your local storage:

• Theme state (locked or not);
• The theme itself;
• Display mode (light or dark); and
• Language (via last visited page).

This data is stored on your machine and managed by your browser in what is known as "local storage" or "client-side storage ⁵".

Your suggestions

If you have suggestions for improvement or if you notice something that deserves my attention, please let me know. If we don't know each other yet, you can use the contact form even if, officially, it's not there for that. 😉

Best regards,

Marc JESTIN
https://marcjestin.fr

---

The Experts' Corner

Let's talk a bit about the technologies, tools, and methods used in this website project.

• The core of the website;
• Development tools;
• Continuous Integration / Continuous Deployment (CI/CD);
• Documentation;
• Peripheral notes;

The core of the website

By "the core of the website", I mean the concepts, technologies, and tools used to run the site itself.

General Concepts

This project makes extensive use of:

• Object-oriented programming,
• Autoloader,
• Dependency injection,
• Factories,
• Service container,
• Data attributes,
• Router,
• Internationalization of content and URLs,
• A "rich" language for styles,
• Dynamic content management,
  • with a template engine and
  • a parser,
• etc.

The languages used by the website once compiled are, of course, HTML, PHP, JavaScript ⁶, and CSS.

PHP Libraries

I used composer libraries for the PHP fundamentals. Most come from Symfony. This is the case for the session manager and the router, for example.

To avoid sourcing everything from Symfony, the dependency injection container is PHP-DI.

The enriched Markdown to HTML parser is league/commonmark. ⁷

Templating Language

I use Twig, also from the Symfony ecosystem.

Style Definition Language

I use SCSS with several variables, maps, and mixins.

Development tools

Git, that faithful companion, never leaves my side. What peace of mind to know that at any time you can retrieve something you wrote or return to a stable, functional state of code to start the quest for the Holy Grail anew!

On the JavaScript tools side, Dart Sass and Vite are part of the stack.

Mailpit is my friend for email delivery simulations.

Continuous Integration / Continuous Deployment (CI/CD)

I wrote a JavaScript script to automate the processing and transfer of site elements from the development project to the pre-production project.

From the pre-production project, once validated, I install the production site on my host, still using scripts (bash this time).

Documentation

I no longer undertake a project without integrating a documentation process.

Anyone who knows development understands what a significant investment this is.

It takes time, but it is a sine qua non for a smooth experience with code maintenance and future evolutions. It is also useful for better conceptualizing and memorizing what we do.

For automatic class documentation, I use phpdocumentation/shim.

For the documentation I write manually, I use TeX / LaTeX. It is the only tool that provides everything I need to create high-quality, durable documentation.

The essential minted package is used to insert code snippets. It utilizes Pygments for syntax highlighting.

I use LuaLaTeX to run my Lua code. These scripts allow me to customize presentation elements and generate specific content (file lists, timestamps, counts, etc.).

Peripheral notes

My faithful personal wiki under DokuWiki is always with me.

I take chronological notes on one side and update my knowledge and skills base on the other.

Once you've had a taste of most of these tools, I believe it becomes very difficult to go back...

Best regards,

Marc JESTIN
https://marcjestin.fr