Core Site
61
404-error.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="d3vyce.fr Site" />
|
||||
<meta name="author" content="d3vyce - Nicolas Sudres" />
|
||||
<title>404 • d3vyce.fr</title>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||
<!-- Boostrap-->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Custom CSS-->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!-- Awesome Font-->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap Icons-->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
||||
<!-- Roboto Font -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<script src="js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="masthead" id="home">
|
||||
<div class="container h-100">
|
||||
<div class="row head-row align-items-center h-100 justify-content-evenly text-center">
|
||||
<div class="col-lg-12 col-xl-5">
|
||||
|
||||
<h1 class="text-white font-weight-bold"><img src="/assets/img/error.png" width="12%"> 404 Not Found</h1>
|
||||
<p class="text-white">The requested URL was not found on this server !</p>
|
||||
<hr class="divider" />
|
||||
<div class="d-grid gap-4 col-10 mx-auto">
|
||||
<a class="btn btn-outline-light btn-lg" href="https://www.d3vyce.fr">Go back to Homepage</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
||||
<script>
|
||||
VANTA.NET({
|
||||
el: "#home",
|
||||
mouseControls: false,
|
||||
touchControls: false,
|
||||
gyroControls: false,
|
||||
minHeight: 200.00,
|
||||
minWidth: 200.00,
|
||||
scale: 1.00,
|
||||
scaleMobile: 1.00,
|
||||
points: 10.00,
|
||||
maxDistance: 20.00,
|
||||
spacing: 25.00,
|
||||
color: 0xECB365,
|
||||
backgroundColor: 0x041C32
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
45
admin.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="d3vyce.fr Site" />
|
||||
<meta name="author" content="d3vyce - Nicolas Sudres" />
|
||||
<title>Admin Panel • d3vyce.fr</title>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||
<!-- Boostrap-->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Custom CSS-->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!-- Awesome Font-->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap Icons-->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
||||
<!-- Roboto Font -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<script src="js/script.js"></script>
|
||||
<script src="js/admin.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="masthead bg-dark-1" id="home">
|
||||
<div class="container h-100">
|
||||
<div class="row head-row align-items-center h-100 justify-content-evenly text-center">
|
||||
<div class="col-lg-12 col-xl-5">
|
||||
<h1 class="text-white font-weight-bold">Admin Panel</h1>
|
||||
<form action="admin.html" method="post" id="signin">
|
||||
<div class="form-group mt-5">
|
||||
<input type="login" class="form-control" id="login" aria-describedby="emailHelp" placeholder="Login">
|
||||
</div>
|
||||
<div class="form-group mt-3">
|
||||
<input type="password" class="form-control" id="password" placeholder="Password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-light btn-lg mt-5">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
BIN
assets/doc/CA-2022.pdf
Normal file
BIN
assets/doc/Jr-penetration-tester.pdf
Normal file
BIN
assets/doc/Junos.pdf
Normal file
BIN
assets/doc/Offensive-Pentesting.pdf
Normal file
BIN
assets/favicon.ico
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
assets/img/error.png
Normal file
After Width: | Height: | Size: 203 KiB |
BIN
assets/img/profil.png
Normal file
After Width: | Height: | Size: 180 KiB |
BIN
assets/img/profil_about.png
Normal file
After Width: | Height: | Size: 2.9 MiB |
BIN
assets/img/projet/Homelab-1.png
Normal file
After Width: | Height: | Size: 294 KiB |
BIN
assets/img/projet/Homelab-2.png
Normal file
After Width: | Height: | Size: 294 KiB |
BIN
assets/img/projet/Homelab-3.png
Normal file
After Width: | Height: | Size: 123 KiB |
BIN
assets/img/projet/Homelab-4.png
Normal file
After Width: | Height: | Size: 278 KiB |
BIN
assets/img/projet/Python-game-1.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
assets/img/projet/Python-game-2.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
assets/img/projet/Site-d3vyce-1.png
Normal file
After Width: | Height: | Size: 296 KiB |
BIN
assets/img/projet/Site-d3vyce-2.png
Normal file
After Width: | Height: | Size: 290 KiB |
BIN
assets/img/projet/Site-d3vyce-3.png
Normal file
After Width: | Height: | Size: 225 KiB |
BIN
assets/img/projet/Site-d3vyce-4.png
Normal file
After Width: | Height: | Size: 193 KiB |
BIN
assets/img/projet/Writeup-ctf-1.png
Normal file
After Width: | Height: | Size: 221 KiB |
BIN
assets/img/projet/Writeup-ctf-2.png
Normal file
After Width: | Height: | Size: 269 KiB |
BIN
assets/img/projet/Writeup-ctf-3.png
Normal file
After Width: | Height: | Size: 88 KiB |
171
css/mouse.css
Normal file
@ -0,0 +1,171 @@
|
||||
/* Mouse scroll animation */
|
||||
*, *:before, *:after {
|
||||
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mouse_scroll {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.m_scroll_arrows
|
||||
{
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
-ms-transform: rotate(45deg); /* IE 9 */
|
||||
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
||||
transform: rotate(45deg);
|
||||
|
||||
border-right: 2px solid white;
|
||||
border-bottom: 2px solid white;
|
||||
margin: 0 0 3px 4px;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.unu
|
||||
{
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.unu, .doi, .trei
|
||||
{
|
||||
-webkit-animation: mouse-scroll 1s infinite;
|
||||
-moz-animation: mouse-scroll 1s infinite;
|
||||
animation: mouse-scroll 1s infinite;
|
||||
|
||||
}
|
||||
|
||||
.unu
|
||||
{
|
||||
-webkit-animation-delay: .1s;
|
||||
-moz-animation-delay: .1s;
|
||||
-webkit-animation-direction: alternate;
|
||||
|
||||
animation-direction: alternate;
|
||||
animation-delay: alternate;
|
||||
}
|
||||
|
||||
.doi
|
||||
{
|
||||
-webkit-animation-delay: .2s;
|
||||
-moz-animation-delay: .2s;
|
||||
-webkit-animation-direction: alternate;
|
||||
|
||||
animation-delay: .2s;
|
||||
animation-direction: alternate;
|
||||
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.trei
|
||||
{
|
||||
-webkit-animation-delay: .3s;
|
||||
-moz-animation-delay: .3s;
|
||||
-webkit-animation-direction: alternate;
|
||||
|
||||
animation-delay: .3s;
|
||||
animation-direction: alternate;
|
||||
|
||||
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.mouse {
|
||||
height: 42px;
|
||||
width: 24px;
|
||||
border-radius: 14px;
|
||||
transform: none;
|
||||
border: 2px solid white;
|
||||
top: 170px;
|
||||
}
|
||||
|
||||
.wheel {
|
||||
height: 5px;
|
||||
width: 2px;
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
background: white;
|
||||
position: relative;
|
||||
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border: 2px solid #fff;
|
||||
-webkit-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.wheel {
|
||||
-webkit-animation: mouse-wheel 0.6s linear infinite;
|
||||
-moz-animation: mouse-wheel 0.6s linear infinite;
|
||||
animation: mouse-wheel 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes mouse-wheel{
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(6px);
|
||||
-ms-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes mouse-wheel {
|
||||
0% { top: 1px; }
|
||||
25% { top: 2px; }
|
||||
50% { top: 3px;}
|
||||
75% { top: 2px;}
|
||||
100% { top: 1px;}
|
||||
}
|
||||
@-o-keyframes mouse-wheel {
|
||||
|
||||
0% { top: 1px; }
|
||||
25% { top: 2px; }
|
||||
50% { top: 3px;}
|
||||
75% { top: 2px;}
|
||||
100% { top: 1px;}
|
||||
}
|
||||
@keyframes mouse-wheel {
|
||||
|
||||
0% { top: 1px; }
|
||||
25% { top: 2px; }
|
||||
50% { top: 3px;}
|
||||
75% { top: 2px;}
|
||||
100% { top: 1px;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mouse-scroll {
|
||||
|
||||
0% { opacity: 0;}
|
||||
50% { opacity: .5;}
|
||||
100% { opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes mouse-scroll {
|
||||
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: .5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@-o-keyframes mouse-scroll {
|
||||
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: .5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@keyframes mouse-scroll {
|
||||
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: .5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
263
css/style.css
Normal file
@ -0,0 +1,263 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/* Color */
|
||||
:root {
|
||||
--dark-1: #041C32;
|
||||
--dark-2: #04293A;
|
||||
--dark-3: #064663;
|
||||
--accent: #F6AE2D;
|
||||
}
|
||||
|
||||
.bg-dark-1 {
|
||||
background-color: var(--dark-1);
|
||||
}
|
||||
|
||||
.bg-dark-2 {
|
||||
background-color: var(--dark-2);
|
||||
}
|
||||
|
||||
.bg-dark-3 {
|
||||
background-color: var(--dark-3);
|
||||
}
|
||||
|
||||
.text-accent {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.text-white-65 {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
/* ------------ */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
scroll-padding-top: calc(4.5rem - 1px);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
overflow: overlay;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
/* ------------ */
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
border-radius: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
border-color: var(--accent);
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.mod {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
background-color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.btn span:after {
|
||||
content: '\00bb';
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
right: -20px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover span {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.btn:hover span:after {
|
||||
opacity: 1;
|
||||
right: 0;
|
||||
}
|
||||
/* ------------ */
|
||||
|
||||
.page-section {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.badge:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--dark-2);
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
|
||||
@media (min-width: 992px) {
|
||||
header.masthead {
|
||||
height: 100vh;
|
||||
min-height: 40rem;
|
||||
padding-top: 4.5rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
header.masthead p {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
header.masthead h1, header.masthead .h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
header.masthead h1, header.masthead .h1 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
header.masthead {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.head-row {
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about {
|
||||
background-color: var(--dark-2);
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills {
|
||||
background-color: var(--dark-1);
|
||||
}
|
||||
|
||||
.skill .i {
|
||||
color: var(--accent);
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Projects Section */
|
||||
.projects {
|
||||
background-color: var(--dark-2);
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.project {
|
||||
background-color: var(--dark-3);
|
||||
margin: 2rem;
|
||||
padding-left: 0;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
|
||||
transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
|
||||
}
|
||||
|
||||
.project img {
|
||||
max-width:100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.project-image {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
.project-text {
|
||||
position: relative;
|
||||
padding-top: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Footer Section */
|
||||
.footer {
|
||||
background-color: var(--dark-1);
|
||||
}
|
||||
|
||||
.fa.test {
|
||||
font-size: 22px;
|
||||
padding: 2rem;
|
||||
padding-bottom: 0rem;
|
||||
color: #7e7e7e;
|
||||
}
|
||||
|
||||
.fa.test:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.social{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
/* ------------------------------------- */
|
||||
|
||||
.text-white-75 {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 0.2rem !important;
|
||||
max-width: 3.25rem;
|
||||
margin: 1.5rem auto;
|
||||
background-color: var(--accent);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: .45rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-track{
|
||||
background: transparent;
|
||||
}
|
27
css/timeline.css
Normal file
@ -0,0 +1,27 @@
|
||||
.timeline-with-icons {
|
||||
border-left: 1px solid hsl(0, 0%, 90%);
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.timeline-with-icons .timeline-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-with-icons .timeline-item:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timeline-with-icons .timeline-icon {
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
background-color: var(--dark-3);
|
||||
border-radius: 50%;
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
562
index.html
Normal file
@ -0,0 +1,562 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="d3vyce.fr Site" />
|
||||
<meta name="author" content="d3vyce - Nicolas Sudres" />
|
||||
<title>Home • d3vyce.fr</title>
|
||||
<!-- Favicon-->
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||
<!-- Boostrap-->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Custom CSS-->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/mouse.css">
|
||||
<link rel="stylesheet" href="css/timeline.css">
|
||||
<!-- Awesome Font-->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap Icons-->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
|
||||
<!-- Roboto Font -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Home -->
|
||||
<header class="masthead" id="home">
|
||||
<div class="container h-100">
|
||||
<div class="row head-row align-items-center h-100 justify-content-evenly text-center">
|
||||
<div class="col-4">
|
||||
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
|
||||
<hr class="divider" />
|
||||
<h1 class="text-white font-weight-bold">d3vyce</h1>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-4 justify-content-center">
|
||||
<h2 class="text-white font-weight-bold">Hi 👋, Welcome to my Site!</h2>
|
||||
<p class="text-white-65">Developer, CTF Player, Homelab, 3D Printing</p>
|
||||
<hr class="divider" />
|
||||
<div class="d-grid col-6 mx-auto">
|
||||
<a class="btn mt-2 btn-lg" href="https://blog.d3vyce.fr" target="_blank"><span><i class="fa fa-bookmark fa-lg"></i> Blog</span></a>
|
||||
<a class="btn mt-2 btn-lg" href="https://github.com/d3vyce" target="_blank"><span><i class="fa fa-github fa-lg"></i> Github</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row head-row justify-content-center">
|
||||
<div class="col-12 mouse_scroll p-0">
|
||||
<a href="#about">
|
||||
<div class="mouse">
|
||||
<div class="wheel"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="m_scroll_arrows unu"></span>
|
||||
<span class="m_scroll_arrows doi"></span>
|
||||
<span class="m_scroll_arrows trei"></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- About -->
|
||||
<section class="page-section about" id="about">
|
||||
<div class="container">
|
||||
<h2 class="text-white text-center mt-0">About Me</h2>
|
||||
<hr class="divider" />
|
||||
<div class="row align-items-center justify-content-center mt-4">
|
||||
<div class="col-xl-2 col-lg-3 col-sm-4">
|
||||
<img src="assets/img/profil_about.png" class="rounded img-fluid" alt="...">
|
||||
</div>
|
||||
<div class="col-lg-8 mt-4">
|
||||
<blockquote>
|
||||
<p class="text-white-65 mb-5">Hi, I'm Nicolas S aka d3vyce. I am a network and cybersecurity engineer living in France. I've always been passionate about computer science and technology, and over the years I've developed my skills in various fields such as programming, cybersecurity, infrastructure, networks, ... In addition to my master degree in networks and security, I love CTF and I have a homelab at home to continue my learning and experiment new things.</p>
|
||||
<footer class="blockquote-footer"><cite>d3vyce - Nicolas. S</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<hr class="divider" />
|
||||
<ul class="timeline-with-icons text-white mt-5">
|
||||
<li class="timeline-item mb-5">
|
||||
<span class="timeline-icon">
|
||||
<i class="bi-code-slash text-accent fs-5"></i>
|
||||
</span>
|
||||
<h5 class="fw-bold">Engineering internship: Network Design Architect</h5>
|
||||
<p class="text-accent mb-2 fw-bold">2019/2022</p>
|
||||
<p class="text-white-65">
|
||||
Multi-technology collection capacity planning. Study and management of network evolution (collection, xDSL, Fiber, Backbone). Technical deliverables, pre-sales and OSM technical support.
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="timeline-item mb-5">
|
||||
|
||||
<span class="timeline-icon">
|
||||
<i class="bi-award text-accent fs-5"></i>
|
||||
</span>
|
||||
<h5 class="fw-bold">Master's degree in Networks and Cybersecurity</h5>
|
||||
<p class="text-accent mb-2 fw-bold">2019/2022</p>
|
||||
<p class="text-white-65">
|
||||
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="timeline-item mb-5">
|
||||
|
||||
<span class="timeline-icon">
|
||||
<i class="bi-code-slash text-accent fs-5"></i>
|
||||
</span>
|
||||
<h5 class="fw-bold">Optimization and Monitoring of an enterprise network</h5>
|
||||
<p class="text-accent mb-2 fw-bold">2019</p>
|
||||
<p class="text-white-65">
|
||||
Upgrade and documentation of network equipment, implementation of a monitoring and automatic alert solution.
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="timeline-item mb-5">
|
||||
|
||||
<span class="timeline-icon">
|
||||
<i class="bi-award text-accent fs-5"></i>
|
||||
</span>
|
||||
<h5 class="fw-bold">Two-year University degree in Networks and Telecommunications</h5>
|
||||
<p class="text-accent mb-2 fw-bold">2017/2019</p>
|
||||
<p class="text-white-65">
|
||||
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Skills -->
|
||||
<section class="page-section skills" id="skills">
|
||||
<div class="container px-8 px-lg-12">
|
||||
<h2 class="text-white text-center mt-0">Skills</h2>
|
||||
<hr class="divider divider-light mb-0" />
|
||||
<div class="text-white row px-8 px-lg-12 justify-content-around">
|
||||
<div class="mt-5 col-lg-3 col-md-12 text-center">
|
||||
<div class="mb-2"><i class="text-accent bi-code-slash fs-1"></i></div>
|
||||
<h3 class="text-white h4 mb-3">Programming</h3>
|
||||
<p class="text-white-65 mt-0">Hi, I'm Nicolas S aka d3vyce. I am a network and cybersecurity engineer living in France. I've always been passionate about computer science and technology, and over the years I've developed my skills in various fields such as programming, cybersecurity, infrastructure, networks, ...</p>
|
||||
<p class="mt-4">
|
||||
<span class="badge bg-dark-3">C</span>
|
||||
<span class="badge bg-dark-3">C#</span>
|
||||
<span class="badge bg-dark-3">Python</span>
|
||||
<span class="badge bg-dark-3">Bash</span>
|
||||
<span class="badge bg-dark-3">HTML</span>
|
||||
<span class="badge bg-dark-3">CSS</span>
|
||||
<span class="badge bg-dark-3">PHP</span>
|
||||
<span class="badge bg-dark-3">JS</span>
|
||||
<span class="badge bg-dark-3">MySQL</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-5 col-lg-3 col-md-12 text-center">
|
||||
<div class="mb-2"><i class="text-accent bi-shield-lock fs-1"></i></div>
|
||||
<h3 class="text-white h4 mb-3">Cybersecurity</h3>
|
||||
<p class="text-white-65 mt-0">Hi, I'm Nicolas S aka d3vyce. I am a network and cybersecurity engineer living in France. I've always been passionate about computer science and technology, and over the years I've developed my skills in various fields such as programming, cybersecurity, infrastructure, networks, ...</p>
|
||||
<p class="mt-4">
|
||||
<span class="badge bg-dark-3">Kali</span>
|
||||
<span class="badge bg-dark-3">OWASP</span>
|
||||
<span class="badge bg-dark-3">Injection</span>
|
||||
<span class="badge bg-dark-3">Metasploit</span>
|
||||
<span class="badge bg-dark-3">Hydra</span>
|
||||
<span class="badge bg-dark-3">Hashcat</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-5 col-lg-3 col-md-12 text-center">
|
||||
<div class="mb-2"><i class="text-accent bi-hdd-network fs-1"></i></div>
|
||||
<h3 class="text-white h4 mb-3">Networking</h3>
|
||||
<p class="text-white-65 mt-0">Hi, I'm Nicolas S aka d3vyce. I am a network and cybersecurity engineer living in France. I've always been passionate about computer science and technology, and over the years I've developed my skills in various fields such as programming, cybersecurity, infrastructure, networks, ...</p>
|
||||
<p class="mt-4">
|
||||
<span class="badge bg-dark-3">Wireguard</span>
|
||||
<span class="badge bg-dark-3">MPLS</span>
|
||||
<span class="badge bg-dark-3">BGP</span>
|
||||
<span class="badge bg-dark-3">Firewall</span>
|
||||
<span class="badge bg-dark-3">OPNsense</span>
|
||||
<span class="badge bg-dark-3">WDM</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider mt-5" />
|
||||
<div class="text-white row px-8 px-lg-12 justify-content-evenly">
|
||||
<div class="mt-5 col-lg-3 col-md-12 text-center">
|
||||
<div class="mb-2"><i class="text-accent bi-award fs-1"></i></div>
|
||||
<h3 class="text-white h4 mb-3">Certification</h3>
|
||||
<div class="text-white-65">
|
||||
<p><a href="assets/doc/Jr-penetration-tester.pdf" target="_blank">Jr Penetration Tester (THM) 🔗</a></p>
|
||||
<p><a href="assets/doc/Offensive-Pentesting.pdf" target="_blank">Offensive Pentesting (THM) 🔗</a></p>
|
||||
<p><a href="assets/doc/Junos.pdf" target="_blank">JNCIA Junos 🔗</a></p>
|
||||
<p>CCNAv7, CCNA R&S</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 col-lg-3 col-md-12 text-center">
|
||||
<div class="mb-2"><i class="text-accent bi-lightbulb fs-1"></i></div>
|
||||
<h3 class="text-white h4 mb-3">Challenge</h3>
|
||||
<div class="text-white-65">
|
||||
<p>leHACK 2022 - Paris</p>
|
||||
<p>404 CTF 2022 - Online</p>
|
||||
<p>Cyber Apocalypse CTF 2022 - Online</p>
|
||||
<p>TRACS CTF 2021 (Team Get-Pwned) - CentraleSupélec</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-white row px-8 px-lg-10 mt-4 justify-content-center">
|
||||
<div class="col-xl-3 col-lg-4 col-sm-9 col-xs-12 mt-2 text-center">
|
||||
<a href="https://tryhackme.com/p/d3vyce" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://tryhackme-badges.s3.amazonaws.com/d3vyce.png" alt="TryHackMe" style="width:100%">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xl-3 col-lg-4 col-sm-9 col-xs-12 mt-2 text-center">
|
||||
<a href="https://app.hackthebox.com/profile/922368" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://www.hackthebox.com/badge/image/922368" alt="HackTheBox" style="width:100%">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Projects -->
|
||||
<section class="page-section projects" id="projects">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<h2 class="text-white mt-0">Projects</h2>
|
||||
<hr class="divider divider-light" />
|
||||
</div>
|
||||
<div class="row h-100 justify-content-evenly">
|
||||
<div class="project col-sm-12 col-lg-7 col-xl-5" >
|
||||
<a href="#Project1-modal" data-bs-toggle="modal" data-toggle="modal">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="project-image" src="assets/img/projet/Site-d3vyce-1.png" alt="...">
|
||||
</div>
|
||||
<div class="col project-text">
|
||||
<h2 class="text-white font-weight-bold">d3vyce.fr</h2>
|
||||
<p class="project-icon">
|
||||
<span class="badge bg-dark-1">CSS3</span>
|
||||
<span class="badge bg-dark-1">HTML5</span>
|
||||
<span class="badge bg-dark-1">JS</span>
|
||||
<span class="badge bg-dark-1">Bootstrap</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="project col-sm-12 col-lg-7 col-xl-5">
|
||||
<a href="#Project2-modal" data-bs-toggle="modal">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="project-image" src="assets/img/projet/Python-game-1.png" alt="...">
|
||||
</div>
|
||||
<div class="col project-text">
|
||||
<h2 class="text-white font-weight-bold">Python Game</h2>
|
||||
<p class="project-icon">
|
||||
<span class="badge bg-dark-1">Python</span>
|
||||
<span class="badge bg-dark-1">PyGame</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row h-100 justify-content-evenly">
|
||||
<div class="project col-sm-12 col-lg-7 col-xl-5">
|
||||
<a href="#Project3-modal" data-bs-toggle="modal">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="project-image" src="assets/img/projet/Writeup-ctf-1.png" alt="...">
|
||||
</div>
|
||||
<div class="col project-text">
|
||||
<h2 class="text-white font-weight-bold">Writeup CTF</h2>
|
||||
<p class="project-icon">
|
||||
<span class="badge bg-dark-1">Kali</span>
|
||||
<span class="badge bg-dark-1">THM</span>
|
||||
<span class="badge bg-dark-1">HTB</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="project col-sm-12 col-lg-7 col-xl-5">
|
||||
<a href="#Project4-modal" data-bs-toggle="modal">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="project-image" src="assets/img/projet/Homelab-1.png" alt="...">
|
||||
</div>
|
||||
<div class="col project-text">
|
||||
<h2 class="text-white font-weight-bold">Homelab</h2>
|
||||
<p class="project-icon">
|
||||
<span class="badge bg-dark-1">Unraid</span>
|
||||
<span class="badge bg-dark-1">OPNsense</span>
|
||||
<span class="badge bg-dark-1">Wireguard</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer-->
|
||||
<footer class="footer py-3">
|
||||
<div class="container">
|
||||
<div class="social text-center">
|
||||
<a href="https://twitter.com/d3vyce" target="_blank"><i class="fa test fa-twitter fa-lg"></i></a>
|
||||
<a href="https://github.com/d3vyce" target="_blank"><i class="fa test fa-github fa-lg"></i></a>
|
||||
<a href="https://www.d3vyce.fr" target="_blank"><i class="fa test fa-bookmark fa-lg"></i></a>
|
||||
</div>
|
||||
<div class="small text-center text-muted">d3vyce 2022 © All rights reserved</div>
|
||||
<div class="small text-center text-muted"><a href="#home">Home</a> • <a href="#about">About</a> • <a href="#skills">Skills</a> • <a href="#projects">Projects</a></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Portfolio Modals-->
|
||||
<!-- Portfolio Modal 1-->
|
||||
<div class="portfolio-modal modal fade" id="Project1-modal" tabindex="-1" aria-labelledby="Project1-modal" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0"><button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
|
||||
<div class="modal-body text-center pb-5 pt-0">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<!-- Portfolio Modal - Title-->
|
||||
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">d3vyce.fr</h2>
|
||||
<!-- Icon Divider-->
|
||||
<hr class="divider" />
|
||||
<!-- Portfolio Modal - Image-->
|
||||
<!-- <img class="img-fluid rounded mb-5" src="assets/img/projet/Homelab-2.png" width="640" height="400" alt="..." />-->
|
||||
<div id="Project1-carousel" class="carousel slide mb-5" data-bs-ride="carousel">
|
||||
<!-- Carousel indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#Project1-carousel" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#Project1-carousel" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#Project1-carousel" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<!-- Wrapper for carousel items -->
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item active">
|
||||
<img src="assets/img/projet/Site-d3vyce-2.png" class="d-block w-100" alt="Slide 1">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/img/projet/Site-d3vyce-3.png" class="d-block w-100" alt="Slide 2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/img/projet/Site-d3vyce-4.png" class="d-block w-100" alt="Slide 3">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel controls -->
|
||||
<a class="carousel-control-prev" href="#Project1-carousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#Project1-carousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mb-4 text-white-65">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
|
||||
<a class="btn mod btn-outline-light btn-lg mb-4" href="https://github.com/d3vyce/d3vyce.fr" target="_blank"><span>Source Code</span></a>
|
||||
<p class="mb-0">
|
||||
<span class="badge bg-dark-3">CSS3</span>
|
||||
<span class="badge bg-dark-3">HTML5</span>
|
||||
<span class="badge bg-dark-3">JS</span>
|
||||
<span class="badge bg-dark-3">Bootstrap</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Modal 2-->
|
||||
<div class="portfolio-modal modal fade" id="Project2-modal" tabindex="-1" aria-labelledby="Project2-modal" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0"><button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
|
||||
<div class="modal-body text-center pb-5 pt-0">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<!-- Portfolio Modal - Title-->
|
||||
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Python Game</h2>
|
||||
<!-- Icon Divider-->
|
||||
<hr class="divider" />
|
||||
<!-- Portfolio Modal - Image-->
|
||||
<!-- <img class="img-fluid rounded mb-5" src="assets/img/projet/Homelab-2.png" width="640" height="400" alt="..." />-->
|
||||
<div id="Project2-carousel" class="carousel slide mb-5" data-bs-ride="carousel">
|
||||
<!-- Carousel indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#Project2-carousel" data-bs-slide-to="0" class="active"></li>
|
||||
</ol>
|
||||
<!-- Wrapper for carousel items -->
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item active">
|
||||
<img src="assets/img/projet/Python-game-2.png" class="d-block w-100" alt="Slide 1">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel controls -->
|
||||
<a class="carousel-control-prev" href="#Project2-carousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#Project2-carousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mb-4 text-white-65">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
|
||||
<a class="btn mod btn-outline-light btn-lg mb-4" href="https://github.com/d3vyce/Python-Game" target="_blank"><span>Source Code</span></a>
|
||||
<p class="mb-0">
|
||||
<span class="badge bg-dark-3">Python</span>
|
||||
<span class="badge bg-dark-3">PyGame</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Modal 1-->
|
||||
<div class="portfolio-modal modal fade" id="Project3-modal" tabindex="-1" aria-labelledby="Project3-modal" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0"><button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
|
||||
<div class="modal-body text-center pb-5 pt-0">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<!-- Portfolio Modal - Title-->
|
||||
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Writeup CTF</h2>
|
||||
<!-- Icon Divider-->
|
||||
<hr class="divider" />
|
||||
<!-- Portfolio Modal - Image-->
|
||||
<!-- <img class="img-fluid rounded mb-5" src="assets/img/projet/Homelab-2.png" width="640" height="400" alt="..." />-->
|
||||
<div id="Project3-carousel" class="carousel slide mb-5" data-bs-ride="carousel">
|
||||
<!-- Carousel indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#Project3-carousel" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#Project3-carousel" data-bs-slide-to="1"></li>
|
||||
</ol>
|
||||
<!-- Wrapper for carousel items -->
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item active">
|
||||
<img src="assets/img/projet/Writeup-ctf-2.png" class="d-block w-100" alt="Slide 1">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/img/projet/Writeup-ctf-3.png" class="d-block w-100" alt="Slide 2">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel controls -->
|
||||
<a class="carousel-control-prev" href="#Project3-carousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#Project3-carousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mb-4 text-white-65">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
|
||||
<a class="btn mod btn-outline-light btn-lg mb-4" href="https://blog.d3vyce.fr/tag/writeup/" target="_blank"><span>Read more</span></a>
|
||||
<p class="mb-0">
|
||||
<span class="badge bg-dark-3">Kali</span>
|
||||
<span class="badge bg-dark-3">THM</span>
|
||||
<span class="badge bg-dark-3">HTB</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Modal 1-->
|
||||
<div class="portfolio-modal modal fade" id="Project4-modal" tabindex="-1" aria-labelledby="Project4-modal" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0"><button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
|
||||
<div class="modal-body text-center pb-5 pt-0">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<!-- Portfolio Modal - Title-->
|
||||
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0 text-white">Homelab</h2>
|
||||
<!-- Icon Divider-->
|
||||
<hr class="divider" />
|
||||
<!-- Portfolio Modal - Image-->
|
||||
<!-- <img class="img-fluid rounded mb-5" src="assets/img/projet/Homelab-2.png" width="640" height="400" alt="..." />-->
|
||||
<div id="Project4-carousel" class="carousel slide mb-5" data-bs-ride="carousel">
|
||||
<!-- Carousel indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#Project4-carousel" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#Project4-carousel" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#Project4-carousel" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<!-- Wrapper for carousel items -->
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item active">
|
||||
<img src="assets/img/projet/Homelab-2.png" class="d-block w-100" alt="Slide 1">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/img/projet/Homelab-3.png" class="d-block w-100" alt="Slide 2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/img/projet/Homelab-4.png" class="d-block w-100" alt="Slide 3">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel controls -->
|
||||
<a class="carousel-control-prev" href="#Project4-carousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#Project4-carousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mb-4 text-white-65">Initially, my goal was to create a media server accessible from anywhere with Plex. That was the initial objective, but you will see that today my homelab is much more extensive than that. I have over 20 selfhosted services ranging from password manager, web hosting, game server, etc.</p>
|
||||
<a class="btn mod btn-outline-light btn-lg mb-4" href="https://blog.d3vyce.fr/my-current-homelab/" target="_blank"><span>Read more</span></a>
|
||||
<p class="mb-0">
|
||||
<span class="badge bg-dark-3">Unraid</span>
|
||||
<span class="badge bg-dark-3">OPNsense</span>
|
||||
<span class="badge bg-dark-3">Wireguard</span>
|
||||
<span class="badge bg-dark-3">Docker</span>
|
||||
<span class="badge bg-dark-3">Nginx</span>
|
||||
<span class="badge bg-dark-3">Unify</span>
|
||||
<span class="badge bg-dark-3">Home Assistant</span>
|
||||
<span class="badge bg-dark-3">Uptime Kuma</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Boostrap JS -->
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
VANTA.NET({
|
||||
el: "#home",
|
||||
mouseControls: true,
|
||||
touchControls: false,
|
||||
gyroControls: true,
|
||||
minHeight: 200.00,
|
||||
minWidth: 200.00,
|
||||
scale: 1.00,
|
||||
scaleMobile: 1.00,
|
||||
points: 10.00,
|
||||
maxDistance: 20.00,
|
||||
spacing: 25.00,
|
||||
color: 0xECB365,
|
||||
backgroundColor: 0x041C32
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
0
js/admin.js
Normal file
52
js/script.js
Normal file
@ -0,0 +1,52 @@
|
||||
//Init
|
||||
$(document).ready(function(){
|
||||
init();
|
||||
});
|
||||
|
||||
function init(){
|
||||
//Auto margin calculator
|
||||
var navbarHeight = $("nav").height();
|
||||
var paddingTop = parseInt($("nav").css('padding-top'));
|
||||
var paddingBottom = parseInt($("nav").css('padding-bottom'));
|
||||
$('#main-content').css('margin-top', (navbarHeight + paddingTop + paddingBottom) + 'px');
|
||||
|
||||
//Ripple
|
||||
var ripples = document.querySelectorAll('.ripple');
|
||||
for (var i = 0; i < ripples.length; i++) {
|
||||
ripples[i].addEventListener('mousedown', rippleEffect, false);
|
||||
}
|
||||
|
||||
function rippleEffect(e){
|
||||
var width = this.clientWidth;
|
||||
var height = this.clientHeight;
|
||||
var rect = this.getBoundingClientRect();
|
||||
var posX = e.clientX - rect.left;
|
||||
var posY = e.clientY - rect.top;
|
||||
var size = Math.max(width, height);
|
||||
var effect = document.createElement('DIV');
|
||||
effect.className = 'effect';
|
||||
effect.style.width = size + 'px';
|
||||
effect.style.height = size + 'px';
|
||||
effect.style.top = posY - size/2 + 'px';
|
||||
effect.style.left = posX - size/2 + 'px';
|
||||
|
||||
this.appendChild(effect);
|
||||
var parent = this;
|
||||
|
||||
setTimeout(function() {
|
||||
parent.removeChild(effect);
|
||||
}, 750);
|
||||
}
|
||||
|
||||
//Prevent horizontal scroll of page using keyboard
|
||||
$(window).keydown(function(e){
|
||||
if(e.which == 37 || e.which == 39){
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
//Scroll hide image
|
||||
$(window).scroll(function () {
|
||||
$(this).scrollTop() > 50 ? $('#scroll').fadeOut() : $('#scroll').fadeIn()
|
||||
});
|
||||
}
|
2
robots.txt
Normal file
@ -0,0 +1,2 @@
|
||||
User-Agent: *
|
||||
Allow: /
|
61
social.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="d3vyce.fr Site" />
|
||||
<meta name="author" content="d3vyce - Nicolas Sudres" />
|
||||
<title>Social • d3vyce.fr</title>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<header class="masthead" id="home">
|
||||
<div class="container h-100">
|
||||
<div class="row head-row align-items-center h-100 justify-content-evenly text-center">
|
||||
<div class="col-lg-12 col-xl-4">
|
||||
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="..." width="40%">
|
||||
<h1 class="text-white font-weight-bold">d3vyce</h1>
|
||||
<hr class="divider" />
|
||||
<div class="d-grid gap-4 col-6 mx-auto">
|
||||
<a class="btn btn-outline-light btn-lg" href="https://www.d3vyce.fr" target="_blank"><i class="fa fa-globe fa-lg"></i> Site</a>
|
||||
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
|
||||
<a class="btn btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
|
||||
<a class="btn btn-outline-light btn-lg" href="https://status.d3vyce.fr" target="_blank"><i class="fa fa-twitter fa-lg"></i> Twitter</a>
|
||||
<a class="btn btn-outline-light btn-lg" href="https://status.d3vyce.fr" target="_blank"><i class="fa fa-wifi fa-lg"></i> Status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
||||
<script>
|
||||
VANTA.NET({
|
||||
el: "#home",
|
||||
mouseControls: false,
|
||||
touchControls: false,
|
||||
gyroControls: false,
|
||||
minHeight: 200.00,
|
||||
minWidth: 200.00,
|
||||
scale: 1.00,
|
||||
scaleMobile: 1.00,
|
||||
points: 10.00,
|
||||
maxDistance: 20.00,
|
||||
spacing: 25.00,
|
||||
color: 0xECB365,
|
||||
backgroundColor: 0x041C32
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|