mirror of
https://github.com/danbulant/design
synced 2026-06-18 22:01:06 +00:00
132 lines
No EOL
4 KiB
Svelte
132 lines
No EOL
4 KiB
Svelte
<script>
|
|
import Button from "./components/button.svelte";
|
|
import Flexbox from "./components/flexbox.svelte";
|
|
import Link from "./components/link.svelte";
|
|
import Navbar from "./components/navbar.svelte";
|
|
import Project from "./components/project.svelte";
|
|
import Separator from "./components/separator.svelte";
|
|
|
|
import darkmode from "./stores/darkmode";
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Daniel Bulant - Homepage</title>
|
|
<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
|
|
</svelte:head>
|
|
|
|
<Navbar darkmode={$darkmode}>
|
|
<Link href="/" colored>
|
|
Daniel Bulant
|
|
</Link>
|
|
<Separator />
|
|
<Link href="#contact" padded>
|
|
Contact
|
|
</Link>
|
|
<Button bind:value={$darkmode} outline={$darkmode}>{$darkmode ? "Dark" : "Light"} mode</Button>
|
|
</Navbar>
|
|
|
|
<main class:darkmode={$darkmode}>
|
|
<h1 class="center">Daniel Bulant</h1>
|
|
|
|
<section>
|
|
<h2 class="center" id="projects">Projects</h2>
|
|
|
|
<Project title="igni">
|
|
<p slot="description">
|
|
igni is a universal discord bot with advanced moderation, advanced configuration and unique command handling. It can replace majority of other bots and is being actively worked on.
|
|
</p>
|
|
<img draggable={false} class="preview" src="igni.png" alt="igni avatar" slot="preview">
|
|
<div slot="actions">
|
|
<Button newTab href="https://discordbotlist.com/bots/igni">More information</Button>
|
|
<Button newTab outline href="https://discord.com/oauth2/authorize?client_id=739864286775738399&scope=bot&permissions=1039199350">Add igni to your server</Button>
|
|
</div>
|
|
</Project>
|
|
|
|
<Project title="The Tutorials">
|
|
<p slot="description">
|
|
Czech tutorials, blog and news about node, php and scratch for everyone.
|
|
</p>
|
|
<img draggable={false} class="preview thetutorials" src="thetutorials.jpg" alt="The Tutorials logo" slot="preview">
|
|
<div slot="actions">
|
|
<Button newTab href="https://thetutorials.cz">Website</Button>
|
|
<Button newTab outline href="https://youtube.com/thetutorials">Youtube channel</Button>
|
|
</div>
|
|
</Project>
|
|
|
|
<Project title="Learner">
|
|
<div slot="description">
|
|
Czech e-learning website and application, currently in closed beta.
|
|
</div>
|
|
<!-- <img draggable={false} src="https://learner.danbulant.eu/logo.png" alt="Learner logo" slot="preview" class="preview"> -->
|
|
<div slot="actions">
|
|
<Button newTab href="https://play.google.com/store/apps/details?id=cz.janrossler.learner">Application</Button>
|
|
<Button newTab outline href="https://beta.learnerapp.eu">Website</Button>
|
|
</div>
|
|
</Project>
|
|
|
|
<Project title="Ice Productions">
|
|
<div slot="description">
|
|
Independent team of developers, worked on Aztec, browser and more.
|
|
</div>
|
|
<img draggable={false} src="/iceproductions.svg" alt="Ice Productions Logo" slot="preview" class="preview">
|
|
<div slot="actions">
|
|
<Button newTab href="https://iceproductions.dev">Website</Button>
|
|
<Button newTab outline href="https://discord.gg/JUTFUKH">Discord server</Button>
|
|
</div>
|
|
</Project>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="contact">Contact info</h2>
|
|
|
|
<ul>
|
|
<li>Discord - TechmandanCZ#0135, you can find me in my <Link href="https://discord.gg/EgBGYmA" colored>server</Link>.</li>
|
|
<li>Github - <Link href="https://github.com/danbulant"> @danbulant </Link> </li>
|
|
<li>Youtube - <Link href="https://youtube.com/thetutorials"> TheTutorials </Link> </li>
|
|
</ul>
|
|
</section>
|
|
|
|
|
|
<footer>
|
|
<Flexbox>
|
|
© Daniel Bulant {(new Date()).getFullYear()}.
|
|
<Separator />
|
|
<Link href="/"> danbulant.eu </Link>
|
|
</Flexbox>
|
|
</footer>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
min-height: calc(100vh - 50px);
|
|
padding-bottom: 10px;
|
|
}
|
|
main section {
|
|
max-width: 720px;
|
|
margin: auto;
|
|
padding: 0 20px;
|
|
width: calc(100vw - 55px);
|
|
}
|
|
|
|
footer {
|
|
margin-top: 20px;
|
|
padding: 10px 20px;
|
|
}
|
|
.darkmode {
|
|
background: #242423;
|
|
color: #E8EDDF;
|
|
}
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
img.preview {
|
|
height: 18rem;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
img.preview.thetutorials {
|
|
border-radius: 50%;
|
|
height: 200px;
|
|
width: auto;
|
|
}
|
|
</style> |