Update site data and add photos lightbox

_data/experience.yml

@@ -1,3 +1,9 @@
+- job_title: Cyber Security Intern
+  company: WithSecure
+  start_year: 2024
+  end_year: Present
+  description: |
+    Rehired for another internship after a successful performance in 2023, I aim to enhance company resources relating to Kubernetes and other areas of security.
 - job_title: Software Engineer
   company: Freelance
   start_year: 2021
@@ -10,7 +16,7 @@
   end_year: 2023
   description: |
     First undertaking class-leading training in various aspects of cyber security - from web applications to networks - I completed a research project focusing on automating the identification of attack paths and potential privilege escalation in IBM's mainframe operating system, z/OS. This culminated in presenting my findings (and the tool I had developed) to the company's global consulting team, building on the knowledge I gained from consulting workshops I also attended.
-- job_title: Student Ambassador
+- job_title: Student Ambassador / Lead Student Ambassador
   company: University of Southampton
   start_year: 2022
   end_year: Present

_includes/head.html

@@ -2,12 +2,12 @@
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>vCard - Personal Portfolio</title>
+<title>{{ page.title }} | {{ site.title }}</title>
 
 <!--
     - favicon
 -->
-<link rel="shortcut icon" href="/assets/images/logo.ico" type="image/x-icon">
+<link rel="shortcut icon" href="/assets/images/logo.png" type="image/x-icon">
 
 <!--
     - custom css link

_includes/sidebar.html

@@ -3,7 +3,9 @@
 <div class="sidebar-info">
 
     <figure class="avatar-box">
-    <img src="./assets/images/profile-photo.jpg" alt="{{ site.data.profile.name }}" width="80">
+    <a href="/">
+        <img src="./assets/images/profile-photo.jpg" alt="{{ site.data.profile.name }}" width="80">
+    </a>
     </figure>
 
     <div class="info-content">

_subpages/01-about.md

@@ -82,7 +82,7 @@ permalink: /
 
     <div class="overlay" data-overlay></div>
 
-    <section class="testimonials-modal">
+    <section class="modal testimonials-modal">
 
     <button class="modal-close-btn" data-modal-close-btn>
         <ion-icon name="close-outline"></ion-icon>

_subpages/04-photos.md

@@ -52,21 +52,23 @@ permalink: /photos
     <ul class="select-grid-list photo-list">
     {% for photo-item in site.data.photos %}
     <li class="select-grid-item photo-item active" data-filter-item data-category="{{ photo-item.tag | downcase }}">
-        <a href="{{ photo-item.link }}">
+        <!-- <a href="{{ photo-item.link }}"> -->
+        <div data-lightbox-item>
 
         <figure class="select-grid-item-img">
             <div class="select-grid-item-icon-box">
             <ion-icon name="eye-outline"></ion-icon>
             </div>
 
-            <img src="/assets/photos/{{ photo-item.file }}" alt="{{ photo-item.alt }}" loading="lazy" data-photos-image>
+            <img src="/assets/photos/{{ photo-item.file }}" alt="{{ photo-item.alt }}" loading="lazy" data-lightbox-image>
         </figure>
 
-        <h3 class="select-grid-item-title" data-photos-alt>{{ photo-item.alt }}</h3>
+        <h3 class="select-grid-item-title" data-lightbox-title>{{ photo-item.alt }}</h3>
 
-        <p class="select-grid-item-description" data-photos-tag>{{ photo-item.tag }}</p>
+        <p class="select-grid-item-description" data-lightbox-tag>{{ photo-item.tag }}</p>
 
-        </a>
+        </div>
+        <!-- </a> -->
     </li>
     {% endfor %}
 
@@ -78,26 +80,19 @@ permalink: /photos
 
     <div class="overlay" data-overlay></div>
 
-    <section class="photos-modal">
+    <section class="modal photos-modal">
 
     <button class="modal-close-btn" data-modal-close-btn>
         <ion-icon name="close-outline"></ion-icon>
     </button>
 
-    <div class="modal-img-wrapper">
-        <figure class="modal-avatar-box">
-        <img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
-        </figure>
-
-        <img src="./assets/images/icon-quote.svg" alt="quote icon">
+    <div class="modal-img" data-modal-img>
     </div>
 
     <div class="modal-content">
 
         <h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
 
-        <time datetime="2021-06-14">14 June, 2021</time>
-
         <div data-modal-text>
         <p>
             Richard was hired to create a corporate identity. We were very pleased with the work done. She has a

assets/css/style.css

@@ -679,7 +679,7 @@ main {
   pointer-events: all;
 }
 
-.testimonials-modal {
+.modal {
   background: var(--eerie-black-2);
   position: relative;
   padding: 15px;
@@ -693,11 +693,31 @@ main {
   z-index: 2;
 }
 
-.modal-container.active .testimonials-modal {
+.modal-container.active .modal {
   transform: scale(1);
   opacity: 1;
 }
 
+.photos-modal {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 25px;
+  padding: 30px;
+  border-radius: 20px;
+  height: 100%;
+  width: 100%;
+}
+
+.photos-modal .modal-img {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
 .modal-close-btn {
   position: absolute;
   top: 15px;
@@ -975,7 +995,10 @@ main {
   100% { transform: scale(1); }
 }
 
-.select-grid-item > a { width: 100%; }
+.select-grid-item > a, .select-grid-item > div {
+  width: 100%;
+  cursor: pointer;
+}
 
 .select-grid-item-img {
   position: relative;
@@ -998,7 +1021,7 @@ main {
   transition: var(--transition-1);
 }
 
-.select-grid-item > a:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
+.select-grid-item > a:hover .select-grid-item-img::before, .select-grid-item > div:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
 
 .select-grid-item-icon-box {
   --scale: 0.8;
@@ -1017,7 +1040,7 @@ main {
   transition: var(--transition-1);
 }
 
-.select-grid-item > a:hover .select-grid-item-icon-box {
+.select-grid-item > a:hover .select-grid-item-icon-box, .select-grid-item > div:hover .select-grid-item-icon-box {
   --scale: 1;
   opacity: 1;
 }
@@ -1031,7 +1054,7 @@ main {
   transition: var(--transition-1);
 }
 
-.select-grid-item > a:hover img { transform: scale(1.1); }
+.select-grid-item > a:hover img, .select-grid-item > div:hover img { transform: scale(1.1); }
 
 .select-grid-item-title,
 .select-grid-item-description { margin-left: 10px; }
@@ -1066,93 +1089,6 @@ main {
 }
 
 
-/*-----------------------------------*\
-  #BLOG
-\*-----------------------------------*/
-
-.blog-posts { margin-bottom: 10px; }
-
-.blog-posts-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 20px;
-}
-
-.blog-post-item > a {
-  position: relative;
-  background: var(--border-gradient-onyx);
-  height: 100%;
-  box-shadow: var(--shadow-4);
-  border-radius: 16px;
-  z-index: 1;
-}
-
-.blog-post-item > a::before {
-  content: "";
-  position: absolute;
-  inset: 1px;
-  border-radius: inherit;
-  background: var(--eerie-black-1);
-  z-index: -1;
-}
-
-.blog-banner-box {
-  width: 100%;
-  height: 200px;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.blog-banner-box img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: var(--transition-1);
-}
-
-.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
-
-.blog-content { padding: 15px; }
-
-.blog-meta {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 7px;
-  margin-bottom: 10px;
-}
-
-.blog-meta :is(.blog-category, time) {
-  color: var(--light-gray-70);
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-}
-
-.blog-meta .dot {
-  background: var(--light-gray-70);
-  width: 4px;
-  height: 4px;
-  border-radius: 4px;
-}
-
-.blog-item-title {
-  margin-bottom: 10px;
-  line-height: 1.3;
-  transition: var(--transition-1);
-}
-
-.blog-post-item > a:hover .blog-item-title { color: var(--secondary-color); }
-
-.blog-text {
-  color: var(--light-gray);
-  font-size: var(--fs-6);
-  font-weight: var(--fw-300);
-  line-height: 1.6;
-}
-
-
-
-
 
 /*-----------------------------------*\
   #CONTACT
@@ -1784,14 +1720,6 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .select-grid-list { grid-template-columns: repeat(3, 1fr); }
 
-
-
-  /**
-   * BLOG
-   */
-
-  .blog-banner-box { height: 230px; }
-
 }
 
 

assets/js/photos.js

@@ -23,7 +23,7 @@ function resizeMasonryItem(item){
    * Net height of the implicit row-track = T = G + R
    * S = H1 / T
    */
-  var rowSpan = Math.ceil((item.querySelector('a').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
+  var rowSpan = Math.ceil((item.querySelector('div').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
 
   /* Set the spanning as calculated above (S) */
   item.style.gridRowEnd = 'span '+rowSpan;

assets/js/script.js

@@ -22,13 +22,17 @@ const modalContainer = document.querySelector("[data-modal-container]");
 const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
 const overlay = document.querySelector("[data-overlay]");
 
+// lightbox variables
+const lightboxItem = document.querySelectorAll("[data-lightbox-item]");
+
 // modal variable
 const modalImg = document.querySelector("[data-modal-img]");
 const modalTitle = document.querySelector("[data-modal-title]");
 const modalText = document.querySelector("[data-modal-text]");
+const modalTag = document.querySelector("[data-modal-tag]");
 
 // modal toggle function
-const testimonialsModalFunc = function () {
+const modalFunc = function () {
   modalContainer.classList.toggle("active");
   overlay.classList.toggle("active");
 }
@@ -43,15 +47,31 @@ for (let i = 0; i < testimonialsItem.length; i++) {
     modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
     modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
 
-    testimonialsModalFunc();
+    modalFunc();
+
+  });
+
+}
+
+// add click event to all lightbox items
+for (let i = 0; i < lightboxItem.length; i++) {
+
+  lightboxItem[i].addEventListener("click", function () {
+    console.log("Clicked");
+
+    modalImg.style.backgroundImage = "url('" + this.querySelector("[data-lightbox-image]").src + "')";
+    modalTitle.innerHTML = this.querySelector("[data-lightbox-title]").innerHTML;
+    modalText.innerHTML = this.querySelector("[data-lightbox-tag]").innerHTML;
+
+    modalFunc();
 
   });
 
 }
 
 // add click event to modal close button
-if (modalCloseBtn) modalCloseBtn.addEventListener("click", testimonialsModalFunc);
-if (overlay) overlay.addEventListener("click", testimonialsModalFunc);
+if (modalCloseBtn) modalCloseBtn.addEventListener("click", modalFunc);
+if (overlay) overlay.addEventListener("click", modalFunc);
 
 
 
@@ -109,6 +129,10 @@ for (let i = 0; i < filterBtn.length; i++) {
     this.classList.add("active");
     lastClickedBtn = this;
 
+    if (resizeAllMasonryItems) {
+      resizeAllMasonryItems();
+      setTimeout(resizeAllMasonryItems, 250);
+    }
   });
 
 }