From cf18ac42605eaf076c0a3d6f14ad7c3e61480c09 Mon Sep 17 00:00:00 2001 From: Kevin Kandlbinder Date: Mon, 12 Apr 2021 14:28:35 +0000 Subject: [PATCH] Add particles to home-background --- package-lock.json | 14 +++++ package.json | 3 +- src/pages/index.js | 16 +++-- src/pages/index.module.scss | 31 +++++++--- src/pages/index.particles.json | 110 +++++++++++++++++++++++++++++++++ 5 files changed, 157 insertions(+), 17 deletions(-) create mode 100644 src/pages/index.particles.json diff --git a/package-lock.json b/package-lock.json index 58f7ff3..841b9e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17732,6 +17732,12 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, + "pathseg": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz", + "integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==", + "optional": true + }, "peek-readable": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-3.1.3.tgz", @@ -23237,6 +23243,14 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "tsparticles": { + "version": "1.26.2", + "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.26.2.tgz", + "integrity": "sha512-rUOd8lrpZwcEIa0Ft+QzS73Eorl4xo6neVDNGFPxakSOMbOPL7OHdzjbqZgoE93dbRBzJlguhRMGZiRRuH86gQ==", + "requires": { + "pathseg": "^1.2.0" + } + }, "tsutils": { "version": "3.21.0", "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", diff --git a/package.json b/package.json index c3b6bbc..9f7b533 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ "react-dom": "17.0.2", "react-github-btn": "1.2.0", "react-helmet": "6.1.0", - "react-i18next": "11.8.12" + "react-i18next": "11.8.12", + "tsparticles": "^1.26.2" }, "devDependencies": { "@fab/actions": "1.0.0-rc.3-beta.1", diff --git a/src/pages/index.js b/src/pages/index.js index 26e84de..2170c0a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -9,6 +9,9 @@ import { Trans, Link } from "gatsby-plugin-react-i18next"; import { graphql } from "gatsby"; import anime from "animejs"; +import { tsParticles } from "tsparticles"; + +import * as particleConfig from "./index.particles.json"; export const query = graphql` query GetMetaAndProjects($language: String) { @@ -83,6 +86,8 @@ const IndexPage = (props) => { duration: 250, easing: "easeInOutCirc", }); + + tsParticles.load("particle-container", particleConfig); }, []); let meta = props.data.site.siteMetadata; @@ -90,6 +95,8 @@ const IndexPage = (props) => { return (
+
+
{ ); }; -/*class IndexPage extends React.Component { - componentDidMount() { - } - - render() { - - -}*/ - IndexPage.propTypes = { data: PropTypes.object.isRequired, }; diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 10900bf..dcc2300 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -3,16 +3,32 @@ .heroSection { width: 100%; - background: #000710; - min-height: 600px; - padding-top: 100px; + height: 600px; overflow: hidden; - background: linear-gradient(to bottom, transparent 80%, $background), - radial-gradient(ellipse at top left, #1f0ba659, transparent), - radial-gradient(ellipse at bottom right, #4a086829, transparent); + + .heroSectionBg, .heroSectionBgOver { + position: absolute; + width: 100%; + max-width: unset; + height: 600px; + padding: 0; + + @media (pointer: coarse), (pointer: none) { + height: 700px; + } + } + + .heroSectionBg { + background: radial-gradient(ellipse at top left, #1f0ba659, transparent), + radial-gradient(ellipse at bottom right, #4a086829, transparent); + } + + .heroSectionBgOver { + background: linear-gradient(to bottom, transparent 80%, $background); + } @media (pointer: coarse), (pointer: none) { - min-height: 700px; + height: 700px; } .profile { @@ -22,6 +38,7 @@ max-width: 600px; max-height: 400px; transform: translate(-50%, 0%); + top: 100px; .hello { font-weight: 100; diff --git a/src/pages/index.particles.json b/src/pages/index.particles.json new file mode 100644 index 0000000..ed58b81 --- /dev/null +++ b/src/pages/index.particles.json @@ -0,0 +1,110 @@ +{ + "particles": { + "number": { + "value": 33, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#1b1e34" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000" + }, + "polygon": { + "nb_sides": 3 + }, + "image": { + "src": "img/github.svg", + "width": 5, + "height": 5 + } + }, + "opacity": { + "value": 0.3, + "random": true, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 27.620603391810075, + "random": true, + "anim": { + "enable": false, + "speed": 10, + "size_min": 40, + "sync": false + } + }, + "line_linked": { + "enable": false, + "distance": 200, + "color": "#ffffff", + "opacity": 0.14994041841268327, + "width": 2 + }, + "move": { + "enable": true, + "speed": 0.2, + "direction": "top", + "random": true, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "window", + "events": { + "onhover": { + "enable": false, + "mode": "repulse" + }, + "onclick": { + "enable": false, + "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, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true +} \ No newline at end of file