Skip to content

Commit

Permalink
v2 first look
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniele Ciminieri committed Oct 14, 2024
1 parent 532c6c0 commit 515b60a
Show file tree
Hide file tree
Showing 9 changed files with 272 additions and 105 deletions.
25 changes: 25 additions & 0 deletions src/lib/components/BlurredButton.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script>
const { text, color, onClick, classes } = $props();
</script>

<button class="{classes || ''} btn btn-blur rounded-pill px-3 py-1" onclick={onClick}>{text}</button
>

<style>
.btn-blur {
background-color: transparent;
color: white;
box-shadow:
inset 0px 0px 2px 2px var(--btn-color),
0px 0px 2px 2px var(--btn-color);
border: 1px solid var(--btn-color);
transition: all 0.3s ease;
}
.btn-blur:hover {
background-color: var(--btn-color);
}
.btn-blur:active,
.btn-blur:focus {
border: 1px solid var(--btn-color);
}
</style>
32 changes: 32 additions & 0 deletions src/lib/components/BlurredIconButton.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<script>
const { icon, disabled, onClick, classes } = $props();
</script>

<button
class="{classes ||
''} btn btn-blur rounded-circle d-flex justify-content-center align-items-center"
style="width: 35px; height: 35px;"
{disabled}
onclick={onClick}
>
<i class={icon}></i>
</button>

<style>
.btn-blur {
background-color: transparent;
color: white;
box-shadow:
inset 0px 0px 2px 2px var(--btn-color),
0px 0px 2px 2px var(--btn-color);
border: 1px solid var(--btn-color);
transition: all 0.3s ease;
}
.btn-blur:hover {
background-color: var(--btn-color);
}
.btn-blur:active,
.btn-blur:focus {
border: 1px solid var(--btn-color);
}
</style>
160 changes: 109 additions & 51 deletions src/lib/components/DataProject.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<script>
import { getVideoUrl } from '$lib/sanityClient';
import ProjectDetails from './ProjectDetails.svelte';
import ImageGallery from './ImageGallery.svelte';
import { urlFor } from '$lib/sanityClient';
import { browser } from '$app/environment';
import { slide } from 'svelte/transition';
import { cubicInOut } from 'svelte/easing';
import BlurredButton from '$lib/components/BlurredButton.svelte';
import BlurredIconButton from './BlurredIconButton.svelte';
const { project, corsoColor } = $props();
let showModal = $state(false);
Expand All @@ -19,6 +20,7 @@
showModal = true;
isVideo = true;
currentMediaIndex = 0;
disableBodyScroll();
} else if (project.link) {
window.open(project.link, '_blank');
}
Expand All @@ -28,10 +30,12 @@
showModal = true;
isVideo = false;
currentMediaIndex = index;
disableBodyScroll();
}
function closeModal() {
showModal = false;
enableBodyScroll();
}
function nextMedia() {
Expand All @@ -54,6 +58,18 @@
}
}
function disableBodyScroll() {
if (browser) {
document.body.style.overflow = 'hidden';
}
}
function enableBodyScroll() {
if (browser) {
document.body.style.overflow = '';
}
}
$effect(async () => {
if (browser) {
Hammer = (await import('hammerjs')).default;
Expand All @@ -73,31 +89,76 @@
};
}
});
$effect(() => {
return () => {
if (showModal) {
enableBodyScroll();
}
};
});
</script>

{#if project}
<div class="container-fluid pb-5">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="d-none d-md-flex flex-wrap mt-2">
{#each project.immagini as image, index}
<div class="col-md-3 p-2">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<img
src={urlFor(image).url()}
alt={`Project image ${index + 1}`}
class="img-fluid cursor-pointer"
onclick={() => handleImageClick(index)}
/>
</div>
{/each}
</div>
<div class="d-md-none mt-2">
<ImageGallery
color={corsoColor}
images={project.immagini}
onImageClick={handleImageClick}
/>
</div>
</div>
</div>
</div>
<div class="container-fluid border-bottom border-white pb-5">
<!--
<ProjectDetails {project} />
-->
<div class="row">
<div class="col-md-6 col-sm-12" style="min-height:600px;">
<div class="col-md-3 offset-md-3 col-sm-12">
<div>
<h5 class="text-uppercase">{project.titolo}</h5>
{#if project.studenti && project.studenti.length > 1}
<p class="fs-5 mb-2">Progetto collettivo</p>
{:else if project.studenti}
{#each project.studenti as student}
<p class="fs-5 mb-2">{student.nome} {student.cognome}</p>
{/each}
{/if}
</div>
<p class="fs-5 text-secondary mt-0">{project.tipologia}</p>
</div>
<div class="col-md-6 col-sm-12">
<div class="d-flex flex-column align-items-start h-100">
<p class="fs-5">
{project.descrizione}
</p>
<button
class="btn rounded-pill hover-effect text-white mt-5"
style="--corso-color: #{corsoColor}; background-color: #{corsoColor};"
onclick={handleViewProject}>Vedi il progetto</button
>
<BlurredButton
text="Vedi il progetto"
color={corsoColor}
onClick={handleViewProject}
--btn-color={'#' + corsoColor}
classes="my-5"
/>
</div>
</div>
<div class="col-md-6 col-sm-12">
<ImageGallery
color={corsoColor}
images={project.immagini}
onImageClick={handleImageClick}
/>
</div>
</div>
</div>

Expand All @@ -107,19 +168,40 @@
<div class="modal modal-xl" style="display: block" onclick={handleOutsideClick}>
<div
class="modal-backdrop fade show"
style="opacity: 0.5; background-color: #{corsoColor};"
style="opacity:1 !important; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(10px);"
></div>
<div class="modal-dialog modal-dialog-centered" style="z-index: 1050;">
<div class="modal-content">
<div class="modal-header d-flex justify-content-center align-items-center border-0">
<button
type="button"
class="btn px-3 py-2 rounded-pill border-0 hover-effect bg-black text-white"
style="--corso-color: #{corsoColor};"
onclick={closeModal}
>
Chiudi
</button>
<div
class="modal-header px-0 d-flex {isVideo
? 'justify-content-end'
: 'justify-content-between'} align-items-center border-0"
style={!isVideo ? 'width:calc(100vh - 200px); align-self:center; max-width: 100%' : ''}
>
{#if !isVideo && project.immagini && project.immagini.length > 0}
<div class="align-self-start d-flex flex-row gap-3">
<BlurredIconButton
icon="bi bi-arrow-left"
color={corsoColor}
onClick={prevMedia}
disabled={currentMediaIndex === 0}
--btn-color={'#' + corsoColor}
/>
<BlurredIconButton
icon="bi bi-arrow-right"
color={corsoColor}
onClick={nextMedia}
disabled={currentMediaIndex === project.immagini.length - 1}
--btn-color={'#' + corsoColor}
/>
</div>
{/if}
<BlurredButton
text="Chiudi"
color={corsoColor}
onClick={closeModal}
--btn-color={'#' + corsoColor}
/>
</div>
<div
class="modal-body d-flex align-items-center justify-content-center p-0 position-relative"
Expand Down Expand Up @@ -158,24 +240,6 @@
{/if}
{/each}
</div>
{#if !isVideo && project.immagini && project.immagini.length > 1}
<button
class="btn d-none d-md-flex align-items-center justify-content-center hover-effect bg-black text-white position-absolute"
style="--corso-color: #{corsoColor}; width: 60px; height: 60px; border-radius: 50%; left: 10px; top: 50%; transform: translateY(-50%);"
onclick={prevMedia}
disabled={currentMediaIndex === 0}
>
<i class="bi bi-arrow-left"></i>
</button>
<button
class="btn d-none d-md-flex align-items-center justify-content-center hover-effect bg-black text-white position-absolute"
style="--corso-color: #{corsoColor}; width: 60px; height: 60px; border-radius: 50%; right: 10px; top: 50%; transform: translateY(-50%);"
onclick={nextMedia}
disabled={currentMediaIndex === project.immagini.length - 1}
>
<i class="bi bi-arrow-right"></i>
</button>
{/if}
{/if}
</div>
</div>
Expand All @@ -185,15 +249,6 @@
{/if}

<style>
.hover-effect {
transition:
background-color 0.1s,
color 0s;
}
.hover-effect:hover {
background-color: white !important;
color: var(--corso-color) !important;
}
.modal-content {
background-color: transparent;
border: none;
Expand All @@ -203,4 +258,7 @@
align-items: center;
justify-content: center;
}
.cursor-pointer {
cursor: pointer;
}
</style>
42 changes: 32 additions & 10 deletions src/lib/components/ExperienceProject.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@
</script>

{#if project}
<div class="container-fluid">
<!--<div class="container-fluid">
<div class="row">
<ProjectDetails {project} />
</div>
</div>
<div class="container-fluid">
</div>-->
<div class="container-fluid mt-3">
<div class="row">
<div class="col-md-12">
{#if project?.immagini?.[3]}
Expand All @@ -33,6 +33,33 @@
</div>
</div>
</div>
<div class="container-fluid my-5">
<!--
<ProjectDetails {project} />
-->
<div class="row">
<div class="col-md-3 offset-md-3 col-sm-12">
<div>
<h5 class="text-uppercase">{project.titolo}</h5>
{#if project.studenti && project.studenti.length > 1}
<p class="fs-5 mb-2">Progetto collettivo</p>
{:else if project.studenti}
{#each project.studenti as student}
<p class="fs-5 mb-2">{student.nome} {student.cognome}</p>
{/each}
{/if}
</div>
<p class="fs-5 text-secondary mt-0">{project.tipologia}</p>
</div>
<div class="col-md-6 col-sm-12">
<div class="d-flex flex-column align-items-start h-100">
<p class="fs-5">
{project.descrizione}
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row gx-0" style="margin-top: 20px;">
{#if project?.immagini?.[0]}
Expand All @@ -52,13 +79,8 @@
{/if}
</div>
</div>
<div class="container-fluid mt-5">
<div class="row">
<div class="col-md-5 col-xs-12">
<p class="fs-5">
{project?.descrizione}
</p>
</div>
<div class="container-fluid mt-5 mb-5">
<div class="row justify-content-center">
<div class="col-md-7 col-xs-12">
{#if project.video}
<div class="ratio ratio-16x9 position-relative">
Expand Down
6 changes: 4 additions & 2 deletions src/lib/cursorEffect.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Configuration variables for the grid
const MIN_GRID_SIZE = 50; // Minimum size of each grid cell in pixels
const MAX_GRID_SIZE = 50; // Maximum size of each grid cell in pixels
const ANIMATION_DURATION = 1000; // Duration of the square's visibility in milliseconds
const ANIMATION_DURATION = 2000; // Duration of the square's visibility in milliseconds
const PADDING = 0; // Padding between squares in pixels
const BORDER_ONLY = false; // If true, only draw the border of the div

Expand Down Expand Up @@ -33,7 +33,8 @@ export function createSquareAtMouse(x, y) {
square.style.height = `${GRID_SIZE}px`;
square.style.mixBlendMode = 'difference'; // This will invert the colors underneath
square.style.pointerEvents = 'none'; // Ensure it doesn't interfere with other elements
square.style.transition = 'opacity ' + ANIMATION_DURATION / 1000 + 's ease-out'; // Add transition for fading effect
square.style.transition = 'all ' + ANIMATION_DURATION / 1000 + 's ease-out'; // Add transition for fading effect
square.style.filter = 'blur(0px)';
square.dataset.x = cellX; // Add data attributes to identify the square's position
square.dataset.y = cellY;

Expand All @@ -50,6 +51,7 @@ export function createSquareAtMouse(x, y) {
// Start the fading effect after a short delay
setTimeout(() => {
square.style.opacity = '0';
square.style.filter = 'blur(20px)';
}, 50);

// Remove the square after the animation completes
Expand Down
Loading

0 comments on commit 515b60a

Please sign in to comment.