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);
}
.bg-dark-2 {
background-color: var(--dark-2);
}
.bg-dark-3 {
background-color: var(--dark-3);
}
@ -116,12 +120,6 @@ a:hover {
opacity: 1;
}
.badge:hover {
background-color: white;
color: black;
}
/* Header Section */
@media (min-width: 992px) {
@ -186,12 +184,12 @@ a:hover {
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);
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.05);
transform: scale(1.02);
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{
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 class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<a class="anchor" href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
@ -83,7 +83,7 @@
<div class="row justify-content-center">
<div class="col-lg-6">
<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">
<span class="timeline-icon">
<i class="bi-code-slash text-accent fs-5"></i>
@ -141,7 +141,7 @@
<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="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="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>
</p>
</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>
<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>
@ -170,7 +170,7 @@
<span class="badge bg-dark-3">Hashcat</span>
</p>
</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>
<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>
@ -185,8 +185,8 @@
</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="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">
@ -196,9 +196,9 @@
<p>CCNAv7, CCNA R&S</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-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">
<p>leHACK 2022 - Paris</p>
<p>404 CTF 2022 - Online</p>
@ -206,17 +206,18 @@
<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 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>
@ -239,10 +240,10 @@
<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>
<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>
@ -257,8 +258,8 @@
<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>
<span class="badge bg-dark-2">Python</span>
<span class="badge bg-dark-2">PyGame</span>
</p>
</div>
</div>
@ -275,9 +276,9 @@
<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>
<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>
@ -292,9 +293,9 @@
<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>
<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>
@ -359,7 +360,7 @@
<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>
<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>
@ -408,11 +409,12 @@
<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>
<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>
@ -459,7 +461,7 @@
<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>
<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>
@ -515,7 +517,7 @@
<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>
<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>
@ -536,7 +538,6 @@
</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>

23
js/script.js
View File

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