Skip to content

Commit d8fb3ee

Browse files
HammerPotHammerPot
committed
Tried vite-imagetools
dont love it tho
1 parent c54e620 commit d8fb3ee

9 files changed

Lines changed: 724 additions & 110 deletions

File tree

‎package-lock.json‎

Lines changed: 540 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"tailwindcss": "^3.4.9",
3232
"typescript": "^5.0.0",
3333
"typescript-eslint": "^8.0.0",
34-
"vite": "^5.4.3"
34+
"vite": "^5.4.3",
35+
"vite-imagetools": "^7.0.5"
3536
},
3637
"type": "module",
3738
"dependencies": {

‎src/routes/photography/+page.svelte‎

Lines changed: 164 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,125 @@
11
<script lang="ts">
22
import { onMount } from 'svelte';
33
import Lazy from 'svelte-lazy';
4-
var media = [
5-
{image: "/images/showcase/flower2.jpeg", alt: "A flower, again", text: "Flower TWO", type: ""},
6-
{image: "/images/showcase/bee.JPG", alt: "A close up of a bee", text: "Bee", type: ""},
7-
{image: "/images/showcase/flower.jpeg", alt: "A flower", text: "Flower", type: ""},
8-
{video: "/images/showcase/beemovie.mov", alt: "A video of a bee", text: "Bee Video", type: ""},
9-
{image: "/images/showcase/beachpano.JPG", alt: "A panorama of a beach", text: "Beach Panorama", type: "panorama_landscape"},
10-
{image: "/images/showcase/bridgepano.JPG", alt: "A panorama of a bridge", text: "Bridge Panorama", type: "panorama_portrait"},
11-
{image: "/images/showcase/car.JPG", alt: "A car engine", text: "Car", type: ""},
12-
{image: "/images/showcase/driver.JPG", alt: "A driver statue", text: "Driver Statue", type: ""},
13-
{image: "/images/showcase/morningbeams.JPG", alt: "An intersection with the morning sun beaming brightly", text: "Intersection with LIGHT", type: ""},
14-
{image: "/images/showcase/internals.JPG", alt: "The internal circuitry of an Exit Sign", text: "Exit Sign Internals", type: ""},
15-
{image: "/images/showcase/lizard.JPG", alt: "A lizard in a tree", text: "Lizard", type: ""},
16-
{image: "/images/showcase/morningscape.JPG", alt: "The morning sky", text: "Morning Sky", type: ""},
17-
{image: "/images/showcase/mushhorz.JPG", alt: "A close up of mushrooms in landscape", text: "Mushrooms", type: ""},
18-
{image: "/images/showcase/mushvert.JPG", alt: "A close up of mushrooms in portrait", text: "Mushrooms, again", type: ""},
19-
{image: "/images/showcase/rainbowpano.JPG", alt: "A panorama with a rainbow", text: "Rainbow Panorama", type: "panorama_portrait"},
20-
{image: "/images/showcase/shell.JPG", alt: "A shell in sand", text: "Shell", type: ""},
21-
{image: "/images/showcase/squirrel.JPG", alt: "A squirrel", text: "Squirrel", type: ""},
22-
{image: "/images/showcase/sunsolo.jpeg", alt: "The sun behind a rooftop", text: "Sun Silhouette", type: ""}
4+
// import Image from '/images/showcase/flower.JPG?format=jpeg;webp&w=200;400;600;1200';
5+
6+
// const imageGlob = import.meta.glob('/images/showcase/*.JPG', {
7+
// query: { format: 'jpeg;webp', w: '200;400;600;1200' },
8+
// import: 'default',
9+
// eager: true,
10+
// });
11+
// const videoGlob = import.meta.glob('/images/showcase/*.mov', { eager: true });
12+
13+
// const imageUrls = Object.values(imageGlob);
14+
// const videoUrls = Object.values(videoGlob);
15+
// const mediaUrls = [...imageUrls, ...videoUrls];
16+
17+
// console.log(imageGlob);
18+
// console.log(videoGlob);
19+
// console.log(imageUrls);
20+
// console.log(videoUrls);
21+
// console.log(mediaUrls);
22+
// console.log(Image);
23+
24+
25+
let media = [
26+
{image: "/images/showcase/flower2.JPG", alt: "A flower, again", text: "Flower TWO", type: "", height: 0, width: 0},
27+
{image: "/images/showcase/bee.JPG", alt: "A close up of a bee", text: "Bee", type: "", height: 0, width: 0},
28+
{image: "/images/showcase/flower.JPG", alt: "A flower", text: "Flower", type: "", height: 0, width: 0},
29+
{video: "/images/showcase/beemovie.mov", alt: "A video of a bee", text: "Bee Video", type: "", height: 0, width: 0},
30+
{image: "/images/showcase/beachpano.JPG", alt: "A panorama of a beach", text: "Beach Panorama", type: "panorama_landscape", height: 0, width: 0},
31+
{image: "/images/showcase/bridgepano.JPG", alt: "A panorama of a bridge", text: "Bridge Panorama", type: "panorama_portrait", height: 0, width: 0},
32+
{image: "/images/showcase/car.JPG", alt: "A car engine", text: "Car", type: "", height: 0, width: 0},
33+
{image: "/images/showcase/driver.JPG", alt: "A driver statue", text: "Driver Statue", type: "", height: 0, width: 0},
34+
{image: "/images/showcase/morningbeams.JPG", alt: "An intersection with the morning sun beaming brightly", text: "Intersection with LIGHT", type: "", height: 0, width: 0},
35+
{image: "/images/showcase/internals.JPG", alt: "The internal circuitry of an Exit Sign", text: "Exit Sign Internals", type: "", height: 0, width: 0},
36+
{image: "/images/showcase/lizard.JPG", alt: "A lizard in a tree", text: "Lizard", type: "", height: 0, width: 0},
37+
{image: "/images/showcase/morningscape.JPG", alt: "The morning sky", text: "Morning Sky", type: "", height: 0, width: 0},
38+
{image: "/images/showcase/mushhorz.JPG", alt: "A close up of mushrooms in landscape", text: "Mushrooms", type: "", height: 0, width: 0},
39+
{image: "/images/showcase/mushvert.JPG", alt: "A close up of mushrooms in portrait", text: "Mushrooms, again", type: "", height: 0, width: 0},
40+
{image: "/images/showcase/rainbowpano.JPG", alt: "A panorama with a rainbow", text: "Rainbow Panorama", type: "panorama_portrait", height: 0, width: 0},
41+
{image: "/images/showcase/shell.JPG", alt: "A shell in sand", text: "Shell", type: "", height: 0, width: 0},
42+
{image: "/images/showcase/squirrel.JPG", alt: "A squirrel", text: "Squirrel", type: "", height: 0, width: 0},
43+
{image: "/images/showcase/sunsolo.JPG", alt: "The sun behind a rooftop", text: "Sun Silhouette", type: "", height: 0, width: 0},
2344
]
24-
let media1 = media
45+
let media1 = []
46+
let loaded = false
2547
// console.log(media)
2648
// console.log(media.length)
2749
onMount(() => {
2850
media.forEach(item => {
51+
// console.log(loaded + " inside func")
2952
if (item.type != "panorama_landscape" && item.type != "panorama_portrait") {
3053
if (item.image) {
3154
const image = new Image();
3255
image.src = item.image;
56+
item.height = image.naturalHeight;
57+
item.width = image.naturalWidth;
3358
if (image.naturalHeight > image.naturalWidth) {
3459
item.type = "portrait";
60+
console.log("portrait " + item.height + "x" + item.width + " " + item.image)
3561
}
3662
else if (image.naturalWidth > image.naturalHeight) {
3763
item.type = "landscape";
64+
console.log("landscape " + item.height + "x" + item.width + " " + item.image)
3865
}
3966
else if (image.naturalWidth == image.naturalHeight) {
4067
item.type = "square";
68+
console.log("square " + item.height + "x" + item.width + " " + item.image)
4169
}
4270
} else if (item.video) {
4371
const video = document.createElement('video');
4472
video.src = item.video;
4573
video.addEventListener('loadedmetadata', () => {
74+
item.height = video.videoHeight;
75+
item.width = video.videoWidth;
4676
if (video.videoWidth > video.videoHeight) {
4777
item.type = "landscape";
78+
console.log("portrait " + item.height + "x" + item.width + " " + item.video)
4879
4980
}
5081
else if (video.videoHeight > video.videoWidth) {
5182
item.type = "portrait";
83+
console.log("landscape " + item.height + "x" + item.width + " " + item.video)
5284
}
5385
else if (video.videoWidth == video.videoHeight) {
5486
item.type = "square";
87+
console.log("square " + item.height + "x" + item.width + " " + item.video)
5588
}
5689
})
5790
}
5891
}
92+
else {
93+
if (item.image){
94+
const image = new Image();
95+
image.src = item.image;
96+
item.height = image.naturalHeight;
97+
item.width = image.naturalWidth;
98+
console.log("pano " + item.height + "x" + item.width + " " + item.image)
99+
} else if (item.video) {
100+
const video = document.createElement('video');
101+
video.src = item.video;
102+
video.addEventListener('loadedmetadata', () => {
103+
item.height = video.videoHeight;
104+
item.width = video.videoWidth;
105+
console.log("pano " + item.height + "x" + item.width + " " + item.video)
106+
107+
})
108+
}
109+
}
59110
})
60-
media1 = media;
61-
console.log(media1)
111+
media1 = media
112+
console.log(loaded + " before switch")
113+
loaded = true
114+
console.log(loaded + " after switch")
62115
})
63116
117+
// console.log(media1)
118+
119+
// console.log(loaded + " outside func")
64120
</script>
65121

66-
<h1 class="text-5xl text-center mb-4 pt-1">Photography</h1>
122+
<h1 class="text-5xl text-center mb-4 mt-4 pt-1">Photography</h1>
67123

68124
<div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row-dense gap-8 mb-4 p-4">
69125
<!-- {#each media as item}
@@ -95,85 +151,89 @@
95151
{/each} -->
96152

97153

98-
{#each media1 as item}
99-
{#if item.type == "panorama_landscape"}
100-
<div class=" p-12 lg:col-span-3 md:col-span-2 col-span-1" id={item.type}>
101-
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
102-
{#if item.image}
103-
<!-- <Lazy keep={true}> -->
104-
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type}>
105-
<!-- </Lazy> -->
106-
{:else if item.video}
107-
<!-- <Lazy keep={true}> -->
108-
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
109-
<!-- </Lazy> -->
110-
{/if}
111-
</div>
112-
{:else if item.type == "panorama_portrait"}
113-
<div class=" p-12 row-span-3 " id={item.type}>
114-
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
115-
{#if item.image}
116-
<!-- <Lazy keep={true}> -->
117-
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type}>
118-
<!-- </Lazy> -->
119-
{:else if item.video}
120-
<!-- <Lazy keep={true}> -->
121-
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
122-
<!-- </Lazy> -->
123-
{/if}
124-
</div>
125-
{:else if item.type == "landscape"}
126-
<div class=" p-12 lg:col-span-2 md:col-span-2 col-span-1" id={item.type}>
127-
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
128-
{#if item.image}
129-
<!-- <Lazy keep={true}> -->
130-
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type}>
131-
<!-- </Lazy> -->
132-
{:else if item.video}
133-
<!-- <Lazy keep={true}> -->
134-
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
135-
<!-- </Lazy> -->
136-
{/if}
137-
</div>
138-
{:else if item.type == "portrait"}
139-
<div class=" flex flex-col justify-center p-12 row-span-2" id={item.type}>
140-
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
141-
{#if item.image}
142-
<!-- <Lazy keep={true}> -->
143-
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type}>
144-
<!-- </Lazy> -->
145-
{:else if item.video}
146-
<!-- <Lazy keep={true}> -->
147-
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
148-
<!-- </Lazy> -->
149-
{/if}
150-
</div>
151-
{:else if item.type == "square"}
152-
<div class=" p-12 row-span-1 col-span-1 " id={item.type}>}>
153-
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
154-
{#if item.image}
155-
<!-- <Lazy keep={true}> -->
156-
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type}>
157-
<!-- </Lazy> -->
158-
{:else if item.video}
159-
<!-- <Lazy keep={true}> -->
160-
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
161-
<!-- </Lazy> -->
162-
{/if}
163-
</div>
164-
{:else}
165-
<div class=" p-12 " id={item.type}>
166-
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
167-
{#if item.image}
168-
<!-- <Lazy keep={true}> -->
169-
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type}>
170-
<!-- </Lazy> -->
171-
{:else if item.video}
172-
<!-- <Lazy keep={true}> -->
173-
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
174-
<!-- </Lazy> -->
175-
{/if}
176-
</div>
177-
{/if}
178-
{/each}
154+
{#if loaded}
155+
<!-- {console.log(loaded + " inside if")} -->
156+
{#each media1 as item}
157+
<!-- {console.log(item)} -->
158+
{#if item.type == "panorama_landscape"}
159+
<div class=" p-12 lg:col-span-3 md:col-span-2 col-span-1" id={item.type}>
160+
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
161+
{#if item.image}
162+
<Lazy keep={true} height={item.height}>
163+
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type + " " + item.height}>
164+
</Lazy>
165+
{:else if item.video}
166+
<Lazy keep={true} height={item.height}>
167+
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
168+
</Lazy>
169+
{/if}
170+
</div>
171+
{:else if item.type == "panorama_portrait"}
172+
<div class=" p-12 row-span-3 " id={item.type}>
173+
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
174+
{#if item.image}
175+
<Lazy keep={true} height={item.height}>
176+
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type + " " + item.height}>
177+
</Lazy>
178+
{:else if item.video}
179+
<Lazy keep={true} height={item.height}>
180+
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
181+
</Lazy>
182+
{/if}
183+
</div>
184+
{:else if item.type == "landscape"}
185+
<div class=" p-12 lg:col-span-2 md:col-span-2 col-span-1" id={item.type}>
186+
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
187+
{#if item.image}
188+
<Lazy keep={true} height={item.height}>
189+
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type + " " + item.height}>
190+
</Lazy>
191+
{:else if item.video}
192+
<Lazy keep={true} height={item.height}>
193+
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
194+
</Lazy>
195+
{/if}
196+
</div>
197+
{:else if item.type == "portrait"}
198+
<div class=" flex flex-col justify-center p-12 row-span-2" id={item.type}>
199+
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
200+
{#if item.image}
201+
<Lazy keep={true} height={item.height}>
202+
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type + " " + item.height}>
203+
</Lazy>
204+
{:else if item.video}
205+
<Lazy keep={true} height={item.height}>
206+
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
207+
</Lazy>
208+
{/if}
209+
</div>
210+
{:else if item.type == "square"}
211+
<div class=" p-12 row-span-1 col-span-1 " id={item.type}>
212+
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
213+
{#if item.image}
214+
<Lazy keep={true} height={item.height}>
215+
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type + " " + item.height}>
216+
</Lazy>
217+
{:else if item.video}
218+
<Lazy keep={true} height={item.height}>
219+
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
220+
</Lazy>
221+
{/if}
222+
</div>
223+
{:else}
224+
<div class=" p-12 " id={item.type}>
225+
<h3 class=" rounded-t-lg mb-4 lg:text-3xl md:text-xl text-l text-center">{item.text}</h3>
226+
{#if item.image}
227+
<Lazy keep={true} height={item.height}>
228+
<img src={item.image} alt={item.alt} class=" rounded-lg" id={item.type + " " + item.height}>
229+
</Lazy>
230+
{:else if item.video}
231+
<Lazy keep={true} height={item.height}>
232+
<video src={item.video} aria-label={item.alt} class=" rounded-lg" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback ></video>
233+
</Lazy>
234+
{/if}
235+
</div>
236+
{/if}
237+
{/each}
238+
{/if}
179239
</div>

‎src/routes/programming/+page.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,14 @@
11
<h1 class="text-5xl text-center m-4 pt-1"> Programming</h1>
2+
3+
<div class="flex flex-col items-center justify-center lg:justify-start mt-3 mx-4 lg:mx-32">
4+
<h3 class="text-xl mt-5 underline">I currently am working on a few things. Check back here for any updates on what I have done!</h3>
5+
<div class=" flex-1 mx-2 justify-items-center mt-28">
6+
<h3 class="text-3xl text-center mt-5 mb-2"> Unity </h3>
7+
<br>
8+
<p class="text-base mx-5 text-center"> I have had practice with the Unity Engine and C# for I have certifications in Unity Certified User: Programmer and Unity Certified User: Artist </p>
9+
<div class="grid grid-cols-2 gap-10 pb-6">
10+
<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="7afe845f-ce0a-4ff0-ab37-67224b0a6d4b" data-share-badge-host="https://www.credly.com"></div><script type="text/javascript" async src="//cdn.credly.com/assets/utilities/embed.js"></script>
11+
<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="d14cb8ec-2933-49d7-a6d3-0230df440f78" data-share-badge-host="https://www.credly.com"></div><script type="text/javascript" async src="//cdn.credly.com/assets/utilities/embed.js"></script>
12+
</div>
13+
</div>
14+
</div>

static/images/showcase/flower.jpeg renamed to static/images/showcase/flower.JPG

File renamed without changes.

static/images/showcase/flower2.jpeg renamed to static/images/showcase/flower2.JPG

File renamed without changes.

static/images/showcase/sunsolo.jpeg renamed to static/images/showcase/sunsolo.JPG

File renamed without changes.

‎svelte.config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import adapter from '@sveltejs/adapter-static'; // see https://svelte.dev/docs/kit/adapter-static
33
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
44

5+
56
/** @type {import('@sveltejs/kit').Config} */
67
const config = {
78
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -25,7 +26,8 @@ const config = {
2526
precompress: false,
2627
strict: true
2728
})
28-
}
29+
},
30+
2931
};
3032

3133
export default config;

‎vite.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { sveltekit } from '@sveltejs/kit/vite';
22
import { defineConfig } from 'vite';
3+
import { imagetools } from 'vite-imagetools'
34

45
export default defineConfig({
5-
plugins: [sveltekit()]
6+
plugins: [sveltekit(), imagetools()]
67
});

0 commit comments

Comments
 (0)