From a1e1e899d606a4afe8929d1cd4101caef4072cf7 Mon Sep 17 00:00:00 2001 From: Rifzkhy Date: Fri, 25 Aug 2023 00:10:16 +0700 Subject: [PATCH] fix --- css/global.css | 57 +++++++++++++++++++ index.html | 62 ++++++++++++++------- script/global.js | 123 +++++++++++++++++++++++++++++------------ src/carousel/test.png | Bin 0 -> 176 bytes src/icon/paintnet.webp | Bin 3880 -> 3328 bytes test/index.html | 62 ++++++++++++++++++++- 6 files changed, 244 insertions(+), 60 deletions(-) create mode 100644 src/carousel/test.png diff --git a/css/global.css b/css/global.css index c5012d5..f0afce1 100644 --- a/css/global.css +++ b/css/global.css @@ -75,6 +75,63 @@ body{ } } + .write { + overflow: hidden; + border-right: 2px solid transparent; + width: auto; + padding: 10px 30px; + box-sizing: border-box; + display: inline-block; + max-width: 100%; + word-wrap: break-word; + position: relative; + } + + .write::after { + content: "|"; + position: absolute; + animation: blink-carets 1s infinite; + color: #e3e3e3; + } + +.typing { + display: inline-block; + border-right: 2px solid transparent; +} + +.typing-effect { + animation: typing 1s steps(20, end), blink-caret 0.5s step-end infinite; +} + +@keyframes typing { + from { + width: 0; + } + to { + width: 100%; + } +} + +@keyframes blink-carets { + 0%, + 100% { + opacity: 1; + } /* Fully visible caret at the start and end of the animation */ + 50% { + opacity: 0; + } /* Invisible caret at the middle of the animation */ + } + +@keyframes blink-caret { + from, to { + border-color: transparent; + } + 50% { + border-color: #e3e3e3; + } +} + + .content{ display: none; overflow: hidden; diff --git a/index.html b/index.html index 749399d..8e9a704 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,8 @@ Muhammad Rifzkhy All Fhayed - + + @@ -25,30 +26,30 @@

Hello World!

-

+

Rifzkhy

PORTFOLIO

-
-
+
+

ABOUT ME

-
-
-

MUHAMMAD RIFZKHY ALL FHAYED

-

Hello! I'm Rifzkhy, a Fullstack Developer who is deeply passionate +

+
+

MUHAMMAD RIFZKHY ALL FHAYED

+

Hello! I'm Rifzkhy, a Fullstack Developer who is deeply passionate about 3D modeling, game development, chatbot creation, and digital art. My goal is to create simple and clean solutions that deliver impactful experiences to users.

-
-
-
- +
+
+
- + +
@@ -140,8 +141,8 @@

PROGRAMMING

PROJECT

-
-
+
+
@@ -158,7 +159,7 @@
MatsuriAI
-
+

CERTIFICATE

@@ -184,6 +185,24 @@

AWARD CERTIFICATE

+ +
+
+

SOCIAL MEDIA

+
+ +
+
@@ -200,11 +219,12 @@

AWARD CERTIFICATE

crossorigin="anonymous"> diff --git a/script/global.js b/script/global.js index 881615a..703616a 100644 --- a/script/global.js +++ b/script/global.js @@ -2,74 +2,89 @@ document.addEventListener("contextmenu", (event) => { event.preventDefault(); }); -const texts = ["I'm Rifzkhy", "I'm Programmer", "I'm Desainer"]; +const texts = ["I'm Rifzkhy", "I'm Programmer", "I'm Designer"]; -const typingElement = document.querySelector(".typing"); -let textIndex = 0; +const typingElements = document.querySelectorAll(".typing"); -function type() { +function type(element, text) { let i = 0; - const text = texts[textIndex]; + const typingInterval = setInterval(() => { if (i < text.length) { - typingElement.textContent += text.charAt(i); + element.textContent += text.charAt(i); i++; } else { clearInterval(typingInterval); - setTimeout(erase, 1000); // Wait for a moment before erasing + setTimeout(() => erase(element), 1000); } - }, 200); // Adjust the typing speed by changing the interval (e.g., 50 for faster typing). + }, 200); } -function erase() { +function erase(element) { + const text = element.textContent; + const typingInterval = setInterval(() => { - if (typingElement.textContent.length > 0) { - typingElement.textContent = typingElement.textContent.slice(0, -1); + if (element.textContent.length > 0) { + element.textContent = element.textContent.slice(0, -1); } else { clearInterval(typingInterval); - textIndex = (textIndex + 1) % texts.length; // Move to the next text - setTimeout(type, 500); // Wait for a moment before typing the next text + setTimeout(() => { + textIndex = (textIndex + 1) % texts.length; + type(element, texts[textIndex]); + }, 500); } - }, 50); // Adjust the erasing speed if needed + }, 50); } -window.addEventListener("load", () => { - $(window).on("load", function () { - $("html, body").animate({ scrollTop: 0 }); - $(".loader").fadeOut(1000); - $(".content").fadeIn(1000); - setTimeout(type, 1000); +function checkInView() { + typingElements.forEach((element) => { + const rect = element.getBoundingClientRect(); + if (rect.top >= 0 && rect.bottom <= window.innerHeight) { + // Element is in view, start typing effect + if (element.textContent === "") { + textIndex = (textIndex + 1) % texts.length; + type(element, texts[textIndex]); + } + } else { + // Element is out of view, reset effect + element.textContent = ""; + } }); -}); +} + +// Check if elements are in view when the page loads +checkInView(); + +// Check if elements are in view when the user scrolls +window.addEventListener("scroll", checkInView); +//! Scroll effect const scrollElements = document.querySelectorAll(".js-scroll"); -const elementInView = (el, dividend = 1) => { +function elementInView(el, dividend = 1) { const elementTop = el.getBoundingClientRect().top; - return ( elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend ); -}; +} -const elementOutofView = (el) => { +function elementOutofView(el) { const elementTop = el.getBoundingClientRect().top; - return ( elementTop > (window.innerHeight || document.documentElement.clientHeight) ); -}; +} -const displayScrollElement = (element) => { +function displayScrollElement(element) { element.classList.add("scrolled"); -}; +} -const hideScrollElement = (element) => { +function hideScrollElement(element) { element.classList.remove("scrolled"); -}; +} -const handleScrollAnimation = () => { +function handleScrollAnimation() { scrollElements.forEach((el) => { if (elementInView(el, 1.25)) { displayScrollElement(el); @@ -77,8 +92,44 @@ const handleScrollAnimation = () => { hideScrollElement(el); } }); -}; +} -window.addEventListener("scroll", () => { - handleScrollAnimation(); -}); +// Check if elements are in view when the page loads +handleScrollAnimation(); + +// Check if elements are in view when the user scrolls +window.addEventListener("scroll", handleScrollAnimation); + +//! Writing effect +const elements = document.querySelectorAll(".write"); + +function type(element) { + const text = element.textContent; + element.textContent = ""; + + let i = 0; + + function typeCharacter() { + if (i < text.length) { + element.textContent += text.charAt(i); + i++; + setTimeout(typeCharacter, 200); + } + } + + function checkInView() { + const rect = element.getBoundingClientRect(); + if (rect.top >= 0 && rect.bottom <= window.innerHeight) { + // Element is in view, start typing effect + typeCharacter(); + } + } + + // Check if element is in view when the page loads + checkInView(); + + // Check if element is in view when the user scrolls + window.addEventListener("scroll", checkInView); +} + +elements.forEach(type); diff --git a/src/carousel/test.png b/src/carousel/test.png new file mode 100644 index 0000000000000000000000000000000000000000..ae6ab7f47e8a648dadc1955b28cbe540b4ca3e41 GIT binary patch literal 176 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 b<@VtBOk9l^C*k}L%CgKw^Pm6#lSmHWVopZq delta 3693 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 diff --git a/test/index.html b/test/index.html index 42183d6..6a17515 100644 --- a/test/index.html +++ b/test/index.html @@ -4,10 +4,66 @@ Typing Effect - + -

- +

+ Hello! I'm Rifzkhy, a Fullstack Developer who is deeply passionate about + 3D modeling, game development, chatbot creation, and digital art. My goal + is to create simple and clean solutions that deliver impactful experiences + to users. +

+ +