Skip to content

Commit

Permalink
progressive update
Browse files Browse the repository at this point in the history
  • Loading branch information
@YueSteveYin
YueSteveYin committed Sep 4, 2024
1 parent 9eb2ee4 commit cb7a16c
Show file tree
Hide file tree
Showing 8 changed files with 195 additions and 66 deletions.
Binary file added assets/img/logos/belt.webp
View file
Binary file not shown.
Binary file added assets/img/logos/bodyBackground.webp
View file
Binary file not shown.
Binary file added assets/img/logos/titleBackground.webp
View file
Binary file not shown.
14 changes: 14 additions & 0 deletions layouts/_default/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,19 @@ <h3 class="text-gray-800 text-lg font-bold">{{ .name }}</h3>
</div>
</section>
</div>

<style>
/* person box hover effect */
.team-member {
transition:
transform 0.3s ease-in-out,
box-shadow 0.3s ease-in-out;
}

.team-member:hover {
transform: scale(1.05);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}
</style>
</main>
{{ end }}
146 changes: 108 additions & 38 deletions layouts/_default/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@


<!-- Main Section with Logo and Title -->
<section class="p-8">
{{ $bgImage := resources.Get `img/logos/titleBackground.webp` }}
<section
class="parallax p-8"
style="background-image: url('{{ $bgImage.RelPermalink }}');"
>
<h1>
<span class="sr-only">{{ .Title }}</span>
{{ $img := resources.Get `img/logos/hiddenfigs_logo.png` }}
Expand All @@ -23,19 +27,29 @@ <h1>
/>
</h1>
<h2
class="links-blue-darker text-center font-sans text-xl leading-tight text-gray md:text-xl"
class="links-blue-darker text-center font-sans text-xl leading-tight text-white md:text-xl"
>
A Cottrell Scholars Collaborative funded by the
<a class="font-bold" href="https://rescorp.org/"
>Research Corporation for Science Advancement</a
>
</h2>
<div class="content-area mx-auto mt-8 max-w-prose text-gray">
<div class="content-area mx-auto mt-8 max-w-prose text-white">
{{ .Content }}
</div>
</section>
<!-- Parallax effect CSS -->
<style>
.parallax {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>

<!-- Section with Call-to-Action Links -->
<!-- {{ $beltbgImage := resources.Get `img/logos/belt.webp` }} -->
<section
class="flex flex-col justify-around space-y-4 bg-g-4 p-8 shadow-inner sm:flex-row sm:space-x-4 sm:space-y-0"
>
Expand Down Expand Up @@ -101,44 +115,100 @@ <h1>
</section>

<!-- Search Section -->
<section class="no-js-hide p-8">
{{ partial "search.html" . }}
</section>

<!-- Section to Meet Our Scientists -->
{{ $secHedClass := `text-2xl font-sans font-bold leading-tight mb-2` }}
<section class="p-8 pt-0">
<div class="{{ $wellClass }}" x-data>
<h2 class="{{ $secHedClass }} scroll-mt-2" x-ref="hed">
Meet our Scientists
</h2>
{{ $scientists := .GetPage "scientist" }}
{{ $people := $scientists.RegularPages }}
<ul
x-init="$shuffle($el)"
class="first-half-dozen mt-4 grid max-w-screen-md gap-x-4 gap-y-4 sm:grid-cols-2 md:grid-cols-3"
x-ref="container"
>
{{ range $people }}
<li class="min-w-0">
{{ partial "person-box.html" . }}
</li>
{{ end }}
</ul>
<div class="mt-4 text-right font-sans font-bold">
<p>
<button
type="button"
@click="$rotate($refs.container, 6); $refs.hed.scrollIntoView({ block: 'start', behavior: 'smooth' });"
class="decoration-blue decoration-4 underline-offset-2 transition-colors duration-500 hover:underline"
>
And many more…
</button>
</p>
{{ $bodybgImage := resources.Get `img/logos/bodyBackground.webp` }}
<section
class="parallax p-8 text-white"
style="background-image: url('{{ $bodybgImage.RelPermalink }}');"
>
<div class="meteor meteor-1"></div>
<div class="meteor meteor-2"></div>
<div class="meteor meteor-3"></div>
<div class="meteor meteor-4"></div>
<section class="no-js-hide p-8">
{{ partial "search.html" . }}
</section>
<!-- Section to Meet Our Scientists -->
{{ $secHedClass := `text-2xl font-sans font-bold leading-tight mb-2` }}
<section class="p-8 pt-0">
<div class="{{ $wellClass }}" x-data>
<h2 class="{{ $secHedClass }} scroll-mt-2" x-ref="hed">
Meet our Scientists
</h2>
{{ $scientists := .GetPage "scientist" }}
{{ $people := $scientists.RegularPages }}
<ul
x-init="$shuffle($el)"
class="first-half-dozen mt-4 grid max-w-screen-md gap-x-4 gap-y-4 sm:grid-cols-2 md:grid-cols-3"
x-ref="container"
>
{{ range $people }}
<li class="min-w-0">
{{ partial "person-box.html" . }}
</li>
{{ end }}
</ul>
<div class="mt-4 text-right font-sans font-bold">
<p>
<button
type="button"
@click="$rotate($refs.container, 6); $refs.hed.scrollIntoView({ block: 'start', behavior: 'smooth' });"
class="decoration-blue decoration-4 underline-offset-2 transition-colors duration-500 hover:underline"
>
And many more…
</button>
</p>
</div>
</div>
</div>
</section>
</section>

<style>
.meteor {
position: fixed;
width: 20px;
height: 20px;
background: linear-gradient(135deg, white, transparent);
border-radius: 50%;
transform: rotate(45deg);
opacity: 0.8;
}

/* Individual meteor start positions */
.meteor-1 {
top: -50px;
right: -50px;
}
.meteor-2 {
top: -100px;
right: -100px;
}
.meteor-3 {
top: -150px;
right: -150px;
}
.meteor-4 {
top: -200px;
right: -200px;
}
</style>
<script>
document.addEventListener("scroll", () => {
const scrollPosition = window.scrollY;

// Select all meteors
const meteors = document.querySelectorAll(".meteor");

// Adjust position of each meteor based on scroll amount
meteors.forEach((meteor, index) => {
const speed = (index + 1) * 0.5; // Each meteor moves at a different speed
const xMovement = scrollPosition * speed; // Horizontal movement (to the left)
const yMovement = scrollPosition * speed; // Vertical movement (downward)

meteor.style.transform = `translate(-${xMovement}px, ${yMovement}px) rotate(45deg)`;
});
});
</script>

<!-- Section by Area of Expertise -->
<section class="bg-g-3 p-8 shadow-inner">
<div class="{{ $wellClass }}" x-data="{ isOpen: false }">
Expand Down
79 changes: 62 additions & 17 deletions layouts/_default/person.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,22 @@
<main class="p-8" data-pagefind-body x-data="{ isBio: true }">
<div class="mx-auto flex max-w-screen-md flex-col">
<!-- Title and Organization -->
<h1 class="break-word font-bold leading-tight">
<span class="text-2xl text-black">{{ .Params.name }}</span>
</h1>
{{ with .Param "organization" }}
<h2
class="break-word text-lg leading-tight text-gray"
data-pagefind-meta="organization"
>
{{ . }}
</h2>
{{ end }}

<div class=" enter">
<h1 class="break-word font-bold leading-tight">
<span class="text-2xl text-black">{{ .Params.name }}</span>
</h1>
{{ with .Param "organization" }}
<h2
class="break-word text-lg leading-tight text-gray"
data-pagefind-meta="organization"
>
{{ . }}
</h2>
{{ end }}
</div>

<!-- Basic Information Section -->
<div class="links-blue-darker mt-2 text-sm sm:flex sm:flex-wrap">
<div class="links-blue-darker enter4 mt-2 text-sm sm:flex sm:flex-wrap">
<!-- Institution of Ph.D. -->
<p class="sm:w-1/2">
<span class="mr-5 text-g-6">
Expand Down Expand Up @@ -116,7 +117,7 @@ <h1 class="break-word font-bold leading-tight">
</div>

<!-- Content Switch Buttons -->
<div class="mt-4 grid items-end gap-4 bg-black p-2 md:grid-cols-2">
<div class="enter5 mt-4 grid items-end gap-4 bg-black p-2 md:grid-cols-2">
<button
:class="isBio ? 'bg-white text-black' : 'bg-gray text-white'"
class="mx-4 flex-1 transform rounded-lg px-4 py-2 transition-transform duration-200 ease-in-out hover:scale-105 hover:shadow-lg focus:outline-none"
Expand All @@ -143,7 +144,7 @@ <h1 class="break-word font-bold leading-tight">
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="mt-4"
class="enter6 mt-4"
>
<h2 class="text-lg font-bold">Scientist Biography</h2>

Expand All @@ -164,7 +165,7 @@ <h2 class="text-lg font-bold">Scientist Biography</h2>
<img
data-pagefind-meta="image[src], image_alt[alt], image_srcset[srcset], image_width[width], image_height[height]"
title="Click to download"
class="mx-auto rounded bg-g-4 shadow transition-shadow duration-500 hover:shadow-lg sm:mx-0"
class="image-zoom mx-auto rounded bg-g-4 shadow transition-shadow duration-500 hover:shadow-lg sm:mx-0"
alt="Headshot of {{ $.Title }}"
width="{{ $imgSmall.Width }}"
height="{{ $imgSmall.Height }}"
Expand Down Expand Up @@ -411,10 +412,21 @@ <h2 class="text-lg font-bold">Citations</h2>
// Call the function to update level descriptions
updateLevelDescriptions();
});

// initial animation remove
document.addEventListener("DOMContentLoaded", function () {
const bioSection = document.querySelector(".enter6");

if (bioSection) {
bioSection.addEventListener("animationend", function () {
bioSection.classList.remove("enter6");
});
}
});
</script>

<!-- CSS for highlighting -->
<style>
/* CSS for highlighting */
.citation-item.highlight {
background-color: yellow;
transition:
Expand All @@ -425,5 +437,38 @@ <h2 class="text-lg font-bold">Citations</h2>
.citation-item.fade-out {
background-color: transparent;
}

/* CSS for image Zoom */
.image-zoom {
transition: transform 0.3s ease-in-out;
}

.image-zoom:hover {
transform: scale(1.1);
}

@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.enter3 {
animation: slideInLeft 0.3s ease-out forwards;
}
.enter4 {
animation: slideInLeft 0.4s ease-out forwards;
}
.enter5 {
animation: slideInLeft 0.5s ease-out forwards;
}
.enter6 {
animation: slideInLeft 0.6s ease-out forwards;
}
</style>
{{ end }}
4 changes: 2 additions & 2 deletions layouts/partials/person-box.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<a
class="group flex h-full flex-col gap-3 border-8 border-blue p-4 shadow transition-colors duration-500 hover:border-blue-darker"
class="group flex h-full flex-col gap-3 border-8 border-blue bg-g-4 p-4 shadow transition-colors duration-500 hover:border-blue-darker"
href="{{ $.RelPermalink }}"
>
{{ with .Param "images" }}
Expand Down Expand Up @@ -50,7 +50,7 @@


<h2
class="mt-auto font-sans text-lg font-bold underline decoration-blue decoration-4 underline-offset-2 transition-colors duration-500 group-hover:decoration-blue-darker"
class="mt-auto font-sans text-lg font-bold text-black underline decoration-blue decoration-4 underline-offset-2 transition-colors duration-500 group-hover:decoration-blue-darker"
>
{{- .Params.name -}}
</h2>
Expand Down
Loading

0 comments on commit cb7a16c

Please sign in to comment.