This portfolio

Ce portfolio

SAÉ 104

2024 → IUT Blois — BUT R&T S1 Solo Projet individuel

Built for SAÉ104 at IUT Blois, then kept alive and iterated on. HTML and CSS written by hand — no frameworks, no generators. Self-hosted on a Hetzner VPS running nginx. Bilingual EN/FR with a vanilla JS language toggle that persists in localStorage. Also has a dark/light mode toggle. As much a Linux and nginx exercise as a design project.

Réalisé dans le cadre du SAÉ104 à l'IUT de Blois, puis maintenu et itéré dessus. HTML et CSS écrits à la main — pas de frameworks, pas de générateurs. Auto-hébergé sur un VPS Hetzner sous nginx. Bilingue EN/FR avec un toggle de langue en JS vanilla qui persiste en localStorage. Mode dark/light également. Autant un exercice Linux et nginx qu'un projet de design.

HTML5 CSS3 JavaScript nginx Hetzner VPS Linux

GitHub — @commonsensical

Visuals Visuels

Screenshots

Captures d'écran

Home page — dark mode Page d'accueil — dark mode

Home — dark mode

Accueil — dark mode

Home page — light mode Page d'accueil — light mode

Home — light mode

Accueil — light mode

Projects page Page projets

Projects page

Page projets

nginx config Config nginx

Server configuration

Configuration serveur

BUT R&T competencies Compétences BUT R&T

Competencies developed

Compétences développées

RT5 Build a web interface Construire une interface web HTML/CSS written entirely by hand. CSS custom properties for theming, responsive layout with CSS Grid, no dependencies. HTML/CSS entièrement écrits à la main. Variables CSS pour le thème, layout responsive avec CSS Grid, aucune dépendance.

RT5 Client-side scripting Scripting côté client Vanilla JS for language and theme toggles, localStorage persistence, no framework. JS vanilla pour les toggles langue et thème, persistance localStorage, sans framework.

RT1 Self-host a web service Auto-héberger un service web Configured nginx on a Hetzner VPS: server blocks, SSL/TLS with Let's Encrypt, HTTPS redirect, static file serving. Configuration nginx sur VPS Hetzner : server blocks, SSL/TLS Let's Encrypt, redirection HTTPS, service de fichiers statiques.

RT6 Present and communicate Présenter et communiquer Bilingual site (EN/FR) with attention to clear, natural copy and consistent visual design across all pages. Site bilingue (EN/FR) avec attention portée à un contenu clair et naturel, design visuel cohérent sur toutes les pages.

Downloads Téléchargements

Documents