mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
65 lines
No EOL
1.3 KiB
Svelte
65 lines
No EOL
1.3 KiB
Svelte
<script lang="ts">
|
|
import { Picture } from "svelte-lazy-loader";
|
|
|
|
type ImageMeta = {
|
|
format: string;
|
|
src: string;
|
|
type: string;
|
|
width: string;
|
|
height: string;
|
|
};
|
|
|
|
export let name: string;
|
|
export let placeholder: string;
|
|
export let src: string;
|
|
export let alt: string;
|
|
export let loading: "lazy" | "eager" = "lazy";
|
|
export let formats: ImageMeta[];
|
|
</script>
|
|
|
|
<div class="portfolio">
|
|
<div class="portfolio-picture">
|
|
<h2>{name}</h2>
|
|
<Picture {placeholder} {src} {loading} {alt}>
|
|
{#each formats as { src, format, width }}
|
|
<source data-srcset={src} type="image/{format}" {width} />
|
|
{/each}
|
|
</Picture>
|
|
<slot name="portfolio-links" />
|
|
</div>
|
|
<div class="portfolio-details">
|
|
<slot name="portfolio-details" />
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
:global(.portfolio-picture) {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
:global(.portfolio) {
|
|
display: grid;
|
|
grid-template-columns: minmax(200px, 500px) auto;
|
|
/* width: 100%; */
|
|
margin: 1.5rem auto;
|
|
|
|
@media (max-width: 800px) {
|
|
grid-template-columns: minmax(200px, 500px);
|
|
place-items: center;
|
|
}
|
|
}
|
|
|
|
:global(.portfolio p) {
|
|
margin: 1rem 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:global(.portfolio-details) {
|
|
margin: 0 1.5rem;
|
|
}
|
|
|
|
:global(.portfolio-details ul) {
|
|
list-style-type: disc;
|
|
padding-left: 1.5rem;
|
|
}
|
|
</style> |