jens/9x.github.io
1
0
Fork 0
mirror of https://github.com/9x/9x.github.io.git synced 2026-09-02 09:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

add background effect

Browse Source
This commit is contained in:
Jens Mohrmann
2025-02-16 21:53:47 +01:00
parent 8ce6a1d90e
commit 660136665d
4 changed files with 1698 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
css/themes/jmde.css
View File

@@ -1,7 +1,7 @@
/* Theme */
main {
background: #314159;
/* background: #314159; */
color: #7ba2bf;
}
@@ -14,3 +14,22 @@ main {
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
View File

@@ -14,22 +14,20 @@
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.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>
<body>
<div id="particles-js"></div>
<div id="bg"></div>
<main>
<div class="intro">Dr. Jens Mohrmann</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">
<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/">
<i class="fab fa-linkedin" aria-hidden="true" title="LinkedIn"></i>
<span class="sr-only">LinkedIn</span>
@@ -38,34 +36,6 @@
<i class="fab fa-github" aria-hidden="true" title="Github"></i>
<span class="sr-only">Github</span>
</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">
<i class="fab fa-facebook" aria-hidden="true" title="facebook"></i>
<span class="sr-only">facebook</span>
@@ -79,6 +49,8 @@
<span class="sr-only">YouTube</span>
</a>
</div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
</main>
</body>
</html>

127
js/app.js Normal file
View 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
View File

File diff suppressed because it is too large Load Diff