From 534a10b96d026820d0cca74043e17a223cc0c9b1 Mon Sep 17 00:00:00 2001 From: Rohan Kewalramani Date: Tue, 15 Sep 2020 10:17:28 -0400 Subject: [PATCH 1/5] Updated styling of landing page --- src/pages/home.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/home.css b/src/pages/home.css index 9856d66..b5550e5 100644 --- a/src/pages/home.css +++ b/src/pages/home.css @@ -1,9 +1,11 @@ .body { - background-color: #2b2d42; + background-color: white; } .slogan { - color: #8d99ae; + color: #2b2d42; + font-size: x-large; + padding-bottom: 5px; } #title { From adcf7520f325c41560a6281250cc3e734b757513 Mon Sep 17 00:00:00 2001 From: Rohan Kewalramani Date: Wed, 16 Sep 2020 16:31:52 -0400 Subject: [PATCH 2/5] Added Particles.js to landing page --- package-lock.json | 30 ++++++++++++++++++++++++++++++ package.json | 1 + src/pages/home.css | 5 +++++ src/pages/home.js | 21 +++++++++++++++++++++ 4 files changed, 57 insertions(+) diff --git a/package-lock.json b/package-lock.json index d906767..c7d45c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9595,6 +9595,11 @@ "pify": "^3.0.0" } }, + "pathseg": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz", + "integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==" + }, "pbkdf2": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz", @@ -11117,6 +11122,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-particles-js": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-3.3.0.tgz", + "integrity": "sha512-pc9oJWEHH3UR1sJurL98TPrEWr0Yf2E8j+f8PLDpgbnQirTRqfwEvTRNJ/Ibvt6233WycCrndn6ImfL0PDEr7A==", + "requires": { + "lodash": "^4.17.11", + "tsparticles": "^1.17.1" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -13175,6 +13189,22 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" }, + "tsparticles": { + "version": "1.17.10", + "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.17.10.tgz", + "integrity": "sha512-ZPadfL/zcXwTASwdQ6G/hAaabkzXBcV7FGtdeAa92GsoHgUexgpGwlMK9HI9yCQxDvigOaa2Y6A3jEDGXiNOXA==", + "requires": { + "pathseg": "^1.2.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz", + "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==" + } + } + }, "tsutils": { "version": "3.17.1", "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz", diff --git a/package.json b/package.json index 0ba1d43..d9e96ff 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-particles-js": "^3.3.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3" }, diff --git a/src/pages/home.css b/src/pages/home.css index b5550e5..4ee7427 100644 --- a/src/pages/home.css +++ b/src/pages/home.css @@ -8,6 +8,11 @@ padding-bottom: 5px; } +#particles-js { + height: 100%; + background-color: white; +} + #title { color: #d90429; font-size: 80px; diff --git a/src/pages/home.js b/src/pages/home.js index 616053b..f30a1aa 100644 --- a/src/pages/home.js +++ b/src/pages/home.js @@ -2,6 +2,7 @@ import React from "react"; import "./home.css"; import logo from "./img/logo-img.png"; import { Link } from "react-router-dom"; +import Particles from "react-particles-js"; export default function Home() { return ( @@ -25,6 +26,26 @@ export default function Home() { + ); From 91f0656470a0a7b3d2bc7279f04ea1748727f3af Mon Sep 17 00:00:00 2001 From: Rohan Kewalramani Date: Thu, 17 Sep 2020 15:13:07 -0400 Subject: [PATCH 3/5] Lowered particle density;Still need to make full screen --- src/pages/Particles.js | 115 +++++++++++++++++++++++++++++++++++++++++ src/pages/home.js | 23 +-------- 2 files changed, 117 insertions(+), 21 deletions(-) create mode 100644 src/pages/Particles.js diff --git a/src/pages/Particles.js b/src/pages/Particles.js new file mode 100644 index 0000000..e32a1cf --- /dev/null +++ b/src/pages/Particles.js @@ -0,0 +1,115 @@ +import React, { Component } from "react"; +import Particles from "react-particles-js"; + +class Canvas extends Component { + state = { width: "0px", height: "0px" }; + componentDidMount() { + this.updateWindowDimensions(); + window.addEventListener("resize", this.updateWindowDimensions); + } + componentWillUnmount() { + window.removeEventListener("resize", this.updateWindowDimensions); + } + updateWindowDimensions = () => { + this.setState({ + width: `${window.innerWidth}px`, + height: `${window.innerHeight}px`, + }); + }; + render() { + const { width, height } = this.state; + console.log(width, height); + return ( + + ); + } +} + +export default Canvas; diff --git a/src/pages/home.js b/src/pages/home.js index f30a1aa..59aad28 100644 --- a/src/pages/home.js +++ b/src/pages/home.js @@ -2,7 +2,7 @@ import React from "react"; import "./home.css"; import logo from "./img/logo-img.png"; import { Link } from "react-router-dom"; -import Particles from "react-particles-js"; +import Particles from "./Particles"; export default function Home() { return ( @@ -24,28 +24,9 @@ export default function Home() { GET STARTED + - ); From 685c9cb80c48867280f0f355391f1214538b5dcb Mon Sep 17 00:00:00 2001 From: Rohan Kewalramani Date: Sat, 19 Sep 2020 09:44:12 -0400 Subject: [PATCH 4/5] Added the use of useEffect;Working on useState --- src/pages/Particles.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/pages/Particles.js b/src/pages/Particles.js index e32a1cf..b387d85 100644 --- a/src/pages/Particles.js +++ b/src/pages/Particles.js @@ -1,16 +1,16 @@ -import React, { Component } from "react"; +import React, { Component, useState, useEffect } from "react"; import Particles from "react-particles-js"; class Canvas extends Component { state = { width: "0px", height: "0px" }; componentDidMount() { - this.updateWindowDimensions(); - window.addEventListener("resize", this.updateWindowDimensions); + this.useEffect(); + window.addEventListener("resize", this.useEffect); } componentWillUnmount() { - window.removeEventListener("resize", this.updateWindowDimensions); + window.removeEventListener("resize", this.useEffect); } - updateWindowDimensions = () => { + useEffect = () => { this.setState({ width: `${window.innerWidth}px`, height: `${window.innerHeight}px`, @@ -25,7 +25,7 @@ class Canvas extends Component { params={{ particles: { number: { - value: 30, + value: 40, density: { enable: true, value_area: 800, @@ -38,7 +38,7 @@ class Canvas extends Component { type: "circle", stroke: { width: 0, - color: "#000000", + color: "#ef233c", }, image: { src: "img/github.svg", @@ -113,3 +113,7 @@ class Canvas extends Component { } export default Canvas; + +{ + /* updateWindowDimensions */ +} From 7b18c8ed2d8eeeddd16a108883f193ed6c3f608a Mon Sep 17 00:00:00 2001 From: Rohan Kewalramani Date: Tue, 6 Oct 2020 09:58:07 -0400 Subject: [PATCH 5/5] Added letter spacing to the title and slogan --- src/pages/home.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home.css b/src/pages/home.css index 4ee7427..865b501 100644 --- a/src/pages/home.css +++ b/src/pages/home.css @@ -5,7 +5,8 @@ .slogan { color: #2b2d42; font-size: x-large; - padding-bottom: 5px; + padding-bottom: 20px; + letter-spacing: 5px; } #particles-js { @@ -16,6 +17,7 @@ #title { color: #d90429; font-size: 80px; + letter-spacing: 40px; } #start-btn {