jack/jackmerrill.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add image optimization

Browse Source
This commit is contained in:
Jack Merrill 2023-11-01 12:20:22 -04:00
parent 32590c0d13
commit 0417af9e96
No known key found for this signature in database
6 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/img/DJI_0565.JPG → src/assets/img/DJI_0565.JPG
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

0
public/img/DJI_0605.JPG → src/assets/img/DJI_0605.JPG
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 2.6 MiB

0
public/img/IMG_0196.JPG → src/assets/img/IMG_0196.JPG
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 541 KiB

After

Width:  |  Height:  |  Size: 541 KiB

0
public/img/IMG_3942.JPG → src/assets/img/IMG_3942.JPG
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 602 KiB

After

Width:  |  Height:  |  Size: 602 KiB

21
src/components/PictureShowcase.tsx
View File

@ -1,26 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import Carousel, { type Picture } from "./Carousel"; import Carousel, { type Picture } from "./Carousel";
const pictures: Picture[] = [ export default function PictureShowcase({ pictures }: { pictures: Picture[] }) {
{
title: "Drone Picture of Hampshire College",
image: "/img/DJI_0565.JPG",
},
{
title: "Drone Picture of Hampshire College (winter)",
image: "/img/DJI_0605.JPG",
},
{
title: "Bean!!",
image: "/img/IMG_0196.JPG",
},
{
title: "Ricky!!",
image: "/img/IMG_3942.JPG",
},
];
export default function PictureShowcase() {
return ( return (
<div className="h-64"> <div className="h-64">
<Carousel pictures={pictures} /> <Carousel pictures={pictures} />

29
src/pages/index.astro
View File

@ -1,5 +1,5 @@
--- ---
import { Image } from "astro:assets" import { Image, getImage } from "astro:assets"
import memoji from '../assets/memoji.png' import memoji from '../assets/memoji.png'
import SpotifyNowPlaying from '../components/SpotifyNowPlaying' import SpotifyNowPlaying from '../components/SpotifyNowPlaying'
import SocialNetworks from '../components/SocialNetworks' import SocialNetworks from '../components/SocialNetworks'
@ -7,6 +7,31 @@ import TechStack from '../components/TechStack'
import WAIWO from '../components/WAIWO' import WAIWO from '../components/WAIWO'
import PictureShowcase from '../components/PictureShowcase' import PictureShowcase from '../components/PictureShowcase'
import { SEO } from 'astro-seo' import { SEO } from 'astro-seo'
const pictures = [
{
title: "Drone Picture of Hampshire College",
image: "/img/DJI_0565.JPG",
},
{
title: "Drone Picture of Hampshire College (winter)",
image: "/img/DJI_0605.JPG",
},
{
title: "Bean!!",
image: "/img/IMG_0196.JPG",
},
{
title: "Ricky!!",
image: "/img/IMG_3942.JPG",
},
];
for (const picture of pictures) {
const imported = await import(`../assets${picture.image}`);
const image = await getImage(imported.default);
picture.image = image.src;
}
--- ---
<html lang="en"> <html lang="en">
@ -108,7 +133,7 @@ import { SEO } from 'astro-seo'
</svg> </svg>
</a> </a>
<PictureShowcase client:idle /> <PictureShowcase client:idle pictures={pictures} />
<!-- Support me --> <!-- Support me -->
<a <a