From 279b691d29c3fa17896b11a79b4805a41c5b5add Mon Sep 17 00:00:00 2001
From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com>
Date: Tue, 21 Apr 2026 16:10:24 -0500
Subject: [PATCH 1/2] Refactor fancy header layout

---
 public/css/app.css                      |  44 ++++---
 public/mix-manifest.json                |   4 +-
 resources/assets/sass/_profile.scss     |  50 ++++----
 resources/views/profiles/show.blade.php | 159 ++++++++++++------------
 4 files changed, 136 insertions(+), 121 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index be026771..828eed03 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10625,23 +10625,29 @@ button.video-control .fa-play {
   float: left;
 }
 .profile .fancy_header {
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-position: center top;
-  background-size: cover;
-  height: 85vh;
-  position: relative;
+  display: grid;
+  grid-template-areas: "stack";
+  padding: 0;
+  background-color: transparent;
 }
-@media (max-width: 992px) {
-  .profile .fancy_header {
-    background-size: contain;
-    background-attachment: scroll;
-    height: auto;
-  }
-  .profile .fancy_header .contact_info {
-    margin-top: 50%;
-    box-shadow: 2px 2px 4px #dee2e6;
-  }
+.profile .fancy_header .banner-img,
+.profile .fancy_header > .container {
+  grid-area: stack;
+}
+.profile .fancy_header .banner-img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+.profile .fancy_header > .container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 60px 0;
+  z-index: 1;
 }
 .profile .fancy_header .contact_info {
   padding: 15px 45px 60px;
@@ -10650,12 +10656,12 @@ button.video-control .fa-play {
 .profile .fancy_header .fancy_link_container {
   position: absolute;
   bottom: 45px;
-  right: 0px;
-  left: 0px;
+  right: 0;
+  left: 0;
   text-align: center;
 }
 .profile .fancy_header .fancy_link {
-  padding: 20px 25px 20px;
+  padding: 20px 25px;
   margin: 15px;
   background: #f8f9fa;
   width: auto;
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index dcb76aea..5f47b422 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -3,8 +3,8 @@
     "/js/app.js.map": "/js/app.js.map?id=271c8f103c569b8f5613b8778d48ee75",
     "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
     "/js/manifest.js.map": "/js/manifest.js.map?id=389e00e7d7680b68d4e1d128ce27ff48",
-    "/css/app.css": "/css/app.css?id=0fd161f323dd5c77642c3240bbb47d16",
-    "/css/app.css.map": "/css/app.css.map?id=3ba6add83b449d9a830b1160dc25d43d",
+    "/css/app.css": "/css/app.css?id=ce11ed4296fe810607d7a00e088db473",
+    "/css/app.css.map": "/css/app.css.map?id=4f3b26f57e96f4cceba86a84fcde511e",
     "/js/vendor.js": "/js/vendor.js?id=77012e19e850a379f73e3ac0c76bc9b1",
     "/js/vendor.js.map": "/js/vendor.js.map?id=f3f5514d1186aa088c887b6ebe999fe0"
 }
diff --git a/resources/assets/sass/_profile.scss b/resources/assets/sass/_profile.scss
index 073cdb46..6bfb563d 100644
--- a/resources/assets/sass/_profile.scss
+++ b/resources/assets/sass/_profile.scss
@@ -46,41 +46,47 @@
 		float: left;
 	}
 	
-	.fancy_header{
-		background-repeat: no-repeat;
-		background-attachment: fixed;
-		background-position: center top;
-		background-size: cover;
-		height: 85vh;
-		position: relative;
-
-		@media (max-width: map-get($grid-breakpoints, lg)){
-			//some mobile adjustment here
-			background-size: contain;
-			background-attachment: scroll;
-			height: auto;
-			.contact_info {
-				margin-top: 50%;
-				box-shadow: 2px 2px 4px $gray-300;
-			}
+	.fancy_header {
+		display: grid;
+		grid-template-areas: "stack";
+		padding: 0;
+		background-color: transparent;
+		
+		.banner-img,
+		> .container {
+			grid-area: stack;
+		}
+		
+		.banner-img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			object-position: center;
+		}
+		
+		> .container {
+			position: relative;
+			display: flex;
+			align-items: center;
+			padding: 60px 0;
+			z-index: 1;
 		}
 		
 		.contact_info {
 			padding: 15px 45px 60px;
 			background: $light;
-			// opacity: .92;
 		}
 
-		.fancy_link_container{
+		.fancy_link_container {
 			position: absolute;
 			bottom: 45px;
-			right: 0px;
-			left: 0px;
+			right: 0;
+			left: 0;
 			text-align: center;
 		}
 
 		.fancy_link {
-			padding: 20px 25px 20px;
+			padding: 20px 25px;
 			margin: 15px;
 			background: $light;
 			width: auto;
diff --git a/resources/views/profiles/show.blade.php b/resources/views/profiles/show.blade.php
index 173c69e3..ccac46d4 100644
--- a/resources/views/profiles/show.blade.php
+++ b/resources/views/profiles/show.blade.php
@@ -31,93 +31,96 @@
 @stop
 @section('content')
 <div class="profile">
-	<div class="profile-header @if($information->fancy_header) fancy_header @endif" @if($information->fancy_header) style="background-image: url({{$profile->banner_url}})" @endif>
-		<div class="container">
-			<div class="row d-flex align-items-center @if($information->fancy_header_right)justify-content-end @endif">
-				@if(!$information->fancy_header)
-					<div class="col-md-5 col-sm-6">
-						<img class="profile_photo" src="{{ $profile->image_url }}" alt="{{ $profile->full_name }}">
+	<div class="profile-header fancy_header">
+	@if($information->fancy_header)
+        <img src="{{ $profile->banner_url }}" class="banner-img" alt="">
+    @endif
+	
+	<div class="container">
+		<div class="row d-flex align-items-center @if($information->fancy_header_right)justify-content-end @endif">
+			@if(!$information->fancy_header)
+				<div class="col-md-5 col-sm-6">
+					<img class="profile_photo" src="{{ $profile->image_url }}" alt="{{ $profile->full_name }}">
+				</div>
+			@endif
+			<div class="@if($information->fancy_header)col-lg-5 @else col-md-7 col-sm-6 @endif">
+				<div class="contact_info mb-5">
+					<h1 class="mt-sm-0">
+						@if($profile->isInMemoriam())
+							<small class="text-muted">In Memory of</small><br>
+						@endif
+						{{ $profile->name }}
+						@can('delete', $profile)<a class="btn btn-danger btn-sm" href="{{ route('profiles.confirm-delete', [ $profile ]) }}" title="Archive"><i class="fas fa-archive"></i> Archive</a>@endcan 
+						@if($editable)<a class="btn btn-primary btn-sm" href="{{ route('profiles.edit', [$profile->slug, 'information']) }}" title="Edit"><i class="fas fa-edit"></i> Edit</a>@endif
+						<span title="Bookmark"><livewire:bookmark-button :model="$profile"></span>
+						@if(config('pdf.enabled'))
+							@can('export', $profile)<a class="btn btn-primary btn-sm" href="{{ route('profiles.export.pdf', [ $profile ]) }}" title="Export as PDF"><i class="fas fa-download"></i> PDF</a>@endcan
+						@endif
+					</h1>
+					<div class="profile-titles">
+						@if($information->distinguished_title) <div class="profile-title">{{ $information->distinguished_title }}</div> @endif
+						@if($information->title) <div class="profile-title">{{ $information->title }}</div> @endif
+						@if($information->secondary_title) <div class="profile-title">{{ $information->secondary_title }}</div> @endif
+						@if($information->tertiary_title) <div class="profile-title">{{ $information->tertiary_title }}</div> @endif
 					</div>
-				@endif
-				<div class="@if($information->fancy_header)col-lg-5 @else col-md-7 col-sm-6 @endif">
-					<div class="contact_info">
-
-						<h1 class="mt-sm-0">
-							@if($profile->isInMemoriam())
-								<small class="text-muted">In Memory of</small><br>
-							@endif
-							{{ $profile->name }}
-							@can('delete', $profile)<a class="btn btn-danger btn-sm" href="{{ route('profiles.confirm-delete', [ $profile ]) }}" title="Archive"><i class="fas fa-archive"></i> Archive</a>@endcan 
-							@if($editable)<a class="btn btn-primary btn-sm" href="{{ route('profiles.edit', [$profile->slug, 'information']) }}" title="Edit"><i class="fas fa-edit"></i> Edit</a>@endif
-							<span title="Bookmark"><livewire:bookmark-button :model="$profile"></span>
-							@if(config('pdf.enabled'))
-								@can('export', $profile)<a class="btn btn-primary btn-sm" href="{{ route('profiles.export.pdf', [ $profile ]) }}" title="Export as PDF"><i class="fas fa-download"></i> PDF</a>@endcan
-							@endif
-						</h1>
-						<div class="profile-titles">
-							@if($information->distinguished_title) <div class="profile-title">{{ $information->distinguished_title }}</div> @endif
-							@if($information->title) <div class="profile-title">{{ $information->title }}</div> @endif
-							@if($information->secondary_title) <div class="profile-title">{{ $information->secondary_title }}</div> @endif
-							@if($information->tertiary_title) <div class="profile-title">{{ $information->tertiary_title }}</div> @endif
-						</div>
-						@if($information->profile_summary) <p class="profile_summary">{{ $information->profile_summary }}</p> @endif
-							<div>
-								@if($information->email)<i class="fa fa-fw fa-envelope" aria-label="Email address"></i> <a href="#" id="{{ Utils::obfuscateEmailAddress($information->email) }}" data-evaluate="profile-eml">&nbsp;</a><br>@endif
-								@if($information->phone)<i class="fa fa-fw fa-phone" aria-label="Phone number"></i> {{ $information->phone }}<br />@endif
-								@if($information->location)<i class="fa fa-fw fa-map-marker" aria-label="Location"></i> {{ $information->location }}<br />@endif
-								@foreach(['url' => 'url_name', 'secondary_url' => 'secondary_url_name', 'tertiary_url' => 'tertiary_url_name', 'quaternary_url' => 'quaternary_url_name', 'quinary_url' => 'quinary_url_name'] as $url_key => $url_name)
-									@if($information->$url_key)
-										@if(strpos($information->$url_key, 'twitter') !== false)
-												<i class="fab fa-fw fa-twitter" aria-hidden="true"></i>
-										@elseif(strpos($information->$url_key, 'facebook') !== false)
-												<i class="fab fa-fw fa-facebook" aria-hidden="true"></i>
-										@elseif(strpos($information->$url_key, 'instagram') !== false)
-												<i class="fab fa-fw fa-instagram" aria-hidden="true"></i>
-										@elseif(strpos($information->$url_key, 'github') !== false)
-												<i class="fab fa-fw fa-github" aria-hidden="true"></i>
-										@elseif(strpos($information->$url_key, 'linkedin') !== false)
-												<i class="fab fa-fw fa-linkedin" aria-hidden="true"></i>
-										@elseif(strpos($information->$url_key, 'youtube') !== false)
-												<i class="fab fa-fw fa-youtube" aria-hidden="true"></i>
-										@elseif(strpos($information->$url_key, 'researchgate') !== false)
-												<i class="fab fa-fw fa-researchgate" aria-hidden="true"></i>
-										@elseif(strpos($information->$url_key, 'google') !== false)
-												<i class="fab fa-fw fa-google" aria-hidden="true"></i>
-										@else
-												<i class="fa fa-fw fa-link" aria-hidden="true"></i>
-										@endif
-									<a href="{{$information->$url_key}}" target="_blank">@if($information->$url_name){{$information->$url_name}}@else{{"Website"}}@endif</a><br />@endif
-								@endforeach
-								@if($information->orc_id)<i class="fab fa-fw fa-orcid" aria-hidden="true"></i> <a href="https://orcid.org/{{$information->orc_id}}" target="_blank">ORCID</a><br />@endif
-								@if($information->show_accepting_students || $information->show_not_accepting_students)
-								<p class="mt-3 mb-0">
-									@if($profile->isUnlisted())
-										<p class="m-0 text-muted"><small><i class="fas fa-link"></i> Unlisted</small></p>
-									@endif
-									@if($information->show_accepting_students)
-										<p class="m-0"><small><i class="fas fa-fw fa-user-graduate" aria-hidden="true"></i> Currently accepting {{ collect(['undergraduate' => $information->accepting_students, 'graduate' => $information->accepting_grad_students])->filter()->keys()->implode(' and ') }} students</small></p>
+					@if($information->profile_summary) <p class="profile_summary">{{ $information->profile_summary }}</p> @endif
+						<div>
+							@if($information->email)<i class="fa fa-fw fa-envelope" aria-label="Email address"></i> <a href="#" id="{{ Utils::obfuscateEmailAddress($information->email) }}" data-evaluate="profile-eml">&nbsp;</a><br>@endif
+							@if($information->phone)<i class="fa fa-fw fa-phone" aria-label="Phone number"></i> {{ $information->phone }}<br />@endif
+							@if($information->location)<i class="fa fa-fw fa-map-marker" aria-label="Location"></i> {{ $information->location }}<br />@endif
+							@foreach(['url' => 'url_name', 'secondary_url' => 'secondary_url_name', 'tertiary_url' => 'tertiary_url_name', 'quaternary_url' => 'quaternary_url_name', 'quinary_url' => 'quinary_url_name'] as $url_key => $url_name)
+								@if($information->$url_key)
+									@if(strpos($information->$url_key, 'twitter') !== false)
+											<i class="fab fa-fw fa-twitter" aria-hidden="true"></i>
+									@elseif(strpos($information->$url_key, 'facebook') !== false)
+											<i class="fab fa-fw fa-facebook" aria-hidden="true"></i>
+									@elseif(strpos($information->$url_key, 'instagram') !== false)
+											<i class="fab fa-fw fa-instagram" aria-hidden="true"></i>
+									@elseif(strpos($information->$url_key, 'github') !== false)
+											<i class="fab fa-fw fa-github" aria-hidden="true"></i>
+									@elseif(strpos($information->$url_key, 'linkedin') !== false)
+											<i class="fab fa-fw fa-linkedin" aria-hidden="true"></i>
+									@elseif(strpos($information->$url_key, 'youtube') !== false)
+											<i class="fab fa-fw fa-youtube" aria-hidden="true"></i>
+									@elseif(strpos($information->$url_key, 'researchgate') !== false)
+											<i class="fab fa-fw fa-researchgate" aria-hidden="true"></i>
+									@elseif(strpos($information->$url_key, 'google') !== false)
+											<i class="fab fa-fw fa-google" aria-hidden="true"></i>
+									@else
+											<i class="fa fa-fw fa-link" aria-hidden="true"></i>
 									@endif
-									@if($information->show_not_accepting_students)
-										<p class="m-0 text-muted"><small><i class="fas fa-fw fa-user-slash" aria-hidden="true"></i> Not currently accepting {{ collect(['undergraduate' => $information->not_accepting_students, 'graduate' => $information->not_accepting_grad_students])->filter()->keys()->implode(' or ') }} students</small></p>
-									@endif
-								</p>
+								<a href="{{$information->$url_key}}" target="_blank">@if($information->$url_name){{$information->$url_name}}@else{{"Website"}}@endif</a><br />@endif
+							@endforeach
+							@if($information->orc_id)<i class="fab fa-fw fa-orcid" aria-hidden="true"></i> <a href="https://orcid.org/{{$information->orc_id}}" target="_blank">ORCID</a><br />@endif
+							@if($information->show_accepting_students || $information->show_not_accepting_students)
+							<p class="mt-3 mb-0">
+								@if($profile->isUnlisted())
+									<p class="m-0 text-muted"><small><i class="fas fa-link"></i> Unlisted</small></p>
+								@endif
+								@if($information->show_accepting_students)
+									<p class="m-0"><small><i class="fas fa-fw fa-user-graduate" aria-hidden="true"></i> Currently accepting {{ collect(['undergraduate' => $information->accepting_students, 'graduate' => $information->accepting_grad_students])->filter()->keys()->implode(' and ') }} students</small></p>
 								@endif
-							</div>
-						@if(!$profile->tags->isEmpty() || $editable)
-						<div class="protocol-tags">
-						<i class="fas fa-tags" aria-hidden="true"></i><span class="sr-only">Tags:</span> @include('tags.show', ['model' => $profile]) @if($editable)<a class="btn btn-primary btn-sm badge" href="#" data-target="#{{ Illuminate\Support\Str::slug($profile->getRouteKey()) }}_tags_editor" data-toggle="modal" role="button"><i class="fas fa-edit"></i> Edit</a>@endif
+								@if($information->show_not_accepting_students)
+									<p class="m-0 text-muted"><small><i class="fas fa-fw fa-user-slash" aria-hidden="true"></i> Not currently accepting {{ collect(['undergraduate' => $information->not_accepting_students, 'graduate' => $information->not_accepting_grad_students])->filter()->keys()->implode(' or ') }} students</small></p>
+								@endif
+							</p>
+							@endif
 						</div>
-						@endif
+					@if(!$profile->tags->isEmpty() || $editable)
+					<div class="protocol-tags">
+					<i class="fas fa-tags" aria-hidden="true"></i><span class="sr-only">Tags:</span> @include('tags.show', ['model' => $profile]) @if($editable)<a class="btn btn-primary btn-sm badge" href="#" data-target="#{{ Illuminate\Support\Str::slug($profile->getRouteKey()) }}_tags_editor" data-toggle="modal" role="button"><i class="fas fa-edit"></i> Edit</a>@endif
 					</div>
+					@endif
 				</div>
-				@if($information->fancy_header)
-				<div class="fancy_link_container d-none d-lg-block">
-					<a class="fancy_link" href="#links"><i class="fa fa-fw fa-arrow-down" aria-hidden="true"></i> About {{ $profile->name }}</a>
-				</div>
-				@endif
 			</div>
+			@if($information->fancy_header)
+			<div class="fancy_link_container d-none d-lg-block">
+				<a class="fancy_link" href="#links"><i class="fa fa-fw fa-arrow-down" aria-hidden="true"></i> About {{ $profile->name }}</a>
+			</div>
+			@endif
 		</div>
 	</div>
+	</div>
 	<nav id="links" class="container links" aria-label="profile sections">
 		<ul>
 			@if($profile->preparation()->exists())<li><a href="#preparation">Professional Preparation</a></li>@endif

From 26dc669e318dc02bec6778edf7061a7807fa2b92 Mon Sep 17 00:00:00 2001
From: Betsy Castro <5490820+betsyecastro@users.noreply.github.com>
Date: Thu, 23 Apr 2026 14:28:20 -0500
Subject: [PATCH 2/2] Hide banner image on mobile screens

---
 public/css/app.css                  | 5 +++++
 public/mix-manifest.json            | 4 ++--
 resources/assets/sass/_profile.scss | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 828eed03..7e8c746f 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10642,6 +10642,11 @@ button.video-control .fa-play {
   -o-object-position: center;
      object-position: center;
 }
+@media (max-width: 992px) {
+  .profile .fancy_header .banner-img {
+    display: none;
+  }
+}
 .profile .fancy_header > .container {
   position: relative;
   display: flex;
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 5f47b422..a20c71d3 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -3,8 +3,8 @@
     "/js/app.js.map": "/js/app.js.map?id=271c8f103c569b8f5613b8778d48ee75",
     "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
     "/js/manifest.js.map": "/js/manifest.js.map?id=389e00e7d7680b68d4e1d128ce27ff48",
-    "/css/app.css": "/css/app.css?id=ce11ed4296fe810607d7a00e088db473",
-    "/css/app.css.map": "/css/app.css.map?id=4f3b26f57e96f4cceba86a84fcde511e",
+    "/css/app.css": "/css/app.css?id=9494a6a718cf3cb5fd5d5de9a43b007b",
+    "/css/app.css.map": "/css/app.css.map?id=75988ba4a3c1b5cb4833d77e714d3c22",
     "/js/vendor.js": "/js/vendor.js?id=77012e19e850a379f73e3ac0c76bc9b1",
     "/js/vendor.js.map": "/js/vendor.js.map?id=f3f5514d1186aa088c887b6ebe999fe0"
 }
diff --git a/resources/assets/sass/_profile.scss b/resources/assets/sass/_profile.scss
index 6bfb563d..6b33351d 100644
--- a/resources/assets/sass/_profile.scss
+++ b/resources/assets/sass/_profile.scss
@@ -62,6 +62,10 @@
 			height: 100%;
 			object-fit: cover;
 			object-position: center;
+
+			@media (max-width: map-get($grid-breakpoints, lg)) {
+				display: none;
+			}
 		}
 		
 		> .container {