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

Add photos page

Browse source
This commit is contained in:
Mikkel Svartveit 2023-10-17 22:31:22 -07:00
parent 8fa3c1d084
commit d8fb432578
31 changed files with 146 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public/spinner.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="128px" height="128px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="32" stroke-width="5" stroke="#fef08a" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
</circle>
<circle cx="50" cy="50" r="26" stroke-width="5" stroke="#e2e8f0" stroke-dasharray="40.840704496667314 40.840704496667314" stroke-dashoffset="40.840704496667314" fill="none" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;-360 50 50"></animateTransform>
</circle>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 976 B

BIN
src/assets/images/snipcast-screenshot.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
src/assets/photos/1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.8 MiB

BIN
src/assets/photos/10.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 776 KiB

BIN
src/assets/photos/11.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
src/assets/photos/12.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
src/assets/photos/13.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 745 KiB

BIN
src/assets/photos/14.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
src/assets/photos/15.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
src/assets/photos/16.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
src/assets/photos/17.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
src/assets/photos/18.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.2 MiB

BIN
src/assets/photos/19.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 MiB

BIN
src/assets/photos/2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.4 MiB

BIN
src/assets/photos/20.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 MiB

BIN
src/assets/photos/3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
src/assets/photos/4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
src/assets/photos/5.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
src/assets/photos/6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 161 KiB

BIN
src/assets/photos/7.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
src/assets/photos/8.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
src/assets/photos/9.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 MiB

21
src/layouts/BaseLayout.astro Normal file
View file

@ -0,0 +1,21 @@
---
import Navbar from "@components/Navbar.svelte";
import RootLayout from "./RootLayout.astro";
interface Props {
title?: string;
}
const { title } = Astro.props;
---
<RootLayout {title}>
<Navbar client:load currentPath={Astro.url.pathname} />
<main>
<slot />
</main>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Source+Serif+Pro:wght@300;400;600&display=swap");
</style>
</RootLayout>

6
src/layouts/ProjectLayout.astro
View file

@ -1,6 +1,6 @@
--- ---
import ContainerLayout from "./ContainerLayout.astro"; import ContainerLayout from "./ContainerLayout.astro";
import RootLayout from "./RootLayout.astro"; import BaseLayout from "./BaseLayout.astro";
import TextContentLayout from "./TextContentLayout.astro"; import TextContentLayout from "./TextContentLayout.astro";
import type { MarkdownLayoutProps } from "astro"; import type { MarkdownLayoutProps } from "astro";
@ -18,7 +18,7 @@ const { title, website, repository, technologies, date } =
Astro.props.frontmatter; Astro.props.frontmatter;
--- ---
<RootLayout {title}> <BaseLayout {title}>
<ContainerLayout> <ContainerLayout>
<TextContentLayout> <TextContentLayout>
<h1 <h1
@ -80,4 +80,4 @@ const { title, website, repository, technologies, date } =
</div> </div>
</TextContentLayout> </TextContentLayout>
</ContainerLayout> </ContainerLayout>
</RootLayout> </BaseLayout>

16
src/layouts/RootLayout.astro
View file

@ -1,14 +1,13 @@
--- ---
import { ViewTransitions } from "astro:transitions"; import { ViewTransitions } from "astro:transitions";
import Navbar from "@components/Navbar.svelte";
interface Props { interface Props {
title: string; title?: string;
} }
const { title } = Astro.props; const { title } = Astro.props;
const fullTitle = `${title} – Mikkel Svartveit`; const fullTitle = `${title && title + " – "}Mikkel Svartveit`;
--- ---
<!doctype html> <!doctype html>
@ -25,14 +24,7 @@ const fullTitle = `${title} – Mikkel Svartveit`;
<ViewTransitions fallback="swap" /> <ViewTransitions fallback="swap" />
</head> </head>
<body class="overflow-y-scroll bg-gray-50"> <body class="bg-gray-50 overflow-y-scroll">
<Navbar client:load currentPath={Astro.url.pathname} /> <slot />
<main>
<slot />
</main>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Source+Serif+Pro:wght@300;400;600&display=swap");
</style>
</body> </body>
</html> </html>

6
src/pages/404.astro
View file

@ -1,9 +1,9 @@
--- ---
import Paragraph from "../components/Paragraph.astro"; import Paragraph from "../components/Paragraph.astro";
import RootLayout from "../layouts/RootLayout.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
--- ---
<RootLayout title="Mikkel Svartveit"> <BaseLayout title="Mikkel Svartveit">
<section class="mx-auto max-w-4xl px-3 pb-8 pt-12 sm:px-6"> <section class="mx-auto max-w-4xl px-3 pb-8 pt-12 sm:px-6">
<h1 <h1
class="mb-8 text-center font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl" class="mb-8 text-center font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl"
@ -13,4 +13,4 @@ import RootLayout from "../layouts/RootLayout.astro";
<Paragraph class="text-center">That's an error.</Paragraph> <Paragraph class="text-center">That's an error.</Paragraph>
</section> </section>
</RootLayout> </BaseLayout>

6
src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import RootLayout from "../layouts/RootLayout.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
import Link from "@components/Link.astro"; import Link from "@components/Link.astro";
import Paragraph from "@components/Paragraph.astro"; import Paragraph from "@components/Paragraph.astro";
import SocialIcons from "@components/SocialIcons.astro"; import SocialIcons from "@components/SocialIcons.astro";
@ -8,7 +8,7 @@ import SocialIcons from "@components/SocialIcons.astro";
import portraitImage from "@assets/images/portrait.jpg"; import portraitImage from "@assets/images/portrait.jpg";
--- ---
<RootLayout title="Mikkel Svartveit"> <BaseLayout>
<div <div
class="mx-auto flex max-w-5xl flex-col-reverse px-3 pb-8 pt-12 sm:px-6 md:flex-row" class="mx-auto flex max-w-5xl flex-col-reverse px-3 pb-8 pt-12 sm:px-6 md:flex-row"
> >
@ -62,4 +62,4 @@ import portraitImage from "@assets/images/portrait.jpg";
<Link href="https://tailwindcss.com/" target="_blank">Tailwind CSS</Link>. <Link href="https://tailwindcss.com/" target="_blank">Tailwind CSS</Link>.
</p> </p>
</footer> </footer>
</RootLayout> </BaseLayout>

37
src/pages/photography/[photo].astro Normal file
View file

@ -0,0 +1,37 @@
---
import type { GetStaticPaths } from "astro";
import { getFileNameFromPath } from "./index.astro";
import { Image } from "astro:assets";
import RootLayout from "@layouts/RootLayout.astro";
export const getStaticPaths = (async () => {
const photos = await Astro.glob("../../assets/photos/*");
return photos.map((photo: any) => ({
params: {
photo: getFileNameFromPath(photo.default.src),
},
props: {
photo,
},
}));
}) satisfies GetStaticPaths;
const { photo } = Astro.props;
---
<RootLayout title="Photo">
<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>
</RootLayout>

60
src/pages/photography/index.astro Normal file
View file

@ -0,0 +1,60 @@
---
import Paragraph from "@components/Paragraph.astro";
import ContainerLayout from "@layouts/ContainerLayout.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro";
import { Image } from "astro:assets";
const photos = await Astro.glob("../../assets/photos/*");
const sortFiles = (a: any, b: any) => {
const aNum = Number(a.default.src.match(/\d+/));
const bNum = Number(b.default.src.match(/\d+/));
return bNum - aNum;
};
export const getFileNameFromPath = (path: string) => {
const parts = path.split("/");
return parts[parts.length - 1].split("?")[0];
};
---
<BaseLayout title="Photography">
<ContainerLayout>
<TextContentLayout>
<h1
class="mb-8 text-center font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl"
>
Photography
</h1>
<Paragraph>
I enjoy taking photos and I always bring my camera with me when I
travel. I used to shoot with a Nikon DSLR, but recently switched to a
Fujifilm X-T20, which I find a lot more enjoyable to bring around. These
are some of my favorite shots from over the years.
</Paragraph>
</TextContentLayout>
</ContainerLayout>
<section class="px-4 mb-2 columns-2 gap-4 md:columns-3 lg:columns-4">
{
photos.sort(sortFiles).map((photo) => (
<a
href={`/photography/${getFileNameFromPath(photo.default.src)}`}
class="flex w-full py-2 duration-100 hover:-translate-y-1"
>
<Image
src={photo.default}
alt=""
width={400}
densities={[1, 2]}
transition:name={getFileNameFromPath(photo.default.src)}
class="rounded bg-gray-200"
/>
</a>
))
}
</section>
</BaseLayout>

6
src/pages/programming/[project].astro
View file

@ -1,6 +1,6 @@
--- ---
import ContainerLayout from "@layouts/ContainerLayout.astro"; import ContainerLayout from "@layouts/ContainerLayout.astro";
import RootLayout from "@layouts/RootLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro"; import TextContentLayout from "@layouts/TextContentLayout.astro";
import type { GetStaticPaths } from "astro"; import type { GetStaticPaths } from "astro";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
@ -20,7 +20,7 @@ const { Content } = await project.render();
const { title, date, technologies, website, repository } = project.data; const { title, date, technologies, website, repository } = project.data;
--- ---
<RootLayout {title}> <BaseLayout {title}>
<ContainerLayout> <ContainerLayout>
<TextContentLayout> <TextContentLayout>
<h1 <h1
@ -80,4 +80,4 @@ const { title, date, technologies, website, repository } = project.data;
</div> </div>
</TextContentLayout> </TextContentLayout>
</ContainerLayout> </ContainerLayout>
</RootLayout> </BaseLayout>

6
src/pages/programming/index.astro
View file

@ -2,14 +2,14 @@
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import Paragraph from "@components/Paragraph.astro"; import Paragraph from "@components/Paragraph.astro";
import ContainerLayout from "@layouts/ContainerLayout.astro"; import ContainerLayout from "@layouts/ContainerLayout.astro";
import RootLayout from "@layouts/RootLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro"; import TextContentLayout from "@layouts/TextContentLayout.astro";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
const projects = await getCollection("programming"); const projects = await getCollection("programming");
--- ---
<RootLayout title="Programming"> <BaseLayout title="Programming">
<ContainerLayout> <ContainerLayout>
<TextContentLayout> <TextContentLayout>
<h1 <h1
@ -54,4 +54,4 @@ const projects = await getCollection("programming");
} }
</section> </section>
</ContainerLayout> </ContainerLayout>
</RootLayout> </BaseLayout>