mikkel/astro-personal-website
1
0
Fork 0
mirror of https://github.com/mikkelsvartveit/astro-personal-website.git synced 2025-12-22 11:12:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve view transitions on images

Browse source
This commit is contained in:
Mikkel Svartveit 2023-10-18 16:51:42 -07:00
parent db4c840dc5
commit dcccb29b7a
6 changed files with 45 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Navbar.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { slide, fade } from "svelte/transition";
export let sticky = true;
export let currentPath: string;
$: currentPathTrimmed = currentPath.replace(/\/+$/, "");
@ -19,8 +20,8 @@
<svelte:window bind:scrollY={scrollPosition} />
<header
class="sticky top-0 z-10 bg-gray-50 transition-shadow ease-in"
class:shadow={isScrolled}
class={sticky ? "sticky top-0 z-10 bg-gray-50 transition-shadow ease-in" : ""}
class:shadow={sticky && isScrolled}
>
<nav
class="mx-auto flex h-16 max-w-5xl flex-wrap items-center justify-between px-6"

20
src/components/Photo.astro Normal file
View file

@ -0,0 +1,20 @@
---
import { Image } from "astro:assets";
interface Props {
photo: any;
class?: string;
}
const { photo, class: className } = Astro.props;
---
<Image
src={photo}
alt=""
height={1000}
densities={[1, 2]}
quality="mid"
class={"object-contain rounded " + (className ?? "")}
transition:name={photo.src}
/>

9
src/layouts/BaseLayout.astro
View file

@ -4,13 +4,18 @@ import RootLayout from "./RootLayout.astro";
interface Props {
title?: string;
noStickyNavbar?: boolean;
}
const { title } = Astro.props;
const { title, noStickyNavbar } = Astro.props;
---
<RootLayout {title}>
<Navbar client:load currentPath={Astro.url.pathname} />
<Navbar
client:load
sticky={!noStickyNavbar}
currentPath={Astro.url.pathname}
/>
<main>
<slot />
</main>

2
src/layouts/RootLayout.astro
View file

@ -12,7 +12,7 @@ const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
---
<!doctype html>
<html lang="en" transition:animate="fade">
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />

21
src/pages/photography/[photo].astro
View file

@ -1,8 +1,8 @@
---
import type { GetStaticPaths } from "astro";
import { getFileNameFromPath } from "./index.astro";
import { Image } from "astro:assets";
import RootLayout from "@layouts/RootLayout.astro";
import Photo from "@components/Photo.astro";
export const getStaticPaths = (async () => {
const photos = await Astro.glob("../../assets/photos/*");
@ -21,17 +21,12 @@ const { photo } = Astro.props;
---
<RootLayout title="Photo" hideScrollbar>
<div class="bg-gray-900 m-screen h-screen" onclick="
history.back()
">
<Image
src={photo.default}
alt=""
height={1000}
densities={[1, 2]}
class="h-screen w-screen object-contain"
loading="eager"
decoding="sync"
/>
<div
class="cursor-pointer bg-gray-900 w-full h-screen flex justify-center"
onclick="
history.back()
"
>
<Photo photo={photo.default} class="w-auto" />
</div>
</RootLayout>

16
src/pages/photography/index.astro
View file

@ -4,6 +4,7 @@ import ContainerLayout from "@layouts/ContainerLayout.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro";
import { Image } from "astro:assets";
import Photo from "@components/Photo.astro";
const photos = await Astro.glob("../../assets/photos/*");
@ -21,7 +22,7 @@ export const getFileNameFromPath = (path: string) => {
};
---
<BaseLayout title="Photography">
<BaseLayout title="Photography" noStickyNavbar>
<ContainerLayout>
<TextContentLayout>
<h1
@ -44,16 +45,11 @@ export const getFileNameFromPath = (path: string) => {
photos.sort(sortFiles).map((photo) => (
<a
href={`/photography/${getFileNameFromPath(photo.default.src)}`}
class="flex w-full py-2 duration-100 hover:-translate-y-1"
class="flex w-full py-2 duration-100 hover:-translate-y-1 rounded-lg"
>
<Image
src={photo.default}
alt=""
width={400}
densities={[1, 2]}
transition:name={getFileNameFromPath(photo.default.src)}
class="rounded bg-gray-200"
/>
<div class="bg-gray-200 rounded">
<Photo photo={photo.default} />
</div>
</a>
))
}