From 7727fde588e47aa0a674afa675d32e892e146ad9 Mon Sep 17 00:00:00 2001 From: Vaibhav Sharma <48472541+GhostVaibhav@users.noreply.github.com> Date: Sun, 30 Jun 2024 12:34:25 +0530 Subject: [PATCH] Development (#29) * Modified files for changing the themes on all the pages * Refactored all JavaScript files * Fixed the spacing of the CSS files * del: deleted an empty line * add: added an empty line * add: added conditional for deploying another branch * del: removed the writing of CNAME line * del: deleted the branch and the optional environment change --- .github/workflows/node.js.dev.yml | 12 +- src/App.css | 2 +- src/App.js | 11 +- src/components/About.js | 183 ++++++++++-------- src/components/Introduction.js | 15 +- src/components/Navbar.js | 33 +++- src/components/Projects.js | 47 +++-- src/index.css | 311 +++++++++++++++++------------- 8 files changed, 366 insertions(+), 248 deletions(-) diff --git a/.github/workflows/node.js.dev.yml b/.github/workflows/node.js.dev.yml index e2c45a90..b7661ead 100644 --- a/.github/workflows/node.js.dev.yml +++ b/.github/workflows/node.js.dev.yml @@ -25,13 +25,13 @@ jobs: run: npm install - name: Setting up Git run: | - git remote set-url origin https://GhostVaibhav:${{ secrets.PASS }}@github.com/GhostVaibhav/Simple.git - git config --global user.email "48472541+GhostVaibhav@users.noreply.github.com" - git config --global user.name "Vaibhav Sharma" + git remote set-url origin https://GhostVaibhav:${{ secrets.PASS }}@github.com/GhostVaibhav/Simple.git + git config --global user.email "48472541+GhostVaibhav@users.noreply.github.com" + git config --global user.name "Vaibhav Sharma" - name: Writing to environment variable run: | - touch .env - echo 'REACT_APP_RECAPTCHA_KEY=${{ secrets.REACT_APP_RECAPTCHA_KEY }}' >> .env - npm install gh-pages --save-dev + touch .env + echo 'REACT_APP_RECAPTCHA_KEY=${{ secrets.REACT_APP_RECAPTCHA_KEY }}' >> .env + npm install gh-pages --save-dev - name: Building and deploying the site run: npm run deploy diff --git a/src/App.css b/src/App.css index 74b5e053..e70a402e 100644 --- a/src/App.css +++ b/src/App.css @@ -35,4 +35,4 @@ to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index ccb2f6f7..1f7c1b86 100644 --- a/src/App.js +++ b/src/App.js @@ -72,6 +72,7 @@ function App() { const [verified, setVerified] = useState(false); const challengeBtnCountMax = 10; const [challengeBtn, setChallengeBtn] = useState(1); + const [theme, setTheme] = useState("blue"); function inInput() { const elem = document.getElementById("in-name"); const elem2 = document.getElementById("in-email"); @@ -114,14 +115,14 @@ function App() { }> - + - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> diff --git a/src/components/About.js b/src/components/About.js index b5c17984..ec13cf1c 100644 --- a/src/components/About.js +++ b/src/components/About.js @@ -64,6 +64,29 @@ function getRandomInt(ranges) { } export default function About(props) { + const colors = { + green: { + textColor: "text-teal-400", + bgColor: "bg-green-900", + tileColor: "bg-green-800", + boxColor: "bg-green-700", + borderColor: "border-green-600", + }, + red: { + textColor: "text-red-300", + bgColor: "bg-red-900", + tileColor: "bg-pink-800", + boxColor: "bg-pink-800", + borderColor: "border-pink-600", + }, + blue: { + textColor: "text-indigo-500", + bgColor: "bg-gray-900", + tileColor: "bg-gray-800", + boxColor: "bg-gray-700", + borderColor: "border-gray-600", + } + }; function click() { if (props.challengeBtn === props.btnCountMax) { if (!document.querySelector("#challenge-btn")) { @@ -82,99 +105,99 @@ export default function About(props) { const dur = [1, 5] return (
-
+
{/* Grid background */} {/* Row 1 */} -
-
-
-
+
+
+
+
{/* Row 2 */} -
-
-
-
+
+
+
+
{/* Row 3 */} -
-
-
+
+
+
{/* Row 4 */} -
-
-
-
+
+
+
+
{/* Row 5 */} -
-
-
-
+
+
+
+
{/* Row 6 */} -
-
-
+
+
+
{/* Row 7 */} -
-
-
-
+
+
+
+
{/* Row 8 */} -
-
-
+
+
+
{/* Row 9 */} -
-
-
-
+
+
+
+
{/* Row 10 */} -
-
-
-
+
+
+
+
{/* Row 11 */} -
-
-
-
+
+
+
+
{/* Row 12 */} -
-
-
-
+
+
+
+
{/* Row 13 */} -
-
-
+
+
+
{/* Row 14 */} -
-
-
-
-
+
+
+
+
+
{/* Row 15 */} -
-
+
+
{/* Row 16 */} -
-
-
-
+
+
+
+
{/* Row 17 */} -
-
-
-
+
+
+
+
{/* Row 18 */} -
-
-
+
+
+
{/* Content */}
- +

- About Me + About Me

Hi👋, my name isVaibhav Sharma!I am a student currently pursuing @@ -183,26 +206,26 @@ export default function About(props) {
- +

- Education + Education

- I am currently a final year student in Vellore Institute of Technology,Vellore🏛️ pursuing my Bachelor of Technology (B.Tech) in Computer Science with specialisation in Blockchain Technology with aCGPA
Cumulative Grade Point Average
of 8.65. + I am currently a final year student in Vellore Institute of Technology,Vellore🏛️ pursuing my Bachelor of Technology (B.Tech) in Computer Science with specialisation in Blockchain Technology with aCGPA
Cumulative Grade Point Average
of 8.66. I completed my schooling fromThe Air Force School,New Delhi🏫 with a score of 96.2% in AISSCE. I have avid interest in
Mathematics
,
Physics
and
Computer Science
.
- +

- My Location + My Location

- +

- My Hobbies + My Hobbies

My hobbies include playing sports like Cricket, Badminton and Football. I'm also interested in
creating music
,
challenging puzzles
@@ -210,9 +233,9 @@ export default function About(props) {
- +

- Let's stay connected + Let's stay connected

GitHub @@ -220,9 +243,9 @@ export default function About(props) { LinkedIn
- +

- Some secrets to be shared + Some secrets to be shared

diff --git a/src/components/Introduction.js b/src/components/Introduction.js index 4d124062..10cf5e23 100644 --- a/src/components/Introduction.js +++ b/src/components/Introduction.js @@ -28,11 +28,22 @@ function Introduction(props) { const navigate = useNavigate(); let clickCounter = 1; function toAbout() { - if(clickCounter === 7) + if (clickCounter === 7) navigate("./about"); else clickCounter++; } + const colors = { + green: { + textColor: "text-green-500", + }, + red: { + textColor: "text-red-500", + }, + blue: { + textColor: "text-indigo-500", + } + }; useEffect(() => { AOS.init(); }, []); @@ -56,7 +67,7 @@ function Introduction(props) { Salut
- + I'm Vaibhav
diff --git a/src/components/Navbar.js b/src/components/Navbar.js index ee64720c..6d5d35b9 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,7 +1,22 @@ import { Link, useNavigate } from "react-router-dom"; import GPL from "../images/gplv3.png"; +import ThemeButton from "./ThemeButton"; function Navbar(props) { + const colors = { + green: { + navbarColor: "bg-green-800", + navbarHoverColor: "bg-green-700", + }, + red: { + navbarColor: "bg-orange-900", + navbarHoverColor: "bg-red-800", + }, + blue: { + navbarColor: "bg-gray-800", + navbarHoverColor: "bg-gray-800", + } + }; const displayIcons = false; const navigate = useNavigate(); function hoverIn(element) { @@ -166,7 +181,7 @@ function Navbar(props) {
*/} {/*
*/}
-
+
{/* Logo */} @@ -190,7 +205,7 @@ function Navbar(props) {
-
hoverIn(".icon1") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon1") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center justify-between rounded-md hover:bg-gray-700 md:hover:bg-gray-800 p-2 pr-4"> +
hoverIn(".icon1") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon1") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center justify-between rounded-md hover:${colors[props.theme].navbarHoverColor} p-2 pr-4`}>
@@ -207,7 +222,7 @@ function Navbar(props) {
-
hoverIn(".icon2") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon2") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center justify-between rounded-md hover:bg-gray-700 md:hover:bg-gray-800 p-2 pr-4"> +
hoverIn(".icon2") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon2") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center justify-between rounded-md hover:${colors[props.theme].navbarHoverColor} p-2 pr-4`}>
@@ -224,7 +239,7 @@ function Navbar(props) {
-
hoverIn(".icon3") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon3") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center justify-between rounded-md hover:bg-gray-700 md:hover:bg-gray-800 p-2 pr-4"> +
hoverIn(".icon3") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon3") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center justify-between rounded-md hover:${colors[props.theme].navbarHoverColor} p-2 pr-4`}>
@@ -241,7 +256,7 @@ function Navbar(props) {
-
hoverIn(".icon4") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon4") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center hover:bg-gray-700 md:hover:bg-gray-800 rounded-md p-2 pr-4"> +
hoverIn(".icon4") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon4") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center hover:${colors[props.theme].navbarHoverColor} rounded-md p-2 pr-4`}> @@ -265,10 +280,16 @@ function Navbar(props) { Vaibhav Sharma
+
+
+ + + +
-