qpismont/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages 1 Wiki Activity Actions

Compare commits

base: qpismont:1.3
Branches Tags
qpismont:main
qpismont:1.4
qpismont:1.3
qpismont:1.2
..
compare: qpismont:main
Branches Tags
qpismont:main
qpismont:1.4
qpismont:1.3
qpismont:1.2

1 commit
1.3 ... main

Author SHA1 Message Date
qpismont
26988ed201 refonte
All checks were successful
ci/woodpecker/tag/woodpecker Pipeline was successful
Details
2024-05-27 19:34:44 +02:00
2 changed files with 247 additions and 89 deletions
Show stats Expand all files Collapse all files

139
index.html
View file

@ -6,69 +6,100 @@
<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>
<section id="header"> <header class="section">
<img src="face.jpg" alt="Votre Photo" id="profile-photo"> <img src="face.jpg" alt="Votre Photo" id="profile-photo" style="max-width: 150px; border-radius: 50%;">
<h1>Pismont Quentin</h1> <h1>Pismont Quentin</h1>
<p>Lead Developer</p> <p>Lead Developer</p>
</section> <button id="theme-toggle">Toggle Theme</button>
</header>
<section id="about-me"> <main class="container">
<h2>À propos de moi</h2> <section id="about-me" class="section">
<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> <h2>À propos de moi</h2>
<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>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>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>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>Disponible pour de nouvelles opportunités stimulantes et enrichissantes.</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>
</section> <p>Disponible pour de nouvelles opportunités stimulantes et enrichissantes.</p>
</section>
<section id="experiences"> <section id="experiences" class="section">
<h2>Experiences</h2> <h2>Expériences</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>
<hr/> <hr/>
<p>GitLab · Docker Swarm · Node.js · React · Docker · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum · Intégration continue</p> <p>GitLab · Docker Swarm · Node.js · React · Docker · PHP · JavaScript · MySQL · Git · Linux · TypeScript · Méthodes agiles · Scrum · Intégration continue</p>
</div> </div>
<div class="card"> <div class="card">
<h3>Fullstack Web Developer</h3> <h3>Fullstack Web Developer</h3>
<h5>aout 2016 - sept. 2019</h5> <h5>août 2016 - sept. 2019</h5>
<hr/> <hr/>
<p>Maintenance et creation </p> <p>Maintenance et création</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"> <section id="skills" class="section">
<h2>Compétences</h2> <h2>Compétences</h2>
<ul> <ul>
<li>NodeJS /w Typescript</li> <li>NodeJS /w Typescript</li>
<li>React /w Typescript & ViteJS</li> <li>Bun</li>
<li>Linux</li> <li>React /w Typescript & ViteJS</li>
<li>MariaDB</li> <li>Linux</li>
<li>PostgreSQL</li> <li>MariaDB</li>
<li>Docker + Swarm</li> <li>PostgreSQL</li>
<li>CI/CD avec Gitlab et Gitea</li> <li>Docker + Swarm</li>
<li>Rust</li> <li>CI/CD avec Gitlab et Gitea</li>
</ul> <li>Rust</li>
</section> </ul>
</section>
<section id="projects" class="section">
<h2>Projets</h2>
<div class="card">
<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>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>
</div>
<div class="card">
<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>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>
</div>
</section>
</main>
<footer>
<p>&copy; 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>
<section id="projects">
<h2>Projets</h2>
<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>
<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>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 class="card" style="background-color: rgba(206, 255, 196, 0.315);">
<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>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>
</div>
</section>
</body> </body>
</html> </html>

197
styles.css
View file

@ -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 { 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; margin: 0;
padding: 0; padding: 0;
background-color: #222831;
color: #eeeeee;
} }
#header { /* Liens */
text-align: center; a {
background-color: #30475e; color: var(--link-color);
color: #eeeeee; text-decoration: none;
padding: 20px 0; transition: color 0.3s ease;
} }
#profile-photo { a:hover {
width: 150px; color: var(--link-hover-color);
height: 150px;
border-radius: 50%;
margin-bottom: 15px;
border: 4px solid #eeeeee;
} }
#about-me, #skills, #projects, #experiences { /* Conteneur principal */
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px; padding: 20px;
max-width: 800px; }
margin: 20px auto;
background-color: #393e46;
border: 1px solid #2c2f33; /* Header */
border-radius: 4px; header.section {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 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 { h2 {
border-bottom: 2px solid #30475e; font-size: 2em;
padding-bottom: 10px;
margin-bottom: 15px;
} }
.card { h3 {
border: 1px solid #2c2f33; font-size: 1.75em;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
background-color: #323742;
transition: background-color 0.3s;
} }
.card:last-child { /* Boutons */
margin-bottom: 0; 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 { button:hover, .btn:hover {
background-color: #393e46; 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);
} }