Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rifzkhy
Rifzkhy committed Aug 24, 2023
1 parent 7a28b12 commit a1e1e89
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 60 deletions.
57 changes: 57 additions & 0 deletions css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
62 changes: 41 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
<title>Muhammad Rifzkhy All Fhayed</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
<link href="./css/global.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="./css/global.css" rel="stylesheet">
</link>
<link href="./css/profile.css" rel="stylesheet">
</link>
Expand All @@ -25,30 +26,30 @@ <h1 role="status">Hello World!</h1>
<!-- TODO: Landing page -->
<section>
<div align="center">
<h1 class="typing"></h1>
<h1 class="write">Rifzkhy</h1>
<h4>PORTFOLIO</h4>
</div>
</section>

<!-- TODO: About Me -->
<section class="about" style="background-color: #101010; color: #e3e3e3;">
<div class="jumbotron p-5">
<div class="title pt-5 js-scroll fade-in-bottom" align="center">
<div class="jumbotron p-5" align="center">
<div class="title js-scroll fade-in-bottom">
<h1>ABOUT ME</h1>
</div>
<div class="row justify-content-center">
<div class="col-10">
<h3 class="js-scroll fade-in-bottom">MUHAMMAD RIFZKHY ALL FHAYED</h3>
<p class="js-scroll fade-in-bottom" style="text-align: justify;">Hello! I'm Rifzkhy, a Fullstack Developer who is deeply passionate
<div class="row pt-3 justify-content-center">
<div class="col p-3">
<h3 class="write js-scroll fade-in-bottom">MUHAMMAD RIFZKHY ALL FHAYED</h3>
<p class="write pt-3 js-scroll fade-in-bottom" style="text-align: justify;">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.</p>
</div>
<div class="col" align="center">
<div class="card js-scroll fade-in-bottom" data-tilt>
<!-- <img loading="lazy"src="src/rifzkhy.jpg" class="card-img-top" alt="..."> -->
</div>
<div class="col js-scroll fade-in-bottom">
<div class="card" data-tilt>
<img loading="lazy" src="./src/rifzkhy.webp" class="profile-pics">
<div class="card-body">
<button type="button" class="btn btn-secondary" style="width: 250px;" disabled>Hire me</button>
<button type="button" class="btn btn-secondary" style="width: 250px;" disabled>Profile</button>
<button type="button" class="btn btn-secondary mt-3" style="width: 250px;" disabled>Hire me</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -140,8 +141,8 @@ <h1>PROGRAMMING</h1>
<h1>PROJECT</h1>
</div>
<div class="row pt-3">
<div class="col">
<div class="card js-scroll fade-in-bottom" data-tilt align="center" style="width: 18rem;">
<div class="col js-scroll fade-in-bottom">
<div class="card" data-tilt align="center" style="width: 18rem;">
<img loading="lazy" src="./src/matsuri-ai.webp" class="project-pics">
<img src="./src/whatsapp-background.webp" class="card-img-top">
<div class="card-body">
Expand All @@ -158,7 +159,7 @@ <h5 class="card-title">MatsuriAI</h5>

<!-- TODO: Certificate -->
<section>
<div class="jumbotron p-3">
<div class="jumbotron p-5 ">
<div class="title pt-5 js-scroll fade-in-bottom" align="center">
<h1>CERTIFICATE</h1>
</div>
Expand All @@ -184,6 +185,24 @@ <h1>AWARD CERTIFICATE</h1>
</div>
</section>

<!-- TODO: Social media -->
<section class="project" style="background-color: #101010; color: #e3e3e3;"><div class="jumbotron p-3">
<div class="title pt-5 js-scroll fade-in-bottom" align="center">
<h1>SOCIAL MEDIA</h1>
</div>
<div class="social-media" align="center">
<div class="row p-3">
<div class="col">
<a href="https://www.instagram.com/rifzkhy/" class="btn btn-secondary m-1 js-scroll fade-in-bottom"><i class="bi bi-instagram"></i> Instagram</a>
<a href="https://twitter.com/Rifzkhy" class="btn btn-secondary m-1 js-scroll fade-in-bottom"><i class="bi bi-twitter"></i> Twitter</a>
<a href="https://www.facebook.com/rifzkhy/" class="btn btn-secondary m-1 js-scroll fade-in-bottom"><i class="bi bi-facebook"></i> Facebook</a>
<a href="https://github.com/Rifzkhy" class="btn btn-secondary m-1 js-scroll fade-in-bottom"><i class="bi bi-github"></i> Github</a>
<a href="" class="btn btn-secondary m-1 js-scroll fade-in-bottom"><i class="bi bi-reddit"></i> Reddit</a>
</div>
</div>
</div>
</div></section>

</div>

<script src="script/global.js"></script>
Expand All @@ -200,11 +219,12 @@ <h1>AWARD CERTIFICATE</h1>
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(window).on('load', function () {
$('html, body').animate({ scrollTop: 0 });
$(".loader").fadeOut(1000);
$(".content").fadeIn(1000);
});
$(window).on("load", function () {
$("html, body").animate({ scrollTop: 0 });
$(".loader").fadeOut(1000);
$(".content").fadeIn(1000);
setTimeout(type, 1000);
});
</script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
Expand Down
123 changes: 87 additions & 36 deletions script/global.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,134 @@ 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);
} else if (elementOutofView(el)) {
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);
Binary file added src/carousel/test.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/icon/paintnet.webp
View file
Binary file not shown.
Loading

0 comments on commit a1e1e89

Please sign in to comment.