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
@@ -220,9 +243,9 @@ export default function About(props) {
-
+
- 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
+
+
+
+
+
+
-
+