[wip] Create About page
This commit is contained in:
43
src/components/atoms/AboutGridPhoto.svelte
Normal file
43
src/components/atoms/AboutGridPhoto.svelte
Normal file
@@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import Image from './Image.svelte'
|
||||
|
||||
export let id: string
|
||||
export let alt: string
|
||||
export let disabled: boolean = false
|
||||
|
||||
let hovering: boolean = false
|
||||
let timer: ReturnType<typeof setTimeout> | number = null
|
||||
|
||||
$: classes = [
|
||||
hovering ? 'is-hovered' : undefined,
|
||||
$$props.class
|
||||
].join(' ').trim()
|
||||
|
||||
// Hovering functions
|
||||
const handleMouseEnter = () => {
|
||||
clearTimeout(timer)
|
||||
hovering = true
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
// Reset hovering to false after a delay
|
||||
timer = setTimeout(() => hovering = false, 800)
|
||||
}
|
||||
</script>
|
||||
|
||||
<figure class={classes}
|
||||
on:mouseenter={handleMouseEnter}
|
||||
on:mouseleave={handleMouseLeave}
|
||||
>
|
||||
<Image
|
||||
class={disabled ? 'is-disabled' : null}
|
||||
{id}
|
||||
sizeKey="photo-list"
|
||||
sizes={{
|
||||
small: { width: 250 },
|
||||
medium: { width: 400 },
|
||||
large: { width: 600 },
|
||||
}}
|
||||
ratio={1.5}
|
||||
{alt}
|
||||
/>
|
||||
</figure>
|
||||
142
src/routes/about.svelte
Normal file
142
src/routes/about.svelte
Normal file
@@ -0,0 +1,142 @@
|
||||
<style lang="scss">
|
||||
@import "../style/pages/about";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, afterUpdate } from 'svelte'
|
||||
import { map } from '$utils/functions'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import PageTransition from '$components/PageTransition.svelte'
|
||||
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||||
|
||||
export let data: any
|
||||
export let photos: any[]
|
||||
|
||||
// console.log(data)
|
||||
|
||||
let scrollY: number, innerWidth: number, innerHeight: number
|
||||
let photosGridEl: HTMLElement
|
||||
let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
|
||||
let sectionsObserver: IntersectionObserver
|
||||
|
||||
$: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight / 2, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.125, true)
|
||||
$: fadedPhotosIndexes = innerWidth > 768
|
||||
? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
|
||||
: [0]
|
||||
|
||||
|
||||
onMount(() => {
|
||||
// Sections observer
|
||||
sectionsObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(({ isIntersecting, target }: { target: HTMLElement } & IntersectionObserverEntry) => {
|
||||
target.classList.toggle('is-visible', isIntersecting)
|
||||
|
||||
// Run effect once
|
||||
if (isIntersecting && target.dataset.keep) {
|
||||
sectionsObserver.unobserve(target)
|
||||
}
|
||||
})
|
||||
}, {
|
||||
threshold: 0.2,
|
||||
rootMargin: '-10% 0px -30%'
|
||||
})
|
||||
|
||||
const sections = document.querySelectorAll('.about [data-section]')
|
||||
sections.forEach(section => sectionsObserver.observe(section))
|
||||
|
||||
// Destroy
|
||||
return () => {
|
||||
sectionsObserver && sectionsObserver.disconnect()
|
||||
}
|
||||
})
|
||||
|
||||
afterUpdate(() => {
|
||||
// Update photos grid top offset
|
||||
photosGridOffset = photosGridEl.offsetTop
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
|
||||
|
||||
<Metas
|
||||
title="About the project – Houses Of"
|
||||
description=""
|
||||
image=""
|
||||
/>
|
||||
|
||||
|
||||
<PageTransition name="about">
|
||||
<Heading
|
||||
text={data.description}
|
||||
/>
|
||||
|
||||
<section class="about__purpose" data-section data-keep="">
|
||||
<div class="container-wide">
|
||||
<div class="text title-xl" role="heading">
|
||||
{@html data.purpose_text}
|
||||
</div>
|
||||
|
||||
<div class="background" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about__process">
|
||||
<div class="title">
|
||||
<h2 class="title-big">{data.process_title}</h2>
|
||||
<p class="text-normal">{data.process_subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div class="steps container-wide">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about__photos" bind:this={photosGridEl}>
|
||||
<div class="container-wide">
|
||||
<div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
|
||||
{#each photos as { image: { id }, title }, index}
|
||||
<AboutGridPhoto class="about-grid-photo"
|
||||
{id}
|
||||
alt={title}
|
||||
disabled={fadedPhotosIndexes.includes(index)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="about__bottom container grid">
|
||||
<section class="about__interest grid">
|
||||
<h2 class="title-xl">{data.contact_title}</h2>
|
||||
|
||||
<div class="blocks">
|
||||
{#each data.contact_blocks as { title, text, link, button }}
|
||||
<div class="block">
|
||||
<h3 class="text-label">{title}</h3>
|
||||
<p class="text-normal">{text}</p>
|
||||
{#if link}
|
||||
<Button size="small" url={link} text={button} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid-modules">
|
||||
<div class="wrap">
|
||||
<ShopModule />
|
||||
<NewsletterModule />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</PageTransition>
|
||||
85
src/routes/about.ts
Normal file
85
src/routes/about.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
|
||||
import { fetchAPI } from '$utils/api'
|
||||
import { getRandomItems } from '$utils/functions'
|
||||
|
||||
export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
|
||||
try {
|
||||
// Get data and total of published photos
|
||||
const res = await fetchAPI(`
|
||||
query {
|
||||
photos: photo (
|
||||
filter: {
|
||||
favorite: { _eq: true },
|
||||
status: { _eq: "published" },
|
||||
},
|
||||
limit: -1,
|
||||
) {
|
||||
id
|
||||
}
|
||||
|
||||
about {
|
||||
description
|
||||
intro_firstphoto {
|
||||
id
|
||||
title
|
||||
}
|
||||
intro_portraits {
|
||||
id
|
||||
title
|
||||
}
|
||||
intro_text
|
||||
intro_firstlocation {
|
||||
slug
|
||||
country {
|
||||
flag { id }
|
||||
slug
|
||||
}
|
||||
}
|
||||
|
||||
purpose_text
|
||||
|
||||
process_title
|
||||
process_subtitle
|
||||
|
||||
contact_title
|
||||
contact_blocks
|
||||
}
|
||||
}
|
||||
`)
|
||||
const { data: { about, photos: photosIds }} = res
|
||||
|
||||
// Get random photos
|
||||
const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id)
|
||||
|
||||
// Query these random photos from IDs
|
||||
const photosRes = await fetchAPI(`
|
||||
query {
|
||||
photo (filter: { id: { _in: [${randomPhotosIds}] }}) {
|
||||
id
|
||||
title
|
||||
slug
|
||||
image {
|
||||
id
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
const { data: { photo: photos }} = photosRes
|
||||
|
||||
console.log(about)
|
||||
|
||||
return {
|
||||
body: {
|
||||
data: about,
|
||||
photos,
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
status: 404,
|
||||
body: error,
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,6 +43,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// X-Large
|
||||
.title-xl {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(34px);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.025em;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: clamp(#{rem(34px)}, 4vw, #{rem(60px)});
|
||||
}
|
||||
}
|
||||
|
||||
// Big
|
||||
.title-big {
|
||||
font-family: $font-serif;
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
&--small {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
font-size: rem(16px);
|
||||
|
||||
@include bp (md) {
|
||||
height: 40px;
|
||||
|
||||
@@ -28,5 +28,21 @@
|
||||
max-width: 600px;
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
:global(a) {
|
||||
position: relative;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(rgba($color-tertiary, 0.3), rgba($color-tertiary, 0.3));
|
||||
background-position: 0 100%;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
transition: color 0.6s var(--ease-quart);
|
||||
|
||||
&:hover {
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
272
src/style/pages/_about.scss
Normal file
272
src/style/pages/_about.scss
Normal file
@@ -0,0 +1,272 @@
|
||||
.about {
|
||||
/*
|
||||
** Purpose
|
||||
*/
|
||||
&__purpose {
|
||||
text-align: center;
|
||||
|
||||
.container-wide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - var(--sides));
|
||||
color: #fff;
|
||||
padding: 0 8%;
|
||||
box-shadow: inset 0 0 0 2px $color-primary-tertiary20;
|
||||
border-radius: 16px;
|
||||
|
||||
@include bp (sm) {
|
||||
padding: 0 18%;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
.text {
|
||||
max-width: 1024px;
|
||||
|
||||
:global(strong) {
|
||||
color: $color-secondary-light;
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Background
|
||||
.background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
background-color: $color-primary-tertiary20;
|
||||
transition: opacity 1.2s var(--ease-quart);
|
||||
}
|
||||
|
||||
|
||||
// Visible state
|
||||
&:global(.is-visible) {
|
||||
.background {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Process
|
||||
*/
|
||||
&__process {
|
||||
@include bp (sm) {
|
||||
margin: 128px 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
max-width: 400px;
|
||||
margin: 0 auto 48px;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 24px;
|
||||
color: $color-secondary;
|
||||
}
|
||||
p {
|
||||
color: $color-tertiary;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-template-columns: repeat(16, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
div {
|
||||
background: $color-primary-darker;
|
||||
border-radius: 8px;
|
||||
height: 600px;
|
||||
|
||||
@include bp (sm) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
grid-column: span 10;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
grid-column: span 6;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
grid-column: span 6;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
grid-column: span 10;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
grid-column: span 8;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
grid-column: span 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Photos grid
|
||||
*/
|
||||
&__photos {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 48px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.photos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 12px;
|
||||
margin: -5% -5% 0;
|
||||
transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
|
||||
transition: transform 0.8s var(--ease-quart);
|
||||
}
|
||||
|
||||
:global(picture) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: opacity 1s var(--ease-quart);
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
$opacity-off: 0.2;
|
||||
|
||||
// States
|
||||
:global(.is-disabled) {
|
||||
opacity: $opacity-off;
|
||||
}
|
||||
:global(.is-hovered picture) {
|
||||
opacity: 1;
|
||||
}
|
||||
:global(.is-hovered picture:not(.is-disabled)) {
|
||||
opacity: $opacity-off;
|
||||
}
|
||||
|
||||
// Mask
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20vw;
|
||||
background: linear-gradient(to top, rgba($color-primary, 0), $color-primary);
|
||||
pointer-events: none;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30vw;
|
||||
background: linear-gradient(to top, $color-primary, rgba($color-primary, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Bottom
|
||||
*/
|
||||
&__bottom {
|
||||
@include bp (sm) {
|
||||
margin-top: calc(-1 * clamp(160px, 14vw, 240px));
|
||||
}
|
||||
|
||||
// Modules
|
||||
.grid-modules {
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span calc(var(--columns) - 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Interest
|
||||
&__interest {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: $color-primary-tertiary20;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span calc(var(--columns) - 2);
|
||||
margin-bottom: 48px;
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
grid-column: span var(--columns);
|
||||
margin-bottom: 56px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
}
|
||||
.blocks {
|
||||
@include bp (sm) {
|
||||
grid-column: 4 / span calc(var(--columns) - 6);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 11.5%;
|
||||
}
|
||||
}
|
||||
.block {
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 12px;
|
||||
color: $color-secondary-light;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 32px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -17,4 +17,16 @@
|
||||
@include bp (sm) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Wide wrap (close to sides)
|
||||
.container-wide {
|
||||
--sides: 16px;
|
||||
width: calc(100% - var(--sides));
|
||||
max-width: var(--container-width);
|
||||
margin: 0 auto;
|
||||
|
||||
@include bp (sm) {
|
||||
--sides: 24px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user