dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

set image size in HTML

Browse source
This commit is contained in:
Daniel Bulant 2022-05-16 11:04:05 +02:00
parent 6f5dc3c9f0
commit fa15a33353
3 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lib/components/contact.svelte
View file

@ -53,7 +53,8 @@
text-decoration: none;
}
img {
height: 100%;
height: 2em;
width: 2em;
}
.github {
color: #333333;

5
src/lib/components/project.svelte
View file

@ -4,6 +4,8 @@
export var tags = [];
export var grayscale = false;
export var extradark = false;
export var width = 0;
export var height = 0;
function handle(e) {
if(!link) {
e.preventDefault();
@ -15,7 +17,7 @@
<a href={link || "#"} target="_blank" rel="noreferrer noopener" class="full" on:click={handle}>
<div class="project">
<div class="imgcon">
<img src={image} alt="Project" draggable={false} class:grayscale>
<img src={image} alt="Project" draggable={false} class:grayscale {width} {height}>
{#if $$slots.desc}
<div class="desc" class:extradark>
<div class="content">
@ -92,6 +94,7 @@
}
img {
width: 100%;
height: auto;
border-radius: 10px;
transition: filter .3s;
}

40
src/routes/index.svelte
View file

@ -72,7 +72,14 @@
<h2>
I helped many projects come to life. Here are some examples:
</h2>
<Project link="https://top.gg/bot/739864286775738399" tags={["Discord bot", "Backend", "Discord.js", "Typescript"]} image="/screenshots/ignibg.webp" grayscale={appTypeHover && appTypeHover === "applications"}>
<Project
link="https://top.gg/bot/739864286775738399"
tags={["Discord bot", "Backend", "Discord.js", "Typescript"]}
image="/screenshots/ignibg.webp"
grayscale={appTypeHover && appTypeHover === "applications"}
width={1080}
height={720}
>
<b>igni</b> - The universal Discord bot
<svelte:fragment slot="desc">
<p>
@ -83,7 +90,14 @@
</p>
</svelte:fragment>
</Project>
<Project tags={["Backend", "Website", "Svelte", "React", "Typescript"]} image="/screenshots/animasher.webp" grayscale={appTypeHover && appTypeHover !== "websites"} extradark>
<Project
tags={["Backend", "Website", "Svelte", "React", "Typescript"]}
image="/screenshots/animasher.webp"
grayscale={appTypeHover && appTypeHover !== "websites"}
extradark
width={1920}
height={940}
>
<b>Animasher</b> - Platform for creating and sharing animations
<svelte:fragment slot="desc">
<p>
@ -97,18 +111,32 @@
</div>
<div>
<div class="pad"></div>
<Project link="https://danbulant.itch.io/heaventaker" tags={["Website", "Application", "Phaser", "Svelte"]} image="/screenshots/heaventaker.webp" grayscale={appTypeHover && appTypeHover === "bots"}>
<Project
link="https://danbulant.itch.io/heaventaker"
tags={["Website", "Application", "Phaser", "Svelte"]}
image="/screenshots/heaventaker.webp"
grayscale={appTypeHover && appTypeHover === "bots"}
width={2050}
height={1080}
>
<b>Heaventaker</b> - Helltaker fan game
<svelte:fragment slot="desc">
<p>
<img src="/azrael.gif" alt="" style="height: 24px;"> Heaventaker is a helltaker fan-game visual novel and puzzle game.
<img src="/azrael.gif" alt="" style="height: 24px; width: 24px;"> Heaventaker is a helltaker fan-game visual novel and puzzle game.
</p>
<p>
Heaventaker currently has 3 different puzzles and 4 angels to collect. Playable online on the website, or on Android devices (application installable from Google Play Store)
</p>
</svelte:fragment>
</Project>
<Project link="https://manga.danbulant.eu" tags={["Website", "Svelte"]} image="/screenshots/mangadex.webp" grayscale={appTypeHover && appTypeHover !== "websites"}>
<Project
link="https://manga.danbulant.eu"
tags={["Website", "Svelte"]}
image="/screenshots/mangadex.webp"
grayscale={appTypeHover && appTypeHover !== "websites"}
width={803}
height={382}
>
<b>Mangades</b> - Mangadex downloader
<svelte:fragment slot="desc">
<p>
@ -122,7 +150,7 @@
</div>
</div>
<div class="center">
In addition, this website is open-source and available on <img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" style="height: 1em;" alt=""> <a href="https://github.com/danbulant/design" style="color: rgb(255, 102, 128)">GitHub</a>
In addition, this website is open-source and available on <img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" style="height: 1em; width: 1em;" alt=""> <a href="https://github.com/danbulant/design" style="color: rgb(255, 102, 128)">GitHub</a>
</div>
<div class="also relative">
<TechnologyDetails bind:selected={technologySelected} />