Compare commits

...

3 Commits

Author SHA1 Message Date
a6442de09a Update social page 2022-10-14 22:50:29 +02:00
88b673ea69 Update index.html 2022-10-11 00:07:00 +02:00
2794e90648 Remove PDF file 2022-10-11 00:06:32 +02:00
8 changed files with 302 additions and 24 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

83
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
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);
}

View File

@ -156,7 +156,6 @@
<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>
<p class="mt-4">
<span class="badge bg-dark-3">C</span>
<span class="badge bg-dark-3">C#</span>
@ -167,12 +166,12 @@
<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>
</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="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>
@ -180,12 +179,13 @@
<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="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>
@ -193,6 +193,7 @@
<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>
</p>
</div>
</div>
@ -202,9 +203,9 @@
<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" rel="noopener noreferrer">Jr Penetration Tester (THM) 🔗</a></p>
<p><a href="assets/doc/Offensive-Pentesting.pdf" target="_blank" rel="noopener noreferrer">Offensive Pentesting (THM) 🔗</a></p>
<p><a href="assets/doc/Junos.pdf" target="_blank" rel="noopener noreferrer">JNCIA Junos 🔗</a></p>
<p>Jr Penetration Tester (THM)</p>
<p>Offensive Pentesting (THM)</p>
<p>JNCIA Junos</p>
<p>CCNAv7, CCNA R&S</p>
</div>
</div>

View File

@ -8,33 +8,83 @@
<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 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 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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;Status</a>
<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>
</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>