mguilbert/link-in-bio_page_maethik
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

26/05/2023-1

Browse Source
This commit is contained in:
Mathéo GUILBERT
2023-05-26 10:17:23 +02:00
commit 72ef74c7be
9 changed files with 207 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/index.css
+114
View File
@@ -0,0 +1,114 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background-image: url('../img/background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
}
body #a {
text-decoration: none;
color: rgb(100, 100, 100);
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
position: absolute;
bottom: 0;
right: 0;
z-index: 5;
cursor: default;
margin: 0;
padding: 0;
}
main {
position: absolute;
z-index: 3;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
opacity: 0;
filter: blur(10px);
transition: opacity 2s ease-in-out, filter 2s ease-in-out;
}
header {
width: 100%;
min-height: 35%;
padding-top: 10%;
padding-bottom: 10%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
header img {
width: 125px;
border: 2px solid white;
border-radius: 50%;
}
header h2 {
background-color: rgb(30, 30, 30);
border: 1px solid white;
border-radius: 30px;
padding: 5px;
padding-right: 10px;
padding-left: 10px;
color: white;
font-size: 1.25rem;
font-family: 'Times New Roman', Times, serif;
}
.links-container {
width: 100%;
min-height: 65%;
display: flex;
flex-direction: column;
align-items: center;
}
.links-container a {
display: flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
width: 90%;
margin-top: 20px;
padding: 5px;
border-radius: 30px;
text-decoration: none;
color: black;
font-size: 1.15rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.links-container a img {
width: 50px;
margin-left: 20px;
}
.links-container a p {
margin-left: 10%;
}
#vanta {
position: absolute;
z-index: 2;
width: 100vw;
height: 100vh;
}
@media screen and (width > 425px) {
.links-container a {
width: 60%;
}
}
img/background.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

img/github.svg
+3
View File
@@ -0,0 +1,3 @@
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css"><![CDATA[
.st0{fill-rule:evenodd;clip-rule:evenodd;}
]]></style><g><path class="st0" d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1 c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14 c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5 c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7 c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3 c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7 C480,134.8,379.7,32,256,32z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

img/instagram.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#FFFFFF;}
</style><g><linearGradient gradientTransform="matrix(16.0027 -27.7174 27.7174 16.0027 -878.9595 -482.2268)" gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="-1.206969e-06" x2="1" y1="32" y2="32"><stop offset="0" style="stop-color:#FEC053"/><stop offset="0.327" style="stop-color:#F2203E"/><stop offset="0.648" style="stop-color:#B729A8"/><stop offset="1" style="stop-color:#5342D6"/></linearGradient><path class="st0" d="M16,0L16,0c8.8,0,16,7.2,16,16c0,8.8-7.2,16-16,16C7.2,32,0,24.8,0,16C0,7.2,7.2,0,16,0z"/><path class="st1" d="M20.7,6h-9.5C8.3,6,6,8.4,6,11.4v9.2c0,2.9,2.3,5.3,5.3,5.4h9.5c2.9,0,5.3-2.4,5.3-5.4v-9.2 C26,8.4,23.7,6,20.7,6z M24.2,20.5c0,2-1.6,3.7-3.7,3.7h-9.1c-2,0-3.7-1.7-3.6-3.7v-9c0-2,1.6-3.7,3.6-3.7h9.1c2,0,3.7,1.7,3.7,3.7 V20.5z"/><path class="st1" d="M16,10.9c-2.8-0.1-5.2,2.2-5.2,5c-0.1,2.8,2.2,5.2,5,5.2s5.2-2.2,5.2-5l0-0.1C21.1,13.2,18.8,10.9,16,10.9z M16,19.3c-1.8,0-3.3-1.4-3.4-3.2c0-1.8,1.4-3.3,3.2-3.4s3.3,1.4,3.4,3.2l0,0.1C19.3,17.8,17.8,19.3,16,19.3z"/><path class="st1" d="M21.3,9.4c0.6,0,1.1,0.5,1.1,1.2s-0.5,1.2-1.1,1.2s-1.1-0.5-1.1-1.2S20.7,9.4,21.3,9.4z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

img/linkedin.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{fill:#0078B5;}
.st1{fill:#FFFFFF;}
</style><title/><g><path class="st0" d="M500,1000L500,1000C223.9,1000,0,776.1,0,500l0,0C0,223.9,223.9,0,500,0l0,0c276.1,0,500,223.9,500,500l0,0 C1000,776.1,776.1,1000,500,1000z"/><g><g><path class="st1" d="M184.2,387.3h132.9v427.7H184.2V387.3z M250.7,174.7c42.5,0,77,34.5,77,77.1s-34.5,77.1-77,77.1 c-42.6,0-77.1-34.5-77.1-77.1C173.5,209.3,208,174.7,250.7,174.7"/><path class="st1" d="M400.5,387.3H528v58.4h1.8c17.7-33.6,61-69.1,125.8-69.1c134.6,0,159.5,88.6,159.5,203.7v234.7H682.2V607.1 c0-49.7-0.9-113.4-69.1-113.4c-69.2,0-79.8,54-79.8,109.8v211.6H400.5V387.3z"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 882 B

img/logo.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

img/personal_website.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#101820;}</style></defs><title/><g data-name="Layer 40" id="Layer_40"><path class="cls-1" d="M28,24H4a3,3,0,0,1-3-3V5A3,3,0,0,1,4,2H28a3,3,0,0,1,3,3V21A3,3,0,0,1,28,24ZM4,4A1,1,0,0,0,3,5V21a1,1,0,0,0,1,1H28a1,1,0,0,0,1-1V5a1,1,0,0,0-1-1Z"/><path class="cls-1" d="M21,30H11a1,1,0,0,1-1-1.16l1-6A1,1,0,0,1,12,22h8a1,1,0,0,1,1,.84l1,6A1,1,0,0,1,21,30Zm-8.82-2h7.64l-.67-4h-6.3Z"/><path class="cls-1" d="M24,30H8a1,1,0,0,1,0-2H24a1,1,0,0,1,0,2Z"/><path class="cls-1" d="M30,19H2a1,1,0,0,1,0-2H30a1,1,0,0,1,0,2Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 626 B

img/youtube.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#FFFFFF;}
</style><title/><g><path class="st0" d="M500,1000L500,1000C223.9,1000,0,776.1,0,500v0C0,223.9,223.9,0,500,0h0c276.1,0,500,223.9,500,500v0 C1000,776.1,776.1,1000,500,1000z"/><path class="st1" d="M818.2,339.1c-7.6-28.8-30.1-51.4-58.7-59.1c-51.8-14-259.4-14-259.4-14s-207.7,0-259.4,14 c-28.6,7.7-51.1,30.3-58.7,59.1C168,391.2,168,500,168,500s0,108.8,13.9,160.9c7.6,28.8,30.1,51.4,58.7,59.1 c51.8,14,259.4,14,259.4,14s207.7,0,259.4-14c28.6-7.7,51.1-30.3,58.7-59.1C832,608.8,832,500,832,500S832,391.2,818.2,339.1z M432.1,598.7V401.3L605.6,500L432.1,598.7z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 860 B

index.html
+77
View File
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>@matheoguilbert</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
VANTA.BIRDS({
el: "#vanta",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
colorMode: "lerpGradient",
wingSpan: 10.00,
speedLimit: 3.00,
separation: 100.00,
alignment: 70.00,
cohesion: 5.00,
quantity: 1.00,
backgroundAlpha: 0
});
setTimeout(() => {
const main = document.querySelector('main');
main.style.opacity = 1;
main.style.filter = 'blur(0px)';
}, 1000);
});
</script>
</head>
<body>
<div id="vanta"></div>
<main>
<header>
<img src="img/logo.jpg" />
<h2>@matheo.guilbert</h2>
</header>
<div class="links-container">
<a id="website" href="https://matheoguilbert.fr/" target="_blank">
<img src="img/personal_website.svg" />
<p>Personal website</p>
</a>
<a id="instagram" href="https://www.instagram.com/matheo.guilbert/" target="_blank">
<img src="img/instagram.svg" />
<p>Instagram</p>
</a>
<a id="youtube" href="https://www.youtube.com/@maethik3673" target="_blank">
<img src="img/youtube.svg" />
<p>Youtube</p>
</a>
<a id="linkedin" href="https://www.linkedin.com/in/math%C3%A9o-guilbert-26a209258/" target="_blank">
<img src="img/linkedin.svg" />
<p>LinkedIn</p>
</a>
<a id="github" href="https://github.com/Maethik" target="_blank">
<img src="img/github.svg" />
<p>GitHub</p>
</a>
</div>
</main>
<a id="a" href="https://www.pexels.com/fr-fr/photo/paysage-foret-parc-paix-3632931/" target="_blank"><p>Photo de Sean Valentine</p></a>
</body>
</html>