diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
new file mode 100644
index 0000000..fb0d65a
--- /dev/null
+++ b/.idea/watcherTasks.xml
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx
index aae263e..fee1af4 100644
--- a/app/components/navbar.jsx
+++ b/app/components/navbar.jsx
@@ -43,10 +43,10 @@ function Navbar() {
handleScroll(e, "experience")}
+ onClick={(e) => handleScroll(e, "skills")}
>
- EXPERIENCE
+ SKILLS
@@ -54,10 +54,10 @@ function Navbar() {
handleScroll(e, "skills")}
+ onClick={(e) => handleScroll(e, "experience")}
>
- SKILLS
+ EXPERIENCE
diff --git a/app/css/antiScroll.css b/app/css/antiScroll.css
deleted file mode 100644
index 332cd5f..0000000
--- a/app/css/antiScroll.css
+++ /dev/null
@@ -1,8 +0,0 @@
-html, body {
- overflow-x: hidden;
- width: 100%;
-}
-
-body {
- position: relative;
-}
\ No newline at end of file
diff --git a/app/css/card.scss b/app/css/card.css
similarity index 51%
rename from app/css/card.scss
rename to app/css/card.css
index 13d5801..b156b7d 100644
--- a/app/css/card.scss
+++ b/app/css/card.css
@@ -1,50 +1,34 @@
.glow-container {
--spread: 60;
}
-
.glow-card {
--active: 0.15;
--start: 0;
}
-
.glow-card:is(:hover, :focus-visible) {
z-index: 2;
}
-
.glows {
pointer-events: none;
position: absolute;
inset: 0;
filter: blur(calc(var(--blur) * 1px));
}
-
-.glows::after,
-.glows::before {
+.glows::after, .glows::before {
--alpha: 0;
content: "";
- background: conic-gradient(from 180deg at 50% 70%,
- #f626af 0deg,
- #8228ec 72.0000010728836deg,
- #f626af 144.0000021457672deg,
- #0025ba 216.00000858306885deg,
- #f626af 288.0000042915344deg,
- #fafafa 1turn);
+ background: conic-gradient(from 180deg at 50% 70%, #f626af 0deg, #8228ec 72.0000010729deg, #f626af 144.0000021458deg, #0025ba 216.0000085831deg, #f626af 288.0000042915deg, #fafafa 1turn);
background-attachment: fixed;
position: absolute;
inset: -5px;
border: 8px solid transparent;
border-radius: 12px;
- mask: linear-gradient(#0000, #0000),
- conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg),
- #000 0deg,
- #fff,
- #0000 calc(var(--spread) * 1deg));
+ mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
mask-composite: intersect;
mask-clip: padding-box, border-box;
opacity: var(--active);
transition: opacity 1s;
}
-
.glow-card::before {
position: absolute;
inset: 0;
@@ -55,29 +39,18 @@
background: #84738c;
background-attachment: fixed;
border-radius: 12px;
- mask: linear-gradient(#0000, #0000),
- conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
- #ffffff26 0deg,
- white,
- #ffffff26 calc(var(--spread) * 2.5deg));
+ mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), #ffffff26 0deg, white, #ffffff26 calc(var(--spread) * 2.5deg));
mask-clip: padding-box, border-box;
mask-composite: intersect;
opacity: var(--active);
transition: opacity 1s;
}
-
.glow-card::after {
--bg-size: 100%;
content: "";
pointer-events: none;
position: absolute;
- background: conic-gradient(from 180deg at 50% 70%,
- #f626af 0deg,
- #8228ec 72.0000010728836deg,
- #f626af 144.0000021457672deg,
- #0025ba 216.00000858306885deg,
- #f626af 288.0000042915344deg,
- #fafafa 1turn);
+ background: conic-gradient(from 180deg at 50% 70%, #f626af 0deg, #8228ec 72.0000010729deg, #f626af 144.0000021458deg, #0025ba 216.0000085831deg, #f626af 288.0000042915deg, #fafafa 1turn);
background-attachment: fixed;
border-radius: 12px;
opacity: var(--active, 0);
@@ -85,12 +58,8 @@
--alpha: 0;
inset: 0;
border: 2px solid transparent;
- mask: linear-gradient(#0000, #0000),
- conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg),
- #0000 0deg,
- #fff,
- #0000 calc(var(--spread) * 0.5deg));
+ mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
filter: brightness(1.5);
mask-clip: padding-box, border-box;
mask-composite: intersect;
-}
\ No newline at end of file
+}
diff --git a/app/css/globals.scss b/app/css/globals.css
similarity index 81%
rename from app/css/globals.scss
rename to app/css/globals.css
index 9914d6c..ab90332 100644
--- a/app/css/globals.scss
+++ b/app/css/globals.css
@@ -3,37 +3,35 @@
@tailwind utilities;
:root {
- --foreground-rgb: rgb(211, 216, 232);
+ --foreground-rgb: #d3d8e8;
}
-
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
}
}
-
body {
color: rgb(var(--foreground-rgb));
background-color: #0d1224;
+ position: relative;
+ width: 100%;
}
-
#sticky-card-1 {
--index: 1;
}
-
#sticky-card-2 {
--index: 2;
}
-
#sticky-card-3 {
--index: 3;
}
-
#sticky-card-4 {
--index: 4;
}
-
.sticky-card {
- // padding-top: calc(var(--index) * 2.5rem);
top: calc(var(--index) * 4rem);
-}
\ No newline at end of file
+}
+
+html {
+ width: 100%;
+}
diff --git a/app/layout.js b/app/layout.js
index 1cdf4c9..0b16b92 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -4,8 +4,8 @@ import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Footer from "./components/footer";
import Navbar from "./components/navbar";
-import "./css/card.scss";
-import "./css/globals.scss";
+import "./css/card.css";
+import "./css/globals.css";
import ScrollToTop from "./components/helper/scroll-to-top";
const inter = Inter({ subsets: ["latin"] });
diff --git a/app/page.js b/app/page.js
index d389f6d..957ed2a 100644
--- a/app/page.js
+++ b/app/page.js
@@ -3,7 +3,6 @@ import Experience from "./components/homepage/experience";
import HeroSection from "./components/homepage/hero-section";
import Projects from "./components/homepage/projects";
import Skills from "./components/homepage/skills";
-import './css/antiScroll.css';
export default async function Home() {