Update portfolio content, docs, styles, and theme files

hluebbering · Jul 8, 2024 · ab4b21e · ab4b21e
1 parent edaf9b7
commit ab4b21e
Show file tree

Hide file tree

Showing 19 changed files with 96 additions and 18 deletions.
diff --git a/content/portfolio/digital-music.md b/content/portfolio/digital-music.md
@@ -6,6 +6,8 @@ category_color: "#eb2139"
 category_slug: mathematics
 source: content
 image: images/works/waveform3.webp
+width: 256
+height: 97
 col1: "#e58ac5"
 col2: "#d7d2ef"
 grad3: "linear-gradient(to right, #ee9ca7, #ffdde1)"

diff --git a/content/portfolio/exploratory-analysis.md b/content/portfolio/exploratory-analysis.md
@@ -6,6 +6,8 @@ category_color: "#ffaebc"
 category_slug: data_science
 source: content
 image: images/works/exploratory_analysis.webp
+width: 235
+height: 110
 button_url: #
 external_link: https://hluebbering.github.io/exploratory-analysis/
 dateit: Nov 2021

diff --git a/content/portfolio/model-neurons.md b/content/portfolio/model-neurons.md
@@ -6,6 +6,8 @@ category_color: "#fda184"
 category_slug: mathematics
 source: content
 image: images/works/model_neurons.webp
+width: 240
+height: 110
 button_url: #
 external_link: https://hluebbering.github.io/model-neurons/
 dateit: Dec 2020

diff --git a/content/portfolio/playlist-report.md b/content/portfolio/playlist-report.md
@@ -6,6 +6,10 @@ category_color: "#dcdcd9"
 category_slug: machine_learning
 source: content
 image: images/works/flourish.webp
+image_set1: images/works/flourish.webp?w=256&h=139
+image_set2: images/works/flourish.webp?w=720&h=391
+width: 256
+height: 139
 label: flourish
 button_url: #
 external_link: https://hluebbering.github.io/music-clustering/

diff --git a/content/portfolio/shiny-learnr.md b/content/portfolio/shiny-learnr.md
@@ -6,6 +6,8 @@ category_color: "#2b5162"
 category_slug: web_development
 source: content
 image: images/works/shiny_learnr.webp
+width: 195
+height: 114
 button_url: #
 external_link: https://hluebbering.github.io/shiny-learnr-study/
 dateit: June 2020

diff --git a/content/portfolio/spotify-data-analysis.md b/content/portfolio/spotify-data-analysis.md
@@ -6,6 +6,8 @@ category_color: "#cd5b9f"
 category_slug: machine_learning
 source: content
 image: images/works/spotify_analysis.webp
+width: 195
+height: 114
 button_url: #
 dateit: Jan 2022
 col1: "#c7e3e9"

diff --git a/content/portfolio/statistical-machine-learning.md b/content/portfolio/statistical-machine-learning.md
@@ -5,7 +5,9 @@ category: Machine Learning
 category_color: "#f583f2"
 category_slug: machine_learning
 source: content
-image: images/works/stat_ml.jpeg
+image: images/works/stat_ml.webp
+width: 240
+height: 109
 button_url: #
 external_link: https://hluebbering.github.io/statistical-machine-learning/
 dateit: May 2022

diff --git a/content/portfolio/twitter-api.md b/content/portfolio/twitter-api.md
@@ -6,6 +6,8 @@ category_color: "#5e76bf"
 category_slug: data_science
 source: content
 image: images/works/twitter_api2.webp
+width: 256
+height: 221
 dateit: Aug 2022
 col1: "#c7e3e9"
 col2: "#ecf4ec"

diff --git a/docs/css/custom2.min.css b/docs/css/custom2.min.css
diff --git a/docs/images/works/stat_ml.webp b/docs/images/works/stat_ml.webp
diff --git a/docs/index.html b/docs/index.html
@@ -745,7 +745,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/music-clustering/" target="_blank" title="Clustering Spotify Playlist Songs">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, #c7e3e9, #ecf4ec); background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%); width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic flourish" src="https://hluebbering.github.io/images/works/flourish.webp" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic flourish" src="https://hluebbering.github.io/images/works/flourish.webp" srcset = https://hluebbering.github.io/images/works/flourish.webp style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>
@@ -800,7 +801,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/twitter-api/" target="_blank" title="Twitter API Data Queries">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, #c7e3e9, #ecf4ec); background-image: linear-gradient(135deg, #4e65fd 0%, #31012c 100%); width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic " src="https://hluebbering.github.io/images/works/twitter_api2.webp" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic " src="https://hluebbering.github.io/images/works/twitter_api2.webp" srcset = https://hluebbering.github.io style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>
@@ -855,7 +857,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/spotify-data-analysis/" target="_blank" title="Spotify Data Analysis">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, #c7e3e9, #ecf4ec); background-image: linear-gradient(135deg, #fd3ae3 0%, #530306 100%); width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic " src="https://hluebbering.github.io/images/works/spotify_analysis.webp" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic " src="https://hluebbering.github.io/images/works/spotify_analysis.webp" srcset = https://hluebbering.github.io style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>
@@ -910,7 +913,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/exploratory-analysis/" target="_blank" title="Exploratory Visual Analysis of CO2 Emissions">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, , ); background-image: linear-gradient(45deg, #FF0055 0%, #F94CFF 100%); width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic " src="https://hluebbering.github.io/images/works/exploratory_analysis.webp" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic " src="https://hluebbering.github.io/images/works/exploratory_analysis.webp" srcset = https://hluebbering.github.io style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>
@@ -965,7 +969,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/files/digitalmusic-project.pdf" target="_blank" title="Digital Sound and Music in Matlab">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, #e58ac5, #d7d2ef); background-image: linear-gradient(to right, #ed213a, #93291e);; width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic " src="https://hluebbering.github.io/images/works/waveform3.webp" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic " src="https://hluebbering.github.io/images/works/waveform3.webp" srcset = https://hluebbering.github.io style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>
@@ -1020,7 +1025,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/model-neurons/" target="_blank" title="Mathematical Dynamics of Model Neurons">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, #c7e3e9, #ecf4ec); background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic " src="https://hluebbering.github.io/images/works/model_neurons.webp" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic " src="https://hluebbering.github.io/images/works/model_neurons.webp" srcset = https://hluebbering.github.io style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>
@@ -1075,7 +1081,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/statistical-machine-learning/" target="_blank" title="Regression Models for Stock Forecasting">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, #c7e3e9, #ecf4ec); background-image: linear-gradient(-225deg, #7742B2 0%, #F180FF 52%, #FD8BD9 100%); width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic " src="https://hluebbering.github.io/images/works/stat_ml.jpeg" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic " src="https://hluebbering.github.io/images/works/stat_ml.webp" srcset = https://hluebbering.github.io style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>
@@ -1130,7 +1137,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="https://hluebbering.github.io/shiny-learnr-study/" target="_blank" title="Shiny and Learnr in Randomized Trials">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, #c7e3e9, #ecf4ec); background-image: linear-gradient(to right, #0f2027, #203a43, #2c5364); width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic " src="https://hluebbering.github.io/images/works/shiny_learnr.webp" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic " src="https://hluebbering.github.io/images/works/shiny_learnr.webp" srcset = https://hluebbering.github.io style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; " alt="" loading="lazy" type="image/webp">
                             </div>
 
                         </a>

diff --git a/docs/portfolio/index.html b/docs/portfolio/index.html
@@ -683,7 +683,7 @@ <h1>Mathematical Dynamics of Model Neurons</h1>
     			<div class="box-item">
     				<div class="image">
     					<a href="#popup-9d313a70278a4ef83d7d45ded1e048a3" class="has-popup-media">
-    						<img src="https://hluebbering.github.io/images/works/stat_ml.jpeg" alt="" />
+    						<img src="https://hluebbering.github.io/images/works/stat_ml.webp" alt="" />
     						<span class="info">
     							<span class="ion ion-images"></span>
     						</span>
@@ -696,7 +696,7 @@ <h1>Mathematical Dynamics of Model Neurons</h1>
     				<div id="popup-9d313a70278a4ef83d7d45ded1e048a3" class="popup-box mfp-fade mfp-hide">
     					<div class="content">
     						<div class="image">
-    							<img src="https://hluebbering.github.io/images/works/stat_ml.jpeg" alt="">
+    							<img src="https://hluebbering.github.io/images/works/stat_ml.webp" alt="">
     						</div>
     						<div class="desc">
     							<div class="post-box">

diff --git a/static/images/works/stat_ml.webp b/static/images/works/stat_ml.webp
diff --git a/themes/ryancv/assets/css/custom2.css b/themes/ryancv/assets/css/custom2.css
@@ -323,7 +323,13 @@ h2.title.sub.name {
 }
 
 .cases__pic {
-  margin: auto;
+      margin: auto;
+    width: 100%;
+    height: 100%;
+    padding: 5%;
+    aspect-ratio: 8 / 6;
+    object-fit: contain;
+    aspect-ratio: 16 / 9;
 }
 
 .cases__category {

diff --git a/themes/ryancv/assets/js/app-custom.js b/themes/ryancv/assets/js/app-custom.js
@@ -0,0 +1,27 @@
+n.fn.extend({
+        serialize: function() {
+            return n.param(this.serializeArray())
+        },
+        serializeArray: function() {
+            return this.map(function() {
+                var e = n.prop(this, "elements");
+                return e ? n.makeArray(e) : this
+            }).filter(function() {
+                var e = this.type;
+                return this.name && !n(this).is(":disabled") && wt.test(this.nodeName) && !_t.test(e) && (this.checked || !re.test(e))
+            }).map(function(e, t) {
+                var s = n(this).val();
+                return s == null ? null : n.isArray(s) ? n.map(s, function(e) {
+                    return {
+                        name: t.name,
+                        value: e.replace(Ie, `
+`)
+                    }
+                }) : {
+                    name: t.name,
+                    value: s.replace(Ie, `
+`)
+                }
+            }).get()
+        }
+    });
diff --git a/themes/ryancv/layouts/partials/banner-section.html b/themes/ryancv/layouts/partials/banner-section.html
@@ -3,6 +3,11 @@
 
 {{ "<!-- Banner -->" | safeHTML }}
 
+<!-- PRELOAD LARGE IMAGE -->
+<!-- PRELOAD LARGE IMAGE -->
+<link rel="preload" href="{{ .bannerimg | absURL }}" as="image" fetchpriority="high">
+<link rel="preload" fetchpriority="high" as="image" href="{{ "images/new/final/019.webp" | absURL }}" type="image/webp" />
+
 <div class="talent talent_case" style = "margin-bottom: 30px;">
     <div class="talent__center center">
         <div class="talent__container" style = "background-image: url({{ .bannerimg | absURL }}); background-size: cover; background-position: 50% 50%; height: 420px;">

diff --git a/themes/ryancv/layouts/partials/head.html b/themes/ryancv/layouts/partials/head.html
@@ -33,7 +33,9 @@
 
   <link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='{{ "fonts/fonts.css" | absURL }}'>
   <noscript><link rel="stylesheet" href="{{ "fonts/fonts.css" | absURL }}"></noscript>
-
+
+
+
 
   {{ "<!-- Icons -->" | safeHTML }}
   <!--<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='https://use.fontawesome.com/releases/v5.8.0/css/all.css'>
@@ -135,6 +137,13 @@
   <link rel="shortcut icon" href="{{ "images/favicon/favicon.ico" | absURL }}" type="image/x-icon" />
   <link rel="icon" href="{{ "images/favicon/favicon.ico" | absURL }}" type="image/x-icon" />
 
+
+
+<!-- Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. -->
+<link rel="preload" fetchpriority="high" as="image" href="{{ "images/new/final/shadow.webp" | absURL }}" type="image/webp" />
+
+
+
 
   <!--<script src="https://kit.fontawesome.com/a2b3fc39a2.js" crossorigin="anonymous" defer></script>-->
 

diff --git a/themes/ryancv/layouts/partials/portfolio-section.html b/themes/ryancv/layouts/partials/portfolio-section.html
@@ -48,7 +48,8 @@ <h2 class="advantages__title title" data-aos="animation-scale-y"  data-aos-delay
 
 				  <a href="{{ .Params.external_link }}" target="_blank" title="{{ .Title }}">
 				  <div class="cases__preview" style="background-image: linear-gradient(53deg, {{ .Params.col1 }}, {{ .Params.col2 }}); background-image: {{ .Params.grad | safeCSS }}; width: 100%; height: 130px; padding: 0%; margin: auto; display: inline-flex; flex-wrap: wrap; align-content: center; box-shadow: inset 0px -4px 2px #f3f5f6; border-radius: 1px;">
-                            <img class="cases__pic {{ .Params.label }}" src="{{ .Params.image | absURL }}" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; {{ .Params.styles | safeCSS }}" alt="" loading="lazy">
+
+				    <img fetchpriority="high" class="cases__pic {{ .Params.label }}" src="{{ .Params.image | absURL }}" width="{{ .Params.width }}" height="{{ .Params.height }}" style="display: inline-flex !important;max-height: 100%; padding: 4%; max-width: 100%; {{ .Params.styles | safeCSS }}" alt="" type="image/webp">
                             </div>
 
                         </a>

diff --git a/themes/ryancv/layouts/partials/vcard.html b/themes/ryancv/layouts/partials/vcard.html
@@ -32,16 +32,20 @@
 	    <div class = "obj-vcard2" style="content: url({{ .vcardblob2 | absURL }}); width: 200px;"></div>
 	    </div>
 
-
-
+	    <!-- PRELOAD LARGE IMAGE -->
+	    <!-- PRELOAD LARGE IMAGE -->
+	    <link rel="preload" href="{{ .bgimage | absURL }}" as="image" fetchpriority="high">
+	    <link rel="preload" fetchpriority="high" as="image" href="{{ "images/new/final/shadow.webp" | absURL }}" type="image/webp" />
+
+
 
     {{ "<!-- profile image -->" | safeHTML }}
     <div class="slidee" style="background-image: url({{ .bgimage | absURL }});"></div>
 
     {{ "<!-- profile photo -->" | safeHTML }}
     {{ if .photo }}
     <div class = "ava">
-    <div class = "avatar-img" style="background-image: url({{ .bgimage | absURL }});"></div>
+    <div class = "avatar-img" fetchpriority="high" style="background-image: url({{ .bgimage | absURL }});"></div>
     <div class="avatar-frame" style = "background-image: url({{ .photo | absURL }}) !important;"></div>
 
     {{ "<!-- profile buttons -->" | safeHTML }}