memperbaiki css dan js

Author: MuhammadMallq

index.html

@@ -33,7 +33,7 @@ <h1 class="fade-in">Muhammad Malik Nur</h1>
         <img src="img/Mall.png" alt="Gambar Profil" class="project-image small">
         <h2>Tentang Saya</h2>
         <p>Saya adalah seorang mahasiswa Teknik Informatika yang memiliki ketertarikan dalam pengembangan web, keamanan siber, dan kecerdasan buatan.</p>
-        <p>Saat ini berkuliah di Universitas Logistik dan Bisnis Internasional di Bandung.</p>
+        <p>Saat saya ini berkuliah di Universitas Logistik dan Bisnis Internasional di Bandung.</p>
 
         <h3>Riwayat Pendidikan</h3>
         <ul>
@@ -76,18 +76,6 @@ <h2>Keahlian Pemrograman</h2>
                     <img src="img/Canva.png" alt="Canva">
                     <p>Canva (desain grafis daring yang memungkinkan penggunanya untuk membuat berbagai macam desain).</p>
                 </div>
-                <!-- Duplikat untuk looping mulus -->
-                <div class="skill-item">
-                    <img src="img/html.png" alt="HTML">
-                    <p>HTML (membuat struktur halaman web).</p>
-                </div>
-                <div class="skill-item">
-                    <img src="img/css.png" alt="CSS">
-                    <p>CSS (mengatur tampilan dan desain sebuah halaman web). </p>
-                </div>
-                <div class="skill-item">
-                    <img src="img/javascript.png" alt="JavaScript">
-                    <p>JavaScript (interaktivitas dan fungsi dinamis ke halaman web).</p>
             </div>
         </div>
     </section>
@@ -97,12 +85,18 @@ <h2>Projects</h2>
         <div class="projects-container">
             <div class="project">
                 <h3>Project Website UMKM</h3>
-                <a href="https://iceetheaa.id.biz.id/" target="_blank">
-                    <img src="img/proyek1.png" alt="Gambar Website" class="project-image">
-                </a>
-                <a href="https://dedgecoffee.id.biz.id/" target="_blank">
-                    <img src="img/proyek2.png" alt="Gambar Website" class="project-image">
-                </a>
+                <div class="project-item">
+                    <a href="https://iceetheaa.id.biz.id/" target="_blank">
+                        <img src="img/proyek1.png" alt="Gambar Website" class="project-image">
+                    </a>
+                    <p>Website untuk bisnis minuman Ice Theaa dengan menu lengkap dan desain menarik.</p>
+                </div>
+                <div class="project-item">
+                    <a href="https://dedgecoffee.id.biz.id/" target="_blank">
+                        <img src="img/proyek2.png" alt="Gambar Website" class="project-image">
+                    </a>
+                    <p>Website D'edge Coffee dengan tampilan elegan dan fitur pemesanan online.</p>
+                </div>
             </div>
         </div>
     </section>

script.js

@@ -61,3 +61,13 @@ document.addEventListener("DOMContentLoaded", () => {
     typeEffect();
 });
 
+document.addEventListener("DOMContentLoaded", function () {
+    const track = document.querySelector(".carousel-track");
+    const items = Array.from(track.children);
+    
+    // Gandakan isi slider agar tidak ada celah kosong
+    items.forEach(item => {
+        const clone = item.cloneNode(true);
+        track.appendChild(clone);
+    });
+});

styles.css

@@ -192,29 +192,46 @@ nav:hover {
     overflow: hidden;
     width: 100%;
     position: relative;
+    white-space: nowrap;
 }
 
 .carousel-track {
     display: flex;
     gap: 20px;
-    animation: scroll-left 10s linear infinite;
+    width: max-content;
+    animation: scroll-loop 10s linear infinite;
 }
 
 .skill-item {
     flex: 0 0 auto;
     width: 200px;
     text-align: center;
+    white-space: normal;
 }
 
-@keyframes scroll-left {
+/* Animasi geser ke kiri terus tanpa jeda */
+@keyframes scroll-loop {
     from {
         transform: translateX(0);
     }
     to {
-        transform: translateX(-55%);
+        transform: translateX(-50%);
     }
 }
 
+
+
+/* Duplikat konten untuk menciptakan efek loop */
+.carousel-track::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 100%;
+}
+
+
 /* Bagian Tentang Saya */
 #about {
     text-align: center;