Skip to content

Commit 586177e

Browse files
dushaDevdushaDev
committed
Fix: Finalizing all pages
1 parent ba95d49 commit 586177e

File tree

9 files changed

+256
-242
lines changed

9 files changed

+256
-242
lines changed

‎src/app/globals.css

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@import "tailwindcss";
22

33
:root {
4-
5-
--primary: #FF7037;
4+
--primary: #ff7037;
65
--background: #303030;
76
--on-background: #353535;
87
--secondary: #ffffff;
9-
--neutral: #4C4C4C;
8+
--neutral: #4c4c4c;
109
--foreground: #ffffff;
1110
}
1211

@@ -33,19 +32,15 @@ body {
3332
font-family: var(--font-inria-sans);
3433
}
3534
html {
36-
scroll-behavior:smooth;
35+
scroll-behavior: smooth;
3736
}
3837

3938
.globalBackground {
40-
background-image: url('/background/background.png');
39+
background-image: url("/background/background.png");
4140
background-size: cover;
4241
background-position: center;
4342
background-attachment: fixed;
4443
background-repeat: no-repeat;
4544
min-height: 100vh;
4645
width: 100%;
4746
}
48-
49-
50-
51-

‎src/app/page.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import Home from "@/components/Home/Home";
23
import About from "@/components/About/About";
34
import Skills from "@/components/Skills/Skills";

‎src/components/About/About.js

Lines changed: 74 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
"use client";
22

33
import Image from "next/image";
4-
import { useRef, useEffect } from 'react';
5-
import { gsap } from 'gsap';
6-
import { ScrollTrigger } from 'gsap/ScrollTrigger';
4+
import { useRef, useEffect } from "react";
5+
import { gsap } from "gsap";
6+
import { ScrollTrigger } from "gsap/ScrollTrigger";
77

88
gsap.registerPlugin(ScrollTrigger);
99

1010
export default function About() {
11-
1211
const leftRef = useRef(null);
1312
const rightRef = useRef(null);
1413
const containerRef = useRef(null);
1514

1615
useEffect(() => {
1716
// Animation for left element(Image)
18-
gsap.fromTo(leftRef.current,
17+
gsap.fromTo(
18+
leftRef.current,
1919
{ opacity: 0 },
2020
{
2121
opacity: 1,
@@ -25,12 +25,13 @@ export default function About() {
2525
trigger: containerRef.current,
2626
start: "top 60%",
2727
end: "top 20%",
28-
scrub: 0.6,
29-
markers: false
30-
}
28+
scrub: 0.6,
29+
markers: false,
30+
},
3131
}
3232
);
33-
gsap.fromTo(leftRef.current,
33+
gsap.fromTo(
34+
leftRef.current,
3435
{ opacity: 1 },
3536
{
3637
opacity: 0,
@@ -40,19 +41,20 @@ export default function About() {
4041
trigger: containerRef.current,
4142
start: "bottom 80%",
4243
end: "bottom 30%",
43-
scrub: 0.6,
44-
markers: false
45-
}
44+
scrub: 0.6,
45+
markers: false,
46+
},
4647
}
4748
);
4849

4950
// Animation for right element(Text)
5051
//open
51-
gsap.fromTo(rightRef.current,
52-
{ x: '50%',y:'-10%', opacity: 0 },
52+
gsap.fromTo(
53+
rightRef.current,
54+
{ x: "50%", y: "-10%", opacity: 0 },
5355
{
5456
x: 0,
55-
y:0,
57+
y: 0,
5658
opacity: 1,
5759
duration: 1,
5860
ease: "power3.in",
@@ -61,15 +63,17 @@ export default function About() {
6163
start: "top 100%",
6264
end: "top 20%",
6365
scrub: 0.6,
64-
markers: false
65-
}
66+
markers: false,
67+
},
6668
}
6769
);
6870
//close
69-
gsap.fromTo(rightRef.current,
70-
{ x: 0,y:0, opacity: 1 },
71+
gsap.fromTo(
72+
rightRef.current,
73+
{ x: 0, y: 0, opacity: 1 },
7174
{
72-
x: '50%',y:'10%',
75+
x: "50%",
76+
y: "10%",
7377
opacity: 0,
7478
duration: 1,
7579
ease: "power3.in",
@@ -78,60 +82,69 @@ export default function About() {
7882
start: "top 0%",
7983
end: "bottom 30%",
8084
scrub: 0.6,
81-
markers: false
82-
}
85+
markers: false,
86+
},
8387
}
8488
);
8589

8690
return () => {
87-
ScrollTrigger.getAll().forEach(trigger => trigger.kill());
91+
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
8892
};
8993
}, []);
9094

91-
9295
return (
93-
<section ref={containerRef}
96+
<section
97+
ref={containerRef}
9498
className="relative flex items-center justify-center h-screen md:px-20 lg:px-20"
95-
>
96-
97-
<div className="container mx-auto px-6 flex flex-col items-center">
98-
99-
<h2 className="text-center text-4xl font-bold mb-10">ABOUT</h2>
100-
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center">
101-
102-
103-
{/* Image Section */}
104-
<div className="w-full md:w-1/3 flex justify-center md:justify-start hover:scale-101 transition-transform duration-300" ref={leftRef}>
105-
<div className="w-64 h-80 rounded-lg overflow-hidden border-4 border-primary shadow-lg">
106-
<Image
107-
src="/pics/pic2.jpg"
108-
alt="Dushan"
109-
width={256}
110-
height={320}
111-
className="object-cover w-full h-full"
112-
/>
99+
>
100+
<div className="container mx-auto px-6 flex flex-col items-center">
101+
<h2 className="text-center text-4xl font-bold mb-10">ABOUT</h2>
102+
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center">
103+
{/* Image Section */}
104+
<div
105+
className="w-full md:w-1/3 flex justify-center md:justify-start hover:scale-101 transition-transform duration-300"
106+
ref={leftRef}
107+
>
108+
<div className="w-64 h-80 rounded-lg overflow-hidden border-4 border-primary shadow-lg">
109+
<Image
110+
src="/pics/pic2.jpg"
111+
alt="Dushan"
112+
width={256}
113+
height={320}
114+
className="object-cover w-full h-full"
115+
/>
116+
</div>
113117
</div>
114-
</div>
115118

116-
{/* Text Section */}
117-
<div className="w-full md:w-2/3 text-center md:text-left mt-10 mb-10 md:mt-0 md:ml-10 " ref={rightRef}>
118-
<p className="text-3xl font-semibold mt-4">Hey</p>
119-
<p className="text-xl mt-2">
120-
there! I&apos;m a <span className="text-primary">Software Engineering</span> undergraduate who loves coding, creativity, and problem-solving.
121-
When I&apos;m not immersed in tech, you&apos;ll find me enjoying <span className="text-primary">music</span> —either listening to my favorite songs or playing the <span className="text-primary">guitar</span>.
122-
123-
</p>
124-
<p className="text-xl mt-4">
125-
I have a thing for the color <span className="text-blue-400">Blue</span> (calm and cool, just like my approach to life!). Always <span className="text-primary">curious</span> and eager to learn, I&apos;m passionate about turning ideas into meaningful digital experiences.
126-
127-
</p>
128-
<p className="text-xl mt-4">
129-
Let&apos;s build something awesome together! 😊
130-
131-
</p>
119+
{/* Text Section */}
120+
<div
121+
className="w-full md:w-2/3 text-center md:text-left mt-10 mb-10 md:mt-0 md:ml-10 "
122+
ref={rightRef}
123+
>
124+
<p className="text-3xl font-semibold mt-4">Hey</p>
125+
<p className="text-xl mt-2">
126+
there! I&apos;m a{" "}
127+
<span className="text-primary">Software Engineering</span>{" "}
128+
undergraduate who loves coding, creativity, and problem-solving.
129+
When I&apos;m not immersed in tech, you&apos;ll find me enjoying{" "}
130+
<span className="text-primary">music</span> —either listening to
131+
my favorite songs or playing the{" "}
132+
<span className="text-primary">guitar</span>.
133+
</p>
134+
<p className="text-xl mt-4">
135+
I have a thing for the color{" "}
136+
<span className="text-blue-400">Blue</span> (calm and cool, just
137+
like my approach to life!). Always{" "}
138+
<span className="text-primary">curious</span> and eager to learn,
139+
I&apos;m passionate about turning ideas into meaningful digital
140+
experiences.
141+
</p>
142+
<p className="text-xl mt-4">
143+
Let&apos;s build something awesome together! 😊
144+
</p>
145+
</div>
132146
</div>
133147
</div>
134-
</div>
135148
</section>
136149
);
137150
}

‎src/components/Contact/Contact.js

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
"use client";
2+
23
import { useState, useRef, useEffect } from "react";
34
import { FaEnvelope, FaPhone, FaLinkedin, FaGithub } from "react-icons/fa";
45
import { gsap } from "gsap";
@@ -9,7 +10,6 @@ export default function Contact() {
910
const [loading, setLoading] = useState(false);
1011
const [success, setSuccess] = useState(null);
1112
const formRef = useRef(null);
12-
1313
// Animation refs
1414
const contactRef1 = useRef(null);
1515
const contactRef2 = useRef(null);
@@ -136,28 +136,24 @@ export default function Contact() {
136136
rows="4"
137137
className="w-full p-3 bg-neutral rounded-sm shadow-md"
138138
required
139-
></textarea>
139+
autoComplete="off"
140+
/>
140141

141142
<div className="flex justify-end">
142143
<button
143144
type="submit"
144145
disabled={loading}
145146
className="px-8 py-2 bg-secondary text-primary hover:bg-primary hover:text-secondary font-semibold rounded-sm shadow-md transition"
146147
>
147-
{loading ? "Sending..." : "Send"}
148+
{loading ? "Sending.." : "Send"}
148149
</button>
149150
</div>
150-
151-
{success !== null && (
152-
<p
153-
className={`mt-2 ${success ? "text-green-600" : "text-red-600"}`}
154-
>
155-
{success
156-
? "Message sent successfully!"
157-
: "Failed to send message."}
158-
</p>
159-
)}
160151
</form>
152+
{success !== null && (
153+
<p className={`mt-2 ${success ? "text-green-600" : "text-red-600"}`}>
154+
{success ? "Message sent successfully!" : "Failed to send message."}
155+
</p>
156+
)}
161157
</div>
162158
</section>
163159
);

0 commit comments

Comments
 (0)