Update web design and experience section

Author: Web-Jose

index.html

@@ -566,52 +566,80 @@ <h1 class="Title">Education</h1>
         </div>
       </section>
 
-      <!-- Scroll to next section 
+      <!-- Scroll to next section -->
       <a href="#experience" class="scroll-to-button">
         <i class="fa-solid fa-angles-down"></i>
       </a>
 
-      <!-- Experience Section 
+      <!-- Experience Section -->
       <section class="ExperienceSection" id="experience">
         <h1 class="Title" id="AltTitle">Experience</h1>
         <div class="ExperienceContainer">
           <div class="Experience">
             <div class="ExpTitle">
-              <span>Web Designer with Fresno State Student Housing</span>
-              <span>May 2023 - Present</span>
+              <span class="JobTitle"
+                >Web Designer/ Developer with Fresno State Student Housing</span
+              >
+              <span class="JobDate">May 2023 - Present</span>
             </div>
             <div class="ExpInfo">
               <span>
-                As a Web Designer, I am responsible for designing, coding, and
-                modifying the Student Housing website. I work closely with the
-                Student Housing team to ensure that the website is up-to-date
-                and user-friendly. I also collaborate with the Student Housing
-                Marketing team to ensure that the website is aesthetically
-                pleasing and consistent with the Student Housing brand.
+                As the Web Designer for Fresno State Student Housing, I play a
+                critical role in enhancing the digital presence and user
+                experience for our campus community. Under the direct
+                supervision of the Marketing and Summer Conference Coordinator,
+                my responsibilities are tailored to support the vibrant and
+                dynamic environment of Student Housing through strategic web
+                design and maintenance.
               </span>
-              <br />
-              <span>My responsibilities include:</span>
+              <span style="font-weight: bold"
+                >My responsibilities include:</span
+              >
               <ul>
                 <li>
-                  Designing and implementing new features and functionality
+                  Overseeing the planning, development, and routine maintenance
+                  of the Student Housing website to align with marketing
+                  objectives and user expectations.
+                </li>
+                <li>
+                  Designing and implementing user-friendly features and
+                  functionalities, focusing on the ease of navigation,
+                  interaction, and accessibility, to foster an engaging online
+                  experience.
                 </li>
-                <li>Establishing and guiding the website’s architecture</li>
                 <li>
-                  Ensuring high-performance and availability, and managing all
-                  technical aspects of the CMS
+                  Collaborating closely with the Student Housing and Marketing
+                  teams to ensure the website's content, usability, and design
+                  are up-to-date and reflect the brand's values and aesthetics.
                 </li>
                 <li>
-                  Helping formulate an effective, responsive design and turning
-                  it into a working theme and plugin
+                  Troubleshooting and resolving website operational issues,
+                  maintaining high performance and availability, and managing
+                  technical aspects of the CMS.
                 </li>
                 <li>
-                  Working closely with both the Student Housing and Marketing
-                  teams to ensure that the website is up-to-date and
-                  user-friendly
+                  Enhancing the visual appeal and functionality of the website
+                  through graphic design, layout adjustments, and content
+                  updates.
+                </li>
+                <li>
+                  Maintaining digital signage content, ensuring the information
+                  is current and visually appealing to enhance resident
+                  engagement.
                 </li>
               </ul>
             </div>
           </div>
+          <!--
+          <div class="ExpMetric">
+            <i class="fa-solid fa-user"></i>
+            <div class="MetricInfo">
+              <span
+                >Increased the amount of visitors by 10% through the
+                implementation of creating more resident oriented content.</span
+              >
+            </div>
+          </div>-->
         </div>
       </section>
 

portfolio.css

@@ -322,8 +322,8 @@ section[id] {
   align-items: center;
 }
 .ExperienceContainer {
-  display: flex;
   width: 94%;
+  display: flex;
 }
 .Experience {
   display: flex;
@@ -351,6 +351,14 @@ section[id] {
   color: #d2d9d8;
   margin: 0.25em 0;
   width: 100%;
+  gap: 0.5em;
+}
+
+ul {
+  margin: 0;
+}
+ul li {
+  line-height: 1.25;
 }
 
 /* Projects Section */
@@ -643,7 +651,12 @@ footer textarea {
   }
   .ExpTitle {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.25rem;
+    margin: 0;
+  }
+  .JobDate {
+    font: bold 0.75em "Lato";
+    text-align: right;
   }
   .card {
     width: 90%;

projects/projects.css

@@ -135,16 +135,12 @@ body {
   width: 95%;
   background-color: #204359;
   border-radius: 0.625em;
+  overflow: hidden;
 }
 
 .project-image {
   width: 35%;
-}
-
-.project-image img {
-  width: 100%;
-  height: auto;
-  border-radius: 0.625em;
+  object-fit: cover;
 }
 
 .project-info {

projects/projects.js

@@ -37,27 +37,25 @@ function displayProjects(data) {
       projectElement.classList.add("project");
 
       // Create the project image
-      const projectImageContainer = document.createElement("div");
-      projectImageContainer.classList.add("project-image");
       const projectImage = document.createElement("img");
+      projectImage.classList.add("project-image");
       projectImage.src = `../` + project.backgroundImage;
       projectImage.alt = project.cardName;
-      projectImageContainer.appendChild(projectImage);
 
       // Create the project information
       const projectInfo = document.createElement("div");
       projectInfo.classList.add("project-info");
       projectInfo.innerHTML = `
-        <h3>${project.cardName}</h3>
-        <p>${project.description}</p>
+        <span class="ProjectTitle">${project.cardName}</span>
+        <span class="ProjectDesc">${project.description}</span>
         <div class="buttons">
           <a href="${project.liveDemoLink}" target="_blank">Live Demo</a>
           <a href="${project.sourceCodeLink}" target="_blank">Source Code</a>
         </div>
       `;
 
       // Add the image and information to the project element
-      projectElement.appendChild(projectImageContainer);
+      projectElement.appendChild(projectImage);
       projectElement.appendChild(projectInfo);
 
       // Add the project to the container