Skip to content

Commit f10678a

Browse files
codepraycodecodepraycode
committed
Added particle js to prototype site
1 parent f5363dd commit f10678a

6 files changed

Lines changed: 216 additions & 7 deletions

File tree

‎index.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,20 @@
1616
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1717
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&display=swap" rel="stylesheet">
1818
</head>
19-
<body class="bg-primary">
19+
<body class="bg-linear">
2020
<a class="skip-to-content" href="#main">Skip to content</a>
21+
<div id="particles-js">
22+
<div id="root"></div>
23+
</div>
2124

22-
<div id="root"></div>
25+
<!-- Import Particles.js and app.js files -->
26+
<script src=
27+
"/node_modules/particles.js/particles.js">
28+
</script>
2329
<script type="module" src="/src/main.jsx"></script>
30+
31+
<script src=
32+
"/particles-app.js">
33+
</script>
2434
</body>
2535
</html>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12+
"particles.js": "^2.0.0",
1213
"react": "^18.2.0",
1314
"react-dom": "^18.2.0"
1415
},

‎public/particles-app.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/* -----------------------------------------------
2+
/* How to use? : Check the GitHub README
3+
/* ----------------------------------------------- */
4+
5+
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
6+
/*
7+
particlesJS.load('particles-js', 'particles.json', function() {
8+
console.log('particles.js loaded - callback');
9+
});
10+
*/
11+
12+
/* Otherwise just put the config content (json): */
13+
14+
particlesJS('particles-js',
15+
16+
{
17+
"particles": {
18+
"number": {
19+
"value": 80,
20+
"density": {
21+
"enable": true,
22+
"value_area": 800
23+
}
24+
},
25+
"color": {
26+
"value": "#ffffff"
27+
},
28+
"shape": {
29+
"type": "circle",
30+
"stroke": {
31+
"width": 0,
32+
"color": "#000000"
33+
},
34+
"polygon": {
35+
"nb_sides": 5
36+
},
37+
"image": {
38+
"src": "img/github.svg",
39+
"width": 100,
40+
"height": 100
41+
}
42+
},
43+
"opacity": {
44+
"value": 0.5,
45+
"random": false,
46+
"anim": {
47+
"enable": false,
48+
"speed": 1,
49+
"opacity_min": 0.1,
50+
"sync": false
51+
}
52+
},
53+
"size": {
54+
"value": 5,
55+
"random": true,
56+
"anim": {
57+
"enable": false,
58+
"speed": 40,
59+
"size_min": 0.1,
60+
"sync": false
61+
}
62+
},
63+
"line_linked": {
64+
"enable": true,
65+
"distance": 150,
66+
"color": "#ffffff",
67+
"opacity": 0.4,
68+
"width": 1
69+
},
70+
"move": {
71+
"enable": true,
72+
"speed": 6,
73+
"direction": "none",
74+
"random": false,
75+
"straight": false,
76+
"out_mode": "out",
77+
"attract": {
78+
"enable": false,
79+
"rotateX": 600,
80+
"rotateY": 1200
81+
}
82+
}
83+
},
84+
"interactivity": {
85+
"detect_on": "canvas",
86+
"events": {
87+
"onhover": {
88+
"enable": true,
89+
"mode": "repulse"
90+
},
91+
"onclick": {
92+
"enable": true,
93+
"mode": "push"
94+
},
95+
"resize": true
96+
},
97+
"modes": {
98+
"grab": {
99+
"distance": 400,
100+
"line_linked": {
101+
"opacity": 1
102+
}
103+
},
104+
"bubble": {
105+
"distance": 400,
106+
"size": 40,
107+
"duration": 2,
108+
"opacity": 8,
109+
"speed": 3
110+
},
111+
"repulse": {
112+
"distance": 200
113+
},
114+
"push": {
115+
"particles_nb": 4
116+
},
117+
"remove": {
118+
"particles_nb": 2
119+
}
120+
}
121+
},
122+
"retina_detect": true,
123+
"config_demo": {
124+
"hide_card": false,
125+
"background_color": "#b61924",
126+
"background_image": "",
127+
"background_position": "50% 50%",
128+
"background_repeat": "no-repeat",
129+
"background_size": "cover"
130+
}
131+
}
132+
133+
);

‎src/App.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
function App() {
33

44
return (
5-
<main className="h-full container flex flex--center " id="main">
5+
<main className="container flex flex--center " id="main">
66

7-
<section className="card flex flex--center flex--column">
7+
<section className="card absolute flex flex--center flex--column">
88

99
<div className="avatar avatar--md">
1010
<img alt="Codepraycode's github avatar" src="https://avatars.githubusercontent.com/u/51521181?s=400&u=4ec6b15bc10506a890bcc35cd6d8bf4e67cb50c7&v=4" />

‎src/main.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById('root')).render(
77
<React.StrictMode>
88
<App />
99
</React.StrictMode>,
10-
)
10+
)

‎src/styles.css‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,8 @@ button, .btn {
328328

329329
cursor: pointer;
330330
transition: border-color 0.25s;
331+
332+
user-select: none;
331333
}
332334
button:hover,
333335
.btn:hover {
@@ -405,7 +407,8 @@ button:focus-visible,
405407
/* background-color: var(--primary); */
406408
min-width: 320px;
407409
max-width: 90%;
408-
padding-block: 1.9rem;
410+
padding-block: 1rem;
411+
/* background-color: red; */
409412

410413
row-gap: .5rem;
411414

@@ -414,4 +417,66 @@ button:focus-visible,
414417

415418
/* -------------------- */
416419
/* Page specific */
417-
/* -------------------- */
420+
/* -------------------- */
421+
422+
423+
424+
/* -------------------- */
425+
/* Animations */
426+
/* -------------------- */
427+
428+
.bg-linear {
429+
background: linear-gradient(90deg,var(--santas-gray), var(--primary));
430+
/* background-color: black; */
431+
color: var(--gray);
432+
}
433+
434+
.absolute {
435+
position: absolute;
436+
top: 0;
437+
bottom: 0;
438+
margin-block: auto;
439+
z-index: 99999;
440+
}
441+
442+
443+
#root::before{
444+
position: absolute;
445+
content: "";
446+
left: 0;
447+
right: 0;
448+
top: 0;
449+
bottom: 0;
450+
451+
margin-inline: auto;
452+
margin-block: auto;
453+
454+
width: 450px;
455+
height: 450px;
456+
457+
background: var(--martinique);
458+
border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
459+
will-change: border-radius, transform, opacity;
460+
animation: sliderShape 5s linear infinite;
461+
display: block;
462+
z-index: 9999;
463+
-webkit-animation: sliderShape 5s linear infinite;
464+
}
465+
466+
@keyframes sliderShape{
467+
0%,100%{
468+
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
469+
transform: translate3d(0,0,0) rotateZ(0.01deg);
470+
}
471+
34%{
472+
border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
473+
transform: translate3d(0,5px,0) rotateZ(0.01deg);
474+
}
475+
50%{
476+
transform: translate3d(0,0,0) rotateZ(0.01deg);
477+
}
478+
67%{
479+
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
480+
transform: translate3d(0,-3px,0) rotateZ(0.01deg);
481+
}
482+
}

0 commit comments

Comments
 (0)