diff --git a/index.html b/index.html
index cda4478..9dcac8c 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
-
@@ -133,7 +132,7 @@ Description
-
+
@@ -175,8 +174,6 @@
Description
diff --git a/script.js b/script.js
index 2969006..b170ce0 100644
--- a/script.js
+++ b/script.js
@@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", (e) => {
skillsInfo.style.opacity = 0;
setTimeout(() => {
backgroundInfo.style.opacity = 1;
- });
+ },0);
} else {
skillsInfo.style.display = "block";
backgroundInfo.style.display = "none";
@@ -32,10 +32,8 @@ document.addEventListener("DOMContentLoaded", (e) => {
backgroundInfo.style.opacity = 0;
setTimeout(() => {
skillsInfo.style.opacity = 1;
- });
-
+ },0);
}
-
});
@@ -95,13 +93,4 @@ document.addEventListener("DOMContentLoaded", (e) => {
behavior: "smooth",
});
});
-
- const projectContainer = document.querySelector("#projects");
- document.querySelector("#project-prev").addEventListener("click", () => {
- projectContainer.scrollLeft -= 200; // Adjust as needed
- });
-
- document.querySelector("#project-next").addEventListener("click", () => {
- projectContainer.scrollLeft += 200; // Adjust as needed
- });
});
diff --git a/styles.css b/styles.css
index a7a3c54..d8df1fb 100644
--- a/styles.css
+++ b/styles.css
@@ -4,7 +4,15 @@
padding: 0;
box-sizing: border-box;
}
-
+.horizontal-scroll-container {
+ scroll-snap-type: x mandatory;
+ overflow-x: scroll;
+ display: flex;
+ flex-wrap: nowrap;
+ width: 100vw; /* Adjust if needed */
+ height: 100vh; /* Adjust if needed */
+ }
+
body,
html {
height: 100%;
@@ -73,6 +81,7 @@ header {
/* Sections */
section {
margin-bottom: 40px;
+ scroll-snap-align: start;
}
h1,
@@ -224,7 +233,7 @@ img {
.next-button-addon1 {
position: absolute;
left: 170px;
- top: 39px;
+ top: 93px;
width: 30px;
height: 6px;
background-color: #b1b0b0;
