Update profile, projects, and skills images sizes

Web-Jose · Mar 1, 2024 · 96b9634 · 96b9634
1 parent e912d7f
commit 96b9634
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -118,7 +118,12 @@
       <section class="HomeSection" id="Home">
         <!-- Profile Section -->
         <div class="square" id="sqrMe">
-          <div class="ProfileIMG"></div>
+          <img
+            src="Index-Uploads/Images/Me2.jpg"
+            alt="Profile Image"
+            draggable="false"
+            class="ProfileIMG"
+          />
           <h1 class="Title">Code By Jose</h1>
           <span class="sub-text">Computer Science Undergraduate</span>
           <span class="sub-text">California State University of Fresno</span>
@@ -136,7 +141,12 @@ <h1 class="Title">Code By Jose</h1>
 
         <!-- Recent Projects Section -->
         <div class="square" id="sqrPro">
-          <div class="ProjectsIMG"></div>
+          <img
+            src="Index-Uploads/Images/Menu-Signage.png"
+            alt="Projects Image"
+            draggable="false"
+            class="ProjectsIMG"
+          />
           <h1 class="Title">Recent Projects</h1>
           <div class="sub-text">
             For Fresno State Student Housing, digital signage is used to display
@@ -156,7 +166,12 @@ <h1 class="Title">Recent Projects</h1>
 
         <!-- Skills Section -->
         <div class="square" id="sqrSki">
-          <div class="SkillIMG"></div>
+          <img
+            src="Index-Uploads/Images/Coding.jpg"
+            alt="Skills Image"
+            draggable="false"
+            class="SkillIMG"
+          />
           <h1 class="Title">Technical Skills</h1>
           <div class="skills">
             <div class="row">

diff --git a/portfolio.css b/portfolio.css
@@ -177,35 +177,25 @@ body {
   flex-direction: column;
   align-items: center;
 }
-.ProfileIMG {
-  background-image: url(Index-Uploads/Images/Me2.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 100%;
-  padding-top: 100%;
+.ProfileIMG,
+.ProjectsIMG,
+.SkillIMG {
   margin-top: -10em;
   border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+}
+.ProfileIMG {
+  width: 17.3em;
+  height: 17.3em;
 }
 .ProjectsIMG {
-  background-image: url(Index-Uploads/Images/Menu-Signage.png);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 70%;
-  padding-top: 70%;
-  margin-top: -10em;
-  border-radius: 50%;
+  width: 12.1em;
+  height: 12.1em;
 }
 .SkillIMG {
-  background-image: url(Index-Uploads/Images/Coding.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 70%;
-  padding-top: 70%;
-  margin-top: -10em;
-  border-radius: 50%;
+  width: 12.1em;
+  height: 12.1em;
 }
 .sub-text {
   color: #d2d9d8;
@@ -671,6 +661,19 @@ footer textarea {
   #sqrSki {
     order: 3;
   }
+
+  .ProfileIMG {
+    width: 21.25em;
+    height: 21.25em;
+  }
+  .ProjectsIMG {
+    width: 14.875em;
+    height: 14.875em;
+  }
+  .SkillIMG {
+    width: 14.875em;
+    height: 14.875em;
+  }
   .Courses::before {
     display: none;
   }
@@ -745,16 +748,22 @@ footer textarea {
   .square {
     width: 41%;
   }
+  .ProfileIMG {
+    width: 19.7em;
+    height: 19.7em;
+  }
   .ProjectsIMG {
+    width: 13.8em;
+    height: 13.8em;
     margin-top: -9em;
   }
-  #Home {
-    margin-top: -17em;
-  }
   .SkillIMG {
+    width: 13em;
+    height: 13em;
     margin-top: -8em;
-    width: 30%;
-    padding-top: 30%;
+  }
+  #Home {
+    margin-top: -17em;
   }
   #sqrSki {
     margin-top: 8em;