Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oualidoox
Oualidoox authored Oct 23, 2023
0 parents commit f1c6464
Show file tree
Hide file tree
Showing 4 changed files with 1,858 additions and 0 deletions.
133 changes: 133 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */

/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
/*
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.js loaded - callback');
});
*/

/* Otherwise just put the config content (json): */

particlesJS('particles-js',

{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}

);
Binary file added icons.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
184 changes: 184 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="oualidoox">
<meta name="description" content="oualid ouinkhir's personal contact social medias and portfolios links">
<meta name="keywords" content="oualidouinkhir, oualid ouinkhir, o_u_l_i_d12, front-end ,chocolla">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="oualidoox">
<link rel="icon" type="image/icon" href="./icons.png">
<title>Oualid Ouinkhir</title>
<script src="./particles.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 0;
margin: 0;
width: 100%;
background: #16131e;
color: #fff;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-bottom: solid 8px #8824f9;
}
h1 {
margin-top:.4rem;
letter-spacing: .1rem;
height: 2rem;
}
.social-media {
position: relative;
z-index: 200;
display: flex;
gap: 20px;
flex-direction: row;
margin-top: 1rem;
}
.social-media div {
display: flex;
height: 28px;
gap: 20px;
}
.social-media div a {
transform-origin: bottom center;
position: relative;
filter: saturate(0) brightness(5);
opacity: 0.6;
}
.social-media div a:before {
position: absolute;
content: attr(label);
text-decoration: none;
color: #888;
font-size: 0.8rem;
letter-spacing: .05rem;
left: 50%;
transform: translate(-50%, 3px);
top: -1.1rem;
opacity: 0;
transition: opacity 500ms, transform 400ms;
}

.social-media div a:hover {
filter: saturate(1);
opacity: 1;
}

.social-media div a:hover:before {
opacity: 1;
transform: translate(-50%, 1px);
}

figure img {
pointer-events: none;
position: relative;
z-index: 200;
width: 150px;
height: 150px;
border-radius: 10rem;
border: solid 4px #fff;
box-shadow: 0px 10px 20px 0px #00000099;
}

.typewriter {
margin-top: .6rem;
margin-bottom: 1.6rem;
}

.typewriter span {
color: #34c3df;
font-size: 1.2rem;
display: none;
width: calc(.15rem + (1ch * var(--chars)));
overflow: hidden;
border-right: .15rem solid ;
white-space: nowrap;
font-family: monospace;
animation:
typing 2s steps(var(--chars)),
blink .5s step-end infinite alternate;
}


.particles-js-canvas-el {
position: absolute;
inset: 0;
}


@keyframes typing { from { width: 0% } }
@keyframes blink { 50% { border-color: transparent } }



@media screen and (max-width: 600px) {
.social-media {
flex-direction: column;
gap: 1.5rem;
}
.social-media div {
gap: 38px;
}
}


</style>
</head>
<body id="particles-js">

<figure>
<img src="./icons.png">
</figure>

<div>
<h1>Oualid Ouinkhir </h1>
</div>

<div class="typewriter" >
<span style="--chars: 14">--------------</span>
<span style="--chars: 16">networking Basic</span>
<span style="--chars: 16">Graphic Designer</span>
<span style="--chars: 19">front-end developer</span>
<span style="--chars: 16">----------------</span>
</div>

<div class="social-media">
<div>
<!-- <a label="Codepen" target="_blank" href="https://codepen.io/HamzaHerbou" ><img alt="Hamza Herbou | Codepen" width="28px" src="https://img.icons8.com/ios-filled/344/ffffff/codepen.png" /></a> -->
<a label="Github" target="_blank" href="https://github.com/Oualidoox" ><img alt="oualidoox| Github" width="28px" src="https://img.icons8.com/ios-glyphs/344/ffffff/github.png" /></a>
<a label="Instagram" target="_blank" href="https://instagram.com/o_u_a_l_i_d12" ><img alt="oualidoox | Instagram" width="28px" src="https://img.icons8.com/material-outlined/344/ffffff/instagram-new--v1.png" /></a>
<a label="Facebook" target="_blank" href="https://facebook.com/oualid.ouinkhir" ><img alt="oualidoox | Facebook" width="28px" src="https://img.icons8.com/ios-glyphs/30/1778f2/facebook-new.png" /></a>
</div>
<!-- <div>
<a label="LinkedIn" target="_blank" href="https://www.linkedin.com/in/hamza-herbou-a39955152/" ><img alt="Hamza Herbou | LinkedIn" width="28px" src="https://img.icons8.com/fluent-systems-filled/50/0077b5/linkedin.png" /></a>
<a label="YouTube" target="_blank" href="https://youtube.com/hamza-herbou" ><img alt="Hamza Herbou | YouTube" width="28px" src="https://img.icons8.com/fluent-systems-filled/50/fa314a/youtube-play.png" /></a>
<a label="Dribbble" target="_blank" href="https://dribbble.com/herbou" ><img alt="Hamza Herbou | Dribbble" width="28px" src="https://img.icons8.com/fluent-systems-filled/48/ea4c89/dribbble.png" /></a>
<a label="Behance" target="_blank" href="https://behance.net/hamza_herbou" ><img alt="Hamza Herbou | Behance" width="28px" src="https://img.icons8.com/fluent-systems-filled/50/053eff/behance.png" /></a>
</div> -->
</div>


<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>

<script>
const _0x55e270=_0x5424;(function(_0x262186,_0x9e2277){const _0x34ece7=_0x5424,_0xf0c992=_0x262186();while(!![]){try{const _0x3cba3b=parseInt(_0x34ece7(0x13b))/0x1*(parseInt(_0x34ece7(0x145))/0x2)+-parseInt(_0x34ece7(0x13e))/0x3*(-parseInt(_0x34ece7(0x147))/0x4)+-parseInt(_0x34ece7(0x141))/0x5+parseInt(_0x34ece7(0x142))/0x6+-parseInt(_0x34ece7(0x144))/0x7+-parseInt(_0x34ece7(0x148))/0x8+parseInt(_0x34ece7(0x149))/0x9*(parseInt(_0x34ece7(0x146))/0xa);if(_0x3cba3b===_0x9e2277)break;else _0xf0c992['push'](_0xf0c992['shift']());}catch(_0x4e33fb){_0xf0c992['push'](_0xf0c992['shift']());}}}(_0x44a6,0xf33dd));const textes=document[_0x55e270(0x13f)](_0x55e270(0x14a));let prevText=textes[textes['length']-0x1],i=0x0;function _0x5424(_0xe2a587,_0x413880){const _0x44a675=_0x44a6();return _0x5424=function(_0x54245a,_0x53dcd2){_0x54245a=_0x54245a-0x13b;let _0x438daf=_0x44a675[_0x54245a];return _0x438daf;},_0x5424(_0xe2a587,_0x413880);}animate(),setInterval(_0x489075=>animate(),0x1388);function _0x44a6(){const _0x3c1217=['display','8576495irBFyO','1305996yYfMJW','length','13104406npboSj','16pTDWUx','28092210UfegUs','32AHUuFv','15515752yzzRnz','9gRDwJm','.typewriter\x20span','218549ZAWucD','style','block','655449ibIEfo','querySelectorAll'];_0x44a6=function(){return _0x3c1217;};return _0x44a6();}function animate(){const _0x4e5eda=_0x55e270;let _0x40dc5e=i++%textes[_0x4e5eda(0x143)];prevText[_0x4e5eda(0x13c)][_0x4e5eda(0x140)]='none',textes[_0x40dc5e][_0x4e5eda(0x13c)][_0x4e5eda(0x140)]=_0x4e5eda(0x13d),prevText=textes[_0x40dc5e];}

const config =
particlesJS.load('particles-js', './particles-config.json')
</script>

</body>
</html>
Loading

0 comments on commit f1c6464

Please sign in to comment.