diff --git a/interactive-dot-effect/favicon.png b/interactive-dot-effect/favicon.png
new file mode 100644
index 0000000..f3a6179
Binary files /dev/null and b/interactive-dot-effect/favicon.png differ
diff --git a/interactive-dot-effect/index.html b/interactive-dot-effect/index.html
new file mode 100644
index 0000000..1321882
--- /dev/null
+++ b/interactive-dot-effect/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+ DOTS
+
+
+
+
+
+
+
+
diff --git a/interactive-dot-effect/particles.json b/interactive-dot-effect/particles.json
new file mode 100644
index 0000000..168f310
--- /dev/null
+++ b/interactive-dot-effect/particles.json
@@ -0,0 +1,110 @@
+{
+ "particles": {
+ "number": {
+ "value": 40,
+ "density": {
+ "enable": true,
+ "value_area": 800
+ }
+ },
+ "color": {
+ "value": "#F80"
+ },
+ "shape": {
+ "type": "circle",
+ "stroke": {
+ "width": 0,
+ "color": "#F80"
+ },
+ "polygon": {
+ "nb_sides": 5
+ },
+ "image": {
+ "src": "img/github.svg",
+ "width": 100,
+ "height": 100
+ }
+ },
+ "opacity": {
+ "value": 1,
+ "random": false,
+ "anim": {
+ "enable": false,
+ "speed": 1,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 10,
+ "random": true,
+ "anim": {
+ "enable": false,
+ "speed": 80,
+ "size_min": 0.1,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": true,
+ "distance": 300,
+ "color": "#F80",
+ "opacity": 1,
+ "width": 2
+ },
+ "move": {
+ "enable": true,
+ "speed": 12,
+ "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": true,
+ "mode": "repulse"
+ },
+ "onclick": {
+ "enable": true,
+ "mode": "push"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 800,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 800,
+ "size": 80,
+ "duration": 2,
+ "opacity": 0.8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 400,
+ "duration": 0.4
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": true
+}
\ No newline at end of file
diff --git a/interactive-dot-effect/style.css b/interactive-dot-effect/style.css
new file mode 100644
index 0000000..334d512
--- /dev/null
+++ b/interactive-dot-effect/style.css
@@ -0,0 +1,18 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background:#421;
+}
+
+#particles-js{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}