122 lines
4.1 KiB
PHP
122 lines
4.1 KiB
PHP
@extends('layouts.site')
|
|
|
|
@section('content')
|
|
<section class="portfolio-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 text-center">
|
|
<x-block keycode="WORK-HEADER"></x-block>
|
|
</div> <!-- end .col-lg-12 -->
|
|
</div> <!-- end .row -->
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="portfolio-filter">
|
|
<button class="active" data-filter="all">{{ trans('fp.ALL') }}</button>
|
|
@foreach($categories as $category)
|
|
<button data-filter="{{ $category['filter'] }}">{{ $category['title'] }}</button>
|
|
@endforeach
|
|
</div>
|
|
<div class="portfolio-projects">
|
|
@forelse(collect($artworks)->sortBy('sort_order')->values() as $artwork)
|
|
@php
|
|
$subline = $artwork['subline'] ?? null;
|
|
$subtitle = $artwork['subtitle'] ?? null;
|
|
$thumbnail = $artwork['thumbnail'] ?? ['type' => 'image', 'url' => $artwork['image'] ?? null];
|
|
@endphp
|
|
<div class="project-card {{ implode(' ', $artwork['filters']) }}" data-order="{{ $artwork['sort_order'] ?? 0 }}" style="order: {{ $artwork['sort_order'] ?? 0 }};">
|
|
<a href="{{ $artwork['url'] }}">
|
|
<div class="project-img-wrapper">
|
|
@if(($thumbnail['type'] ?? 'image') === 'bunny' && !empty($thumbnail['embedUrl']))
|
|
<iframe class="project-slot__iframe"
|
|
src="{!! $thumbnail['embedUrl'] !!}"
|
|
frameborder="0"
|
|
style="width: 100%; aspect-ratio: 587/673;pointer-events:none;"
|
|
allow="autoplay; fullscreen; picture-in-picture"
|
|
allowfullscreen="">
|
|
</iframe>
|
|
@else
|
|
<img src="{{ $thumbnail['url'] ?? $artwork['image'] }}" alt="{{ $artwork['title'] }}" loading="lazy">
|
|
@endif
|
|
</div></a>
|
|
<div class="portfolio-info">
|
|
<h4>{{ $artwork['title'] }}</h4>
|
|
@if($subline || $subtitle)
|
|
<span>{{ $subline ?: $subtitle }}</span>
|
|
@endif
|
|
</div> <!-- end .portfolio-info -->
|
|
</div> <!-- end .project-card -->
|
|
@empty
|
|
<div class="mt-4 text-center">
|
|
<p class="text-center">{{ trans('fp.NO_PUBLISHED_PROJECTS_YET') }}</p>
|
|
</div> <!-- end .mt-4 -->
|
|
@endforelse
|
|
</div> <!-- end .portfolio-projects -->
|
|
</div> <!-- end .col-lg-12 -->
|
|
</div> <!-- end .row -->
|
|
</div> <!-- end .container -->
|
|
</section> <!-- end .portfolio-area -->
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
document.fonts.ready.then(() => {
|
|
gsap.set('.portfolio-filter button', { opacity: 1 });
|
|
|
|
gsap.fromTo(
|
|
'.portfolio-filter button',
|
|
{
|
|
y: '-=50',
|
|
opacity: 0,
|
|
rotation: 'random(-30,30)'
|
|
},
|
|
{
|
|
y: '0',
|
|
opacity: 1,
|
|
rotation: 0,
|
|
duration: 0.8,
|
|
ease: 'back.out(1.5)',
|
|
stagger: 0.15,
|
|
scrollTrigger: {
|
|
trigger: '.portfolio-filter',
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none none'
|
|
}
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
document.fonts.ready.then(() => {
|
|
gsap.set('.portfolio-filter button', { opacity: 1 });
|
|
|
|
gsap.fromTo(
|
|
'.portfolio-filter button',
|
|
{
|
|
y: '-=50',
|
|
opacity: 0,
|
|
rotation: 'random(-30,30)'
|
|
},
|
|
{
|
|
y: '0',
|
|
opacity: 1,
|
|
rotation: 0,
|
|
duration: 0.8,
|
|
ease: 'back.out(1.5)',
|
|
stagger: 0.15,
|
|
scrollTrigger: {
|
|
trigger: '.portfolio-filter',
|
|
start: 'top 80%',
|
|
toggleActions: 'play none none none'
|
|
}
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
@endpush |