mirror of
https://github.com/9x/9x.github.io.git
synced 2026-09-02 09:04:33 +02:00
add background effect
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
/* Theme */
|
/* Theme */
|
||||||
|
|
||||||
main {
|
main {
|
||||||
background: #314159;
|
/* background: #314159; */
|
||||||
color: #7ba2bf;
|
color: #7ba2bf;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -14,3 +14,22 @@ main {
|
|||||||
fill: #7ba2bf;
|
fill: #7ba2bf;
|
||||||
;
|
;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---- particles.js container ---- */
|
||||||
|
|
||||||
|
#particles-js{
|
||||||
|
/* background: #314159; */
|
||||||
|
position:fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
filter: blur(5px);
|
||||||
|
z-index: -10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bg{
|
||||||
|
background: #314159;
|
||||||
|
position:fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -100;
|
||||||
|
}
|
||||||
48
index.html
48
index.html
@@ -14,22 +14,20 @@
|
|||||||
<link rel="stylesheet" href="css/reset.css">
|
<link rel="stylesheet" href="css/reset.css">
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
<link rel="stylesheet" href="css/themes/jmde.css">
|
<link rel="stylesheet" href="css/themes/jmde.css">
|
||||||
<!-- <link rel="stylesheet" href="css/themes/indigo-white.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/green-white.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/red-white.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/grey-white.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/white-indigo.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/white-blue.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/white-grey.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/white-red.css"> -->
|
|
||||||
<!-- <link rel="stylesheet" href="css/themes/yellow-black.css"> -->
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div id="particles-js"></div>
|
||||||
|
<div id="bg"></div>
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<div class="intro">Dr. Jens Mohrmann</div>
|
<div class="intro">Dr. Jens Mohrmann</div>
|
||||||
<div class="tagline">Physicist | Product Development Engineer</div>
|
<div class="tagline">Physicist | Product Development Engineer</div>
|
||||||
<!-- Find your icons from here - https://fontawesome.com/icons?d=gallery&s=brands -->
|
|
||||||
<div class="icons-social">
|
<div class="icons-social">
|
||||||
|
<a href="mailto:(Dr. Jens Mohrmann)mailjensmohrmannde?subject=Please add @ and . in adress">
|
||||||
|
<b style="padding: 10px; font-size: 3em; font-weight:bolder;font-family: 'Funnel Sans', sans-serif;" aria-hidden="true" title="Email">@</b>
|
||||||
|
<span class="sr-only">Email</span>
|
||||||
|
</a>
|
||||||
<a target="_blank" href="https://www.linkedin.com/in/jens-mohrmann/">
|
<a target="_blank" href="https://www.linkedin.com/in/jens-mohrmann/">
|
||||||
<i class="fab fa-linkedin" aria-hidden="true" title="LinkedIn"></i>
|
<i class="fab fa-linkedin" aria-hidden="true" title="LinkedIn"></i>
|
||||||
<span class="sr-only">LinkedIn</span>
|
<span class="sr-only">LinkedIn</span>
|
||||||
@@ -38,34 +36,6 @@
|
|||||||
<i class="fab fa-github" aria-hidden="true" title="Github"></i>
|
<i class="fab fa-github" aria-hidden="true" title="Github"></i>
|
||||||
<span class="sr-only">Github</span>
|
<span class="sr-only">Github</span>
|
||||||
</a>
|
</a>
|
||||||
<!-- <a target="_blank" href="https://twitter.com/flexdinesh">
|
|
||||||
<i class="fab fa-twitter" aria-hidden="true" title="Twitter"></i>
|
|
||||||
<span class="sr-only">Twitter</span>
|
|
||||||
</a>
|
|
||||||
<a target="_blank" href="https://dev.to/flexdinesh">
|
|
||||||
<i class="fab fa-dev" aria-hidden="true" title="DEV Community"></i>
|
|
||||||
<span class="sr-only">DEV Community</span>
|
|
||||||
</a>
|
|
||||||
<a target="_blank" href="https://stackoverflow.com/story/flexdinesh">
|
|
||||||
<i class="fab fa-stack-overflow" aria-hidden="true" title="StackOverflow"></i>
|
|
||||||
<span class="sr-only">StackOverflow</span>
|
|
||||||
</a> -->
|
|
||||||
<!-- <a target="_blank" href="https://medium.com/@flexdinesh">
|
|
||||||
<i class="fab fa-medium" aria-hidden="true" title="Medium"></i>
|
|
||||||
<span class="sr-only">Medium</span>
|
|
||||||
</a> -->
|
|
||||||
<!-- <a target="_blank" href="https://www.freecodecamp.org">
|
|
||||||
<i class="fab fa-free-code-camp" aria-hidden="true" title="FreeCodeCamp"></i>
|
|
||||||
<span class="sr-only">FreeCodeCamp</span>
|
|
||||||
</a> -->
|
|
||||||
<!-- <a target="_blank" href="https://www.behance.net">
|
|
||||||
<i class="fab fa-behance" aria-hidden="true" title="Behance"></i>
|
|
||||||
<span class="sr-only">Behance</span>
|
|
||||||
</a> -->
|
|
||||||
<!-- <a target="_blank" href="https://codepen.io">
|
|
||||||
<i class="fab fa-codepen" aria-hidden="true" title="CodePen"></i>
|
|
||||||
<span class="sr-only">CodePen</span>
|
|
||||||
</a> -->
|
|
||||||
<a target="_blank" href="https://www.facebook.com/jens.mohrmann">
|
<a target="_blank" href="https://www.facebook.com/jens.mohrmann">
|
||||||
<i class="fab fa-facebook" aria-hidden="true" title="facebook"></i>
|
<i class="fab fa-facebook" aria-hidden="true" title="facebook"></i>
|
||||||
<span class="sr-only">facebook</span>
|
<span class="sr-only">facebook</span>
|
||||||
@@ -79,6 +49,8 @@
|
|||||||
<span class="sr-only">YouTube</span>
|
<span class="sr-only">YouTube</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="js/particles.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
127
js/app.js
Normal file
127
js/app.js
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
/* -----------------------------------------------
|
||||||
|
/* 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": 30,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 1000
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#346c9d"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#4f6e84"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 15,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 400,
|
||||||
|
"color": "#417da7",
|
||||||
|
"opacity": 0.13415509907748635,
|
||||||
|
"width": 20
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 3,
|
||||||
|
"direction": "none",
|
||||||
|
"random": true,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "bounce",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 9627.601227913727,
|
||||||
|
"rotateY": 9627.601227913727
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "bubble"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 215.7842157842158,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 0.1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 511.57956280248146,
|
||||||
|
"size": 28.42108682236008,
|
||||||
|
"duration": 0.9744372624809171,
|
||||||
|
"opacity": 0.8607529151914768,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 203.00776301685772,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
1541
js/particles.js
Normal file
1541
js/particles.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user