@@ -53,21 +98,21 @@ const Work = () => {
My
Work
- {[...Array(6)].map((_value, index) => (
+ {projectsData.map((project, index) => (
0{index + 1}
-
Project Name
-
Category
+
{project.title}
+
{project.category}
Tools and features
-
Javascript, TypeScript, React, Threejs
+
{project.tools}
-
+
))}
diff --git a/src/components/styles/Achievements.css b/src/components/styles/Achievements.css
new file mode 100644
index 00000000..199f5769
--- /dev/null
+++ b/src/components/styles/Achievements.css
@@ -0,0 +1,68 @@
+.achievements-section {
+ width: var(--cWidth);
+ margin: auto;
+ padding-top: 100px;
+ padding-bottom: 80px;
+}
+
+.achievements-container h2 {
+ font-size: clamp(40px, 6vw, 80px);
+ font-weight: 500;
+ line-height: 1.1;
+ text-transform: uppercase;
+ margin-bottom: 50px;
+}
+
+.achievements-container h2 span {
+ color: var(--accentColor);
+}
+
+.achievements-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 24px;
+}
+
+.achievement-card {
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ border-radius: 16px;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+}
+
+.achievement-card:hover {
+ border-color: var(--accentColor);
+ transform: translateY(-5px);
+ box-shadow: 0 10px 30px rgba(194, 164, 255, 0.1);
+}
+
+.achievement-icon {
+ font-size: 36px;
+ color: var(--accentColor);
+}
+
+.achievement-info h3 {
+ font-size: 20px;
+ font-weight: 600;
+ color: #fff;
+ margin: 0 0 6px 0;
+}
+
+.achievement-info h4 {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--accentColor);
+ margin: 0 0 12px 0;
+}
+
+.achievement-info p {
+ font-size: 15px;
+ line-height: 1.6;
+ color: rgba(255, 255, 255, 0.7);
+ margin: 0;
+}
diff --git a/src/components/styles/Navbar.css b/src/components/styles/Navbar.css
index 8bdc96aa..af874e89 100644
--- a/src/components/styles/Navbar.css
+++ b/src/components/styles/Navbar.css
@@ -33,10 +33,10 @@
.navbar-connect {
position: absolute;
display: none;
- left: 50%;
+ left: 38%;
top: 50%;
transform: translate(-50%, -50%);
- font-size: 15px;
+ font-size: 14px;
letter-spacing: 1px;
font-weight: 500;
}
@@ -44,6 +44,7 @@
font-weight: 700;
font-size: 14px;
letter-spacing: 0.2px;
+ white-space: nowrap;
}
@media only screen and (min-width: 500px) {
.header {
@@ -52,7 +53,8 @@
.header ul {
flex-direction: row;
align-items: center;
- font-size: 14px;
+ font-size: 13px;
+ column-gap: 20px;
}
.header ul li {
color: #eae5ec;
@@ -61,21 +63,22 @@
font-size: 16px;
}
}
-@media only screen and (min-width: 900px) {
+@media only screen and (min-width: 1350px) {
.navbar-connect {
display: block;
+ left: 35%;
}
}
@media only screen and (min-width: 1200px) {
.header {
- padding: 35px 0px;
+ padding: 30px 0px;
}
.header ul {
- column-gap: 80px;
- font-size: 16px;
+ column-gap: 30px;
+ font-size: 14px;
}
.navbar-connect {
- font-size: 16px;
+ font-size: 15px;
}
.navbar-title {
font-size: 18px;
diff --git a/src/components/utils/initialFX.ts b/src/components/utils/initialFX.ts
index 83e3d671..dab30003 100644
--- a/src/components/utils/initialFX.ts
+++ b/src/components/utils/initialFX.ts
@@ -1,4 +1,4 @@
-import { SplitText } from "gsap-trial/SplitText";
+import { SplitText } from "gsap/SplitText";
import gsap from "gsap";
import { smoother } from "../Navbar";
diff --git a/src/components/utils/splitText.ts b/src/components/utils/splitText.ts
index a80559be..f017643a 100644
--- a/src/components/utils/splitText.ts
+++ b/src/components/utils/splitText.ts
@@ -1,7 +1,7 @@
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { ScrollSmoother } from "gsap-trial/ScrollSmoother";
-import { SplitText } from "gsap-trial/SplitText";
+import { ScrollSmoother } from "gsap/ScrollSmoother";
+import { SplitText } from "gsap/SplitText";
interface ParaElement extends HTMLElement {
anim?: gsap.core.Animation;
diff --git a/src/index.css b/src/index.css
index a56e9ef3..5a0c1dce 100644
--- a/src/index.css
+++ b/src/index.css
@@ -94,21 +94,19 @@ body {
.techstack {
width: 100%;
position: relative;
- height: var(--vh);
- margin: auto;
- margin-top: 50px;
- margin-bottom: -100px;
+ min-height: 80vh;
+ margin: 100px auto 40px auto;
+ overflow: hidden;
}
.techstack h2 {
- font-size: 80px;
+ font-size: 70px;
text-align: center;
- position: absolute;
- width: 100%;
- top: 120px;
- left: 0;
- font-weight: 400;
+ position: relative;
+ z-index: 2;
+ font-weight: 500;
text-transform: uppercase;
+ margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index b8ae268f..c7531e5a 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/about.tsx","./src/components/career.tsx","./src/components/contact.tsx","./src/components/cursor.tsx","./src/components/hoverlinks.tsx","./src/components/landing.tsx","./src/components/loading.tsx","./src/components/maincontainer.tsx","./src/components/navbar.tsx","./src/components/socialicons.tsx","./src/components/techstack.tsx","./src/components/whatido.tsx","./src/components/work.tsx","./src/components/workimage.tsx","./src/components/character/scene.tsx","./src/components/character/exports.ts","./src/components/character/index.tsx","./src/components/character/utils/animationutils.ts","./src/components/character/utils/character.ts","./src/components/character/utils/decrypt.ts","./src/components/character/utils/lighting.ts","./src/components/character/utils/mouseutils.ts","./src/components/character/utils/resizeutils.ts","./src/components/utils/gsapscroll.ts","./src/components/utils/initialfx.ts","./src/components/utils/splittext.ts","./src/context/loadingprovider.tsx","./src/data/bonedata.ts"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/about.tsx","./src/components/achievements.tsx","./src/components/career.tsx","./src/components/contact.tsx","./src/components/cursor.tsx","./src/components/hoverlinks.tsx","./src/components/landing.tsx","./src/components/loading.tsx","./src/components/maincontainer.tsx","./src/components/navbar.tsx","./src/components/socialicons.tsx","./src/components/techstack.tsx","./src/components/whatido.tsx","./src/components/work.tsx","./src/components/workimage.tsx","./src/components/character/scene.tsx","./src/components/character/exports.ts","./src/components/character/index.tsx","./src/components/character/utils/animationutils.ts","./src/components/character/utils/character.ts","./src/components/character/utils/decrypt.ts","./src/components/character/utils/lighting.ts","./src/components/character/utils/mouseutils.ts","./src/components/character/utils/resizeutils.ts","./src/components/utils/gsapscroll.ts","./src/components/utils/initialfx.ts","./src/components/utils/splittext.ts","./src/context/loadingprovider.tsx","./src/data/bonedata.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo
index 98ef2f99..62c7bf92 100644
--- a/tsconfig.node.tsbuildinfo
+++ b/tsconfig.node.tsbuildinfo
@@ -1 +1 @@
-{"root":["./vite.config.ts"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file