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

Update social page

Browse Source
This commit is contained in:
d3vyce 2022-10-14 22:50:29 +02:00
parent 88b673ea69
commit a6442de09a
3 changed files with 295 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

86
social.html
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>