Téléverser les fichiers vers "/"

2025-12-15 13:10:50 +00:00
parent 62898e632d
commit 7c14db7243
4 changed files with 644 additions and 0 deletions
--- a/mon_cv.pdf
+++ b/mon_cv.pdf
--- a/projects.html
+++ b/projects.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projets – BARUA Aditta</title>
+    
+    <meta name="description" content="Découvrez les projets d'Aditta Barua en BTS CIEL : outils Python, sites web professionnels, architecture réseau et cybersécurité.">
+
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+</head>
+
+<body>
+
+    <canvas id="background-canvas"></canvas>
+
+    <header id="page-header"></header>
+
+    <main>
+        <section id="projects" class="section" data-aos="fade-up">
+            <h2>Mes projets</h2>
+
+            <div class="projects-grid">
+
+                <article class="project-card">
+                    <h3>Python – BruteForce Tool</h3>
+                    <p>Développement d’un outil automatisé de test de mots de passe en Python.
+                       Projet axé sur la gestion des threads et l'optimisation des performances.</p>
+                    <div class="technologies">
+                        <strong>Technologies :</strong> Python, Multithreading, Dictionnaires.
+                    </div>
+                    <a href="demo-python.html" target="_blank" class="btn small">Voir la démo</a>
+                </article>
+
+                <article class="project-card">
+                    <h3>Sites vitrine – TPE</h3>
+                    <p>Création de sites professionnels modernes et responsives pour petites entreprises.
+                       De la conception UX/UI à la mise en production sur serveur.</p>
+                    <div class="technologies">
+                        <strong>Technologies :</strong> HTML5, CSS3 (Flexbox/Grid), JavaScript.
+                    </div>
+                    <a href="demo-tpe.html" target="_blank" class="btn small">Voir la démo</a>
+                </article>
+
+                
+                
+                <article class="project-card">
+                    <h3>Modding Minecraft</h3>
+                    <p>Création de modifications personnalisées et scripts depuis le collège.
+                       Ce projet est à l'origine de ma passion pour la programmation.</p>
+                    <div class="technologies">
+                        <strong>Technologies :</strong> Java / JavaScript (selon le type de modding).
+                    </div>
+                    <a href="demo-modding.html" target="_blank" class="btn small">Analyse technique</a>
+                </article>
+
+            </div>
+        </section>
+    </main>
+
+    <footer id="page-footer"></footer>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+    <script>AOS.init();</script>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,178 @@
+const HEADER_PATH = "header.html";
+const FOOTER_PATH = "footer.html";
+
+document.addEventListener("DOMContentLoaded", () => {
+    
+    
+    fetch(HEADER_PATH)
+        .then(res => res.text())
+        .then(data => {
+            
+            const headerPlaceholder = document.getElementById("page-header");
+            if (headerPlaceholder) {
+                headerPlaceholder.innerHTML = data;
+                
+                smoothScrollFix();
+            }
+        });
+
+   
+    fetch(FOOTER_PATH)
+        .then(res => res.text())
+        .then(data => {
+           
+            const footerPlaceholder = document.getElementById("page-footer");
+            if (footerPlaceholder) {
+                footerPlaceholder.innerHTML = data;
+            }
+        });
+        
+
+    if (document.getElementById("background-canvas") && typeof THREE !== 'undefined') {
+        initBackground();
+    }
+});
+
+
+
+
+function smoothScrollFix() {
+    
+    const links = document.querySelectorAll("nav a[href^='#']");
+
+    links.forEach(link => {
+        link.addEventListener("click", (e) => {
+            
+            
+            if (link.getAttribute("href").length <= 1) return; 
+
+            e.preventDefault();
+
+            const targetID = link.getAttribute("href").substring(1);
+            const target = document.getElementById(targetID);
+
+            if (target) {
+                
+                const offset = -80; 
+                const topPos = target.getBoundingClientRect().top + window.scrollY + offset;
+
+                window.scrollTo({
+                    top: topPos,
+                    behavior: "smooth"
+                });
+            }
+        });
+    });
+}
+
+
+
+let scene, camera, renderer, particles, cubes = [];
+
+
+function initBackground() {
+    const canvas = document.getElementById("background-canvas");
+    if (!canvas) {
+        console.error("Erreur Three.js: Le canvas #background-canvas est introuvable.");
+        return; 
+    }
+
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(
+        75, window.innerWidth / window.innerHeight, 0.1, 1000
+    );
+
+    renderer = new THREE.WebGLRenderer({
+        canvas: canvas,
+        alpha: true,
+        antialias: true
+    });
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+
+  
+    const particleCount = 500;
+    const positions = [];
+
+    for (let i = 0; i < particleCount; i++) {
+        positions.push((Math.random() - 0.5) * 200);
+        positions.push((Math.random() - 0.5) * 200);
+        positions.push((Math.random() - 0.5) * 200);
+    }
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+
+    const material = new THREE.PointsMaterial({
+        color: 0x00eaff,
+        size: 0.4,
+        transparent: true,
+        opacity: 0.8
+    });
+
+    particles = new THREE.Points(geometry, material);
+    scene.add(particles);
+
+
+    
+    for (let i = 0; i < 25; i++) {
+        const cubeGeo = new THREE.BoxGeometry(2, 2, 2);
+        const cubeMat = new THREE.MeshStandardMaterial({
+            color: Math.random() * 0xffffff,
+            wireframe: true
+        });
+        const cube = new THREE.Mesh(cubeGeo, cubeMat);
+
+        cube.position.set(
+            (Math.random() - 0.5) * 120,
+            (Math.random() - 0.5) * 120,
+            (Math.random() - 0.5) * 120
+        );
+
+        cubes.push(cube);
+        scene.add(cube);
+    }
+
+
+    
+    const light = new THREE.PointLight(0xffffff, 1.2);
+    light.position.set(15, 50, 40);
+    scene.add(light);
+
+
+   
+    camera.position.z = 70;
+
+    animateBackground();
+}
+
+
+
+function animateBackground() {
+    requestAnimationFrame(animateBackground);
+
+    particles.rotation.y += 0.0009;
+    particles.rotation.x += 0.0004;
+
+    cubes.forEach(cube => {
+        cube.rotation.x += 0.01;
+        cube.rotation.y += 0.015;
+
+        cube.position.x += (Math.random() - 0.5) * 0.02;
+        cube.position.y += (Math.random() - 0.5) * 0.02;
+    });
+
+    renderer.render(scene, camera);
+}
+
+
+
+window.addEventListener("resize", () => {
+    if (camera && renderer) {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+});
--- a/style.css
+++ b/style.css
@@ -0,0 +1,393 @@
+/* ========================================= */
+/* VARIABLES DE THÈME (PALETTE CHARBON & OR) */
+/* ========================================= */
+:root {
+    --color-dark-bg: #1A1A1A;           /* Gris Charbon très foncé (Base élégante) */
+    --color-panel-bg: #2C2C2C;          /* Gris foncé (Fonds de carte/Conteneurs) */
+    --color-light: #E0E0E0;             /* Gris clair chaud (Texte principal) */
+    --color-accent-main: #B8860B;       /* Or Mat / Dark Goldenrod (Accent mature) */
+    --color-accent-secondary: #DC143C;  /* Rouge Brique / Cramoisi (Accent énergie) */
+    
+    --shadow-subtle: 0 4px 10px rgba(0, 0, 0, 0.4);
+    --border-radius-base: 4px;
+    --font-size-base: 1rem;
+}
+
+/* ========================================= */
+/* GLOBAL & RESET */
+/* ========================================= */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+    font-family: "Poppins", sans-serif; 
+}
+
+body {
+    background: var(--color-dark-bg);
+    color: var(--color-light);
+    overflow-x: hidden;
+    line-height: 1.7; 
+    font-size: var(--font-size-base);
+}
+
+main {
+    max-width: 1200px; 
+    margin: 0 auto;
+    /* AJUSTEMENT DU GAP : Réduit l'espace entre le header et le contenu des pages */
+    padding-top: 100px; 
+    padding-left: 5%;
+    padding-right: 5%;
+    position: relative;
+    z-index: 2;
+}
+
+a {
+    color: var(--color-accent-main);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: var(--color-light);
+}
+
+/* ========================================= */
+/* FOND 3D (Extrêmement discret) */
+/* ========================================= */
+#background-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.05; /* Presque invisible */
+    z-index: 0;
+    pointer-events: none;
+    background: var(--color-dark-bg); 
+}
+
+/* ========================================= */
+/* HEADER - MINIMALISTE & MATURE */
+/* ========================================= */
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 5%;
+    z-index: 10;
+    backdrop-filter: blur(10px);
+    background: rgba(26, 26, 26, 0.95);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
+    
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.site-branding h1 a {
+    font-size: 1.4rem;
+    font-weight: 600;
+    color: var(--color-accent-main); 
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+    gap: 30px;
+}
+
+nav ul li a {
+    color: var(--color-light);
+    font-weight: 400;
+    padding-bottom: 3px;
+    border-bottom: 1px solid transparent;
+    transition: all 0.2s ease;
+}
+
+nav ul li a:hover {
+    color: var(--color-accent-main);
+    border-color: var(--color-accent-main);
+}
+
+/* ========================================= */
+/* SECTIONS ET TITRES - ÉLÉGANCE ET SÉPARATION */
+/* ========================================= */
+.section {
+    position: relative;
+    z-index: 2;
+    
+    /* AJUSTEMENT DU GAP : Padding réduit, séparation par marge */
+    padding: 0; 
+    padding-bottom: 100px; 
+    min-height: 80vh; 
+    margin-top: 60px;
+}
+
+/* Traitement spécial pour la première section (Accueil) */
+#accueil {
+    min-height: calc(100vh - 100px);
+    padding-top: 50px; /* Commence 50px sous le MAIN padding */
+    margin-top: 0; /* Pas de marge en haut de l'Accueil */
+    padding-bottom: 50px;
+    text-align: left;
+}
+
+
+.section h2 {
+    font-size: 2.5rem; 
+    margin-bottom: 30px;
+    color: var(--color-light);
+    position: relative;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-weight: 300; 
+}
+
+.section p {
+    font-size: 1.15rem;
+    opacity: 0.9;
+}
+
+/* ========================================= */
+/* ACCUEIL (Minimalisme Impactant) */
+/* ========================================= */
+.status-indicator {
+    color: var(--color-light); 
+    font-size: 1rem;
+    margin-bottom: 10px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    opacity: 0.6; 
+    font-weight: 300;
+}
+
+#accueil .title {
+    font-size: 4.8rem; 
+    font-weight: 700;
+    color: var(--color-light);
+    margin-bottom: 10px;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+#accueil .subtitle {
+    font-size: 1.6rem;
+    color: var(--color-light);
+    opacity: 0.8;
+    margin-bottom: 60px; 
+    font-weight: 300;
+}
+
+/* ========================================= */
+/* BOUTONS (Classique et Mat) */
+/* ========================================= */
+.btn {
+    display: inline-block;
+    padding: 14px 30px;
+    background: var(--color-accent-main);
+    color: var(--color-dark-bg); 
+    border: none;
+    border-radius: var(--border-radius-base);
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: var(--shadow-subtle);
+}
+
+.btn:hover {
+    background: var(--color-accent-secondary);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
+}
+
+.btn.small {
+    padding: 10px 20px;
+    font-size: 0.85rem;
+}
+
+/* ========================================= */
+/* PROJETS (Cartes minimalistes) */
+/* ========================================= */
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-top: 30px;
+}
+
+.project-card {
+    background: var(--color-panel-bg);
+    padding: 30px;
+    border-radius: var(--border-radius-base);
+    border: 1px solid rgba(255, 255, 255, 0.05); 
+    transition: 0.3s ease;
+    transform: translateY(0);
+}
+
+.project-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+    border-color: var(--color-accent-main); 
+}
+
+.project-card h3 {
+    color: var(--color-light);
+    margin-bottom: 8px;
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.project-card p {
+    font-size: 0.95rem;
+}
+
+.project-card .technologies {
+    margin: 15px 0 20px 0;
+    font-size: 0.8rem;
+    opacity: 0.6;
+    color: var(--color-light);
+}
+
+
+/* ========================================= */
+/* CONTACT / FORMULAIRE - ESPACÉ */
+/* ========================================= */
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    margin-top: 30px;
+    padding: 35px;
+    background: var(--color-panel-bg);
+    border-radius: var(--border-radius-base);
+    box-shadow: var(--shadow-subtle);
+}
+
+.contact-form label {
+    margin-top: 18px;
+    margin-bottom: 5px;
+    font-weight: 400;
+    color: var(--color-accent-main);
+    text-transform: uppercase;
+    font-size: 0.9rem;
+}
+
+.contact-form input[type="text"],
+.contact-form input[type="email"],
+.contact-form textarea {
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--color-dark-bg); 
+    color: var(--color-light);
+    border-radius: 4px;
+}
+
+.contact-form input:focus,
+.contact-form textarea:focus {
+    outline: none;
+    border-color: var(--color-accent-main);
+    box-shadow: 0 0 5px rgba(184, 134, 11, 0.5);
+}
+
+
+/* ========================================= */
+/* FOOTER */
+/* ========================================= */
+footer {
+    background: var(--color-dark-bg);
+    padding: 50px 5%;
+    border-top: 1px solid var(--color-panel-bg);
+}
+
+.footer-container {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer-nav, .socials {
+    margin: 15px;
+    text-align: left;
+}
+
+.footer-nav h4, .socials h4 {
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+    color: var(--color-accent-main);
+}
+
+.footer-nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-nav ul li a, .socials a {
+    display: block;
+    color: var(--color-light);
+    opacity: 0.7;
+    padding: 5px 0;
+    transition: 0.3s;
+}
+
+.socials a:hover, .footer-nav ul li a:hover {
+    color: var(--color-light);
+    opacity: 1;
+}
+
+.socials i {
+    margin-right: 8px;
+    width: 20px;
+}
+
+.copyright {
+    padding: 20px 0 0;
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--color-light);
+    opacity: 0.6;
+}
+
+/* ========================================= */
+/* MEDIA QUERIES (RESPONSIVE) */
+/* ========================================= */
+@media (max-width: 992px) {
+    #accueil .title {
+        font-size: 3.5rem;
+    }
+    #accueil .subtitle {
+        font-size: 1.4rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .section h2 {
+        font-size: 2rem;
+    }
+    #accueil .title {
+        font-size: 3rem;
+    }
+    header {
+        flex-direction: column;
+        padding: 15px 5%;
+    }
+    nav ul {
+        gap: 15px;
+    }
+    .footer-container {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+}