diff --git a/src/app/about/page.js b/src/app/about/page.js index 669d688..659f990 100644 --- a/src/app/about/page.js +++ b/src/app/about/page.js @@ -11,33 +11,65 @@ export default function About() { "I discovered my passion for technology by experimenting with Scratch and creating some simple Games.", }, { - date: "2020", + date: "2022", title: "Exploring Web & Scripting", content: - "Started creating small websites and got into JavaScript, CSS, and working with various scripting languages.", + "Started creating small websites and got into HTML, CSS", }, { date: "2022", - title: "Diving into Game Development", + title: "Raspberry Pi & Python", content: - "Tried Unity and C#, building small 2D and 3D prototypes to expand my skill set.", + "Created some simple Python scripts for my Raspberry Pi, experimenting with the Raspberry Pi OS", }, { date: "2024", title: "Full Stack & Beyond", content: - "Ventured into backend (SQL, Python) and continued refining my frontend abilities, always exploring new challenges.", + "Ventured into backend (SQL, Python, Javascript, Java) and continued refining my frontend abilities.", }, ]; const skills = [ - {name: "JavaScript", level: 80, waveSpeed: "2s"}, - {name: "Python", level: 75, waveSpeed: "2.5s"}, - {name: "C#", level: 50, waveSpeed: "3s"}, - {name: "SQL", level: 85, waveSpeed: "2.2s"}, - {name: "HTML & CSS", level: 70, waveSpeed: "2.7s"}, + { + name: "JavaScript", + level: 80, + waveSpeed: "2s", + progression: [0, 30, 60, 80], + }, + { + name: "Python", + level: 75, + waveSpeed: "2.5s", + progression: [10, 25, 50, 75], + }, + { + name: "Java", + level: 50, + waveSpeed: "3s", + progression: [0, 0, 0, 60], + }, + { + name: "SQL", + level: 85, + waveSpeed: "2.2s", + progression: [0, 0, 0, 85], + }, + { + name: "HTML & CSS", + level: 70, + waveSpeed: "2.7s", + progression: [0, 30, 50, 80], + }, ]; + const getSkillLabel = (level) => { + if (level < 25) return "Beginner"; + if (level < 50) return "Intermediate"; + if (level < 75) return "Advanced"; + return "Expert"; + }; + const sectionRefs = useRef([]); const aboutMeRef = useRef(null); const scrollContainerRef = useRef(null); @@ -62,12 +94,16 @@ export default function About() { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { - if (entry.isIntersecting) { - const index = sectionRefs.current.findIndex((el) => el === entry.target); - if (index !== -1) { - setCurrentSection(index); - setTimelineFinished(index === timelineData.length - 1); - } + const index = sectionRefs.current.findIndex((el) => el === entry.target); + if (entry.isIntersecting && index !== -1) { + setCurrentSection(index); + } + if ( + entry.isIntersecting && + index === timelineData.length - 1 && + entry.intersectionRatio >= 0.8 + ) { + setTimelineFinished(true); } }); }, @@ -150,98 +186,111 @@ export default function About() { width: "100%", height: "100%", scrollBehavior: "smooth", - scrollbarWidth: "none", // Firefox - msOverflowStyle: "none", // IE/Edge + scrollbarWidth: "none", + msOverflowStyle: "none", }} > - {timelineData.map((item, index) => ( -
(sectionRefs.current[index] = el)} - style={{ - flex: "0 0 100%", - scrollSnapAlign: "center", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - padding: "2rem", - boxSizing: "border-box", - }} - > -

{item.title}

-

{item.date}

-

{item.content}

-
- ))} - - - {/* Skills Section*/} - {timelineFinished && ( -
-

My Skills

-
- {skills.map((skill, index) => ( -
-
-
-

{skill.level}%

+ {timelineData.map((item, index) => { + const adjustedSkills = skills.map((s) => { + const stepLevel = s.progression?.[index] ?? 0; + return { + ...s, + level: Math.floor((s.level * stepLevel) / 100), + }; + }); + return ( +
(sectionRefs.current[index] = el)} + style={{ + flex: "0 0 100%", + scrollSnapAlign: "center", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + padding: "2rem", + boxSizing: "border-box", + }} + > +

{item.title}

+

{item.date}

+

+ {item.content} +

+ + {/* SKILLS: show per stage */} +
+
+ {adjustedSkills.filter((s) => s.level > 0).map((skill, sIndex) => ( +
+

+ {skill.name} +

+
+ {getSkillLabel(skill.level)} +
+
+ ))}
-

{skill.name}

-
- ))} -
-
+
+ ); + })} + + {/* End of scroll container */} + {timelineFinished && ( +
- - )} + )} + ) -} \ No newline at end of file +} + diff --git a/src/app/globals.css b/src/app/globals.css index f599512..b8b136e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -276,3 +276,39 @@ body { opacity: 0; } +@keyframes fadeInSkill { + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.skill-card { + opacity: 0; + transform: translateY(10px); + transition: opacity 0.3s ease-out, transform 0.3s ease-out; +} + +.animate-skill { + animation: fadeInSkill 0.6s ease-out forwards; +} + +@keyframes fadeInButton { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.learnMoreButton { + animation: fadeInButton 0.5s ease-out; +} +