<script>
	import Bottombar from "$lib/components/bottombar.svelte";
	import Button from "$lib/components/button.svelte";
	import Contact from "$lib/components/contact.svelte";
	import Hero from "$lib/components/hero.svelte";
	import Posts from "$lib/components/posts.svelte";
	import Project from "$lib/components/project.svelte";
	import TechnologyDetails from "$lib/components/technologyDetails.svelte";
	import darkmode from "$lib/stores/darkmode";

	var technologySelected = null;
	var technologyHover = false;
	/** @type {null | "websites" | "applications" | "bots"} */
	var appTypeHover = null;

	export var data;
    var posts = data.posts;
    $: posts = data.posts;
	$: if(typeof window !== "undefined") console.log(posts);

	var selectedPost = posts && posts.find(t => !t.categories.includes("experiment"));
</script>

<svelte:head>
	<title>Daniel Bulant - Homepage</title>
	<link href="/posts/rss.xml" type="application/rss+xml" rel="alternate" title="Blog posts - RSS" />
    <meta property="og:title" content="Daniel Bulant - Homepage"/>
	<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
	<meta name="og:description" content="Homepage of danbulant.eu - List of my projects, contact info.">
    <meta property="og:site_name" content="Daniel Bulant"/>
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="profile" />
    <meta property="og:profile:first_name" content="Daniel" />
    <meta property="og:profile:last_name" content="Bulant" />
    <meta property="og:profile:username" content="danbulant" />
    <meta property="og:profile:gender" content="male" />
</svelte:head>

<main class:dark={$darkmode}>
	<Hero {appTypeHover}>
		<h1 class="font-bold">I'm making <b on:mouseenter={() => appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites</b>,
			<b on:mouseenter={() => appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications</b> and
			<b on:mouseenter={() => appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots</b>.</h1>
		<!-- <h3>To be used later</h3> -->
        <div class="flex gap-4">
            <Button class="!p-4" href="#projects">Check out my work</Button>
            <div class="blog-preview flex backdrop-blur bg-black/40 items-center rounded">
                <Button class="!p-4 h-full !flex items-center !rounded-r-0 !bg-transparent !backdrop-none" href="/posts">
                    <span>
                        Blog
                    </span>
                </Button>
                <div class="right p-4 border-l-2 border-l-white/20">
                    {#if selectedPost}
                        <a href={selectedPost.path}><b>{selectedPost.title}</b></a>
                    {/if}
                </div>
            </div>
        </div>
	</Hero>
	<div class="projects" id="projects">
		<div>
			<h2>
				I helped many projects come to life. Here are some examples:
			</h2>
			<Project
				link="/projects/heaventaker"
				image="/screenshots/heaventaker/heaventaker.webp"
				grayscale={appTypeHover && appTypeHover === "bots"}
				width={2050}
				height={1080}
                name="Heaventaker"
                clickable
                target="_self"
			>
				<b>Heaventaker</b> - Helltaker fan game
				<svelte:fragment slot="desc">
					<p>
						<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
				image="/screenshots/animasher.webp"
				grayscale={appTypeHover && appTypeHover !== "websites"}
				extradark
				width={1920}
				height={940}
				link="https://animasher.net"
                name="Animasher"
			>
				<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://manga.danbulant.eu"
				image="/screenshots/mangadex.webp"
				grayscale={appTypeHover && appTypeHover !== "websites"}
				width={803}
				height={382}
                name="Mangades reader"
			>
				<b>Mangades</b> - Mangadex downloader and viewer
				<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>
			<Project
				link="https://top.gg/bot/739864286775738399"
				image="/screenshots/ignibg.webp"
				grayscale={appTypeHover && appTypeHover === "applications"}
				width={1080}
				height={720}
                name="igni discord bot"
			>
				<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>
		</div>
	</div>
	<div class="center">
		In addition, this website is open-source and available on <img class="white inline" 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} />
		<h2 class="text-center font-semibold text-2xl">I also worked with the following:</h2>
		<noscript class="text-center text-white">Clicking won't work if javascript is not enabled.</noscript>
		<span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>{typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.</span>
		<div class="split" class:text-gray={technologyHover} on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
			<ul>
				<li on:click={() => technologySelected = "typescript"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="" draggable={false} />
					Typescript
				</li>
				<li on:click={() => technologySelected = "rust"}>
					<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-plain.svg" alt="" draggable={false} />
					Rust
				</li>
				<li on:click={() => technologySelected = "x11"}>
					<img src="/tech/x11.png" alt="" draggable={false} />
					X11
				</li>
				<li on:click={() => technologySelected = "cs"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-plain.svg" alt="" draggable={false} />
					C#
				</li>
				<li on:click={() => technologySelected = "git"}>
					<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" alt="" draggable={false} />
					Git + GitHub
				</li>
				<li on:click={() => technologySelected = "docker"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-plain.svg" alt="" draggable={false} />
					Docker + Docker compose
				</li>
				<li on:click={() => technologySelected = "react"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="" draggable={false} />
					React
				</li>
				<li on:click={() => technologySelected = "nomad"}>
					<img src="/tech/nomad.svg" alt="" draggable={false} />
					Nomad
				</li>
				<li on:click={() => technologySelected = "consul"}>
					<img src="/tech/consul.svg" alt="" draggable={false} />
					Consul
				</li>
				<li on:click={() => technologySelected = "discord"}>
					<img src="/tech/discord.png" alt="" draggable={false}>
					Discord bots
				</li>
			</ul>
			<ul>
				<li on:click={() => technologySelected = "electron"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/electron/electron-original.svg" alt="" draggable={false} />
					Electron
				</li>
				<li on:click={() => technologySelected = "svelte"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" alt="" draggable={false} />
					Svelte + SvelteKit
				</li>
				<li on:click={() => technologySelected = "mysql"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" alt="" draggable={false} />
					MySQL/MariaDB
				</li>
				<li on:click={() => technologySelected = "mongodb"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-plain.svg" alt="" draggable={false} />
					MongoDB
				</li>
				<li on:click={() => technologySelected = "postgresql"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-plain.svg" alt="" draggable={false} />
					PostgreSQL
				</li>
				<li on:click={() => technologySelected = "node"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="" draggable={false} />
					Node.js
				</li>
				<li on:click={() => technologySelected = "deno"}>
					<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/denojs/denojs-original.svg" alt="" draggable={false} />
					Deno
				</li>
				<li on:click={() => technologySelected = "linux"}>
					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" alt="" draggable={false} />
					Linux
				</li>
				<li on:click={() => technologySelected = "nginx"}>
					<img src="/tech/nginx.svg" alt="" draggable={false} />
					Nginx
				</li>
				<li on:click={() => technologySelected = "cloudflare"}>
					<img src="/tech/cloudflare.png" alt="" draggable={false} />
					Cloudflare
				</li>
			</ul>
		</div>
	</div>
	{#if posts}
		<Posts {posts} />
	{/if}
	<div id="contact">
		<Contact />
	</div>
</main>
<Bottombar />

<style>
	img.white {
		background: white;
		border-radius: 50%;
	}
	/* :global(body) {
		background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
	}
	:global(body.dark) {
		background-image: linear-gradient(to top, rgba(94, 61, 74, 0.685), transparent min(180vh, 1080px));
	} */
	.center {
		text-align: center;
	}
	.relative {
		position: relative;
	}
	.text-center {
		text-align: center;
	}
	.also > span {
		transition: color .3s;
	}
	.text-gray { 
		color: rgb(150, 150, 150);
	}
	.text-white {
		color: black;
	}
	.dark .text-white {
		color: white;
	}
	main {
		margin: 0 min(50px, 5%) 0 min(50px, 5%);
		width: calc(100% - min(100px, 10%));
	}
	.projects {
		max-width: 1380px;
	}
	.projects {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 20px 0px 20px;
	}
	.also {
		margin: 50px auto 0 auto;
		max-width: 850px;
		border-radius: 15px;
	}
	.also h2 {
		margin-block-end: 0;
		margin-bottom: 0;
	}
	.also > span {
		margin-bottom: 25px;
		display: block;
	}
	.split {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.split ul {
		min-width: 340px;
		margin: 0 auto;
        padding-left: 20px;
        list-style-type: none;
	}
	.also li {
		height: 32px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: left;
		cursor: pointer;
		transition: transform .3s, color .2s;
	}
    .also li:hover {
        color: black;
    }
    .dark .also li:hover {
        color: white;
    }
	.also li:active {
		transform: scale(0.95);
	}
	.also li::before {
		content: "";
		position: absolute;
		top: 13px;
		left: -20px;
		width: 6px;
		height: 6px;
		border-radius: 6px;
		background-color: black;
		transition: background-color .3s;
	}
	.dark .also li::before {
		background-color: white;
	}
	.also li img {
		height: 24px;
		width: 24px;
		margin-right: 6px;
	}
	@media (min-width: 1520px) {
		.projects {
			margin: 0 auto 0px auto;
		}
	}
	.projects > div {
		width: calc(50% - 40px);
	}
	.projects .pad {
		margin-top: 110px;
	}
	@media (max-width: 860px) {
		.projects > div {
			width: calc(100% - 80px);
			margin: auto;
		}
		.projects .pad {
			margin-top: 0px;
		}
		.projects h2 {
			margin: 1em 0 1em 10px;
		}
	}
	.projects h2 {
		font-size: 29px;
		font-weight: 400;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 40px;
		margin-inline-end: 40px;
	}
	h1 {
		color: #282B29;
	}
	h1 {
		font-size: 64px;
	}
	@media (max-width: 1100px) {
		h1 {
			font-size: 40px;
		}
	}
</style>
