diff --git a/mon_cv.pdf b/mon_cv.pdf new file mode 100644 index 0000000..f982e63 Binary files /dev/null and b/mon_cv.pdf differ diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..fbfa942 --- /dev/null +++ b/projects.html @@ -0,0 +1,73 @@ + + + + + + Projets – BARUA Aditta + + + + + + + + + + + + + + + + +
+ +
+
+

Mes projets

+ +
+ +
+

Python – BruteForce Tool

+

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.

+
+ Technologies : Python, Multithreading, Dictionnaires. +
+ Voir la démo +
+ +
+

Sites vitrine – TPE

+

Création de sites professionnels modernes et responsives pour petites entreprises. + De la conception UX/UI à la mise en production sur serveur.

+
+ Technologies : HTML5, CSS3 (Flexbox/Grid), JavaScript. +
+ Voir la démo +
+ + + +
+

Modding Minecraft

+

Création de modifications personnalisées et scripts depuis le collège. + Ce projet est à l'origine de ma passion pour la programmation.

+
+ Technologies : Java / JavaScript (selon le type de modding). +
+ Analyse technique +
+ +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ac244c1 --- /dev/null +++ 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); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..642165c --- /dev/null +++ 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; + } +} \ No newline at end of file