refonte

remove robots.txt
2024-05-27 19:34:44 +02:00 · 2024-05-27 19:11:18 +02:00
4 changed files with 247 additions and 92 deletions
--- a/1
+++ b/1
@ -2,5 +2,4 @@ FROM caddy:2-alpine

 COPY index.html /usr/share/caddy
 COPY styles.css /usr/share/caddy
-COPY robots.txt /usr/share/caddy
 COPY face.jpg /usr/share/caddy
--- a/index.html
+++ b/index.html
@ -6,16 +6,19 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pismont Quentin</title>
    <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>

 <body>
-    <section id="header">
-        <img src="face.jpg" alt="Votre Photo" id="profile-photo">
+    <header class="section">
+        <img src="face.jpg" alt="Votre Photo" id="profile-photo" style="max-width: 150px; border-radius: 50%;">
        <h1>Pismont Quentin</h1>
        <p>Lead Developer</p>
-    </section>
+        <button id="theme-toggle">Toggle Theme</button>
+    </header>

-    <section id="about-me">
+    <main class="container">
+        <section id="about-me" class="section">
            <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>J'ai également des compétences avancées en déploiement et intégration continue grâce à Docker, Docker Swarm, GitLab et Linux.</p>
@ -23,8 +26,8 @@
            <p>Disponible pour de nouvelles opportunités stimulantes et enrichissantes.</p>
        </section>

-    <section id="experiences">
-        <h2>Experiences</h2>
+        <section id="experiences" class="section">
+            <h2>Expériences</h2>
            <div class="card">
                <h3>Lead Web Developer</h3>
                <h5>sept. 2019 - aujourd'hui</h5>
@ -33,17 +36,18 @@
            </div>
            <div class="card">
                <h3>Fullstack Web Developer</h3>
-            <h5>aout 2016 - sept. 2019</h5>
+                <h5>août 2016 - sept. 2019</h5>
                <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>
            </div>
        </section>

-    <section id="skills">
+        <section id="skills" class="section">
            <h2>Compétences</h2>
            <ul>
                <li>NodeJS /w Typescript</li>
+                <li>Bun</li>
                <li>React /w Typescript & ViteJS</li>
                <li>Linux</li>
                <li>MariaDB</li>
@ -54,21 +58,48 @@
            </ul>
        </section>

-    <section id="projects">
+        <section id="projects" class="section">
            <h2>Projets</h2>
-        <div class="card" style="background-color: rgba(255, 228, 196, 0.315);">
+            <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" style="background-color: rgba(206, 255, 196, 0.315);">
+            <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>    
+
 </body>

 </html>
--- a/robots.txt
+++ b/robots.txt
@ -1,2 +0,0 @@
-User-agent: *
-Disallow: /
--- 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);
 }
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
qpismont	e777a7b954	remove robots.txt All checks were successful ci/woodpecker/tag/woodpecker Pipeline was successful Details	2024-05-27 19:11:18 +02:00