FURK4NGG
330 lines
11 KiB
JavaScript
330 lines
11 KiB
JavaScript
/*SCROLL REVEALING*/
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const textContainer = document.getElementById('animatedTextContainer');
|
||
const text = "18 yaşında Bilgisayar Mühendisliği okuyan bir üniversite öğrencisiyim. 2020 yılından bu yana kendimi en çok Robotik Kodlama, Mobil Uygulama Geliştirme, Web Sitesi Oluşturma, Siber Güvenlik ve Yapay Zeka Komut İstimi Mühendisliği başta olmak üzere back-end departmanlarında geliştirdim. MEB Robot Yarışmalarına ve TÜBİTAK projelerine de katıldım. Bu deneyimlerime ek olarak Python, Java, C++, C#, CSS, JavaScript, PHP ve SQL gibi programlama dillerini öğrendim. Şu anda yapay zeka ve IoT ile ilgili projeler üzerinde çalışıyorum.İnsanların yaşamlarını olumlu yönde etkileyebilecek ve topluma katkıda bulunabilecek yenilikçi çözümler yaratma konusunda tutkuluyum ve insanlığa hizmet eden yeni fikirleri keşfetmeye her zaman açığım.";
|
||
|
||
// Split text into words and wrap each word in a span
|
||
const words = text.split(' ').map(word => {
|
||
const span = document.createElement('span');
|
||
span.textContent = word;
|
||
span.className = 'word';
|
||
return span;
|
||
});
|
||
|
||
// Append words to the text container
|
||
words.forEach(word => textContainer.appendChild(word));
|
||
});
|
||
|
||
document.addEventListener('scroll', () => {
|
||
const words = document.querySelectorAll('.word');
|
||
const scrollPosition = window.scrollY;
|
||
const windowHeight = window.innerHeight;
|
||
const totalHeight = document.body.scrollHeight;
|
||
|
||
const scrollPercent = scrollPosition*4 / (totalHeight - windowHeight);
|
||
|
||
words.forEach((word, index) => {
|
||
const wordOffset = index / words.length;
|
||
const opacity = Math.min(Math.max((scrollPercent - wordOffset) * 2, 0), 1);
|
||
word.style.color = `rgba(0, 0, 0, ${opacity})`;
|
||
});
|
||
});
|
||
|
||
|
||
/*LAZY LOADING*/
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
const lazyLoadImages = document.querySelectorAll("img.lazy-load");
|
||
|
||
if ("IntersectionObserver" in window) {
|
||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const img = entry.target;
|
||
img.src = img.getAttribute("data-src");
|
||
img.removeAttribute("data-src");
|
||
img.classList.remove("lazy-load");
|
||
observer.unobserve(img);
|
||
}
|
||
});
|
||
});
|
||
|
||
lazyLoadImages.forEach(img => {
|
||
imageObserver.observe(img);
|
||
});
|
||
} else {
|
||
// Fallback for browsers that do not support IntersectionObserver
|
||
const loadImages = () => {
|
||
lazyLoadImages.forEach(img => {
|
||
if (img.getBoundingClientRect().top < window.innerHeight && img.getBoundingClientRect().bottom > 0 && getComputedStyle(img).display !== "none") {
|
||
img.src = img.getAttribute("data-src");
|
||
img.removeAttribute("data-src");
|
||
img.classList.remove("lazy-load");
|
||
}
|
||
});
|
||
};
|
||
|
||
loadImages();
|
||
window.addEventListener("scroll", loadImages);
|
||
window.addEventListener("resize", loadImages);
|
||
}
|
||
});
|
||
|
||
/*SAVE DATA AND RUN OFFLINE*/
|
||
if ('serviceWorker' in navigator) {
|
||
window.addEventListener('load', () => {
|
||
navigator.serviceWorker.register('/service-worker.js')
|
||
.then(registration => {
|
||
console.log('Service Worker registered with scope:', registration.scope);
|
||
})
|
||
.catch(error => {
|
||
console.log('Service Worker registration failed:', error);
|
||
});
|
||
});
|
||
}
|
||
|
||
const toTop = document.querySelector(".to-top");
|
||
|
||
window.addEventListener("scroll", () => {
|
||
if (window.pageYOffset > document.body.scrollHeight/2) {
|
||
toTop.classList.add("active");
|
||
} else {
|
||
toTop.classList.remove("active");
|
||
}
|
||
})
|
||
|
||
window.addEventListener('load', function() {
|
||
const targetElement = document.getElementById('container_1');
|
||
targetElement.scrollIntoView();
|
||
});
|
||
|
||
/*LOADING SCREEN*/
|
||
gsap.fromTo(
|
||
".loading_page",
|
||
{ opacity: 1 },
|
||
{
|
||
opacity: 0,
|
||
display: "none",
|
||
duration: 1.5,
|
||
delay: 3.5,
|
||
}
|
||
);
|
||
|
||
gsap.fromTo(
|
||
".logo_name",
|
||
{
|
||
y: 50,
|
||
opacity: 0,
|
||
},
|
||
{
|
||
y: 0,
|
||
opacity: 1,
|
||
duration: 2,
|
||
delay: 0.5,
|
||
}
|
||
);
|
||
|
||
|
||
/*DARK MODE*/
|
||
const options = {
|
||
bottom: '32px', // default: '32px'
|
||
right: 'unset', // default: '32px'
|
||
left: '15px', // default: 'unset'
|
||
time: '0.5s', // default: '0.3s'
|
||
mixColor: '#fff', // default: '#fff'
|
||
backgroundColor: '', // default: '#fff'
|
||
buttonColorDark: '#100f2c', // default: '#100f2c'
|
||
buttonColorLight: '#fff', // default: '#fff'
|
||
saveInCookies: true, // default: true,
|
||
label: '🌓', // default: ''
|
||
autoMatchOsTheme: true // default: true
|
||
}
|
||
|
||
/*GALLERY IMAGES*/
|
||
var TrandingSlider = new Swiper('.tranding-slider', {
|
||
effect: 'coverflow',
|
||
grabCursor: true,
|
||
centeredSlides: true,
|
||
loop: true,
|
||
slidesPerView: 'auto',
|
||
coverflowEffect: {
|
||
rotate: 0,
|
||
stretch: 0,
|
||
depth: 100,
|
||
modifier: 2.5,
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
}
|
||
});
|
||
|
||
|
||
/*SMOOTH SCROLL FUNCTION*/
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// Tüm anchor linklerini seç
|
||
const links = document.querySelectorAll('a[href^="#"]');
|
||
|
||
// Tıklama olaylarını dinle
|
||
links.forEach(link => {
|
||
link.addEventListener('click', function(event) {
|
||
event.preventDefault(); // Varsayılan davranışı engelle (URL değişimi)
|
||
|
||
// Hedef elementi seç
|
||
const targetId = this.getAttribute('href').substring(1);
|
||
const targetElement = document.getElementById(targetId);
|
||
|
||
if (targetElement) {
|
||
// Smooth scroll işlemini gerçekleştir
|
||
window.scrollTo({
|
||
top: targetElement.offsetTop,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
/*ANIMATED TEXT*/
|
||
const dynamicText = document.querySelector(".h1 span");
|
||
const words = ["Geliştiriciyim", "Sporcuyum", "Müzisyenim"];
|
||
|
||
// Variables to track the position and deletion status of the word
|
||
let wordIndex = 0;
|
||
let charIndex = 0;
|
||
let isDeleting = false;
|
||
|
||
const typeEffect = () => {
|
||
const currentWord = words[wordIndex];
|
||
const currentChar = currentWord.substring(0, charIndex);
|
||
dynamicText.textContent = currentChar;
|
||
dynamicText.classList.add("stop-blinking");
|
||
|
||
if (!isDeleting && charIndex < currentWord.length) {
|
||
// If condition is true, type the next character
|
||
charIndex++;
|
||
setTimeout(typeEffect, 200);
|
||
} else if (isDeleting && charIndex > 0) {
|
||
// If condition is true, remove the previous character
|
||
charIndex--;
|
||
setTimeout(typeEffect, 100);
|
||
} else {
|
||
// If word is deleted then switch to the next word
|
||
isDeleting = !isDeleting;
|
||
dynamicText.classList.remove("stop-blinking");
|
||
wordIndex = !isDeleting ? (wordIndex + 1) % words.length : wordIndex;
|
||
setTimeout(typeEffect, 1200);
|
||
}
|
||
}
|
||
|
||
typeEffect();
|
||
|
||
const coords = { x: 0, y: 0 };
|
||
const circles = document.querySelectorAll(".circle");
|
||
|
||
window.addEventListener("mouseout", function (e) {
|
||
if (!document.body.contains(e.relatedTarget)) {
|
||
// Daireleri gizle
|
||
circles.forEach((circle) => {
|
||
circle.style.visibility = "hidden"; // veya display: none
|
||
});
|
||
}
|
||
});
|
||
|
||
//When the cursor came in the page make visible the circles
|
||
window.addEventListener("mouseover", function (e) {
|
||
circles.forEach((circle) => {
|
||
circle.style.visibility = "visible"; // veya display: block
|
||
});
|
||
});
|
||
|
||
|
||
/*CURSOR*/
|
||
const colors = ["#DCFFB7","#CBFFA9","#D0F5BE","#C3EDC0","#C8E4B2","#D9EDBF","#CDF2CA","#CDF2CA","#C3E5AE","#C7E9B0","#CCD6A6","#B3C99C","#A4BC92","#99B080","#789461","#527853","#4F6F52","#436850","#4F6F52","#294B29","#1A4D2E","#114232"];
|
||
|
||
circles.forEach(function (circle, index) {
|
||
circle.x = 0;
|
||
circle.y = 0;
|
||
circle.style.backgroundColor = colors[index % colors.length];
|
||
});
|
||
|
||
window.addEventListener("mousemove", function(e){
|
||
coords.x = e.clientX;
|
||
coords.y = e.clientY;
|
||
});
|
||
|
||
function animateCircles() {
|
||
|
||
let x = coords.x;
|
||
let y = coords.y;
|
||
|
||
circles.forEach(function (circle, index) {
|
||
circle.style.left = x - 9 + "px";
|
||
circle.style.top = y - 9 + "px";
|
||
|
||
circle.style.scale = (circles.length - index) / circles.length;
|
||
|
||
circle.x = x;
|
||
circle.y = y;
|
||
|
||
const nextCircle = circles[index + 1] || circles[0];
|
||
x += (nextCircle.x - x) * 0.3;
|
||
y += (nextCircle.y - y) * 0.3;
|
||
});
|
||
requestAnimationFrame(animateCircles);
|
||
}
|
||
|
||
animateCircles();
|
||
|
||
/*when see the progress-bar animation*/
|
||
function runOnVisible() {
|
||
const progressBar_1 = document.querySelector(".progress-value_1");
|
||
const progressBar_2 = document.querySelector(".progress-value_2");
|
||
const progressBar_3 = document.querySelector(".progress-value_3");
|
||
const progressBar_4 = document.querySelector(".progress-value_4");
|
||
const progressBar_5 = document.querySelector(".progress-value_5");
|
||
const progressBar_6 = document.querySelector(".progress-value_6");
|
||
const progressBar_7 = document.querySelector(".progress-value_7");
|
||
const progressBar_8 = document.querySelector(".progress-value_8");
|
||
const progressBar_9 = document.querySelector(".progress-value_9");
|
||
|
||
progressBar_1.style.animation = "load_1 3s normal forwards";
|
||
progressBar_2.style.animation = "load_2 3s normal forwards";
|
||
progressBar_3.style.animation = "load_3 3s normal forwards";
|
||
progressBar_4.style.animation = "load_4 3s normal forwards";
|
||
progressBar_5.style.animation = "load_5 3s normal forwards";
|
||
progressBar_6.style.animation = "load_6 3s normal forwards";
|
||
progressBar_7.style.animation = "load_7 3s normal forwards";
|
||
progressBar_8.style.animation = "load_8 3s normal forwards";
|
||
progressBar_9.style.animation = "load_9 3s normal forwards";}
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {runOnVisible();}//Run when see dhe div
|
||
});
|
||
},
|
||
{ threshold: 0.09 } // Divin %9'si göründüğünde tetikler
|
||
);
|
||
const skillsDiv = document.getElementById("skills");
|
||
observer.observe(skillsDiv);
|
||
|
||
/*Disable copy-paste*/
|
||
const disabledKeys = ["c", "C", "x", "J", "u", "I"]; // keys that will be disabled
|
||
const showAlert = e => {
|
||
e.preventDefault(); // preventing its default behaviour
|
||
return alert("Sorry, you can't view or copy source codes this way!");
|
||
}
|
||
document.addEventListener("contextmenu", e => {
|
||
showAlert(e); // calling showAlert() function on mouse right click
|
||
});
|
||
document.addEventListener("keydown", e => {
|
||
// calling showAlert() function, if the pressed key matched to disabled keys
|
||
if((e.ctrlKey && disabledKeys.includes(e.key)) || e.key === "F12") {
|
||
showAlert(e);
|
||
}
|
||
});
|