Compare commits
No commits in common. "main" and "1.3" have entirely different histories.
2 changed files with 88 additions and 246 deletions
59
index.html
59
index.html
|
|
@ -6,28 +6,25 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Pismont Quentin</title>
|
<title>Pismont Quentin</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="section">
|
<section id="header">
|
||||||
<img src="face.jpg" alt="Votre Photo" id="profile-photo" style="max-width: 150px; border-radius: 50%;">
|
<img src="face.jpg" alt="Votre Photo" id="profile-photo">
|
||||||
<h1>Pismont Quentin</h1>
|
<h1>Pismont Quentin</h1>
|
||||||
<p>Lead Developer</p>
|
<p>Lead Developer</p>
|
||||||
<button id="theme-toggle">Toggle Theme</button>
|
</section>
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container">
|
<section id="about-me">
|
||||||
<section id="about-me" class="section">
|
|
||||||
<h2>À propos de moi</h2>
|
<h2>À propos de moi</h2>
|
||||||
<p>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.</p>
|
<p>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. </p>
|
||||||
<p>J'ai également des compétences avancées en déploiement et intégration continue grâce à Docker, Docker Swarm, GitLab et Linux.</p>
|
<p>J'ai également des compétences avancées en déploiement et intégration continue grâce à Docker, Docker Swarm, GitLab et Linux.</p>
|
||||||
<p>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.</p>
|
<p>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. </p>
|
||||||
<p>Disponible pour de nouvelles opportunités stimulantes et enrichissantes.</p>
|
<p>Disponible pour de nouvelles opportunités stimulantes et enrichissantes.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="experiences" class="section">
|
<section id="experiences">
|
||||||
<h2>Expériences</h2>
|
<h2>Experiences</h2>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>Lead Web Developer</h3>
|
<h3>Lead Web Developer</h3>
|
||||||
<h5>sept. 2019 - aujourd'hui</h5>
|
<h5>sept. 2019 - aujourd'hui</h5>
|
||||||
|
|
@ -36,18 +33,17 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>Fullstack Web Developer</h3>
|
<h3>Fullstack Web Developer</h3>
|
||||||
<h5>août 2016 - sept. 2019</h5>
|
<h5>aout 2016 - sept. 2019</h5>
|
||||||
<hr/>
|
<hr/>
|
||||||
<p>Maintenance et création</p>
|
<p>Maintenance et creation </p>
|
||||||
<p>Node.js · React · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum</p>
|
<p>Node.js · React · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="skills" class="section">
|
<section id="skills">
|
||||||
<h2>Compétences</h2>
|
<h2>Compétences</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>NodeJS /w Typescript</li>
|
<li>NodeJS /w Typescript</li>
|
||||||
<li>Bun</li>
|
|
||||||
<li>React /w Typescript & ViteJS</li>
|
<li>React /w Typescript & ViteJS</li>
|
||||||
<li>Linux</li>
|
<li>Linux</li>
|
||||||
<li>MariaDB</li>
|
<li>MariaDB</li>
|
||||||
|
|
@ -58,48 +54,21 @@
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="projects" class="section">
|
<section id="projects">
|
||||||
<h2>Projets</h2>
|
<h2>Projets</h2>
|
||||||
<div class="card">
|
<div class="card" style="background-color: rgba(255, 228, 196, 0.315);">
|
||||||
<h3><a style="color: inherit" href="https://gitea.qpismont.fr/qpismont/imgproxy-rs">ImgProxy-rs</a></h3>
|
<h3><a style="color: inherit" href="https://gitea.qpismont.fr/qpismont/imgproxy-rs">ImgProxy-rs</a></h3>
|
||||||
<p>Ce projet consiste en un proxy d'images développé en Rust, utilisant la bibliothèque Tokio pour la gestion asynchrone des requêtes.</p>
|
<p>Ce projet consiste en un proxy d'images développé en Rust, utilisant la bibliothèque Tokio pour la gestion asynchrone des requêtes.</p>
|
||||||
<p>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.</p>
|
<p>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.</p>
|
||||||
<p>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.</p>
|
<p>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.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card" style="background-color: rgba(206, 255, 196, 0.315);">
|
||||||
<h3>Trepa</h3>
|
<h3>Trepa</h3>
|
||||||
<p>Ce projet vise à développer une plateforme de streaming vidéo moderne et évolutive en utilisant l'architecture de microservices.</p>
|
<p>Ce projet vise à développer une plateforme de streaming vidéo moderne et évolutive en utilisant l'architecture de microservices.</p>
|
||||||
<p>Chaque microservice sera développé en NodeJS avec NestJS comme framework backend et utilisera PostgreSQL pour le stockage des données.</p>
|
<p>Chaque microservice sera développé en NodeJS avec NestJS comme framework backend et utilisera PostgreSQL pour le stockage des données.</p>
|
||||||
<p>Les utilisateurs pourront uploader des vidéos via l'interface web en React et les regarder en streaming avec une expérience utilisateur fluide.</p>
|
<p>Les utilisateurs pourront uploader des vidéos via l'interface web en React et les regarder en streaming avec une expérience utilisateur fluide.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2024 Pismont Quentin. Tous droits réservés.</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const toggleButton = document.getElementById('theme-toggle');
|
|
||||||
const body = document.body;
|
|
||||||
|
|
||||||
toggleButton.addEventListener('click', () => {
|
|
||||||
body.classList.toggle('dark-mode');
|
|
||||||
});
|
|
||||||
|
|
||||||
if (localStorage.getItem('theme') === 'dark') {
|
|
||||||
body.classList.add('dark-mode');
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleButton.addEventListener('click', () => {
|
|
||||||
if (body.classList.contains('dark-mode')) {
|
|
||||||
localStorage.setItem('theme', 'dark');
|
|
||||||
} else {
|
|
||||||
localStorage.setItem('theme', 'light');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
195
styles.css
195
styles.css
|
|
@ -1,182 +1,55 @@
|
||||||
/* 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 {
|
body {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.6;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background-color: #222831;
|
||||||
|
color: #eeeeee;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Liens */
|
#header {
|
||||||
a {
|
|
||||||
color: var(--link-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: var(--link-hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Conteneur principal */
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
header.section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: #30475e;
|
||||||
|
color: #eeeeee;
|
||||||
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-toggle {
|
#profile-photo {
|
||||||
position: absolute;
|
width: 150px;
|
||||||
top: 10px;
|
height: 150px;
|
||||||
right: 10px;
|
border-radius: 50%;
|
||||||
background-color: var(--primary-color);
|
margin-bottom: 15px;
|
||||||
color: white;
|
border: 4px solid #eeeeee;
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#theme-toggle:hover {
|
#about-me, #skills, #projects, #experiences {
|
||||||
background-color: var(--secondary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections */
|
|
||||||
.section {
|
|
||||||
flex: 1 1 300px;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: white;
|
max-width: 800px;
|
||||||
border-radius: 10px;
|
margin: 20px auto;
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
background-color: #393e46;
|
||||||
margin-bottom: 20px;
|
border: 1px solid #2c2f33;
|
||||||
}
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
/* 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 {
|
h2 {
|
||||||
font-size: 2em;
|
border-bottom: 2px solid #30475e;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
.card {
|
||||||
font-size: 1.75em;
|
border: 1px solid #2c2f33;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color: #323742;
|
||||||
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Boutons */
|
.card:last-child {
|
||||||
button, .btn {
|
margin-bottom: 0;
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, .btn:hover {
|
.card:hover {
|
||||||
background-color: var(--secondary-color);
|
background-color: #393e46;
|
||||||
}
|
|
||||||
|
|
||||||
/* 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);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue