From 490d47eee604167c3a037d87c88af6ff83c39ee3 Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Sun, 23 Jun 2024 18:37:44 +0100
Subject: [PATCH] Rename elements and update styling

---
 _includes/head.html       |  6 +++--
 _subpages/02-resume.md    |  2 +-
 _subpages/03-portfolio.md | 12 +++++-----
 _subpages/04-photos.md    | 15 ++++++------
 assets/css/style.css      | 50 ++++++++++++++++++++++++---------------
 5 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 8792c32..4e8ce00 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -7,12 +7,12 @@
 <!--
     - favicon
 -->
-<link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
+<link rel="shortcut icon" href="/assets/images/logo.ico" type="image/x-icon">
 
 <!--
     - custom css link
 -->
-<link rel="stylesheet" href="./assets/css/style.css">
+<link rel="stylesheet" href="/assets/css/style.css">
 
 <!--
     - google font link
@@ -20,4 +20,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
+<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
 </head>
\ No newline at end of file
diff --git a/_subpages/02-resume.md b/_subpages/02-resume.md
index 77f5568..a38d29a 100644
--- a/_subpages/02-resume.md
+++ b/_subpages/02-resume.md
@@ -1,5 +1,5 @@
 ---
-title: Resume
+title: Résumé
 permalink: /resume
 ---
 
diff --git a/_subpages/03-portfolio.md b/_subpages/03-portfolio.md
index 8df5924..691b889 100644
--- a/_subpages/03-portfolio.md
+++ b/_subpages/03-portfolio.md
@@ -49,23 +49,23 @@ permalink: /portfolio
 
     </div>
 
-    <ul class="project-list">
+    <ul class="select-grid-list">
 
     {% for project-item in site.data.portfolio %}
-    <li class="project-item  active" data-filter-item data-category="{{ project-item.tag | downcase }}">
+    <li class="select-grid-item active" data-filter-item data-category="{{ project-item.tag | downcase }}">
         <a target="_blank" href="{{ project-item.link }}">
 
-        <figure class="project-img">
-            <div class="project-item-icon-box">
+        <figure class="select-grid-item-img">
+            <div class="select-grid-item-icon-box">
             <ion-icon name="eye-outline"></ion-icon>
             </div>
 
             <img src="{{ project-item.image }}" alt="{{ project-item.image_alt }}" loading="lazy">
         </figure>
 
-        <h3 class="project-title">{{ project-item.title }}</h3>
+        <h3 class="select-grid-item-title">{{ project-item.title }}</h3>
 
-        <p class="project-category">{{ project-item.date }}, {{ project-item.tag }}</p>
+        <p class="select-grid-item-description">{{ project-item.date }}, {{ project-item.tag }}</p>
 
         </a>
     </li>
diff --git a/_subpages/04-photos.md b/_subpages/04-photos.md
index f62ed5f..a473746 100644
--- a/_subpages/04-photos.md
+++ b/_subpages/04-photos.md
@@ -49,23 +49,22 @@ permalink: /photos
 
     </div>
 
-    <ul class="project-list">
-
+    <ul class="select-grid-list photo-list">
     {% for photo-item in site.data.photos %}
-    <li class="project-item active" data-filter-item data-category="{{ photo-item.tag | downcase }}">
+    <li class="select-grid-item photo-item active" data-filter-item data-category="{{ photo-item.tag | downcase }}">
         <a href="{{ photo-item.link }}">
 
-        <figure class="project-img">
-            <div class="project-item-icon-box">
+        <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>
         </figure>
 
-        <h3 class="project-title" data-photos-alt>{{ photo-item.alt }}</h3>
+        <h3 class="select-grid-item-title" data-photos-alt>{{ photo-item.alt }}</h3>
 
-        <p class="project-category" data-photos-tag>{{ photo-item.tag }}</p>
+        <p class="select-grid-item-description" data-photos-tag>{{ photo-item.tag }}</p>
 
         </a>
     </li>
@@ -114,3 +113,5 @@ permalink: /photos
     </section>
 
 </div>
+
+<script src="/assets/js/photos.js"></script>
diff --git a/assets/css/style.css b/assets/css/style.css
index b081e19..2195349 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -956,16 +956,16 @@ main {
 
 .select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
 
-.project-list {
+.select-grid-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
   margin-bottom: 10px;
 }
 
-.project-item { display: none; }
+.select-grid-item { display: none; }
 
-.project-item.active {
+.select-grid-item.active {
   display: block;
   animation: scaleUp 0.25s ease forwards;
 }
@@ -975,9 +975,9 @@ main {
   100% { transform: scale(1); }
 }
 
-.project-item > a { width: 100%; }
+.select-grid-item > a { width: 100%; }
 
-.project-img {
+.select-grid-item-img {
   position: relative;
   width: 100%;
   height: 184px;
@@ -986,7 +986,7 @@ main {
   margin-bottom: 15px;
 }
 
-.project-img::before {
+.select-grid-item-img::before {
   content: "";
   position: absolute;
   top: 0;
@@ -998,9 +998,9 @@ main {
   transition: var(--transition-1);
 }
 
-.project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }
+.select-grid-item > a:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
 
-.project-item-icon-box {
+.select-grid-item-icon-box {
   --scale: 0.8;
 
   background: var(--jet);
@@ -1017,26 +1017,26 @@ main {
   transition: var(--transition-1);
 }
 
-.project-item > a:hover .project-item-icon-box {
+.select-grid-item > a:hover .select-grid-item-icon-box {
   --scale: 1;
   opacity: 1;
 }
 
-.project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
+.select-grid-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
 
-.project-img img {
+.select-grid-item-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition-1);
 }
 
-.project-item > a:hover img { transform: scale(1.1); }
+.select-grid-item > a:hover img { transform: scale(1.1); }
 
-.project-title,
-.project-category { margin-left: 10px; }
+.select-grid-item-title,
+.select-grid-item-description { margin-left: 10px; }
 
-.project-title {
+.select-grid-item-title {
   color: var(--white-2);
   font-size: var(--fs-5);
   font-weight: var(--fw-400);
@@ -1044,7 +1044,7 @@ main {
   line-height: 1.3;
 }
 
-.project-category {
+.select-grid-item-description {
   color: var(--light-gray-70);
   font-size: var(--fs-6);
   font-weight: var(--fw-300);
@@ -1052,6 +1052,18 @@ main {
 
 
 
+/*-----------------------------------*\
+  #PHOTOS
+\*-----------------------------------*/
+
+.select-grid-list.photo-list {
+  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
+  grid-auto-rows: 0;
+}
+
+.select-grid-list.photo-list .select-grid-item-img {
+  height: min-content;
+}
 
 
 /*-----------------------------------*\
@@ -1532,7 +1544,7 @@ textarea.form-input::-webkit-resizer { display: none; }
    * #PORTFOLIO, BLOG
    */
 
-  .project-img, .blog-banner-box { border-radius: 16px; }
+  .select-grid-item-img, .blog-banner-box { border-radius: 16px; }
 
   .blog-posts-list { gap: 30px; }
 
@@ -1650,7 +1662,7 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   /* portfolio and blog grid */
 
-  .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
+  .select-grid-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
 
 
 
@@ -1770,7 +1782,7 @@ textarea.form-input::-webkit-resizer { display: none; }
    * PORTFOLIO
    */
 
-  .project-list { grid-template-columns: repeat(3, 1fr); }
+  .select-grid-list { grid-template-columns: repeat(3, 1fr); }