Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 14:44:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Vuejs install

Browse Source
This commit is contained in:
LJ5O
2025-03-18 09:57:49 +01:00
parent 87ac190084
commit f404a80d05
27 changed files with 3383 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
html/index.html Normal file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<div class="" id="welcome_div">
<p id="random_citation">Random Sentence</p>
<div class="test" id="name_div">
<div id="profile_picture"><img src="https://picsum.photos/200" height="100%" width="100%"></div>
<div id="name_div_right_container">
<div class="test" id="welcome_text_div">
<h1>Hello ! I'm </h1>
<h2>AI enthousiast</h2>
</div>
<div id="social_networks" class="test">
<div class="network">
<img src="https://picsum.photos/50">
</div>
<div class="network">
<img src="https://picsum.photos/50">
</div>
<div class="network">
<img src="https://picsum.photos/50">
</div>
</div>
</div>
</div> <!-- Name div -->
</div> <!-- Welcome Div -->
<div class="intersection_div">
<div class="intersection_content test">
<h2 class="test">Looking for something ?</h2>
<a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
</div>
</div> <!-- Intersection div -->
<div id="presentation_div" class="">
<div id="presentation_text">
<h1>Thanks for coming !</h1>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean nec ante tristique, tincidunt dolor a, maximus nisl.
Curabitur ut metus accumsan, vestibulum ex vitae, pretium enim.
Etiam tincidunt mauris quis elit egestas, vel viverra justo
efficitur. Nulla facilisi. Cras porttitor odio a massa pretium
varius. Vivamus felis risus, luctus vel mollis nec, lacinia non
libero. Proin mattis, ante vitae mattis sollicitudin, turpis
erat auctor arcu, vel fringilla arcu diam aliquam urna.
</p>
</article>
</div>
<div id="presentation_img"><img src="https://picsum.photos/500/250"></div>
</div> <!-- Presentation div -->
<div class="feature_div">
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="button feature_button">Oui ! Je veux en savoir plus !</button>
</div>
</div> <!-- Feature div -->
<div class="feature_div">
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="button feature_button">Oui ! Je veux en savoir plus !</button>
</div>
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
</div> <!-- Feature div -->
<div class="intersection_div" style="margin-top: 30px;">
<div class="intersection_content test">
<h2 class="test">Looking for something ?</h2>
<a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
</div>
</div> <!-- Intersection div -->
<div id="projects_summary">
<div id="projects_summary_text">
<h1>Les projets que j'ai déjà fait</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt.</p>
</div>
<div id="projects_holder">
<div class="project">
<div class="project_picture">
<img src="https://picsum.photos/400/300">
</div>
<div class="project_description">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin felis lectus, feugiat in eros sit amet, venenatis euismod
urna. Aliquam id porttitor erat, vitae dapibus velit. Praesent
id felis tincidunt,</p>
</article>
<button class="button project_button">Oui !</button>
</div>
</div>
</div>
</div> <!-- Projects summary -->
<footer>
<div id="footer_content">
<div id="footer_social_networks">
<h1>Social networks</h1>
<a href="#">
<div class="footer_social_network_item">
<img src="https://picsum.photos/50">
</div>
</a>
</div>
<nav id="footer_content_links">
<h1>Sitemap</h1>
<div class="footer_links_box">
<h2 class="footer_links_box_title">Projects</h2>
<ul>
<li><p><a href="#">Project 1</a></p></li>
<li><p><a href="#">Project 2</a></p></li>
<li><p><a href="#">Project 3</a></p></li>
</ul>
</div>
</nav> <!-- Footer content links -->
<div id="footer_contact_div">
<h1>Contact</h1>
<p>Want to contact me ? Let's have a talk !</p>
<div id="footer_contact_button" class="button">Contact</div>
</div>
<div id="footer_picture">
<img src="https://picsum.photos/50/50">
</div>
</div> <!-- Footer content -->
<p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
</footer>
</body>
</html>

381
html/style.css Normal file
View File

@@ -0,0 +1,381 @@
* {
overflow-y: hidden;
overflow-x: hidden;
}
html, body{
background-color: #1E1E1E;
margin: 0;
overflow-x: hidden;
overflow-y: scroll !important;
}
h1,h2,h3,h4,h5,p{
color: #EAEAEA;
/*Family Roboto or Atma ?*/
}
a{
text-decoration: none;
}
a:visited{
color: #EAEAEA;
text-decoration: none;
}
.test{
border: red dotted 2px;
}
.button{
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
border-radius: 6px;
cursor: pointer;
text-align: center;
}
#welcome_div{
width: 100vw;
height: 100vh;
margin: 0;
}
#random_citation{
position: absolute;
top: 180px;
left: 65%;
font-size: 2em;
transform:rotate(15deg);
}
#name_div{
margin-top: 10%;
margin-left: 15%;
height: fit-content;
width: fit-content;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#profile_picture{
width: 300px;
height: 300px;
}
#profile_picture img{
border-radius: 50%;
}
#name_div_right_container{
display: flex;
flex-direction: column;
height: fit-content;
}
#welcome_text_div{
height: 100%;
width: fit-content;
}
#welcome_text_div h1{
margin-top: 100px;
}
#social_networks{
height: fit-content;
display: flex;
flex-direction: row;
}
.network{
height: 50px;
width: 50px;
margin-left: 15px;
}
.network img{
border-radius: 50%;
}
.intersection_div{
width: 100vw;
height: 150px;
background-color: #D9D9D9;
}
.intersection_content{
width: 90%;
margin: auto;
display: flex;
align-items: center;
flex-direction: row;
height: 100%;
}
.intersection_content h2{
color: #1E1E1E !important;
}
.intersection_button_div{
margin-left: 30px;
background-color: #A58181;
height: 2.5em;
width: fit-content;
padding-left: 15px;
padding-right: 15px;
border-radius: 8px;
cursor: pointer;
}
.intersection_button_div p{
margin: 0;
margin-top: 0.75em; /* Half of parent height - Half of font size : 1.25 - 0.75*/
transform: translateY(-50%);
font-size: 1.5em;
text-decoration: none;
color: black;
}
#presentation_div{
width: 80vw;
margin: auto;
margin-top: 40px;
height: fit-content;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-bottom: 25px;
border-bottom: 2px solid #EAEAEA;
}
#presentation_text{
width: calc( 55% - 30px );
margin-left: 30px;
}
#presentation_text h1{
width: fit-content;
margin:auto;
margin-top: 5px;
}
#presentation_text article p{
width: fit-content;
margin:auto;
margin-top: 20px;
}
#presentation_img{
width: fit-content;
width: 40%;
min-width: 500px;
}
#presentation_img{
margin-left: auto;
margin-top: 20px;
}
.feature_div{
width: 75%;
margin: auto;
margin-top: 40px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 6%;
}
.feature_img_div{
width: 40%;
flex: 1;
min-width: 300px;
}
.feature_img_div img{
height: 100%;
width: 100%;
}
.feature_text_div{
width: 40%;
flex: 1;
min-width: 300px;
}
.feature_text_div h2{
margin-bottom: 5px;
}
.feature_text_div article p{
margin-top: 20px;
}
.feature_button{
background-color: aqua;
font-size: 1.3em;
}
#projects_summary{
border: 4px dotted red;
width: 80%;
margin: auto;
margin-top: 30px;
}
#projects_summary_text h1{
margin-top: 0;
margin-bottom: 20px;
text-align: center;
}
#projects_summary_text p{
margin-top: 0;
margin-bottom: 20px;
text-align: center;
}
#projects_holder{
width: 90%;
margin: auto;
margin-top: 15px;
border: 4px dotted green;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.project{
max-width: 400px;
max-height: 600px;
width: 100%;
height: 100%;
background-color: #2c2b2b;
border-radius: 8px;
border: 2px #EAEAEA solid;
}
.project_picture{
height: 200px;
width: 95%;
margin: auto;
margin-top: 10px;
}
.project_picture img{
width: 100%;
height: 100%;
}
.project_description{
width: 90%;
margin: auto;
font-size: 1.1em;
margin-bottom: 20px;
}
.project_button{
background-color: rgb(65, 185, 61);
font-size: 1.1em;
}
footer{
background-color: #2c2b2b;
margin-top: 50px;
border-top: #EAEAEA 2px solid;
height: fit-content;
position: relative; /* So img can be absolute */
}
#footer_content{
width: 80%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 30px;
}
#footer_content h1{
font-size: 1.8em;
width: 100%;
margin: 0;
margin-bottom: 4px;
height: fit-content;
}
#footer_social_networks{
width: 15%;
min-width: 200px;
border: 2px rgb(16, 207, 102) dotted;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.footer_social_network_item{
width: 50px;
height: 50px;
margin: 0;
margin-right: 20px;
margin-top: 10px;
}
.footer_social_network_item img{
border-radius: 50%;
width: 100%;
height: 100%;
}
#footer_content_links{
display: flex;
flex-direction: row;
width: 25%;
min-width: 250px;
flex-wrap: wrap;
border: 2px rgb(212, 15, 230) dotted;
align-content: flex-start;
}
.footer_links_box{
border: 3px blue dotted;
width: fit-content;
margin-right: 20px;
margin-bottom: 15px;
}
.footer_links_box_title{
font-size: 1.4em;
border-bottom: rgb(179, 72, 122) 2px solid;
margin: 0;
margin-bottom: 2px;
margin-top: 2px;
}
.footer_links_box ul{
text-decoration: none;
padding: 0;
margin: 0;
margin-top: 4px;
}
.footer_links_box li p{
margin: 0;
font-size: 1.2em;
text-decoration: none;
margin-bottom: 2px;
}
#footer_contact_div{
border: rgb(82, 15, 170) 2px solid;
width: 15%;
min-width: 160px;
}
#footer_contact_div h1{
width: fit-content !important;
margin: auto;
margin-bottom: 0;
}
#footer_contact_div p{
margin-top: 10px;
margin-bottom: 12px;
text-align: center;
}
#footer_contact_button{
background-color: rgb(65, 185, 61);
font-size: 1.1em;
width: 50%;
margin: auto;
}
#footer_little_text{
font-size: 0.8em;
margin: 0;
margin-left: 20px;
}
#footer_picture{
width: 100px;
height: 100px;
margin-left: auto;
border: 2px green dotted;
}
#footer_picture img{
width: 100%;
height: 100%;
}

131
html/test.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu de la vie en arrière-plan</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
color: white;
font-family: Arial, sans-serif;
}
canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1; /* Derrière le contenu */
border: 2px red;
}
.content {
position: relative;
z-index: 1;
text-align: center;
margin-top: 20vh;
}
</style>
</head>
<body>
<canvas id="gameOfLife"></canvas>
<div class="content">
<h1>Bienvenue sur mon site</h1>
<p>Le jeu de la vie tourne en arrière-plan !</p>
</div>
<script>
const canvas = document.getElementById("gameOfLife");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// We find here the size of the grid to cover the whole screen
const cellSize = 20;
let rows = Math.floor(window.innerHeight/cellSize)+1;
let cols = Math.floor(window.innerWidth/cellSize)+1;
let grid;
let fadeEffectGrid;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
rows = Math.floor(window.innerHeight/cellSize)+1;
cols = Math.floor(window.innerWidth/cellSize)+1;
grid = []
for(let i=0; i<rows; i++){
let list = [];
for(let j=0; j<cols; j++) list.push(Math.random() > 0.85 ? 1 : 0);
grid.push(list);
}
fadeEffectGrid = grid.map(arr => [...arr]); // Full duplication
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas(); // Generate for the first time the full 2d array
function nextGeneration() {
let newGrid = grid.map(arr => [...arr]); // Full duplication
for (let y = 0; y < rows; y++) { // For each row
for (let x = 0; x < cols; x++) { // For each col
let neighbors = 0; // We will count the number of living cells nearby
for (let dy = -1; dy <= 1; dy++) { // We loop through the grid, starting by the cell at the upper left corner of the one we are working on
for (let dx = -1; dx <= 1; dx++) { // And stopping at the lower right corner
if (dx == 0 && dy == 0) continue; //We don't count the considered cell
let ny = (y + dy + rows)%rows; // We find here the real coords in the grid
let nx = (x + dx + cols)%cols;
neighbors += grid[ny][nx]; // We count the adjacent cell. We are in a tore, so other side is checked as well
}
}
if (grid[y][x] == 1) { // Our cell is alive
if (neighbors < 2 || neighbors > 3 || Math.random() > 0.999) newGrid[y][x] = 0; // Dies, and a small chance to die in any case
} else { // Our cell is dead
if (neighbors == 3) newGrid[y][x] = 1; // Alive
if (Math.random() > 0.999){
// Very small chance for a new group to spawn
for (let dy = -2; dy <= 2; dy++) {
for (let dx = -2; dx <= 2; dx++) {
let ny = (y + dy + rows)%rows; // We find here the real coords in the grid
let nx = (x + dx + cols)%cols;
if(Math.random()<0.7) grid[ny][nx] = 1; // 70% of chance to be alive
}
}
} // End of chance based respawn
}
}
}
grid = newGrid;
}
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
if (grid[y][x]) {
fadeEffectGrid[y][x] = 1; // This cell is alive, opacity is full
} else {
fadeEffectGrid[y][x] = Math.max(0, fadeEffectGrid[y][x] - 0.4); // Cell died, it will fade out
}
if (fadeEffectGrid[y][x] > 0) {
ctx.fillStyle = `rgba(0, 255, 0, ${fadeEffectGrid[y][x]})`;
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
}
}
}
}
function update() {
nextGeneration();
drawGrid();
setTimeout(update, 200); // We don't want it to be too quick
}
update();
</script>
</body>
</html>