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

Compare commits

base: d3vyce:411feef7c69d42541e137a22919abe67d85e568e
Branches Tags
d3vyce:master
d3vyce:dev
...
compare: d3vyce:6fc55960871c224bd35ae1fc860d7f4bd1e8d30e
Branches Tags
d3vyce:master
d3vyce:dev

6 Commits
411feef7c6 ... 6fc5596087

Author SHA1 Message Date
Nicolas Sudres
6fc5596087 Update animation scale 2022-08-31 23:14:41 +02:00
Nicolas Sudres
cbf02a3fdd Add CTF Training section 2022-08-31 23:12:45 +02:00
Nicolas Sudres
4024503f61 Remove unused function 2022-08-31 23:12:30 +02:00
Nicolas Sudres
7d3e17f789 Fix bug and color 2022-08-31 22:35:47 +02:00
Nicolas Sudres
e2f3271ff6 Add content 2022-08-31 20:52:55 +02:00
Nicolas Sudres
1544841637 Add text animation 2022-08-31 20:52:46 +02:00
3 changed files with 89 additions and 49 deletions
Show Stats Expand all files Collapse all files

40
css/style.css
View File

@ -12,6 +12,10 @@
background-color: var(--dark-1); background-color: var(--dark-1);
} }
.bg-dark-2 {
background-color: var(--dark-2);
}
.bg-dark-3 { .bg-dark-3 {
background-color: var(--dark-3); background-color: var(--dark-3);
} }
@ -116,12 +120,6 @@ a:hover {
opacity: 1; opacity: 1;
} }
.badge:hover {
background-color: white;
color: black;
}
/* Header Section */ /* Header Section */
@media (min-width: 992px) { @media (min-width: 992px) {
@ -186,12 +184,12 @@ a:hover {
padding-left: 0; padding-left: 0;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05); 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); 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; cursor: pointer;
} }
.project:hover { .project:hover {
transform: scale(1.05); transform: scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
} }
@ -255,4 +253,30 @@ a:hover {
::-webkit-scrollbar-track{ ::-webkit-scrollbar-track{
background: transparent; 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;
}
}
/* ------------ */ /* ------------ */

75
index.html
View File

@ -48,7 +48,7 @@
</div> </div>
<div class="row head-row justify-content-center"> <div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0"> <div class="col-12 mouse_scroll p-0">
<a href="#about"> <a class="anchor" href="#about">
<div class="mouse"> <div class="mouse">
<div class="wheel"></div> <div class="wheel"></div>
</div> </div>
@ -83,7 +83,7 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-6"> <div class="col-lg-6">
<hr class="divider" /> <hr class="divider" />
<ul class="timeline-with-icons text-white mt-5"> <ul class="timeline-with-icons text-white mt-5 reveal fade">
<li class="timeline-item mb-5"> <li class="timeline-item mb-5">
<span class="timeline-icon"> <span class="timeline-icon">
<i class="bi-code-slash text-accent fs-5"></i> <i class="bi-code-slash text-accent fs-5"></i>
@ -141,7 +141,7 @@
<h2 class="text-white text-center mt-0">Skills</h2> <h2 class="text-white text-center mt-0">Skills</h2>
<hr class="divider divider-light mb-0" /> <hr class="divider divider-light mb-0" />
<div class="text-white row px-8 px-lg-12 justify-content-around"> <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="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> <div class="mb-2"><i class="text-accent bi-code-slash fs-1"></i></div>
<h3 class="text-white h4 mb-3">Programming</h3> <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="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>
@ -157,7 +157,7 @@
<span class="badge bg-dark-3">MySQL</span> <span class="badge bg-dark-3">MySQL</span>
</p> </p>
</div> </div>
<div class="mt-5 col-lg-3 col-md-12 text-center"> <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> <div class="mb-2"><i class="text-accent bi-shield-lock fs-1"></i></div>
<h3 class="text-white h4 mb-3">Cybersecurity</h3> <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="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>
@ -170,7 +170,7 @@
<span class="badge bg-dark-3">Hashcat</span> <span class="badge bg-dark-3">Hashcat</span>
</p> </p>
</div> </div>
<div class="mt-5 col-lg-3 col-md-12 text-center"> <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> <div class="mb-2"><i class="text-accent bi-hdd-network fs-1"></i></div>
<h3 class="text-white h4 mb-3">Networking</h3> <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="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>
@ -185,8 +185,8 @@
</div> </div>
</div> </div>
<hr class="divider mt-5" /> <hr class="divider mt-5" />
<div class="text-white row px-8 px-lg-12 justify-content-evenly"> <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="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> <div class="mb-2"><i class="text-accent bi-award fs-1"></i></div>
<h3 class="text-white h4 mb-3">Certification</h3> <h3 class="text-white h4 mb-3">Certification</h3>
<div class="text-white-65"> <div class="text-white-65">
@ -196,9 +196,9 @@
<p>CCNAv7, CCNA R&S</p> <p>CCNAv7, CCNA R&S</p>
</div> </div>
</div> </div>
<div class="mt-5 col-lg-3 col-md-12 text-center"> <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> <div class="mb-2"><i class="text-accent bi-lightbulb fs-1"></i></div>
<h3 class="text-white h4 mb-3">Challenge</h3> <h3 class="text-white h4 mb-3">CTF Challenge/Event</h3>
<div class="text-white-65"> <div class="text-white-65">
<p>leHACK 2022 - Paris</p> <p>leHACK 2022 - Paris</p>
<p>404 CTF 2022 - Online</p> <p>404 CTF 2022 - Online</p>
@ -206,17 +206,18 @@
<p>TRACS CTF 2021 (Team Get-Pwned) - CentraleSupélec</p> <p>TRACS CTF 2021 (Team Get-Pwned) - CentraleSupélec</p>
</div> </div>
</div> </div>
</div> <div class="mt-5 col-lg-3 col-md-12 text-center reveal fade">
<div class="text-white row px-8 px-lg-10 mt-4 justify-content-center"> <div class="mb-2"><i class="text-accent bi-clipboard-check fs-1"></i></div>
<div class="col-xl-3 col-lg-4 col-sm-9 col-xs-12 mt-2 text-center"> <h3 class="text-white h4 mb-3">CTF Training</h3>
<a href="https://tryhackme.com/p/d3vyce" target="_blank" rel="noopener noreferrer"> <div class="text-white-65">
<img src="https://tryhackme-badges.s3.amazonaws.com/d3vyce.png" alt="TryHackMe" style="width:100%"> <a href="https://tryhackme.com/p/d3vyce" target="_blank" rel="noopener noreferrer">
</a> <img src="https://tryhackme-badges.s3.amazonaws.com/d3vyce.png" alt="TryHackMe" style="width:100%">
</div> </a>
<div class="col-xl-3 col-lg-4 col-sm-9 col-xs-12 mt-2 text-center"> <p></p>
<a href="https://app.hackthebox.com/profile/922368" target="_blank" rel="noopener noreferrer"> <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%"> <img src="https://www.hackthebox.com/badge/image/922368" alt="HackTheBox" style="width:100%">
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -239,10 +240,10 @@
<div class="col project-text"> <div class="col project-text">
<h2 class="text-white font-weight-bold">d3vyce.fr</h2> <h2 class="text-white font-weight-bold">d3vyce.fr</h2>
<p class="project-icon"> <p class="project-icon">
<span class="badge bg-dark-1">CSS3</span> <span class="badge bg-dark-2">CSS3</span>
<span class="badge bg-dark-1">HTML5</span> <span class="badge bg-dark-2">HTML5</span>
<span class="badge bg-dark-1">JS</span> <span class="badge bg-dark-2">JS</span>
<span class="badge bg-dark-1">Bootstrap</span> <span class="badge bg-dark-2">Bootstrap</span>
</p> </p>
</div> </div>
</div> </div>
@ -257,8 +258,8 @@
<div class="col project-text"> <div class="col project-text">
<h2 class="text-white font-weight-bold">Python Game</h2> <h2 class="text-white font-weight-bold">Python Game</h2>
<p class="project-icon"> <p class="project-icon">
<span class="badge bg-dark-1">Python</span> <span class="badge bg-dark-2">Python</span>
<span class="badge bg-dark-1">PyGame</span> <span class="badge bg-dark-2">PyGame</span>
</p> </p>
</div> </div>
</div> </div>
@ -275,9 +276,9 @@
<div class="col project-text"> <div class="col project-text">
<h2 class="text-white font-weight-bold">Writeup CTF</h2> <h2 class="text-white font-weight-bold">Writeup CTF</h2>
<p class="project-icon"> <p class="project-icon">
<span class="badge bg-dark-1">Kali</span> <span class="badge bg-dark-2">Kali</span>
<span class="badge bg-dark-1">THM</span> <span class="badge bg-dark-2">THM</span>
<span class="badge bg-dark-1">HTB</span> <span class="badge bg-dark-2">HTB</span>
</p> </p>
</div> </div>
</div> </div>
@ -292,9 +293,9 @@
<div class="col project-text"> <div class="col project-text">
<h2 class="text-white font-weight-bold">Homelab</h2> <h2 class="text-white font-weight-bold">Homelab</h2>
<p class="project-icon"> <p class="project-icon">
<span class="badge bg-dark-1">Unraid</span> <span class="badge bg-dark-2">Unraid</span>
<span class="badge bg-dark-1">OPNsense</span> <span class="badge bg-dark-2">OPNsense</span>
<span class="badge bg-dark-1">Wireguard</span> <span class="badge bg-dark-2">Wireguard</span>
</p> </p>
</div> </div>
</div> </div>
@ -359,7 +360,7 @@
<span class="carousel-control-next-icon"></span> <span class="carousel-control-next-icon"></span>
</a> </a>
</div> </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> <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> <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"> <p class="mb-0">
<span class="badge bg-dark-3">CSS3</span> <span class="badge bg-dark-3">CSS3</span>
@ -408,11 +409,12 @@
<span class="carousel-control-next-icon"></span> <span class="carousel-control-next-icon"></span>
</a> </a>
</div> </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> <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> <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"> <p class="mb-0">
<span class="badge bg-dark-3">Python</span> <span class="badge bg-dark-3">Python</span>
<span class="badge bg-dark-3">PyGame</span> <span class="badge bg-dark-3">PyGame</span>
<span class="badge bg-dark-3">Numpy</span>
</p> </p>
</div> </div>
</div> </div>
@ -459,7 +461,7 @@
<span class="carousel-control-next-icon"></span> <span class="carousel-control-next-icon"></span>
</a> </a>
</div> </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> <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> <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"> <p class="mb-0">
<span class="badge bg-dark-3">Kali</span> <span class="badge bg-dark-3">Kali</span>
@ -515,7 +517,7 @@
<span class="carousel-control-next-icon"></span> <span class="carousel-control-next-icon"></span>
</a> </a>
</div> </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> <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> <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"> <p class="mb-0">
<span class="badge bg-dark-3">Unraid</span> <span class="badge bg-dark-3">Unraid</span>
@ -536,7 +538,6 @@
</div> </div>
<!-- Boostrap JS --> <!-- Boostrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></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 src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script src="js/script.js"></script> <script src="js/script.js"></script>

23
js/script.js
View File

@ -1,7 +1,19 @@
//Init //Init
$(document).ready(function(){ function reveal() {
init(); 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(){ function init(){
//Auto margin calculator //Auto margin calculator
@ -49,4 +61,7 @@
$(window).scroll(function () { $(window).scroll(function () {
$(this).scrollTop() > 50 ? $('#scroll').fadeOut() : $('#scroll').fadeIn() $(this).scrollTop() > 50 ? $('#scroll').fadeOut() : $('#scroll').fadeIn()
}); });
} }