garrit
/
garrit.xyz
mirror of https://github.com/garritfra/garrit.xyz
1
0
Fork 0
Code Issues 4 Projects Releases Wiki Activity
Browse Source

add particles

pull/38/head
garritfra 6 years ago
parent
bd265a2d2c
commit
2cfc789347
7 changed files with 1520 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .babelrc
  2. 1293
      package-lock.json
  3. 6
      package.json
  4. 10
      src/App.js
  5. 130
      src/Home/Home.js
  6. 47
      src/Home/Home.scss
  7. 110
      src/Home/particlesjs-config.json

3
.babelrc
Unescape View File

@ -0,0 +1,3 @@
{
"presets": ["env"]
}

1293
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
Unescape View File

@ -18,10 +18,14 @@
},
"homepage": "https://github.com/garritfra/Portfolio#readme",
"devDependencies": {
"babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.7.0"
},
"dependencies": {
"node-sass": "^4.8.3",
"particles.js": "^2.0.0",
"react": "^16.3.1",
"react-dom": "^16.3.1"
"react-dom": "^16.3.1",
"react-particles-js": "^2.1.2"
}
}

10
src/App.js
Unescape View File

@ -1,7 +1,13 @@
import React, { Component } from "react";
import Home from "./Home/Home";
export default class App extends Component {
render() {
return(<h1>Hello World</h1>)
return (
<div>
<Home />
</div>
);
}
}
}

130
src/Home/Home.js
Unescape View File

@ -0,0 +1,130 @@
import React, { Component } from "react";
import Particles from "react-particles-js";
import styles from "./Home.scss";
export default class Home extends Component {
constructor(props) {
super();
this.props = props;
this.config = {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 2,
color: "#000000"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.12827296486924183,
random: true,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 0,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.26456299004281125,
width: 0
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
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
};
}
render() {
return (
<div>
<Particles params={this.config} className="particles-js">
<h1>Hello World</h1>
</Particles>
</div>
);
}
}

47
src/Home/Home.scss
Unescape View File

@ -0,0 +1,47 @@
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
.headline {
text-align: center;
font-family: Montserrat, sans-serif;
font-size: 6em;
color: white;
position: relative;
transition: 0.5s;
}
#subheadline {
text-align: center;
font-family: Montserrat, sans-serif;
color: white;
transition: 1s;
}
#github {
size: 50%;
position: relative;
width: 80px;
margin: 4%;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: inline-block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
.particles-js {
position:absolute;
width: 100%;
height: 100%;
background-color: #0117a8;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}

110
src/Home/particlesjs-config.json
Unescape View File

@ -0,0 +1,110 @@
{
"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": 3,
"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",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"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
}
Write Preview
Loading…
Cancel
Save