Etienne Veau
2 months ago
parent
ad0c505bc8
commit
b4b6c3d64d
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cursus Scolaire</title>
|
||||
<link type="text/css" rel="stylesheet" href="mon-portfolio.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html" class="active">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<article>
|
||||
<h2>Mon Cursus Scolaire</h2>Lorem, ipsum dolor sit amet <strong> elementos</strong> consectetur
|
||||
<em>ducere</em> adipisicing elit. Eius, eaque?
|
||||
|
||||
</article>
|
||||
<div><a href="mon-portfolio.html">retour a l'accueil</a></div>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html" class="active">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 296 KiB |
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 378 KiB |
|
After Width: | Height: | Size: 153 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 230 KiB |
@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>mon-portfolio</title>
|
||||
<link type="text/css" rel="stylesheet" href="en_savoir_plus.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html" class="active">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html" Vidéo></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div>
|
||||
<section>
|
||||
<article>
|
||||
<h2>Presentation</h2>Lorem ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Repellendus voluptatibus beatae labore magni culpa cum perferendis corporis doloribus obcaecati ex
|
||||
neque, magnam perspiciatis vel odio eaque illo reiciendis nihil quaerat suscipit deleniti facilis atque.
|
||||
Omnis quod beatae eligendi, ipsum voluptate voluptatibus dolor dolorum ipsam nam! Eum voluptatem id
|
||||
harum. Animi fuga odio, tempore autem ullam aperiam, libero totam quos explicabo eius, officia expedita
|
||||
voluptate voluptatem exercitationem corrupti non neque culpa pariatur consequatur quidem provident.
|
||||
Incidunt aut aliquid quasi suscipit doloremque voluptatum ipsa aspernatur eaque alias veritatis odio,
|
||||
numquam nulla amet consequatur, illum corrupti at veniam libero culpa voluptatem ea dolorum? Omnis
|
||||
temporibus esse rem ex nesciunt necessitatibus vitae saepe sunt quo! Minima dolore ea, voluptate amet
|
||||
porro a in ex tempora obcaecati dicta quos aliquid quaerat, officia natus vel corrupti est perferendis
|
||||
perspiciatis eveniet nostrum? Nam, libero nulla pariatur magni explicabo corrupti quae quis harum hic
|
||||
consectetur sit totam, porro eveniet tenetur officiis et accusamus obcaecati odit alias nisi molestiae
|
||||
delectus rerum. Ad sapiente blanditiis eaque dolorem dolor omnis assumenda. Cumque magni nihil facere
|
||||
id, accusantium veritatis nisi vero voluptatum vitae sed rerum, adipisci doloribus beatae itaque quas
|
||||
nam. Ipsum assumenda doloribus beatae repudiandae hic molestias tempora obcaecati, omnis similique sunt
|
||||
a ratione quibusdam fuga nam blanditiis minima vitae fugit molestiae in autem asperiores tempore
|
||||
expedita, commodi incidunt. Aperiam, modi, aut nemo sint cupiditate voluptas nobis, quod optio minus
|
||||
accusantium libero. Odit dignissimos eum doloremque autem quod deleniti, voluptates dolorum quo, amet
|
||||
blanditiis similique nobis, ipsam eveniet accusamus nihil iste? Beatae, quos sed quia eius dignissimos
|
||||
reprehenderit minima, deleniti soluta veniam neque eaque facere nulla molestias omnis harum. Fuga
|
||||
architecto vitae corrupti, harum deleniti tenetur voluptatem a esse eveniet omnis pariatur magnam odit
|
||||
libero minus. Accusamus magni consequatur corporis repudiandae dolores animi, perspiciatis qui
|
||||
aspernatur dolorum cum voluptatum ipsa porro pariatur eligendi ratione accusantium, aliquam fugit
|
||||
placeat facilis temporibus quaerat vitae consectetur. Quia, optio nihil? Dignissimos doloremque deserunt
|
||||
placeat, laudantium cumque minima reprehenderit incidunt suscipit pariatur delectus? Accusamus eius
|
||||
repudiandae vel. Amet tempore aut tempora culpa quos excepturi nam quod, consectetur fugit atque aliquam
|
||||
nulla quam, assumenda ratione! Recusandae deserunt officiis reiciendis eligendi possimus voluptas sunt
|
||||
dolores blanditiis? Magnam non fugiat doloribus voluptates! Error, sed recusandae! Deleniti deserunt
|
||||
aspernatur dolore tenetur ipsum officia atque placeat nihil eaque! Molestiae maiores voluptatem alias
|
||||
veniam tempore repudiandae sunt quas, cum illo, architecto autem explicabo, numquam aliquid et
|
||||
exercitationem. Dolorem id mollitia quia dolorum laboriosam tempora aliquid, placeat voluptatem
|
||||
molestiae accusantium dolor fugit delectus saepe numquam, voluptatum, deleniti soluta reiciendis?
|
||||
Obcaecati possimus esse odit dignissimos eligendi aspernatur maiores tempore sunt natus alias,
|
||||
necessitatibus atque, at quisquam reiciendis, explicabo molestiae? Iure quasi porro ad similique magnam
|
||||
saepe praesentium, obcaecati consectetur dignissimos autem dolor laborum voluptatibus?sit amet
|
||||
consectetur adipisicing elit. Ducimus, quod! Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Distinctio aperiam laborum aspernatur tempora! Hic est repudiandae expedita nam. Qui nihil dolores
|
||||
commodi esse aliquid autem modi veritatis architecto aut alias id eveniet omnis beatae dolorem tempore
|
||||
libero laboriosam ea dolor, voluptates natus. Harum tenetur voluptatibus incidunt soluta officia rerum
|
||||
debitis?
|
||||
</article><a href="mon-portfolio.html">retour a l'accueil</a>
|
||||
<article>
|
||||
<h2>Caracteristique</h2>Lorem,Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, incidunt
|
||||
fuga, quos beatae officia expedita corrupti, voluptates quo dolor quaerat asperiores fugiat earum nihil
|
||||
alias aliquid cupiditate perspiciatis? Eveniet neque sint asperiores incidunt, ut nesciunt voluptatum
|
||||
corrupti temporibus necessitatibus consequuntur autem quaerat tempora, facilis veniam perferendis! Minus
|
||||
ad deserunt doloremque nulla veritatis magnam. Nobis nisi modi minima vitae fugiat, saepe nihil
|
||||
consequatur aliquid deleniti. Ducimus magnam consequatur amet id ullam, aperiam sapiente culpa sed
|
||||
accusantium blanditiis dolore, quam minus saepe aliquid pariatur placeat eius odit veritatis deleniti
|
||||
reiciendis corporis nostrum perferendis error non. Sed nobis totam ut nesciunt distinctio voluptas quas!
|
||||
Minus omnis dicta vel, aperiam sunt ducimus rerum a earum voluptatem nesciunt dolorem qui enim atque
|
||||
ipsa. Cum dignissimos tenetur dicta corrupti maiores earum incidunt hic harum rerum voluptate doloribus,
|
||||
dolorum modi amet reprehenderit eos quod ea quae aut doloremque! Veritatis praesentium, in aspernatur
|
||||
culpa est ipsa? Eaque, aliquam id consequuntur illo laborum quam ipsa, minima repellendus eligendi
|
||||
tempora ex sed, optio fugiat? Asperiores minus quisquam dolores quia eius, suscipit qui corporis harum
|
||||
inventore, ex natus praesentium maiores! Officia quis molestiae deserunt illo quisquam ad qui ipsam
|
||||
repellat dicta sunt earum natus dolores, modi ex neque iure iusto recusandae vero harum culpa atque
|
||||
voluptatem minima aliquid molestias. Sequi voluptatibus qui, saepe eius quam quibusdam nesciunt nostrum
|
||||
corporis tempore voluptas dolores dicta, assumenda quaerat blanditiis reprehenderit! Porro voluptate
|
||||
cupiditate itaque harum ad natus est, eos debitis expedita odit a temporibus accusamus molestias culpa
|
||||
nisi animi quae? Itaque excepturi id ullam eos veritatis sequi ea est architecto illo nisi esse,
|
||||
repudiandae nesciunt neque consequatur suscipit modi. Omnis, eligendi dolore porro soluta excepturi
|
||||
perspiciatis distinctio alias? Numquam distinctio exercitationem, harum totam optio quod vero possimus
|
||||
sit, officia eligendi et ducimus repellendus temporibus? Amet aperiam dignissimos ea animi molestias
|
||||
sunt rem expedita sed. ipsum dolor sit amet consectetur adipisicing elit. Eius, eaque?Lorem ipsum dolor
|
||||
sit amet consectetur adipisicing elit. Incidunt, harum veritatis. Modi necessitatibus laudantium tempora
|
||||
alias corrupti similique, voluptatem optio non, voluptatum enim repellendus. Sit quam excepturi tempora
|
||||
illum quidem.
|
||||
</article><a href="mon-portfolio.html">retour a l'accueil</a>
|
||||
</section>
|
||||
</div>
|
||||
<footer></footer>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
@ -0,0 +1,138 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1ccd1c;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #21641d;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -0,0 +1,158 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
aside a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: #010101ae;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 95%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 2px solid #35a015;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
margin-right: 10px;
|
||||
background-color: #16a927;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #056017;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 10px;
|
||||
}
|
||||
@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>page contact</title>
|
||||
<link rel="stylesheet" href="form.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php" class="active">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<?php
|
||||
$errors = [];
|
||||
$formData = [
|
||||
'nom' => '',
|
||||
'email' => '',
|
||||
'téléphone' => '',
|
||||
'motif' => '',
|
||||
'datetime' => '',
|
||||
'première_demande' => '',
|
||||
'message' => ''
|
||||
];
|
||||
|
||||
if ($_SERVER["REQUEST_METHOD"] === "POST") {
|
||||
if (empty($_POST['nom'])) {
|
||||
$errors[] = "Le champ nom est requis.";
|
||||
} else {
|
||||
$formData['nom'] = htmlspecialchars($_POST['nom']);
|
||||
}
|
||||
|
||||
if (empty($_POST['email'])) {
|
||||
$errors[] = "Le champ email est requis.";
|
||||
} elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
|
||||
$errors[] = "L'adresse email est invalide.";
|
||||
} else {
|
||||
$formData['email'] = htmlspecialchars($_POST['email']);
|
||||
}
|
||||
|
||||
$formData['téléphone'] = htmlspecialchars($_POST['téléphone']);
|
||||
$formData['motif'] = htmlspecialchars($_POST['motif']);
|
||||
$formData['datetime'] = htmlspecialchars($_POST['datetime']);
|
||||
$formData['première_demande'] = htmlspecialchars($_POST['première_demande']);
|
||||
$formData['message'] = htmlspecialchars($_POST['message']);
|
||||
|
||||
if (empty($_POST['message'])) {
|
||||
$errors[] = "Le champ message est requis.";
|
||||
}
|
||||
|
||||
if (empty($errors)) {
|
||||
echo "<h2>Merci pour votre message !</h2>";
|
||||
echo "<p>Voici le récapitulatif de votre demande :</p>";
|
||||
echo "<p>Nom : " . $formData['nom'] . "</p>";
|
||||
echo "<p>Email : " . $formData['email'] . "</p>";
|
||||
echo "<p>Téléphone : " . $formData['téléphone'] . "</p>";
|
||||
echo "<p>Motif : " . $formData['motif'] . "</p>";
|
||||
echo "<p>Date et heure : " . $formData['datetime'] . "</p>";
|
||||
echo "<p>Première demande : " . $formData['première_demande'] . "</p>";
|
||||
echo "<p>Message : " . nl2br($formData['message']) . "</p>";
|
||||
exit;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<h2>Contactez-moi :</h2>
|
||||
<form method="POST" action="contact.php">
|
||||
<label for="nom">Nom <span style="color:red">*</span></label>
|
||||
<input type="text" name="nom" id="nom" required value="<?= htmlspecialchars($formData['nom']) ?>">
|
||||
|
||||
<label for="email">Adresse email <span style="color:red">*</span></label>
|
||||
<input type="email" name="email" id="email" required value="<?= htmlspecialchars($formData['email']) ?>">
|
||||
|
||||
<label for="téléphone">Numéro de téléphone</label>
|
||||
<input type="tel" name="téléphone" id="téléphone" value="<?= htmlspecialchars($formData['téléphone']) ?>">
|
||||
|
||||
<label for="motif">Motif de contact</label>
|
||||
<select name="motif" id="motif">
|
||||
<option value="">Choisir un motif</option>
|
||||
<option value="question" <?= $formData['motif'] == 'question' ? 'selected' : '' ?>>Une question ?</option>
|
||||
<option value="suggestion" <?= $formData['motif'] == 'suggestion' ? 'selected' : '' ?>>Proposition de collaboration</option>
|
||||
<option value="autre" <?= $formData['motif'] == 'autre' ? 'selected' : '' ?>>Autre</option>
|
||||
</select>
|
||||
|
||||
<label for="datetime">Créneau horaire</label>
|
||||
<input type="datetime-local" name="datetime" id="datetime" value="<?= htmlspecialchars($formData['datetime']) ?>">
|
||||
|
||||
<label>Première demande ?</label>
|
||||
<input type="radio" name="première_demande" value="oui" <?= $formData['première_demande'] == 'oui' ? 'checked' : '' ?>> Oui
|
||||
<input type="radio" name="première_demande" value="non" <?= $formData['première_demande'] == 'non' ? 'checked' : '' ?>> Non
|
||||
|
||||
<label for="message">Message <span style="color:red">*</span></label>
|
||||
<textarea name="message" id="message" required><?= htmlspecialchars($formData['message']) ?></textarea>
|
||||
|
||||
<button type="submit">Envoyer</button>
|
||||
<button type="reset">Réinitialiser</button>
|
||||
</form>
|
||||
|
||||
<?php
|
||||
if (!empty($errors)) {
|
||||
echo "<ul style='color:red;'>";
|
||||
foreach ($errors as $error) {
|
||||
echo "<li>$error</li>";
|
||||
}
|
||||
echo "</ul>";
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1014 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 163 KiB |
@ -0,0 +1,233 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 40%;
|
||||
margin-left: 10%;
|
||||
padding: 20px;
|
||||
float: left;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
aside {
|
||||
position: relative;
|
||||
float: inline-end;
|
||||
z-index: 1;
|
||||
width: 25%;
|
||||
margin-right: 10%;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
aside ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
aside li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
aside a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
aside img {
|
||||
width: 20px;
|
||||
height: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
aside a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
aside img {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 20%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.384),
|
||||
0 6px 20px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #00ff0096;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
a img {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #12c012;
|
||||
text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
section {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
aside {
|
||||
margin-left: 0;
|
||||
margin-top: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mon Portfolio - Veau Etienne</title>
|
||||
<link type="text/css" rel="stylesheet" href="mon-portfolio.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html" class="active">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<h2>Présentation</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, quod!</p>
|
||||
<a href="en-savoir-plus-bouton.html">En savoir plus</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Caractéristiques</h2>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, eaque?</p>
|
||||
<a href="en-savoir-plus-bouton.html">En savoir plus</a>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<aside>
|
||||
<h2>Des liens pour me suivre</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/watch?v=_S7WEVLbQ-Y">
|
||||
<img src="logo_youtube.jpg" alt="logo youtube" class="logo1">
|
||||
<span>YOUTUBE</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/?hl=fr">
|
||||
<img src="logo_insta.jpg" alt="logo instagram" class="logo1">
|
||||
<span>INSTAGRAM</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.snapchat.com">
|
||||
<img src="logo_snap.jpg" alt="logo snapchat" class="logo1">
|
||||
<span>SNAPCHAT</span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,163 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
float: left;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
body img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pres .trombinoscope {
|
||||
max-width: 40px;
|
||||
height: 60px;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #00ff0096;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #12c012;
|
||||
text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #0d9d03;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>page image</title>
|
||||
<link type="text/css" rel="stylesheet" href="page_image.css">
|
||||
</head>
|
||||
<canvas id="matrix"></canvas>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#" class="active">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html" class="active">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<h1>Galerie d'Art Surréaliste</h1>
|
||||
<section>
|
||||
<figure>
|
||||
<a href="IMG1.JPG" target="_blank">
|
||||
<img src="IMG1.JPG" alt="Description de l'image 1">
|
||||
</a>
|
||||
<figcaption>La porte du désert</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<a href="IMG2.JPG" target="_blank">
|
||||
<img src="IMG2.JPG" alt="Description de l'image 2">
|
||||
</a>
|
||||
<figcaption>Le temps qui s'échappe</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<a href="IMG3.JPG" target="_blank">
|
||||
<img src="IMG3.JPG" alt="Description de l'image 3">
|
||||
</a>
|
||||
<figcaption>L'oeil dans l'oeuf</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,164 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635),
|
||||
0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #00ff0096;
|
||||
}
|
||||
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #12c012;
|
||||
text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e;
|
||||
}
|
||||
|
||||
vidéo {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
height: 320px;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.803);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), 0 6px 20px rgba(1, 250, 1, 0.535);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 10px;
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>page vidéo</title>
|
||||
<link type="text/css" rel="stylesheet" href="page_video.css">
|
||||
</head>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<a href="#" class="active">Média</a>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html" class="active" Vidéo></a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<div style="display: flex; align-items: flex-start; margin-top: 78px;">
|
||||
<video width="640" height="360" controls autoplay muted>
|
||||
<source src="BMW.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<h2>Présentation</h2>
|
||||
<p>La BMW M8 Gran Coupé Competition xDrive est équipée d'un moteur longitudinal avant huit cylindres en
|
||||
V suralimenté développant un couple maximum de 750 Nm dès 1800 trs/min ainsi qu'une puissance
|
||||
maximum de 625 ch à 6000 trs/min transmise aux quatre roues de 20 pouces par le biais d'une boîte de
|
||||
vitesses automatique à 8 rapports.</p>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 374 KiB |
@ -0,0 +1,159 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
top: 78px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
article,
|
||||
section {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #00ff00;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #0000009a;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.liens-nav {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.liens-nav a {
|
||||
color: #00ff00;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.liens-nav a:hover {
|
||||
color: #3b9836;
|
||||
}
|
||||
|
||||
.navbar .liens-nav .active {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
background-color: #000000d3;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.hidden a {
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
|
||||
}
|
||||
|
||||
.survol:hover .hidden {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pres {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pres img {
|
||||
max-width: 50px;
|
||||
height: auto;
|
||||
border-radius: 10%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
body a {
|
||||
text-decoration: none;
|
||||
color: #f2f6f2;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a:hover {
|
||||
color: #21641d;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
width: 80%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
background-color: #070707af;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 10px;
|
||||
color: #f6f7f6;
|
||||
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #030303bd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
td img {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #0000009a;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin-top: 20px;
|
||||
color: #00ff00;
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Planning Hebdomadaire</title>
|
||||
<link rel="stylesheet" href="table.css">
|
||||
</head>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="pres">
|
||||
<img src="photodemoi.jpg" alt="Photo de l'étudiant" class=" trombinoscope">
|
||||
<h1>Veau Etienne</h1>
|
||||
</div>
|
||||
<div class="liens-nav">
|
||||
<a href="mon-portfolio.html">Home</a>
|
||||
<a href="Cursus_scolaire.html">Cursus scolaire</a>
|
||||
<a href="table.html" class="active">Planning</a>
|
||||
<div class="survol">
|
||||
<div class="visible">
|
||||
<p>Média</p>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<a href="page_image.html">Photo</a>
|
||||
<a href="page_vidéo.html">Vidéo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="index.php">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<canvas id="matrix"></canvas>
|
||||
<table>
|
||||
<caption>Mes activités extra-scolaires</caption>
|
||||
<tr>
|
||||
<th>Jour</th>
|
||||
<th>Créneaux</th>
|
||||
<th>Activités</th>
|
||||
<th>Images</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">Lundi</td>
|
||||
<td>17:00 - 18:30</td>
|
||||
<td>Révisions</td>
|
||||
<td rowspan="2"><img src="IMGH.JPG" alt="Révisions"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21:00 - 22:30</td>
|
||||
<td>Root Me</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mardi</td>
|
||||
<td>18:00 - 19:30</td>
|
||||
<td>Natation</td>
|
||||
<td><img src="IMGN.JPG" alt="Natation"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mercredi</td>
|
||||
<td rowspan="3">21:00 - 22:30</td>
|
||||
<td rowspan="3">Musculation</td>
|
||||
<td rowspan="3"><img src="IMGM.JPG" alt="Musculation"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vendredi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">Samedi</td>
|
||||
<td>10:00 - 11:30</td>
|
||||
<td>Révisions</td>
|
||||
<td rowspan="2"><img src="IMGF.JPG" alt="Football"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15:00 - 16:30</td>
|
||||
<td>Football</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">Dimanche</td>
|
||||
<td>10:00 - 11:30</td>
|
||||
<td rowspan="2">Révisions</td>
|
||||
<td rowspan="2"><img src="IMGH.JPG" alt="Révisions"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15:00 - 16:30</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('matrix');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const matrix = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}';
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
const drops = Array(Math.floor(columns)).fill(1);
|
||||
|
||||
function drawMatrix() {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = '#00ff00';
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
drops.forEach((y, i) => {
|
||||
const text = matrix[Math.floor(Math.random() * matrix.length)];
|
||||
ctx.fillText(text, i * fontSize, y * fontSize);
|
||||
|
||||
if (y * fontSize > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
drops[i]++;
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(drawMatrix, 50);
|
||||
|
||||
|
||||
window.onresize = function () {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
drops.length = Math.floor(canvas.width / fontSize);
|
||||
drops.fill(1);
|
||||
};
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
<a href="mon-portfolio.html">retour a l'accueil</a>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Mon portfolio. IUT Informatique 1 A. Groupe 4.</p>
|
||||
</footer>
|
||||
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Projets - Etienne Veau</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">À propos</a></li>
|
||||
<li><a href="cursus.html">Cursus</a></li>
|
||||
<li><a href="competences.html">Compétences/Qualités</a></li>
|
||||
|
||||
<li><a href="projets.html">Projets</a></li>
|
||||
<li><a href="exppro.html">Expériences professionnelles</a></li>
|
||||
|
||||
<li><a href="cv.html">Mon CV</a></li>
|
||||
<li><a href="contact.html">Me Contacter</a></li>
|
||||
</ul>
|
||||
<button class="hamburger">☰</button>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<h2>Mes Projets</h2>
|
||||
|
||||
<div class="projets-grid">
|
||||
<div class="card projet">
|
||||
<h3>Création d'une Base de Données (SQL)</h3>
|
||||
<p><em><b>Projet d'étude</b></em></p>
|
||||
<p><b>En C</b> (en trinôme) <br>
|
||||
Nous devions concevoir de A à Z une Base de Données correspondant à une entreprise de location. <br>
|
||||
Nous avons fait le choix de créer une entreprise louant des Jet-ski et avons mis en place un MCD/MLD
|
||||
avant de concevoir le script SQL permettant de créer et remplir notre bases de données avec un jeu
|
||||
d'essais. <br>
|
||||
<em>Ce projet m'a appris à appliquer concrètement mes connaissances SQL, le respect des 3 formes
|
||||
normales, la mise en place de vérification automatique des données afin d'assurer la robustesse
|
||||
de la base de données, ainsi que la création de jeu de données et de requête test pour vérifier
|
||||
son bon
|
||||
fonctionnement. <br> Dans ce projet la partie sur la création de l'entreprise m'a sensibilisé
|
||||
aux démarches RSE et m'a permis d'imaginer différentes facettes du fonctionnement d'une P.M.E.
|
||||
</em>
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projets-grid">
|
||||
<div class="card projet">
|
||||
<h3>Administration d'un système Linux</h3>
|
||||
<p><em><b>Projet d'étude</b></em></p>
|
||||
<p><b>Shell</b> (seul) <br>
|
||||
Nous devions installer sur une machine vierge une distribution Debian,la configurer en installant
|
||||
des paquets et des systèmes, partitionner des disques ou encore la mise en place de Backports et
|
||||
l'utilisation de FlatPak <br>
|
||||
<em>Ce projet m'a permis de m'exercer en autonomie à la recherche d'information sur internet afin
|
||||
de comprendre et réaliser les tâches qui m'étaient demandées. <br> Je me suis également
|
||||
grandement
|
||||
familiariser avec l'utilisation du <b>terminal et ses lignes de commandes</b>. <br>
|
||||
Enfin cela m'a permis d'en apprendre plus sur le fonctionnement d'un espace disque et d'un
|
||||
système d'exploitation. </em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projets-grid">
|
||||
<div class="card projet">
|
||||
<h3>Gestion des stages de l'I.U.T </h3>
|
||||
<p><em><b>Projet d'étude</b></em></p>
|
||||
<p><b>En C</b> (en binôme)<br>
|
||||
Nous devions concevoir un algorithme capable de traiter les demandes de stage de l'I.U.T . <br>
|
||||
Le programme devait pouvoir gérer l'espace "Responsable", capable d'affecter un étudiant à un stage
|
||||
sur lequel ils auraient préalablement candidater. Il y'a également un espace de saisie des notes
|
||||
ainsi
|
||||
que la possibilité de procéder à
|
||||
l'ajout de nouvelles offres de stage. L'espace "étudiant" permet à l'étudiant de consulter les
|
||||
stages
|
||||
disponibles ainsi que d'y candidater. </p><br>
|
||||
<p><em>Ce projet m'a permis de me familiariser avec le language C et m'a appris a gérer des tableaux de
|
||||
manière
|
||||
efficace (<b>Chargement,Recherche,Trie,Affichage</b>). Cela m'a également permis d'utiliser
|
||||
différents types de fichiers afin d'effectuer des sauvegardes.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projets-grid">
|
||||
<div class="card projet">
|
||||
<h3>Création d'un jeu type tour par tour sur le principe du Pierre,Feuille,Ciseaux</h3>
|
||||
<p><em><b>Projet d'étude</b></em></p>
|
||||
<p><b>En C</b> (en binôme)<br>
|
||||
Nous devions concevoir un jeu de combat tour par tour entre un chevalier et des monstres. Le cahier
|
||||
des charges étant très complet, j'ai dû apporté un soin particulier au respect de l'utilisation des
|
||||
différentes structures.</p><br>
|
||||
<p><em>Ce projet a renforcé ma <b>Compréhension</b> des différentes formes de structures
|
||||
<b>Pile,File,Liste</b> et donc <b>Maillon.</b>Cela m'a également servi de bonne Introduction à
|
||||
la notion de <b>Complexité</b> et l'utilsation de fichier binaire pour effectuer des
|
||||
sauvegardes.</em>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projets-grid">
|
||||
<div class="card projet">
|
||||
<h3>En Cours...</h3>
|
||||
<h4>Conception d'une réplique de jeu vidéo et élaboration d'un algorithme capable de battre le Jeu</h4>
|
||||
<p><em><b>Projet Personnel:</b> (depuis le 31 Janvier 2025)</em></p>
|
||||
<p>Ce projet en cours de production vise à concevoir une réplique fidèle du jeu "Crossy Road" à l'aide
|
||||
du logiciel <b>UNITY</b>. Le jeu Crossy Road est un jeu d'arcade dont le but est de faire parcourir
|
||||
la plus longue distance à notre personnage à travers un parcours d'obstacles au thème urbain. <br>
|
||||
<em>Le projet consiste à reproduire fidèlement le jeu, puis à créer un algorithme en <b>C#</b>
|
||||
capable d'interagir avec le jeu afin qu'il soit imbattable. <br>
|
||||
Lorsque mon programme sera fonctionnel, je souhaite entraîner une I.A. capable de battre le jeu
|
||||
et par
|
||||
la suite comparer les deux solutions en analysant celle qui obtient le meilleur score.
|
||||
Ce projet personnel sera l'occasion de m'autoformer sur C# & UNITY, ainsi que de travailler sur
|
||||
l'élaboration d'un projet complexe. Il servira également d'introduction aux notions d'IA et
|
||||
de Robotique, des domaines de l'Informatique auxquels j'accorde un intérêt tout
|
||||
particulier.</em>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const hamburger = document.querySelector('.hamburger');
|
||||
const navMenu = document.querySelector('nav ul');
|
||||
|
||||
hamburger.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('active');
|
||||
hamburger.setAttribute('aria-expanded', navMenu.classList.contains('active'));
|
||||
});
|
||||
document.querySelectorAll('nav a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navMenu.classList.remove('active');
|
||||
hamburger.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 265 KiB |
Binary file not shown.
Loading…
Reference in new issue