Updated projets and functionality of projects

joshuawereley · Dec 23, 2024 · f9f7711 · f9f7711
1 parent c862755
commit f9f7711
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 8 deletions.
diff --git a/css/style.css b/css/style.css
@@ -387,8 +387,10 @@ section {
 }
 
 .project-image {
-   max-width: 100%;
-   height: auto;
+   width: 100%;
+   height: 200px;
+   object-fit: cover;
+   object-position: center;
    border-radius: 1rem;
    border: 10px solid rgba(225, 225, 225, 0.25);
 }
@@ -404,6 +406,141 @@ section {
    box-shadow: var(--card-shadow);
 }
 
+.modal {
+   display: none;
+   position: fixed;
+   z-index: 10000;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0, 0, 0, 0.9);
+   overflow-y: auto;
+}
+
+.modal-content {
+   position: relative;
+   background: var(--background-1);
+   margin: 5% auto;
+   padding: 2rem;
+   width: 80%;
+   max-width: 800px;
+   border-radius: 1rem;
+   border-top: var(--card-lighting);
+   border-left: var(--card-lighting);
+   box-shadow: var(--card-shadow);
+   animation: modalFade 0.3s ease-in-out;
+}
+
+@keyframes modalFade {
+   from {
+      opacity: 0;
+      transform: translateY(-20px);
+   }
+   to {
+      opacity: 1;
+      transform: translateY(0);
+   }
+}
+
+.close {
+   position: absolute;
+   right: 1.5rem;
+   top: 1rem;
+   font-size: 2rem;
+   font-weight: bold;
+   color: var(--text-color);
+   cursor: pointer;
+   transition: color 0.3s ease;
+}
+
+.close:hover {
+   color: #888;
+}
+
+.modal-image {
+   width: 100%;
+   height: auto;
+   border-radius: 0.5rem;
+   margin: 1rem 0;
+   border: 5px solid rgba(225, 225, 225, 0.25);
+}
+
+.modal h2 {
+   color: var(--text-color);
+   margin: 0 0 1rem 0;
+   font-size: 2rem;
+}
+
+.modal p {
+   color: var(--text-color);
+   line-height: 1.6;
+   margin: 1rem 0;
+   font-size: 1.1rem;
+}
+
+.modal-links {
+   display: flex;
+   gap: 1rem;
+   margin-top: 1.5rem;
+   flex-wrap: wrap;
+}
+
+.modal-btn {
+   display: inline-block;
+   padding: 0.5rem 0.5rem;
+   border: 3px solid white;
+   border-radius: 0.6rem;
+   color: var(--text-color);
+   text-decoration: none;
+   transition: all 0.3s ease;
+   position: relative;
+   overflow: hidden;
+   z-index: 1;
+   font-weight: bold;
+}
+
+.modal-btn::before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 0;
+   height: 100%;
+   background: var(--background-2);
+   z-index: -1;
+   transition: 0.5s;
+}
+
+.modal-btn:hover::before {
+   width: 100%;
+}
+
+.modal-btn:hover {
+   color: var(--background-1);
+}
+
+.project-block {
+   cursor: pointer;
+   transition: transform 0.3s ease;
+   position: relative;
+   overflow: hidden;
+}
+
+.project-block {
+   cursor: pointer;
+   transition: transform 0.3s ease;
+   position: relative;
+   overflow: hidden;
+}
+
+.project-block h3 {
+   padding-top: 16px;
+}
+.project-block:hover {
+   transform: translateY(-5px);
+}
+
 .education {
    position: relative;
    isolation: isolate;
@@ -770,6 +907,29 @@ textarea {
       transform: translateX(0);
       transition-delay: .25s;
    }
+
+   .modal-content {
+      width: 90%;
+      margin: 10% auto;
+      padding: 1.5rem;
+  }
+
+  .modal h2 {
+      font-size: 1.5rem;
+  }
+
+  .modal p {
+      font-size: 1rem;
+  }
+
+  .modal-btn {
+      padding: 0.6rem 1.2rem;
+      font-size: 0.9rem;
+  }
+
+  .project-image {
+      height: 150px;
+   }
 }
 
 @media (max-width: 520px) {
@@ -868,6 +1028,10 @@ textarea {
    .home-content {
       padding: 20px 10px 20px 10px;
    }
+
+   .project-image {
+      height: 130px;
+  }
 }
 
 @keyframes flicker {

diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/portfolio-website.png b/img/portfolio-website.png
diff --git a/index.html b/index.html
@@ -76,18 +76,58 @@ <h2 class="heading">My Skills</h2>
          <div class="projects-content">
             <h2 class="heading">My Projects</h2>
             <div class="grid-projects">
-               <div class="block">
-                  <img src="img/classconnect.png" alt="portfolio-website" class="project-image"><h3><br>ClassConnect</h3>
+               <div class="project-block" onclick="openModal('classconnect')">
+                  <img src="img/classconnect.png" alt="portfolio-website" class="project-image">
+                  <h3>ClassConnect</h3>
                </div>
-               <div class="block">
-                  <img src="img/kos-banner.png" alt="portfolio-website" class="project-image"><h3><br>Kitchen Of Secrets</h3>
+               <div class="project-block" onclick="openModal('kos')">
+                  <img src="img/kos-banner.png" alt="portfolio-website" class="project-image">
+                  <h3>Kitchen Of Secrets</h3>
                </div>
-               <div class="block">
-                  <img src="img/portfolio-website.png" alt="portfolio-website" class="project-image"><h3><br>My Portfolio</h3>
+               <div class="project-block" onclick="openModal('portfolio')">
+                  <img src="img/portfolio-website.png" alt="portfolio-website" class="project-image">
+                  <h3>My Portfolio</h3>
                </div>
             </div>
          </div>
       </div>
+
+      <!-- Modal Containers -->
+      <div id="classconnect" class="modal">
+         <div class="modal-content">
+            <span class="close" onclick="closeModal('classconnect')">&times;</span>
+            <h2>ClassConnect</h2>
+            <img src="img/classconnect.png" alt="ClassConnect" class="modal-image">
+            <p>ClassConnect is an innovative education platform designed to streamline communication between students and teachers. Built with modern web technologies, it features real-time messaging, assignment management, and resource sharing capabilities.</p>
+            <div class="modal-links">
+               <a href="https://github.com/yourusername/classconnect" target="_blank" class="modal-btn">View on GitHub</a>
+            </div>
+         </div>
+      </div>
+
+      <div id="kos" class="modal">
+         <div class="modal-content">
+            <span class="close" onclick="closeModal('kos')">&times;</span>
+            <h2>Kitchen Of Secrets</h2>
+            <img src="img/kos-banner.png" alt="Kitchen Of Secrets" class="modal-image">
+            <p>Kitchen of Secrets is a game where you have to cook for supernatural creatures. It is a fun and challenging adventure that tests your culinary skills and your knowledge of folklore. You are the owner of a mystical restaurant that caters to a variety of customers, from vampires and werewolves to fairies and dragons.</p>
+            <div class="modal-links">
+               <a href="https://github.com/bukhosi-eugene-mpande/Kitchen-of-Secrets" target="_blank" class="modal-btn">View on GitHub</a>
+            </div>
+         </div>
+      </div>
+
+      <div id="portfolio" class="modal">
+         <div class="modal-content">
+            <span class="close" onclick="closeModal('portfolio')">&times;</span>
+            <h2>My Portfolio</h2>
+            <img src="img/portfolio-website.png" alt="Portfolio Website" class="modal-image">
+            <p>A personal portfolio website built using HTML, CSS, and JavaScript. Features a modern design with smooth animations, responsive layout, and interactive elements. The site showcases my projects, skills, and professional journey.</p>
+            <div class="modal-links">
+               <a href="https://github.com/joshuawereley/portfolio" target="_blank" class="modal-btn">View on GitHub</a>
+            </div>
+         </div>
+      </div>
    </section>
 
    <section class="education" id="education">
@@ -179,6 +219,20 @@ <h2 class="heading">Contact Me!</h2>
       gyroscopeMaxAngleY: 45
 	});
 
+   VanillaTilt.init(document.querySelectorAll(".project-block"),{
+		max: 10,
+		speed: 400,
+      glare: true,
+      "max-glare": 0.5,
+      transition: true,
+      easing: "cubic-bezier(.03,.98,.52,.99)",
+      gyroscope: true,
+      gyroscopeMinAngleX: -45,
+      gyroscopeMaxAngleX: 45,
+      gyroscopeMinAngleY: -45,
+      gyroscopeMaxAngleY: 45
+	});
+
    VanillaTilt.init(document.querySelectorAll(".content"),{
 		max: 5,
 		speed: 400,

diff --git a/js/script.js b/js/script.js
@@ -50,3 +50,36 @@ window.addEventListener('scroll', () => {
    menuIcon.classList.remove('bx-x');
    navbar.classList.remove('active');
 });
+
+// Function to open modal
+function openModal(modalId) {
+   document.getElementById(modalId).style.display = "block";
+   document.body.style.overflow = "hidden"; // Prevent scrolling when modal is open
+}
+
+// Function to close modal
+function closeModal(modalId) {
+   document.getElementById(modalId).style.display = "none";
+   document.body.style.overflow = "auto"; // Re-enable scrolling
+}
+
+// Close modal when clicking outside of it
+window.onclick = function(event) {
+   if (event.target.classList.contains('modal')) {
+       event.target.style.display = "none";
+       document.body.style.overflow = "auto";
+   }
+}
+
+// Close modal when pressing ESC key
+document.addEventListener('keydown', function(event) {
+   if (event.key === 'Escape') {
+       const modals = document.getElementsByClassName('modal');
+       for (let modal of modals) {
+           if (modal.style.display === "block") {
+               modal.style.display = "none";
+               document.body.style.overflow = "auto";
+           }
+       }
+   }
+});