Bug Fix
This commit is contained in:
IM23a-spirgif
+64
-37
@@ -6,34 +6,39 @@ export default function About() {
|
|||||||
{
|
{
|
||||||
date: "2018",
|
date: "2018",
|
||||||
title: "First Contact with Coding",
|
title: "First Contact with Coding",
|
||||||
content: "I discovered my passion for technology by experimenting with Scratch and creating some simple Games."
|
content:
|
||||||
|
"I discovered my passion for technology by experimenting with Scratch and creating some simple Games.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: "2020",
|
date: "2020",
|
||||||
title: "Exploring Web & Scripting",
|
title: "Exploring Web & Scripting",
|
||||||
content: "Started creating small websites and got into JavaScript, CSS, and working with various scripting languages."
|
content:
|
||||||
|
"Started creating small websites and got into JavaScript, CSS, and working with various scripting languages.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: "2022",
|
date: "2022",
|
||||||
title: "Diving into Game Development",
|
title: "Diving into Game Development",
|
||||||
content: "Tried Unity and C#, building small 2D and 3D prototypes to expand my skill set."
|
content:
|
||||||
|
"Tried Unity and C#, building small 2D and 3D prototypes to expand my skill set.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
date: "2024",
|
date: "2024",
|
||||||
title: "Full Stack & Beyond",
|
title: "Full Stack & Beyond",
|
||||||
content: "Ventured into backend (SQL, Python) and continued refining my frontend abilities, always exploring new challenges."
|
content:
|
||||||
}
|
"Ventured into backend (SQL, Python) and continued refining my frontend abilities, always exploring new challenges.",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const skills = [
|
const skills = [
|
||||||
{ name: "JavaScript", level: 80, waveSpeed: "2s" },
|
{name: "JavaScript", level: 80, waveSpeed: "2s"},
|
||||||
{ name: "Python", level: 75, waveSpeed: "2.5s" },
|
{name: "Python", level: 75, waveSpeed: "2.5s"},
|
||||||
{ name: "C#", level: 50, waveSpeed: "3s" },
|
{name: "C#", level: 50, waveSpeed: "3s"},
|
||||||
{ name: "SQL", level: 85, waveSpeed: "2.2s" },
|
{name: "SQL", level: 85, waveSpeed: "2.2s"},
|
||||||
{ name: "HTML & CSS", level: 70, waveSpeed: "2.7s" },
|
{name: "HTML & CSS", level: 70, waveSpeed: "2.7s"},
|
||||||
];
|
];
|
||||||
|
|
||||||
const sectionRefs = timelineData.map(() => useRef(null));
|
// Instead of mapping useRef inside a callback, we create one ref for all sections:
|
||||||
|
const sectionRefs = useRef([]);
|
||||||
const aboutMeRef = useRef(null);
|
const aboutMeRef = useRef(null);
|
||||||
const scrollContainerRef = useRef(null);
|
const scrollContainerRef = useRef(null);
|
||||||
|
|
||||||
@@ -54,12 +59,8 @@ export default function About() {
|
|||||||
const handleButtonClick = (direction) => {
|
const handleButtonClick = (direction) => {
|
||||||
setCurrentSection((prev) => {
|
setCurrentSection((prev) => {
|
||||||
const newSection = Math.max(0, Math.min(prev + direction, timelineData.length - 1));
|
const newSection = Math.max(0, Math.min(prev + direction, timelineData.length - 1));
|
||||||
if (newSection === timelineData.length - 1) {
|
setTimelineFinished(newSection === timelineData.length - 1);
|
||||||
setTimelineFinished(true);
|
sectionRefs.current[newSection]?.scrollIntoView({behavior: "smooth", inline: "start"});
|
||||||
} else {
|
|
||||||
setTimelineFinished(false);
|
|
||||||
}
|
|
||||||
sectionRefs[newSection]?.current?.scrollIntoView({behavior: "smooth", inline: "start"});
|
|
||||||
return newSection;
|
return newSection;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -70,7 +71,7 @@ export default function About() {
|
|||||||
(entries) => {
|
(entries) => {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
const index = sectionRefs.findIndex(ref => ref.current === entry.target);
|
const index = sectionRefs.current.findIndex((el) => el === entry.target);
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
setCurrentSection(index);
|
setCurrentSection(index);
|
||||||
setTimelineFinished(index === timelineData.length - 1);
|
setTimelineFinished(index === timelineData.length - 1);
|
||||||
@@ -81,12 +82,12 @@ export default function About() {
|
|||||||
{threshold: 0.6}
|
{threshold: 0.6}
|
||||||
);
|
);
|
||||||
|
|
||||||
sectionRefs.forEach((ref) => {
|
sectionRefs.current.forEach((el) => {
|
||||||
if (ref.current) observer.observe(ref.current);
|
if (el) observer.observe(el);
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => observer.disconnect();
|
return () => observer.disconnect();
|
||||||
}, [sectionRefs]);
|
}, [timelineData.length]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{width: "100%", overflowX: "hidden"}}>
|
<div style={{width: "100%", overflowX: "hidden"}}>
|
||||||
@@ -166,7 +167,8 @@ export default function About() {
|
|||||||
{timelineData.map((item, index) => (
|
{timelineData.map((item, index) => (
|
||||||
<section
|
<section
|
||||||
key={index}
|
key={index}
|
||||||
ref={sectionRefs[index]}
|
// Assign each section to sectionRefs.current array
|
||||||
|
ref={(el) => (sectionRefs.current[index] = el)}
|
||||||
style={{
|
style={{
|
||||||
flex: "0 0 100%",
|
flex: "0 0 100%",
|
||||||
scrollSnapAlign: "center",
|
scrollSnapAlign: "center",
|
||||||
@@ -188,24 +190,49 @@ export default function About() {
|
|||||||
|
|
||||||
{/* Skills Section with Liquid Progress Bars */}
|
{/* Skills Section with Liquid Progress Bars */}
|
||||||
{timelineFinished && (
|
{timelineFinished && (
|
||||||
<section style={{ minHeight: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "2rem", color: "#fff" }}>
|
<section
|
||||||
<h2 style={{ fontSize: "2rem", marginBottom: "2rem" }}>My Skills</h2>
|
style={{
|
||||||
|
minHeight: "100vh",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
padding: "2rem",
|
||||||
|
color: "#fff",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2 style={{fontSize: "2rem", marginBottom: "2rem"}}>My Skills</h2>
|
||||||
|
|
||||||
<div style={{ display: "flex", gap: "2rem" }}>
|
<div style={{display: "flex", gap: "2rem"}}>
|
||||||
{skills.map((skill, index) => (
|
{skills.map((skill, index) => (
|
||||||
<div key={index} style={{ textAlign: "center" }}>
|
<div key={index} style={{textAlign: "center"}}>
|
||||||
<div style={{ width: "60px", height: "200px", backgroundColor: "#333", borderRadius: "10px", overflow: "hidden", position: "relative", border: "2px solid #555" }}>
|
<div
|
||||||
<div className="liquid" style={{
|
style={{
|
||||||
width: "100%",
|
width: "60px",
|
||||||
height: `${skill.level}%`,
|
height: "200px",
|
||||||
position: "absolute",
|
backgroundColor: "#333",
|
||||||
bottom: 0,
|
borderRadius: "10px",
|
||||||
background: "linear-gradient(45deg, #7400a9, #411357)",
|
overflow: "hidden",
|
||||||
borderTop: "4px solid rgba(255, 255, 255, 0.6)",
|
position: "relative",
|
||||||
animation: `wave ${skill.waveSpeed} infinite ease-in-out`,
|
border: "2px solid #555",
|
||||||
}}><p style={{ marginTop: "10px", fontSize: "1rem" }}>{skill.level}%</p></div>
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="liquid"
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: `${skill.level}%`,
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 0,
|
||||||
|
background: "linear-gradient(45deg, #7400a9, #411357)",
|
||||||
|
borderTop: "4px solid rgba(255, 255, 255, 0.6)",
|
||||||
|
animation: `wave ${skill.waveSpeed} infinite ease-in-out`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p style={{marginTop: "10px", fontSize: "1rem"}}>{skill.level}%</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p style={{ marginTop: "10px", fontSize: "1rem" }}>{skill.name}</p>
|
<p style={{marginTop: "10px", fontSize: "1rem"}}>{skill.name}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user