mirror of
https://github.com/danbulant/design
synced 2026-06-13 19:31:30 +00:00
project descriptions
This commit is contained in:
Daniel Bulant
parent
e4b29a8659
commit
39f50d41da
5 changed files with 107 additions and 22 deletions
BIN
public/azrael.gif
Normal file
BIN
public/azrael.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/screenshots/ignibg.png
Normal file
BIN
public/screenshots/ignibg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
|
|
@ -25,6 +25,8 @@
|
|||
|
||||
var technologySelected = null;
|
||||
var technologyHover = false;
|
||||
/** @type {null | "websites" | "applications" | "bots"} */
|
||||
var appTypeHover = null;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -42,7 +44,9 @@
|
|||
</div>
|
||||
<main class:dark={$darkmode}>
|
||||
<Hero>
|
||||
<h1>I'm a young developer making <u>websites</u> and <u>discord bots</u>.</h1>
|
||||
<h1>I'm a young developer making <u on:mouseenter={() => appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites</u>,
|
||||
<u on:mouseenter={() => appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications</u> and
|
||||
<u on:mouseenter={() => appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots</u>.</h1>
|
||||
<!-- <h3>To be used later</h3> -->
|
||||
<Button href="#projects">Check out my work</Button>
|
||||
</Hero>
|
||||
|
|
@ -51,20 +55,52 @@
|
|||
<blockquote>
|
||||
I helped many projects come to life. Here are some examples:
|
||||
</blockquote>
|
||||
<Project link="https://top.gg/bot/739864286775738399" tags={["Discord bot", "Backend", "Discord.js", "Typescript"]} image="/screenshots/igni.png">
|
||||
<b>igni</b> - The universal discord bot
|
||||
<Project link="https://top.gg/bot/739864286775738399" tags={["Discord bot", "Backend", "Discord.js", "Typescript"]} image="/screenshots/ignibg.png" grayscale={appTypeHover && appTypeHover === "applications"}>
|
||||
<b>igni</b> - The universal Discord bot
|
||||
<svelte:fragment slot="desc">
|
||||
<p>
|
||||
igni is a universal Discord bot, making managing Discord communities easy.
|
||||
</p>
|
||||
<p>
|
||||
It includes customizability, music playback (Youtube, SoundCloud, Spotify), moderation commands, anime, automation, games and more.
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
</Project>
|
||||
<Project tags={["Backend", "Website", "Svelte", "React", "Typescript"]} image="/screenshots/animasher.png">
|
||||
<Project tags={["Backend", "Website", "Svelte", "React", "Typescript"]} image="/screenshots/animasher.png" grayscale={appTypeHover && appTypeHover !== "websites"} extradark>
|
||||
<b>Animasher</b> - Platform for creating and sharing animations
|
||||
<svelte:fragment slot="desc">
|
||||
<p>
|
||||
Animasher is a work in progress platform for creating and sharing animations online.
|
||||
</p>
|
||||
<p>
|
||||
It allows people to easily create animations inside the website, and then share it with the world, as well as communicate with other creators to improve themselves.
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
</Project>
|
||||
</div>
|
||||
<div>
|
||||
<div class="pad"></div>
|
||||
<Project link="https://danbulant.itch.io/heaventaker" tags={["Website", "Application", "Phaser", "Svelte"]} image="/screenshots/heaventaker.png">
|
||||
<Project link="https://danbulant.itch.io/heaventaker" tags={["Website", "Application", "Phaser", "Svelte"]} image="/screenshots/heaventaker.png" grayscale={appTypeHover && appTypeHover === "bots"}>
|
||||
<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.
|
||||
</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.jfif">
|
||||
<Project link="https://manga.danbulant.eu" tags={["Website", "Svelte"]} image="/screenshots/mangadex.jfif" grayscale={appTypeHover && appTypeHover !== "websites"}>
|
||||
<b>Mangades</b> - Mangadex downloader
|
||||
<svelte:fragment slot="desc">
|
||||
<p>
|
||||
Mangades is a manga downloader from Mangadex.
|
||||
</p>
|
||||
<p>
|
||||
It can download mangas to EPUB or CBZ files online from browsers
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
</Project>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -203,16 +239,10 @@
|
|||
margin: 0 min(50px, 5%) 0 min(50px, 5%);
|
||||
width: calc(100% - min(100px, 10%));
|
||||
}
|
||||
.bar .small {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
.bar .big {
|
||||
display: none;
|
||||
}
|
||||
.bar .small {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
.projects, .bottombar {
|
||||
max-width: 1380px;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -25,12 +26,20 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
button:active, .button:active {
|
||||
background: #007bc7;
|
||||
}
|
||||
button:focus, .button:focus {
|
||||
button:focus, .button:focus, button:hover {
|
||||
border-color: black;
|
||||
}
|
||||
button.dark:focus, .button.dark:focus, button.dark:hover {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.text {
|
||||
background: transparent;
|
||||
color: black;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<script>
|
||||
export var image = ""; // "https://picsum.photos/725/350?random=" + Math.floor(Math.random() * 5000);
|
||||
export var image; // "https://picsum.photos/725/350?random=" + Math.floor(Math.random() * 5000);
|
||||
export var link = "";
|
||||
export var tags = [];
|
||||
export var grayscale = false;
|
||||
export var extradark = false;
|
||||
function handle(e) {
|
||||
if(!link) {
|
||||
e.preventDefault();
|
||||
|
|
@ -12,16 +14,21 @@
|
|||
|
||||
<a href={link} target="_blank" class="full" on:click={handle}>
|
||||
<div class="project">
|
||||
{#if image}
|
||||
<img src={image} alt="Project" draggable={false}>
|
||||
{/if}
|
||||
<div class="imgcon">
|
||||
<img src={image} alt="Project" draggable={false} class:grayscale>
|
||||
{#if $$slots.desc}
|
||||
<div class="desc" class:extradark>
|
||||
<div class="content">
|
||||
<slot name="desc" />
|
||||
</div>
|
||||
<div class="bottom">Click to open in new tab</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<h3><slot /></h3>
|
||||
<div class="tags">
|
||||
{#each tags as tag, i}
|
||||
<span>{tag}</span>
|
||||
{#if i !== tags.length - 1}
|
||||
<span>·</span>
|
||||
{/if}
|
||||
<span>{tag}</span>{#if i !== tags.length - 1}<span>·</span>{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<a href={link} target="_blank">View</a>
|
||||
|
|
@ -46,11 +53,50 @@
|
|||
a.full {
|
||||
width: 100%;
|
||||
}
|
||||
.imgcon {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.project:hover .desc {
|
||||
opacity: 1;
|
||||
user-select: auto;
|
||||
}
|
||||
.desc {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: background-color .3s, opacity .3s;
|
||||
width: calc(100% - 30px);
|
||||
height: calc(100% - 27px);
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
user-select: none;
|
||||
backdrop-filter: blur(35px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 15px;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
color: rgb(214, 214, 214);
|
||||
}
|
||||
.desc.extradark {
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.desc .content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
border-radius: 10px;
|
||||
transition: filter .3s;
|
||||
}
|
||||
img.grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.bottom {
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue