diff --git a/images/coder.jpg b/images/coder.jpg new file mode 100644 index 0000000..c34f435 Binary files /dev/null and b/images/coder.jpg differ diff --git a/images/involv copy.webp b/images/involv copy.webp new file mode 100644 index 0000000..d4d526c Binary files /dev/null and b/images/involv copy.webp differ diff --git a/index.html b/index.html index 4107bde..e51a31c 100644 --- a/index.html +++ b/index.html @@ -6,61 +6,90 @@ Featured Projects - + -
- -
- -
-

EarthLink Fiber Internet

-

Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance.

-
-
-

Evil Genius Games

-

Evil Genius Games redefines immersive gaming experiences with their innovative tabletop RPGs. Our collaboration focused on creating a seamless digital platform to support their creative storytelling and gaming mechanics.

-
-
-

Involvvely

-

Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication. We developed a platform that empowers teams to work smarter and achieve their goals efficiently.

-
- -
-
-
-
+
+ +
+
+
+
+ EarthLink +
+
+ Evil Genius +
+
+ Involvvely +
+
+ Coder Page +
+
+
+
+
- -
-
- EarthLink Project -
-
- Evil Genius Project -
-
- Involvvely Project + +
+
+
+
+
+

EarthLink Fiber Internet

+

EarthLink epitomizes leadership in digital innovation, blending advanced technology with unbeatable connectivity.

+
+
+
+
+

Evil Genius Games

+

Evil Genius Games redefines immersive gaming experiences with innovative tabletop RPGs.

+
+
+
+
+

Involvvely

+

Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication.

+
+
+
+
+

Coder Page

+

Coder paragraph for the user-defined data, for the proper functionaling.

+
+
+
+
- 3M Logo - Barstool Store Logo - Budweiser Logo - Buzzfeed Logo - Forbes Logo - Macy's Logo - Men's Health Logo - MrBeast Logo + 3M Logo + Barstool Store Logo + Budweiser Logo + Buzzfeed Logo + Forbes Logo + Macy's Logo + Men's Health Logo + MrBeast Logo + + 3M Logo + Barstool Store Logo + Budweiser Logo + Buzzfeed Logo + Forbes Logo + Macy's Logo + Men's Health Logo + MrBeast Logo
- + diff --git a/scripts.js b/scripts.js index 0061c4f..aceccf5 100644 --- a/scripts.js +++ b/scripts.js @@ -1,71 +1,49 @@ -// Clone the logos-slide and append it -var copy = document.querySelector(".logos-slide").cloneNode(true); -document.querySelector(".logos").appendChild(copy); +document.addEventListener('DOMContentLoaded', function () { + // Select the logos container + const logosSlide = document.querySelector('.logos-slide'); -// Initialize Swiper instance -const swiper = new Swiper(".swiper-container", { - slidesPerView: 1, - spaceBetween: 10, - pagination: { - el: ".swiper-pagination", - clickable: true, - }, - navigation: { - nextEl: ".swiper-button-next", - prevEl: ".swiper-button-prev", - }, -}); - -// Get all descriptions and pagination buttons -const descriptions = document.querySelectorAll(".project-description"); -const paginationButtons = document.querySelectorAll(".pagination-button"); -const images = document.querySelectorAll(".swiper-slide img"); // Select all images within slides - -// Function to update the displayed content based on the current slide index -function updateContent(index) { - // Hide all descriptions - descriptions.forEach((desc) => { - desc.classList.remove("active"); + // Initialize Swipers + const textSwiper = new Swiper('.text-swiper', { + slidesPerView: 1, + effect: 'fade', + fadeEffect: { crossFade: true }, + allowTouchMove: true, // Allow text swiper to be swiped manually }); - // Show the current description - const selectedDescription = document.getElementById(`description-${index}`); - if (selectedDescription) { - selectedDescription.classList.add("active"); - } - - // Update pagination active class - paginationButtons.forEach((button) => { - button.classList.remove("active"); + const imageSwiper = new Swiper('.image-swiper', { + slidesPerView: 1.5, + centeredSlides: true, + spaceBetween: 30, + initialSlide: 1, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + controller: { + control: textSwiper, // Link image swiper with text swiper + }, }); - if (paginationButtons[index]) { - paginationButtons[index].classList.add("active"); - } - // Move Swiper to the corresponding slide - swiper.slideTo(index); -} + // Synchronize both swipers by controlling each other + textSwiper.controller.control = imageSwiper; -// Listen for Swiper slide change event -swiper.on("slideChange", () => { - const currentIndex = swiper.realIndex; - updateContent(currentIndex); -}); + // Stop animation on mouseover + logosSlide.addEventListener('mouseover', () => { + logosSlide.style.animationPlayState = 'paused'; + }); -// Event listeners for pagination buttons -paginationButtons.forEach((button, index) => { - button.addEventListener("click", () => { - updateContent(index); // Update content and slide + // Resume animation on mouseleave + logosSlide.addEventListener('mouseleave', () => { + logosSlide.style.animationPlayState = 'running'; + }); + + // Pause and resume on click + logosSlide.addEventListener('click', () => { + const currentState = logosSlide.style.animationPlayState; + logosSlide.style.animationPlayState = (currentState === 'paused' || currentState === '') ? 'running' : 'paused'; }); }); - -// Event listeners for image clicks -images.forEach((image) => { - image.addEventListener("click", (event) => { - const index = parseInt(event.target.closest(".swiper-slide").getAttribute("data-index"), 10); - updateContent(index); // Update content and slide - }); -}); - -// Initialize the content (first image and description are visible) -updateContent(swiper.realIndex); diff --git a/styles.css b/styles.css index 572047d..c634664 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/* General Reset */ * { margin: 0; padding: 0; @@ -5,169 +6,96 @@ } body { + font-family: 'Roboto', sans-serif; background: #f2f2f2; } -@keyframes slide { - from { - transform: translateX(0); +/* Container for Swipers */ +.container { + max-width: 1200px; + margin: 0 auto; + display: flex; + gap: 30px; + padding: 20px; +} + +.image-swiper-container { + width: 60%; +} + +.text-swiper-container { + width: 40%; +} + +.image-swiper img { + width: 100%; + height: 400px; + object-fit: cover; + border-radius: 10px; +} + +.text-content { + padding: 30px; + background: #f5f5f5; + height: 400px; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 10px; +} + +.text-content h2 { + margin-bottom: 20px; + color: #333; + font-size: 24px; +} + +.text-content p { + color: #666; + line-height: 1.6; +} + +@media (max-width: 768px) { + .container { + flex-direction: column; } - to { - transform: translateX(-100%); + .image-swiper-container, + .text-swiper-container { + width: 100%; } } +/* Logos Section */ .logos { + width: 100%; overflow: hidden; - padding: 60px 0; + padding: 40px 0; background: white; - white-space: nowrap; position: relative; } -.logos:before, -.logos:after { - position: absolute; - top: 0; - width: 250px; - height: 100%; - content: ""; - z-index: 2; -} - -.logos:before { - left: 0; - background: linear-gradient(to left, rgba(255, 255, 255, 0), white); -} - -.logos:after { - right: 0; - background: linear-gradient(to right, rgba(255, 255, 255, 0), white); -} - -.logos:hover .logos-slide { - animation-play-state: paused; -} - .logos-slide { - display: inline-block; - animation: 35s slide infinite linear; + display: flex; + gap: 40px; + animation: scroll 30s linear infinite; + animation-play-state: running; /* Default state: running */ } .logos-slide img { height: 50px; - margin: 0 40px; + object-fit: contain; + transition: transform 0.3s ease; } -body { - background: #f2f2f2; - display: flex; - flex-direction: column; - min-height: 100vh; +.logos-slide img:hover { + transform: scale(1.1); } -.featured-projects { - display: flex; - justify-content: space-between; - padding: 20px; - background-color: white; - margin-bottom: 20px; - border-radius: 10px; - width: 80%; - max-width: 1200px; - margin: 20px auto; - flex-grow: 1; -} - -.swiper { - display: flex; - justify-content: space-between; - width: 100%; - gap: 20px; -} - -.swiper-slide { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - transition: transform 0.5s ease-in-out; -} - -.swiper-slide img { - width: 100%; - height: auto; - max-width: 250px; - height: 300px; - object-fit: cover; - border-radius: 10px; - transition: transform 0.5s, box-shadow 0.5s; -} - -.swiper-slide img:hover { - transform: scale(1.05); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); -} - -.description-container { - width: 35%; - padding-left: 20px; - display: flex; - flex-direction: column; - justify-content: center; -} - -.project-description { - text-align: left; - display: none; -} - -.project-description.active { - display: block; -} - -.pagination-container { - display: flex; - justify-content: center; - margin-top: 20px; -} - -.pagination-button { - width: 12px; - height: 12px; - margin: 0 5px; - border-radius: 50%; - background-color: #888; - cursor: pointer; - transition: background-color 0.3s; -} - -.pagination-button.active { - background-color: #333; -} - -@media (max-width: 768px) { - .featured-projects { - flex-direction: column; +@keyframes scroll { + 0% { + transform: translateX(0); } - - .swiper { - width: 100%; - margin-bottom: 20px; - } - - .description-container { - width: 100%; - } - - .swiper-slide img { - width: 100%; + 100% { + transform: translateX(-50%); } } - -footer { - background-color: #fff; - padding: 20px; - text-align: center; - margin-top: 20px; -}