From 26988ed201fad95b22cfa42c4ffa13e4e6c61abd Mon Sep 17 00:00:00 2001 From: qpismont Date: Mon, 27 May 2024 19:34:44 +0200 Subject: [PATCH] refonte --- index.html | 139 ++++++++++++++++++++++--------------- styles.css | 197 +++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 247 insertions(+), 89 deletions(-) diff --git a/index.html b/index.html index b7e7d7d..3d3e6dc 100644 --- a/index.html +++ b/index.html @@ -6,69 +6,100 @@ Pismont Quentin + - + + -
-

À propos de moi

-

Passionné et expérimenté en développement, je maîtrise NodeJS, React et TypeScript, avec une expertise solide en bases de données tels que MariaDB et PostgreSQL.

-

J'ai également des compétences avancées en déploiement et intégration continue grâce à Docker, Docker Swarm, GitLab et Linux.

-

Toujours avide d'apprendre et d'évoluer, je cherche activement des opportunités pour me plonger davantage dans le langage Rust, avec l'intention de m'y spécialiser à terme.

-

Disponible pour de nouvelles opportunités stimulantes et enrichissantes.

-
+
+
+

À propos de moi

+

Passionné et expérimenté en développement, je maîtrise NodeJS, React et TypeScript, avec une expertise solide en bases de données tels que MariaDB et PostgreSQL.

+

J'ai également des compétences avancées en déploiement et intégration continue grâce à Docker, Docker Swarm, GitLab et Linux.

+

Toujours avide d'apprendre et d'évoluer, je cherche activement des opportunités pour me plonger davantage dans le langage Rust, avec l'intention de m'y spécialiser à terme.

+

Disponible pour de nouvelles opportunités stimulantes et enrichissantes.

+
-
-

Experiences

-
-

Lead Web Developer

-
sept. 2019 - aujourd'hui
-
-

GitLab · Docker Swarm · Node.js · React · Docker · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum · Intégration continue

-
-
-

Fullstack Web Developer

-
aout 2016 - sept. 2019
-
-

Maintenance et creation

-

Node.js · React · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum

-
-
+
+

Expériences

+
+

Lead Web Developer

+
sept. 2019 - aujourd'hui
+
+

GitLab · Docker Swarm · Node.js · React · Docker · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum · Intégration continue

+
+
+

Fullstack Web Developer

+
août 2016 - sept. 2019
+
+

Maintenance et création

+

Node.js · React · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum

+
+
-
-

Compétences

-
    -
  • NodeJS /w Typescript
    • -
  • React /w Typescript & ViteJS
    • -
  • Linux
    • -
  • MariaDB
    • -
  • PostgreSQL
    • -
  • Docker + Swarm
    • -
  • CI/CD avec Gitlab et Gitea
    • -
  • Rust
    • -
-
+
+

Compétences

+
    +
  • NodeJS /w Typescript
    • +
  • Bun
    • +
  • React /w Typescript & ViteJS
    • +
  • Linux
    • +
  • MariaDB
    • +
  • PostgreSQL
    • +
  • Docker + Swarm
    • +
  • CI/CD avec Gitlab et Gitea
    • +
  • Rust
    • +
+
+ +
+

Projets

+
+

ImgProxy-rs

+

Ce projet consiste en un proxy d'images développé en Rust, utilisant la bibliothèque Tokio pour la gestion asynchrone des requêtes.

+

Le proxy mettra en cache les images en mémoire, sur le disque dur ou sur Amazon S3 pour une récupération rapide ultérieure.

+

De plus, il permettra d'effectuer des manipulations d'images telles que le zoom, le rognage, etc., en utilisant la puissante bibliothèque de traitement d'images, Libvips.

+
+
+

Trepa

+

Ce projet vise à développer une plateforme de streaming vidéo moderne et évolutive en utilisant l'architecture de microservices.

+

Chaque microservice sera développé en NodeJS avec NestJS comme framework backend et utilisera PostgreSQL pour le stockage des données.

+

Les utilisateurs pourront uploader des vidéos via l'interface web en React et les regarder en streaming avec une expérience utilisateur fluide.

+
+
+
+ + + + -
-

Projets

-
-

ImgProxy-rs

-

Ce projet consiste en un proxy d'images développé en Rust, utilisant la bibliothèque Tokio pour la gestion asynchrone des requêtes.

-

Le proxy mettra en cache les images en mémoire, sur le disque dur ou sur Amazon S3 pour une récupération rapide ultérieure.

-

De plus, il permettra d'effectuer des manipulations d'images telles que le zoom, le rognage, etc., en utilisant la puissante bibliothèque de traitement d'images, Libvips.

-
-
-

Trepa

-

Ce projet vise à développer une plateforme de streaming vidéo moderne et évolutive en utilisant l'architecture de microservices.

-

Chaque microservice sera développé en NodeJS avec NestJS comme framework backend et utilisera PostgreSQL pour le stockage des données.

-

Les utilisateurs pourront uploader des vidéos via l'interface web en React et les regarder en streaming avec une expérience utilisateur fluide.

-
-
diff --git a/styles.css b/styles.css index ab27bed..d7a28eb 100644 --- a/styles.css +++ b/styles.css @@ -1,55 +1,182 @@ +/* Import Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap'); + +/* Variables de couleurs */ +:root { + --primary-color: #2a9d8f; + --secondary-color: #e9c46a; + --background-color: #f4f4f4; + --text-color: #333; + --link-color: #2a9d8f; + --link-hover-color: #e76f51; +} + +/* Style global */ body { - font-family: Arial, sans-serif; + font-family: 'Roboto', sans-serif; + font-size: 16px; + line-height: 1.6; + background-color: var(--background-color); + color: var(--text-color); margin: 0; padding: 0; - background-color: #222831; - color: #eeeeee; } -#header { - text-align: center; - background-color: #30475e; - color: #eeeeee; - padding: 20px 0; +/* Liens */ +a { + color: var(--link-color); + text-decoration: none; + transition: color 0.3s ease; } -#profile-photo { - width: 150px; - height: 150px; - border-radius: 50%; - margin-bottom: 15px; - border: 4px solid #eeeeee; +a:hover { + color: var(--link-hover-color); } -#about-me, #skills, #projects, #experiences { +/* Conteneur principal */ +.container { + display: flex; + flex-wrap: wrap; + gap: 20px; padding: 20px; - max-width: 800px; - margin: 20px auto; - background-color: #393e46; - border: 1px solid #2c2f33; - border-radius: 4px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + + +/* Header */ +header.section { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +#theme-toggle { + position: absolute; + top: 10px; + right: 10px; + background-color: var(--primary-color); + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#theme-toggle:hover { + background-color: var(--secondary-color); +} + +/* Sections */ +.section { + flex: 1 1 300px; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +/* En-têtes */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Montserrat', sans-serif; + margin-bottom: 10px; + color: var(--primary-color); +} + +h1 { + font-size: 2.5em; } h2 { - border-bottom: 2px solid #30475e; - padding-bottom: 10px; - margin-bottom: 15px; + font-size: 2em; } -.card { - border: 1px solid #2c2f33; - padding: 10px; - border-radius: 4px; - margin-bottom: 20px; - background-color: #323742; - transition: background-color 0.3s; +h3 { + font-size: 1.75em; } -.card:last-child { - margin-bottom: 0; +/* Boutons */ +button, .btn { + background-color: var(--primary-color); + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; } -.card:hover { - background-color: #393e46; +button:hover, .btn:hover { + background-color: var(--secondary-color); +} + +/* Images */ +img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +/* Footer */ +footer { + background-color: var(--primary-color); + color: white; + text-align: center; + padding: 10px 0; + width: 100%; + bottom: 0; +} + +/* Responsive */ +@media (max-width: 768px) { + .container { + flex-direction: column; + } + + .section { + flex: 1 1 100%; + } +} + + + + +/* Thème sombre */ +body.dark-mode { + --primary-color: #1b263b; + --secondary-color: #415a77; + --background-color: #0d1b2a; + --text-color: #e0e1dd; + --link-color: #778da9; + --link-hover-color: #e0e1dd; +} + + +body.dark-mode h1, +body.dark-mode h2, +body.dark-mode h3, +body.dark-mode h4, +body.dark-mode h5, +body.dark-mode h6 { + color: var(--text-color); +} + +body.dark-mode { + background-color: var(--background-color); + color: var(--text-color); +} + +body.dark-mode a { + color: var(--link-color); +} + +body.dark-mode a:hover { + color: var(--link-hover-color); +} + +body.dark-mode .section { + background-color: #1b263b; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }