Skip to content

Commit 6218567

Browse files
NaeuCodeNaeuCode
committed
Adding Day #36
1 parent 44e63dc commit 6218567

File tree

6 files changed

+293
-0
lines changed

6 files changed

+293
-0
lines changed

‎Day #36 - Particles Portfolio/36-Screenshot.png

470 KB
Loading

‎Day #36 - Particles Portfolio/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #36
2+
3+
### Particles Portfolio
4+
In this tutorial ([Open in Youtube](https://youtu.be/F2SN69W0m0Q)), I am gonna showing to you how to code a portfolio with particles.js background animation, Also in this video we used Skeleton.css for our grids. Hope you enjoy it❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](36-Screenshot.png)

‎Day #36 - Particles Portfolio/index.html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
8+
<title>Day #36 - Particles Portfolio | NaeuCode </title>
9+
</head>
10+
<body>
11+
<div id="background">
12+
<div class="container">
13+
14+
<div class="row mb">
15+
<div class="column">
16+
<a href="https://www.youtube.com/@Naeucode" target="_blank" class="logo">N</a>
17+
<h1 class="header">NaeuCode Youtube</h1>
18+
<h2>Web Coding Channel</h2>
19+
</div>
20+
</div>
21+
22+
23+
<div class="row">
24+
<div class="one-half column">
25+
<div class="links-list">
26+
<h1>Youtube Video</h1>
27+
28+
<ul>
29+
30+
<li>
31+
<a href="https://youtu.be/reurfcC65_s?si=dhA29z5-KXUHDxFA" target="_blank">Random Joke Generator</a>
32+
</li>
33+
34+
<li>
35+
<a href="https://youtu.be/z_n63FAqi1M?si=iWSN5Mj5N4P_a33g" target="_blank">Parallax Slider<span>NEW</span></a>
36+
</li>
37+
38+
<li>
39+
<a href="https://youtu.be/MC2WKQZJ2o4?si=jVZXyXVd6C2knKN0" target="_blank">Simon Game App</a>
40+
</li>
41+
42+
<li>
43+
<a href="https://youtu.be/5fcXmiRYlrA?si=P9rIpAPihLIWu9XY" target="_blank">Chrome Color Picker Extension</a>
44+
</li>
45+
46+
<li>
47+
<a href="https://youtu.be/-tRAtbfTQDs?si=P__IylpRPGydN4PV" target="_blank">Tradingview Widget </a>
48+
</li>
49+
50+
<li>
51+
<a href="https://youtu.be/qjpWSrzBxg8?si=fhq9qcHrlf1rmDbB" target="_blank">Minesweeper Game </a>
52+
</li>
53+
54+
</ul>
55+
</div>
56+
</div>
57+
58+
<div class="one-half column">
59+
<div class="links-list">
60+
<h1>Github Repositories</h1>
61+
<ul>
62+
<li>
63+
<a href="https://github.com/NaeuCode/100-days-of-javascript" target="_blank">100 Days Of JavaScript</a>
64+
</li>
65+
66+
<li>
67+
<a href="https://github.com/NaeuCode/NC-Portfolio" target="_blank">NaeuCode Portfolio</a>
68+
</li>
69+
70+
<li>
71+
<a href="https://github.com/NaeuCode/Travel" target="_blank">Travel Website</a>
72+
</li>
73+
74+
<li>
75+
<a href="https://github.com/NaeuCode/Socialbook" target="_blank">SocialBook</a>
76+
</li>
77+
78+
<li>
79+
<a href="https://github.com/NaeuCode/Animated-Contact-Form" target="_blank">Animated Contact Form</a>
80+
</li>
81+
82+
<li>
83+
<a href="https://github.com/NaeuCode/Shadow-Box-Generator" target="_blank">Shadow Box Generator</a>
84+
</li>
85+
86+
</ul>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div class="container">
93+
<div class="footer">
94+
<p>
95+
Developed By
96+
<a href="https://www.youtube.com/@Naeucode" target="_blank">
97+
<span>NaeuCode</span>
98+
</a>
99+
Youtube Channel.
100+
</p>
101+
</div>
102+
</div>
103+
104+
</div>
105+
106+
107+
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
108+
<script src="script.js"></script>
109+
</body>
110+
</html>

‎Day #36 - Particles Portfolio/script.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
particlesJS("background", {
2+
particles: {
3+
number: {
4+
value: 21, //Number of particles
5+
density: {
6+
enable: true,
7+
value_area: 250, //Area where particles will be distributed
8+
},
9+
},
10+
color: {
11+
value: "#000", //Particle color
12+
},
13+
shape: {
14+
type: "circle", //Shape Type
15+
},
16+
opacity: {
17+
value: .7, //base opacity of particles
18+
random: true,
19+
anim: {
20+
enable:true,
21+
speed:.3 , //animation seed
22+
opacity_min: .1, //minimum opacity during animation
23+
sync:false, //sync animation
24+
},
25+
},
26+
27+
size: {
28+
value: 6, //base size of particles
29+
random: true,
30+
anim: {
31+
enable: true,
32+
speed: 4, //animation speed for size changes
33+
size_min: 1.3, //minimum size during animation
34+
sync: false,
35+
},
36+
},
37+
38+
line_linked: {
39+
enable:true, //enable connecting lines between particles
40+
distance: 150, //maximum distance between linked particles
41+
color: "#000",
42+
opacity: .8,
43+
width: 1,
44+
},
45+
move: {
46+
enable: true, //enable particle movement
47+
speed:2,
48+
direction: "none",
49+
random:false,
50+
straight: false,
51+
out_mode:"bounce", //behavior when particles move out of the canvas
52+
bounce: false,
53+
},
54+
},
55+
56+
interactivity: {
57+
detect_on: "window", //detect interactions on the window
58+
events: {
59+
onhover:{
60+
enable: true, //enable hover interactivity
61+
mode: "repulse", //repulse particles on hover
62+
},
63+
onclick: {
64+
enable: true,
65+
mode: "push",
66+
},
67+
resize: true, //resize particles animation on window resize
68+
},
69+
},
70+
retina_detect: true, //detect retina displays
71+
});

‎Day #36 - Particles Portfolio/style.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
font-family: 'Poppins', sans-serif;
11+
height: 100%;
12+
background: #f5f5f5;
13+
}
14+
15+
canvas {
16+
height: 100%;
17+
z-index: -1000;
18+
position: fixed;
19+
top: 0;
20+
}
21+
22+
a {
23+
color: #000;
24+
text-decoration: none;
25+
transition: .3s;
26+
}
27+
.row {
28+
font-family: 'Poppins',sans-serif;
29+
}
30+
31+
.column a:hover {
32+
color: #e91e1e;
33+
}
34+
35+
h1.header {
36+
color: #e91e1e;
37+
font-size: 2.5rem;
38+
font-weight: 700;
39+
}
40+
41+
h2{
42+
color: #454444;
43+
font-size: 2.5rem;
44+
font-weight: bold;
45+
}
46+
47+
.mb{
48+
margin-bottom: 3rem;
49+
}
50+
51+
.logo {
52+
font-family: 'Monoton', cursive;
53+
color: #000;
54+
font-size: 10rem;
55+
}
56+
57+
.links-list ul li{
58+
list-style: none;
59+
margin-right: 2rem;
60+
font-size: 1.8rem;
61+
margin-bottom: 0;
62+
}
63+
64+
.links-list ul li a {
65+
color: #000;
66+
}
67+
68+
.links-list ul li span {
69+
background-color: #e91e1e;
70+
font-size: 1rem;
71+
border-radius: 5px;
72+
padding: 3px 6px;
73+
font-weight: bold;
74+
margin-left: .8rem;
75+
color: #fff;
76+
}
77+
78+
.links-list h1 {
79+
color: #000;
80+
font-size: 2.5rem;
81+
font-weight: bold;
82+
}
83+
84+
.footer {
85+
margin-top: 6rem;
86+
}
87+
88+
.footer p{
89+
color: #000;
90+
font-size: 1.3rem;
91+
}
92+
93+
94+
.footer span {
95+
color: #545454;
96+
}
97+
98+
.footer span:hover {
99+
color: #e91e1e;
100+
}
101+
102+

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,4 @@ Here we have list of projects:
4646
33. Simon Game App
4747
34. Parallax Slider
4848
35. Random Joke Generator
49+
36. Particles Portfolio

0 commit comments

Comments
 (0)