d3vyce/d3vyce.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dockerfile+build
Some checks failed
docker-build
Details

Browse Source
This commit is contained in:
d3vyce
2023-04-02 08:48:50 -04:00
parent 918e8be69f
commit 019512a670
40 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
html/.well-known/security.txt Normal file
View File

@ -0,0 +1,5 @@
Contact: mailto:contact@d3vyce.fr
Expires: 2024-12-31T23:00:00.000Z
Encryption: https://www.d3vyce.fr/pgp-key.txt
Preferred-Languages: en
Canonical: https://www.d3vyce.fr/.well-known/security.txt

61
html/404-error.html Normal file
View 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>

1
html/README.md Normal file
View File

@ -0,0 +1 @@
d3vyce.fr Source Code

45
html/admin.html Normal file
View 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
html/assets/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
html/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
html/assets/icon-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
html/assets/icon-256x256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
html/assets/icon-384x384.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
html/assets/icon-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 KiB

BIN
html/assets/img/error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

BIN
html/assets/img/profil.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
html/assets/img/profil_about.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
html/assets/img/projet/Homelab-1.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
html/assets/img/projet/Homelab-2.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
html/assets/img/projet/Homelab-3.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
html/assets/img/projet/Homelab-4.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
html/assets/img/projet/Python-game-1.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
html/assets/img/projet/Python-game-2.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
html/assets/img/projet/Site-d3vyce-1.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
html/assets/img/projet/Site-d3vyce-2.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
html/assets/img/projet/Site-d3vyce-3.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
html/assets/img/projet/Site-d3vyce-4.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
html/assets/img/projet/Writeup-ctf-1.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
html/assets/img/projet/Writeup-ctf-2.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
html/assets/img/projet/Writeup-ctf-3.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

171
html/css/mouse.css Normal file
View 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; }
}

83
html/css/reset.css Normal file
View File

@ -0,0 +1,83 @@
/***
The new CSS reset - version 1.7.3 (last updated 7.8.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-width: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}

144
html/css/social.css Normal file
View File

@ -0,0 +1,144 @@
.home {
position: fixed !important;
}
.social {
font-family: "Roboto", sans-serif;
font: 18px;
color: white;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.profile-card {
box-shadow: 0 18px 200px -60px black;
border-radius: 50px;
width: 650px;
position: relative;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.2509803922);
padding: 3rem 1rem;
display: flex;
flex-direction: column;
gap: 40px;
}
@media screen and (max-width: 768px) {
.profile-card {
width: auto;
}
}
.profile-card__img img {
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
display: block;
box-shadow: 0 10px 60px -10px rgba(13, 28, 39, 0.5);
}
@media (max-width: 766px) {
.profile-card__img img {
width: 150px;
height: 150px;
}
.profile-card__desc h1 {
font-size: 1.5rem !important;
margin-top: -25px !important;
}
}
.profile-card__desc {
text-align: center;
display: flex;
flex-direction: column;
gap: 25px;
}
.profile-card__desc h1 {
font-size: 2.5rem;
font-weight: bold;
}
.profile-card__desc h1 + div {
font-size: 20px !important;
}
.profile-card__info {
display: flex;
justify-content: center;
gap: 50px;
}
@media screen and (max-width: 576px) {
.profile-card__info {
gap: 30px;
}
}
.profile-card__info > div {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}
.profile-card__info > div > *:first-child {
font-weight: bold;
}
.profile-card__info > div > *:last-child {
font-size: 16px !important;
opacity: 0.7;
}
.profile-card__social {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.profile-card__social a {
display: inline-flex;
width: 55px;
height: 55px;
margin: 15px;
border-radius: 40%;
align-items: center;
justify-content: center;
color: white;
position: relative;
flex-shrink: 0;
transition: all 0.2s;
}
@media screen and (max-width: 768px) {
.profile-card__social a {
width: 50px;
height: 50px;
margin: 10px;
}
}
@media screen and (min-width: 768px) {
.profile-card__social a:hover {
transform: scale(1.2) translateY(-5px);
}
}
.profile-card__social a.site {
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
box-shadow: 0 4px 30px rgba(43, 98, 168, 0.4);
}
.profile-card__social a.blog {
background: linear-gradient(45deg, #1769ff, #213fca);
box-shadow: 0 4px 30px rgba(27, 86, 231, 0.4);
}
.profile-card__social a.github {
background: linear-gradient(45deg, #333333, #626b73);
box-shadow: 0 4px 30px rgba(63, 65, 67, 0.4);
}
.profile-card__social a.twitter {
background: linear-gradient(45deg, #1da1f2, #0e71c8);
box-shadow: 0 4px 30px rgba(19, 127, 212, 0.4);
}
.profile-card__social a.status {
background: linear-gradient(45deg, #3b5998, #0078d7);
box-shadow: 0 4px 30px rgba(43, 98, 168, 0.4);
}

282
html/css/style.css Normal file
View File

@ -0,0 +1,282 @@
@charset "UTF-8";
/* Color */
:root {
--dark-1: #041C32;
--dark-2: #04293A;
--dark-3: #064663;
--accent: #D87E27;
}
.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;
border-width: 2px;
font-size: 20px;
font-weight: 500;
overflow: hidden;
border-color: var(--accent);
background-color: rgba(216, 126, 39, 0.40);
color: white;
}
.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;
}
.divider {
height: 0.2rem !important;
max-width: 3.25rem;
margin: 1.5rem auto;
background-color: var(--accent);
opacity: 1;
}
/* 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: .8s transform cubic-bezier(.155,1.105,.295,1.12), .8s box-shadow, .8s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
cursor: pointer;
}
.project:hover {
transform: scale(1.02);
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;
}
.modal-content {
background-color: var(--dark-2);
}
/* ------------ */
/* 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;
}
/* ------------ */
/* Scrollbar */
::-webkit-scrollbar {
width: .45rem;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
::-webkit-scrollbar-track{
background: transparent;
}
/* ------------ */
/* Animation */
.reveal{
position: relative;
opacity: 0;
}
.reveal.active{
opacity: 1;
}
.active.fade {
animation: fade 1s;
}
@keyframes fade {
0% {
transform: scale(0.9, 0.9);
opacity: 0;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}
/* ------------ */

27
html/css/timeline.css Normal file
View 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;
}

580
html/index.html Normal file
View File

@ -0,0 +1,580 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#041C32"/>
<meta name="description" content="d3vyce.fr Site" />
<meta name="author" content="d3vyce - Nicolas Sudres" />
<title>Home • d3vyce.fr</title>
<!-- Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<!-- 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.avif" 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-8 mx-auto">
<a class="btn mt-2 btn-lg" href="https://blog.d3vyce.fr" target="_blank" rel="noopener noreferrer"><span><i class="fa fa-bookmark fa-lg"></i>&nbsp;&nbsp;&nbsp;&nbsp;Blog</span></a>
<a class="btn mt-2 btn-lg" href="https://github.com/d3vyce" target="_blank" rel="noopener noreferrer"><span><i class="fa fa-github fa-lg"></i>&nbsp;&nbsp;&nbsp;&nbsp;Github</span></a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a class="anchor" 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.avif" class="rounded img-fluid" alt="...">
</div>
<div class="col-lg-8 mt-4">
<blockquote>
<!-- Desktop/Tablet -->
<div class="d-none d-sm-block">
<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>
</div>
<!-- Smartphone -->
<div class="d-sm-none">
<p class="text-white-65">Hi, I'm Nicolas S aka d3vyce. I am a network and cybersecurity engineer living in France. <a class="text-accent" data-bs-toggle="collapse" href="#bio-collapse" role="button" aria-expanded="false" aria-controls="bio-collapse">Read more...</a></p>
<div class="collapse" id="bio-collapse">
<p class="text-white-65">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>
</div>
<footer class="blockquote-footer mt-2"><cite>d3vyce - Nicolas. S</cite></footer>
</div>
</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 reveal fade">
<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 reveal fade">
<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="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>
<span class="badge bg-dark-3">Ansible</span>
<span class="badge bg-dark-3">Git</span>
<span class="badge bg-dark-3">Elastic</span>
</p>
</div>
<div class="mt-5 col-lg-3 col-md-12 text-center reveal fade">
<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="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>
<span class="badge bg-dark-3">John</span>
<span class="badge bg-dark-3">Burp</span>
</p>
</div>
<div class="mt-5 col-lg-3 col-md-12 text-center reveal fade">
<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="mt-4">
<span class="badge bg-dark-3">Wireguard</span>
<span class="badge bg-dark-3">IPSec</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>
<span class="badge bg-dark-3">Docker</span>
<span class="badge bg-dark-3">KVM</span>
<span class="badge bg-dark-3">IPtable</span>
</p>
</div>
</div>
<hr class="divider mt-5" />
<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 reveal fade">
<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>Jr Penetration Tester (THM)</p>
<p>Offensive Pentesting (THM)</p>
<p>JNCIA Junos</p>
<p>CCNAv7, CCNA R&S</p>
</div>
</div>
<div class="mt-5 col-lg-3 col-md-12 text-center reveal fade">
<div class="mb-2"><i class="text-accent bi-lightbulb fs-1"></i></div>
<h3 class="text-white h4 mb-3">CTF Challenge/Event</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 class="mt-5 col-lg-3 col-md-12 text-center reveal fade">
<div class="mb-2"><i class="text-accent bi-clipboard-check fs-1"></i></div>
<h3 class="text-white h4 mb-3">CTF Training</h3>
<div class="text-white-65">
<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>
<p></p>
<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>
</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.avif" 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-2">CSS3</span>
<span class="badge bg-dark-2">HTML5</span>
<span class="badge bg-dark-2">JS</span>
<span class="badge bg-dark-2">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.avif" 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-2">Python</span>
<span class="badge bg-dark-2">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.avif" 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-2">Kali</span>
<span class="badge bg-dark-2">THM</span>
<span class="badge bg-dark-2">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.avif" 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-2">Unraid</span>
<span class="badge bg-dark-2">OPNsense</span>
<span class="badge bg-dark-2">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" rel="noopener noreferrer"><i class="fa test fa-twitter fa-lg"></i></a>
<a href="https://github.com/d3vyce" target="_blank" rel="noopener noreferrer"><i class="fa test fa-github fa-lg"></i></a>
<a href="https://www.d3vyce.fr" target="_blank" rel="noopener noreferrer"><i class="fa test fa-bookmark fa-lg"></i></a>
</div>
<div class="small text-center text-muted">d3vyce 2022 &copy; 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-->
<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.avif" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="assets/img/projet/Site-d3vyce-3.avif" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="assets/img/projet/Site-d3vyce-4.avif" 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="m-4 text-white-65">Development of my personal website in addition to my Blog. The goal was to gather in one place a showcase of my skills, my trainings/certifications and my current and past projects. For this site I used Bootstrap 5 to see what was possible with this library.</p>
<a class="btn mod btn-outline-light btn-lg mb-4" href="https://github.com/d3vyce/d3vyce.fr" target="_blank" rel="noopener noreferrer"><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-->
<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.avif" 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="m-4 text-white-65">The development of game in python is one of my current project. The goal is to become more comfortable with this programming language and to discover new libraries. Following the game Snake, I have for objective to make an adaptation of Chess with an AI as opponent.</p>
<a class="btn mod btn-outline-light btn-lg mb-4" href="https://github.com/d3vyce/Python-Game" target="_blank" rel="noopener noreferrer"><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>
<span class="badge bg-dark-3">Numpy</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-->
<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.avif" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="assets/img/projet/Writeup-ctf-3.avif" 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="m-4 text-white-65">Since I started doing CTFs, I've had the desire to do Writeups. In addition to sharing the process and the reflexion I had after these challenges, the goal is to keep a history. It allows me to find situations that I have already solved and then get inspired to solve new challenges.</p>
<a class="btn mod btn-outline-light btn-lg mb-4" href="https://blog.d3vyce.fr/tag/writeup/" target="_blank" rel="noopener noreferrer"><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-->
<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.avif" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="assets/img/projet/Homelab-3.avif" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="assets/img/projet/Homelab-4.avif" 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="m-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" rel="noopener noreferrer"><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: 0xD87E27,
backgroundColor: 0x041C32
})
</script>
</body>
</html>

0
html/js/admin.js Normal file
View File

67
html/js/script.js Normal file
View File

@ -0,0 +1,67 @@
//Init
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
}
}
}
window.addEventListener("scroll", reveal);
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()
});
}

32
html/manifest.json Normal file
View File

@ -0,0 +1,32 @@
{
"theme_color": "#D87E27",
"background_color": "#041C32",
"display": "browser",
"scope": "/",
"start_url": "/",
"name": "d3vyce.fr",
"short_name": "d3vyce",
"description": "d3vyce personal website",
"icons": [
{
"src": "/assets/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/assets/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/assets/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

40
html/pgp-key.txt Normal file
View File

@ -0,0 +1,40 @@
-----BEGIN PGP PUBLIC KEY BLOCK-----
mQGNBGKAxqsBDADyZEykOeFgijqIgV5+0In6P06DTGFMlVm1U5bmmDd6Qf3ONcNL
/yCc11YxIkeaQbSLgYvYXT/WR0sWsc3GtkcrOtmI5ERdDsANMtV1popwsFPYfxvm
YngcFwnrAl48/ea6PhV2DkmRh4xSyRfF/nu1jVxoDL3I8cycuKL92iy++BHlywDw
6BHZLw8zHh7wW5mYOmFMMarKZe5lgeSfVfxXHT/UScFNUy1vVEsEhwmFn1syKZFD
A9mhbR93rFrM8wl0iU7IAsqX1NUS5MJDdAi/x4y9+7vbuEKoJoDEOko+/PCrClGn
ex5LL687Egof2j7I9gGO1Kivx35tpzlobT3vmIwK4NxM2ZaOgSTFCFxGg+5ZXkv+
1Rx2/bubElxDaeEbcZamGOj60cYxZQ1j1Z8hBeD66Vt+Ylc4OoiwyTwKQ7nEthOt
jXLVhdaSPLH+muCvOTrnJ8wB7STq6W7LKOBkszXWPIHcXePRypcJDY9dyoN1mjxC
L6xpI7uO8t4axbcAEQEAAbQaZDN2eWNlIDxjb250YWN0QGQzdnljZS5mcj6JAdEE
EwEIADsWIQQDV9oCzhaRM3hjhbzn/6R6ENiWmgUCYoDGqwIbAwULCQgHAgIiAgYV
CgkICwIEFgIDAQIeBwIXgAAKCRDn/6R6ENiWmgVqDADcOoEwRewzXEdCnPvNlZni
jsvXW7OxgI8NmZEz0N5S0p4WECIKN4QrD7YY6V6Od8ZmnaDsymtF4ASXtuO75sZR
ShYGR57PIatNEnt/5v9SRLZl6AWWLwgxzUMID4QuXn1+XaX8OpMtPQi0iw0e2y1G
cppVBqXzZpJEzmhYW7l/dvCC8/oVzkXm+HWyoARuFoR/GKRSmRZ3ofj2jv68QTxQ
cyUxGtQb740+AU7OAs1nebQEeFEmj1WbclNVv03yFEzdy4TGKReLspOKkftiDGZu
elENz8BOH4klG6MRfGDGLvehOAcNCkam8odEyzMok+wLN6qr4C3VMbMsp9G5ZBKB
tEYIPZg01hz7+dRB3AdZNooGjWzcJJOpB1fyCcZISGOrfoddkXvIZUv4EbiMT6zQ
3mx3kZfo5XyJdimNcmpJWZAZbyc5cWTaKLqbQ5eTArHQP1pywvNvPp17zhJQ4Kyu
1TizX0nA+mc94Et3KKvwMUuzMBiv05dOwAsBqqSW1yC5AY0EYoDGqwEMANb4AuNe
BDy9XfObl1gVr7P6ZgLc6bCeVzgOKENzz9kAvfHloOfpdfxehCrAn9gc6jDV1v9K
Ot8oB8qhrxsYMC9eOZqOwZnMMsYhN15OdG6S2Xa6I0wGwFucQ9Prr9ruCa/PXyFz
/UjOzHVMJrCzjjtXcOm5oNPt2+HSLa45VXHJwmM60nfFJhEdLumNXIlImvyhhy97
pK89OAWem80I1XIW6KvLWPXhoEBPSy5K3XgarE3Azyc8Bq5Zz5edm15deUPy0yzv
d30m1H1aor8nSYrQI1Qj0MdfbVgfze8zTevgsJ3MZm3rl4i2K2jDY3gRc094N5fe
WU0/DeTs8tiAfPWh+3Z3Xtoj7X6J2Hz8MSO2fqs6myGwZ2SDP1JWmk+Ds/I12piS
dvX5kPyqfzEk1kWpNrlDHzb4qqyUSRCt3LAVC1z5ppFb7S1X42VR/CQSLBiEW3++
L8BUZaT6DkoQPe5bYyvU9n2wIuGe58o5JazVPHqGBln1iGPkqtphFIZ+CQARAQAB
iQG2BBgBCAAgFiEEA1faAs4WkTN4Y4W85/+kehDYlpoFAmKAxqsCGwwACgkQ5/+k
ehDYlppM9Qv/bg5RVtvk4FEYREbT5qk3r52AdqgP323O7KpsZ6DE1i4GHYB+XKUm
Ds8+5lVxNBwbLK0+sIMtyp0ivfud8wWojTz2fdjzPrhLxIMmSrYrAcJaP2Xt6OuE
YG0HX9tRQJsE3UGiw2YIrpR55HN2yXBvjdSsm4fgtHA5HimLYGIlP3mtx0y6/c+9
EAahjIWvctYZUf25mI/gelaf5G2RUhQfT55Cboh0sVLHJ4u67RAAGHftvTmutYBp
Zfw/amoyZMg8irn/LM2WA2K4A+5NVxCaEw4Rd0XqCTKi3o4AXqQ5LBveNgJKJG4h
TFR3fWFDcCYAJ2bMG2Pd1O3SvMxmVMQUkgBr9Dvz52om73UMtI1EmEnKVtwPiwNe
A2ZPpaloEm+0Ng4nbfBz7xgWqfwFUaMAKtJLww+wWDususlaR4nZse+BU3C0Q/iR
xCxl6+reyaualNHE+dVBcvgWNS7KrsjnDGQuYcDFHDptrp9NkQ2QBX46LxyGh2IU
+MXMnd7qxuEK
=c2bB
-----END PGP PUBLIC KEY BLOCK-----

2
html/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-Agent: *
Allow: /

111
html/social.html Normal file
View File

@ -0,0 +1,111 @@
<!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="css/social.css">
<link rel="stylesheet" href="css/reset.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">
<div class="social">
<div class="profile-card">
<figure class="profile-card__img">
<img src="assets/img/profil.avif" alt="...">
</figure>
<div class="profile-card__desc">
<h1>d3vyce - Nicolas. S</h1>
<div>Developer / CTF Player</div>
<div style="display: flex; align-items: center; gap: 10px; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="11" r="3"></circle>
<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
</svg>
<span>Paris, France</span>
</div>
</div>
<div class="profile-card__social">
<a href="https://www.d3vyce.fr" class="site" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-world" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="3.6" y1="9" x2="20.4" y2="9"></line>
<line x1="3.6" y1="15" x2="20.4" y2="15"></line>
<path d="M11.5 3a17 17 0 0 0 0 18"></path>
<path d="M12.5 3a17 17 0 0 1 0 18"></path>
</svg>
</a>
<a href="https://blog.d3vyce.fr" class="blog" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-article" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="3" y="4" width="18" height="16" rx="2"></rect>
<path d="M7 8h10"></path>
<path d="M7 12h10"></path>
<path d="M7 16h10"></path>
</svg>
</a>
<a href="https://github.com/d3vyce" class="github" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
</svg>
</a>
<a href="https://twitter.com/d3vyce" class="twitter" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
</svg>
</a>
<a href="https://status.d3vyce.fr" class="status" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-network" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="9" r="6"></circle>
<path d="M12 3c1.333 .333 2 2.333 2 6s-.667 5.667 -2 6"></path>
<path d="M12 3c-1.333 .333 -2 2.333 -2 6s.667 5.667 2 6"></path>
<path d="M6 9h12"></path>
<path d="M3 19h7"></path>
<path d="M14 19h7"></path>
<circle cx="12" cy="19" r="2"></circle>
<path d="M12 15v2"></path>
</svg>
</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>