Skip to content

Commit 467db24

Browse files
devyversedevyverse
committed
update files js,css,html
1 parent 490e223 commit 467db24

File tree

8 files changed

+159
-78
lines changed

8 files changed

+159
-78
lines changed

‎assets/icon/profil.png‎

8.28 KB
Loading

‎index.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,22 @@
1414
<!-- Manifest PWA -->
1515
<link rel="manifest" href="manifest.json" />
1616
<meta name="theme-color" content="#3e2f2f" />
17-
1817
<link rel="stylesheet" href="style.css"/>
18+
<link rel="stylesheet" href="styles/style-smoke-effect.css"/>
19+
<link
20+
<link rel="stylesheet" href="styles/style-btnPlayPaused.css"/>
1921
</head>
2022
<body>
21-
<canvas id="background"></canvas>
23+
<canvas id="smoke-bg"></canvas>
24+
<canvas id="background"></canvas>
2225
<header>
2326
<nav>
2427
<h1>DevyVerse</h1>
2528
<ul>
26-
<li><a href="#about">À propos</a></li>
29+
<li><a href="#about"><img src="assets/icon/profil.png" alt="A propos" title ="Au sujet de moi" style="height:30px;"></a></li>
2730
<li><a href="#projects">Projets</a></li>
2831
<li><a href="#contact">
29-
<img src="assets/icon/phone.png" alt="Contact" style="height:24px;" title="Contactez-moi">
32+
<img src="assets/icon/phone.png" alt="Contact" style="height:30px;" title="Contactez-moi">
3033
</a>
3134
</li>
3235
</ul>
@@ -79,7 +82,8 @@ <h2>Contact</h2>
7982
<footer>
8083
<p>© 2025 Dévy. Tous droits réservés.</p>
8184
</footer>
82-
8385
<script src="script.js"></script>
86+
<script src="js/smoke-effect.js"></script>
87+
<script src="js/particule-effect.js></script>
8488
</body>
8589
</html>

‎js/particule-effect.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const canvas = document.getElementById('background');
2+
const ctx = canvas.getContext('2d');
3+
canvas.width = window.innerWidth;
4+
canvas.height = window.innerHeight;
5+
6+
let particles = [];
7+
for (let i = 0; i < 100; i++) {
8+
particles.push({
9+
x: Math.random() * canvas.width,
10+
y: Math.random() * canvas.height,
11+
r: Math.random() * 2 + 1,
12+
dx: (Math.random() - 0.5) * 0.5,
13+
dy: (Math.random() - 0.5) * 0.5
14+
});
15+
}
16+
17+
function animate() {
18+
ctx.clearRect(0, 0, canvas.width, canvas.height);
19+
particles.forEach(p => {
20+
ctx.beginPath();
21+
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
22+
ctx.fillStyle = '#00f7ff';
23+
ctx.fill();
24+
p.x += p.dx;
25+
p.y += p.dy;
26+
27+
if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
28+
if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
29+
});
30+
requestAnimationFrame(animate);
31+
}
32+
animate();

‎js/smoke-effect.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const smokeCanvas = document.getElementById("smoke-bg");
2+
const smokeCtx = smokeCanvas.getContext("2d");
3+
smokeCanvas.width = window.innerWidth;
4+
smokeCanvas.height = window.innerHeight;
5+
6+
let smokeParticles = [];
7+
8+
for (let i = 0; i < 50; i++) {
9+
smokeParticles.push({
10+
x: Math.random() * smokeCanvas.width,
11+
y: Math.random() * smokeCanvas.height,
12+
r: Math.random() * 60 + 20,
13+
opacity: Math.random() * 0.2 + 0.1,
14+
dx: (Math.random() - 0.5) * 0.3,
15+
dy: Math.random() * -0.2 - 0.1
16+
});
17+
}
18+
19+
function drawSmoke() {
20+
smokeCtx.clearRect(0, 0, smokeCanvas.width, smokeCanvas.height);
21+
smokeParticles.forEach(p => {
22+
smokeCtx.beginPath();
23+
smokeCtx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
24+
smokeCtx.fillStyle = `rgba(200, 200, 200, ${p.opacity})`;
25+
smokeCtx.shadowColor = "rgba(255,255,255,0.1)";
26+
smokeCtx.shadowBlur = 20;
27+
smokeCtx.fill();
28+
29+
p.x += p.dx;
30+
p.y += p.dy;
31+
32+
if (p.y < -100) {
33+
p.y = smokeCanvas.height + 50;
34+
p.x = Math.random() * smokeCanvas.width;
35+
}
36+
});
37+
38+
requestAnimationFrame(drawSmoke);
39+
}
40+
41+
drawSmoke();
42+

‎script.js‎

Lines changed: 39 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,67 @@
11
// thème clair/sombre
22
document.getElementById('theme-toggle').addEventListener('click', () => {
3-
document.body.classList.toggle('light');
3+
document.body.classList.toggle('light');
44
});
55

6-
// animation bg particules
7-
const canvas = document.getElementById('background');
8-
const ctx = canvas.getContext('2d');
9-
canvas.width = window.innerWidth;
10-
canvas.height = window.innerHeight;
11-
12-
let particles = [];
13-
for (let i = 0; i < 100; i++) {
14-
particles.push({
15-
x: Math.random() * canvas.width,
16-
y: Math.random() * canvas.height,
17-
r: Math.random() * 2 + 1,
18-
dx: (Math.random() - 0.5) * 0.5,
19-
dy: (Math.random() - 0.5) * 0.5
20-
});
21-
}
22-
23-
function animate() {
24-
ctx.clearRect(0, 0, canvas.width, canvas.height);
25-
particles.forEach(p => {
26-
ctx.beginPath();
27-
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
28-
ctx.fillStyle = '#00f7ff';
29-
ctx.fill();
30-
p.x += p.dx;
31-
p.y += p.dy;
32-
33-
if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
34-
if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
35-
});
36-
requestAnimationFrame(animate);
37-
}
38-
animate();
39-
406
// music bg saloon jazz vintage //
41-
//
42-
const audioBG = document.getElementById("jazz-bg");
43-
const btnBG = document.getElementById("playPauseBtn");
44-
let musicStarted = false;
45-
document.getElementById("jazz-bg").volume = 0.1;
467

47-
// Quand l’utilisateur clique quelque part sur la page
48-
document.body.addEventListener("click", () => {
49-
if (!musicStarted) {
50-
audioBG.play();
51-
musicStarted = true;
52-
btnBG.style.display = "block"; // montrer le bouton
53-
btnBG.textContent = "⏸"; // mettre pause comme premier état
54-
}
55-
});
8+
const audioBG = document.getElementById("jazz-bg");
9+
const btnBG = document.getElementById("playPauseBtn");
10+
let musicStarted = false;
11+
document.getElementById("jazz-bg").volume = 0.1;
12+
13+
// Quand l’utilisateur clique quelque part sur la page
14+
document.body.addEventListener("click", () => {
15+
if (!musicStarted) {
16+
audioBG.play();
17+
musicStarted = true;
18+
btnBG.style.display = "block"; // montrer le bouton
19+
btnBG.textContent = "⏸"; // mettre pause comme premier état
20+
}
21+
});
5622

57-
// Gérer le Play/Pause
58-
btnBG.addEventListener("click", (e) => {
59-
e.stopPropagation();// éviter de relancer l’audio avec le clic body
60-
if (audioBG.paused) {
61-
audioBG.play();
62-
btnBG.textContent = "⏸ ";
23+
// Gérer le Play/Pause
24+
btnBG.addEventListener("click", (e) => {
25+
e.stopPropagation();// éviter de relancer l’audio avec le clic body
26+
if (audioBG.paused) {
27+
audioBG.play();
28+
btnBG.textContent = "⏸ ";
6329
} else {
64-
audioBG.pause();
65-
btnBG.textContent = "▶";
30+
audioBG.pause();
31+
btnBG.textContent = "▶";
6632
}
6733
});
6834

6935
// Barre d’espace pour Play/Pause
7036
document.addEventListener("keydown", (e) => {
71-
if (e.code === "Space") {
72-
e.preventDefault(); // évite le scroll
73-
if (audioBG.paused) {
74-
audioBG.play();
75-
btnBG.textContent = "⏸ ";
76-
} else {
77-
audioBG.pause();
78-
btnBG.textContent = "▶";
79-
}
80-
}
37+
if (e.code === "Space") {
38+
e.preventDefault(); // évite le scroll
39+
if (audioBG.paused) {
40+
audioBG.play();
41+
btnBG.textContent = "⏸ ";
42+
} else {
43+
audioBG.pause();
44+
btnBG.textContent = "▶";
45+
}
46+
}
8147
});
8248

8349
//Bloquer clic droit
8450
document.addEventListener("contextmenu", (e) => {
85-
e.preventDefault();
51+
e.preventDefault();
8652
});
8753

8854
// Bloquer copier, coller, couper
8955
["copy", "paste", "cut"].forEach(evt => {
90-
document.addEventListener(evt, (e) => {
91-
e.preventDefault();
56+
document.addEventListener(evt, (e) => {
57+
e.preventDefault();
9258
});
9359
});
9460

9561
// Bloquer raccourcis clavier (Ctrl+C, Ctrl+V, Ctrl+X)
9662
document.addEventListener("keydown", (e) => {
97-
if ((e.ctrlKey || e.metaKey) && ["c", "v", "x", "u"].includes(e.key.toLowerCase())) {
98-
e.preventDefault();
99-
}
63+
if ((e.ctrlKey || e.metaKey) && ["c", "v", "x", "u"].includes(e.key.toLowerCase())) {
64+
e.preventDefault();
65+
}
10066
});
10167

‎style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,4 +218,13 @@ footer {
218218
opacity: 0;
219219
}
220220
}
221+
/* smoke effet js */
222+
#smoke-bg {
223+
position: fixed;
224+
top: 0; left: 0;
225+
width: 100vw;
226+
height: 100vh;
227+
z-index: -2;
228+
pointer-events: none;
229+
}
221230

‎styles/style-btnPlayPaused.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#playPauseBtn {
2+
position: fixed;
3+
bottom: 20px;
4+
left: 20px;
5+
background: rgba(15,32,39,0.75);
6+
color: rgba(0,247,255,0.2);
7+
border: none;
8+
border-radius: 50%;
9+
width: 50px;
10+
height: 50px;
11+
font-size: 22px;
12+
cursor: pointer;
13+
display: none; /* caché au départ */
14+
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
15+
transition: transform 0.2s ease;
16+
}
17+
#playPauseBtn:hover {
18+
transform: scale(1.1);
19+
}

‎styles/style-smoke-effect.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* smoke effet js */
2+
#smoke-bg {
3+
position: fixed;
4+
top: 0; left: 0;
5+
width: 100vw;
6+
height: 100vh;
7+
z-index: -2;
8+
pointer-events: none;
9+
}

0 commit comments

Comments
 (0)