Skip to content
This repository was archived by the owner on Jun 29, 2025. It is now read-only.

Commit 7fd2b77

Browse files
sayuru-akashsayuru-akash
committed
Update index.html
1 parent e0bcdb4 commit 7fd2b77

File tree

1 file changed

+98
-15
lines changed

1 file changed

+98
-15
lines changed

‎index.html

Lines changed: 98 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,36 @@
193193
box-shadow: 0 25px 50px rgba(139, 92, 246, 0.25);
194194
}
195195

196+
/* Mobile-specific styles */
197+
@media (max-width: 768px) {
198+
.mobile-vertical {
199+
flex-direction: column !important;
200+
width: 100vw !important;
201+
height: auto !important;
202+
transform: none !important;
203+
transition: none !important;
204+
}
205+
206+
.mobile-vertical section {
207+
width: 100vw !important;
208+
height: 100vh !important;
209+
min-height: 100vh;
210+
}
211+
212+
.scroll-indicator {
213+
display: none;
214+
}
215+
216+
body {
217+
overflow-y: auto;
218+
overflow-x: hidden;
219+
}
220+
221+
.card-hover:hover {
222+
transform: none;
223+
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.15);
224+
}
225+
}
196226
/* Progress indicator */
197227
.progress-dot {
198228
transition: all 0.3s ease;
@@ -233,7 +263,9 @@
233263
};
234264
</script>
235265
</head>
236-
<body class="bg-slate-900 text-slate-200 overflow-hidden font-inter">
266+
<body
267+
class="bg-slate-900 text-slate-200 overflow-hidden md:overflow-hidden font-inter"
268+
>
237269
<!-- Progress Indicator -->
238270
<div class="scroll-indicator">
239271
<div class="flex flex-col space-y-3">
@@ -289,7 +321,7 @@
289321

290322
<main
291323
id="slider-container"
292-
class="flex w-[1100vw] h-screen transition-transform duration-1000 relative z-10"
324+
class="flex w-[1100vw] h-screen transition-transform duration-1000 relative z-10 md:flex-row flex-col md:w-[1100vw] w-screen md:h-screen h-auto"
293325
style="transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1)"
294326
>
295327
<!-- Slide 1: Hero -->
@@ -879,6 +911,51 @@ <h4 class="text-blue-400 font-semibold text-xl mb-2">
879911
let currentSlide = 0;
880912
const totalSlides = 10;
881913
let isThrottled = false;
914+
let isMobile = window.innerWidth <= 768;
915+
916+
// Check if mobile on resize
917+
window.addEventListener("resize", () => {
918+
const wasMobile = isMobile;
919+
isMobile = window.innerWidth <= 768;
920+
921+
if (wasMobile !== isMobile) {
922+
setupLayout();
923+
}
924+
});
925+
926+
// Setup layout based on device
927+
function setupLayout() {
928+
if (isMobile) {
929+
slider.classList.add("mobile-vertical");
930+
slider.style.transform = "none";
931+
document.body.style.overflow = "auto";
932+
document.body.style.overflowX = "hidden";
933+
934+
// Disable horizontal scrolling functionality
935+
window.removeEventListener("wheel", handleScroll);
936+
window.removeEventListener("keydown", handleKeyPress);
937+
938+
// Hide progress dots on mobile
939+
progressDots.forEach((dot) => {
940+
dot.style.display = "none";
941+
});
942+
} else {
943+
slider.classList.remove("mobile-vertical");
944+
document.body.style.overflow = "hidden";
945+
946+
// Enable horizontal scrolling functionality
947+
window.addEventListener("wheel", handleScroll, { passive: true });
948+
window.addEventListener("keydown", handleKeyPress);
949+
950+
// Show progress dots on desktop
951+
progressDots.forEach((dot) => {
952+
dot.style.display = "block";
953+
});
954+
955+
// Reset to current slide position
956+
slider.style.transform = `translateX(-${currentSlide * 100}vw)`;
957+
}
958+
}
882959

883960
// Create floating particles
884961
function createParticles() {
@@ -895,6 +972,8 @@ <h4 class="text-blue-400 font-semibold text-xl mb-2">
895972

896973
// Update progress indicator
897974
function updateProgress() {
975+
if (isMobile) return; // Don't update progress on mobile
976+
898977
progressDots.forEach((dot, index) => {
899978
if (index === currentSlide) {
900979
dot.classList.add("active");
@@ -904,9 +983,9 @@ <h4 class="text-blue-400 font-semibold text-xl mb-2">
904983
});
905984
}
906985

907-
// Handle scroll with improved smoothness
986+
// Handle scroll with improved smoothness (desktop only)
908987
function handleScroll(event) {
909-
if (isThrottled) return;
988+
if (isMobile || isThrottled) return;
910989
isThrottled = true;
911990
setTimeout(() => {
912991
isThrottled = false;
@@ -924,8 +1003,10 @@ <h4 class="text-blue-400 font-semibold text-xl mb-2">
9241003
updateProgress();
9251004
}
9261005

927-
// Handle keyboard navigation
1006+
// Handle keyboard navigation (desktop only)
9281007
function handleKeyPress(event) {
1008+
if (isMobile) return;
1009+
9291010
if (event.key === "ArrowRight" || event.key === " ") {
9301011
event.preventDefault();
9311012
if (currentSlide < totalSlides - 1) {
@@ -943,44 +1024,41 @@ <h4 class="text-blue-400 font-semibold text-xl mb-2">
9431024
}
9441025
}
9451026

946-
// Handle progress dot clicks
1027+
// Handle progress dot clicks (desktop only)
9471028
progressDots.forEach((dot, index) => {
9481029
dot.addEventListener("click", () => {
1030+
if (isMobile) return;
9491031
currentSlide = index;
9501032
slider.style.transform = `translateX(-${currentSlide * 100}vw)`;
9511033
updateProgress();
9521034
});
9531035
});
9541036

955-
// Initialize
956-
window.addEventListener("wheel", handleScroll, { passive: true });
957-
window.addEventListener("keydown", handleKeyPress);
958-
createParticles();
959-
updateProgress();
960-
961-
// Add touch/swipe support for mobile
1037+
// Touch/swipe support (desktop only - mobile uses native scroll)
9621038
let touchStartX = 0;
9631039
let touchEndX = 0;
9641040

9651041
slider.addEventListener("touchstart", (e) => {
1042+
if (isMobile) return;
9661043
touchStartX = e.changedTouches[0].screenX;
9671044
});
9681045

9691046
slider.addEventListener("touchend", (e) => {
1047+
if (isMobile) return;
9701048
touchEndX = e.changedTouches[0].screenX;
9711049
handleSwipe();
9721050
});
9731051

9741052
function handleSwipe() {
1053+
if (isMobile) return;
1054+
9751055
const swipeThreshold = 50;
9761056
const diff = touchStartX - touchEndX;
9771057

9781058
if (Math.abs(diff) > swipeThreshold) {
9791059
if (diff > 0 && currentSlide < totalSlides - 1) {
980-
// Swipe left - go to next slide
9811060
currentSlide++;
9821061
} else if (diff < 0 && currentSlide > 0) {
983-
// Swipe right - go to previous slide
9841062
currentSlide--;
9851063
}
9861064
slider.style.transform = `translateX(-${currentSlide * 100}vw)`;
@@ -1003,6 +1081,11 @@ <h4 class="text-blue-400 font-semibold text-xl mb-2">
10031081
});
10041082
}, observerOptions);
10051083

1084+
// Initialize
1085+
createParticles();
1086+
setupLayout();
1087+
updateProgress();
1088+
10061089
// Observe all animated elements
10071090
document.querySelectorAll(".card-hover, .glass").forEach((el) => {
10081091
observer.observe(el);

0 commit comments

Comments
 (0)