Update

CSS/desktopstyle.css

@@ -115,7 +115,7 @@ a {
 .headlines {
   display: flex;
   background-image: none;
-  width: 100vw;
+  /* width: 100vw; */
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -194,16 +194,16 @@ a {
 }
 
 .popup {
-  display: block;
-  bottom: 0%;
-  left: 6%;
+  /* display: block; */
+  /* bottom: 0%; */
+  /* left: 6%; */
   margin: 2%;
-  position: fixed;
+  top: 0;
+  position: absolute;
   background-color: #fff;
   z-index: 1;
   border-radius: 7px;
-  height: 100%;
-  width: 80%;
+  /* height: 100%; */
 }
 
 .desktop-content {
@@ -239,7 +239,9 @@ a {
 
 .closeImgDiv {
   background-image: none;
-  margin-left: 95%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
 }
 
 .pageX {
@@ -443,12 +445,8 @@ footer {
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 2% 1%;
-
-  /* justify-content: center; */
-
-  /* align-content: center; */
   align-items: center;
-  padding: 2%;
+  /* padding: 2%; */
   margin-top: 0;
   min-height: 150px;
 }
@@ -1066,12 +1064,6 @@ button:active {
     font-size: 1rem;
   }
 
-  .popup {
-    left: 11%;
-    height: 109%;
-    width: 80%;
-  }
-
   .desktop-header {
     gap: 18px;
   }

JS/popupPage.js

@@ -32,14 +32,12 @@ projectBtn.forEach((btn, btnIndex) => {
         </div>
         <div class="thirdSectionDesk">
           <ul class="labels">
-            <li>Codekit</li>
-            <li>GitHub</li>
-            <li>JavaScript</li>
-            <li>Bootstrap</li>
-            <li>Terminal</li>
-            <li>Codepen</li>
+          <li class="small-li" for="html">${projectsarray[cardIndex].technologies[0]}</li>
+          <li class="small-li" for="JS">${projectsarray[cardIndex].technologies[1]}</li>
+          <li class="small-li" for="CSS">${projectsarray[cardIndex].technologies[2]}</li>
+          <li class="big-li" for="Ruby">${projectsarray[cardIndex].technologies[3]}</li>
           </ul>
-          <p class="p-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.</p>
+          <p class="p-1">${projectsarray[cardIndex].description}</p>
         </div>
       </div>
 

JS/projects.js

@@ -2,24 +2,24 @@
 
 export const projectsarray = [
   {
-    Name: 'Multi-Post Stories Gain+Glory',
-    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s./",
-    img: './assests/images/project1-img.svg',
-    technologies: ['HTML', 'JS', 'CSS', 'Ruby&Rails'],
+    Name: 'JavaScript Unit Testing with Jest',
+    description: "In this repo I will be practicing Unit testing for JavaScript app using AAA pattern, and Test Driven Development TDD.",
+    img: './assests/images/jest.svg',
+    technologies: ['Jest', 'JS', 'HTMl','Testing'],
     popupBtn: 'See Project',
-    popImg: './assests/images/Snapshoot Portfolio.svg',
-    liveVersion: 'https://geekyhacks.github.io/My-Personal-Portfolio/',
-    sourecLink: 'https://github.com/GeekyHacks/My-Personal-Portfolio',
+    popImg: './assests/images/jest.svg',
+    liveVersion: 'https://github.com/GeekyHacks/TestingPractice/tree/main',
+    sourecLink: 'https://github.com/GeekyHacks/TestingPractice/tree/main',
   },
   {
-    Name: 'Multi-Post Stories Gain+Glory',
-    description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s./",
-    img: './assests/images/project2-img.svg',
-    technologies: ['HTML', 'JS', 'CSS', 'Ruby&Rails'],
+    Name: 'ToDOList',
+    description: "the project is about adding todo list that can be add, removed, marked, and edit. It will include mainly JS code and sass or styling.",
+    img: './assests/images/todolist.png',
+    technologies: ['HTML', 'JS', 'WebPack', 'Sass'],
     popupBtn: 'See Project',
-    popImg: './assests/images/Snapshoot Portfolio.svg',
-    liveVersion: 'https://geekyhacks.github.io/My-Personal-Portfolio/',
-    sourecLink: 'https://github.com/GeekyHacks/My-Personal-Portfolio',
+    popImg: './assests/images/todolist.png',
+    liveVersion: 'https://github.com/GeekyHacks/ToDoList/dist/index.html',
+    sourecLink: 'https://github.com/GeekyHacks/ToDoList',
   },
   {
     Name: 'Multi-Post Stories Gain+Glory',