dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-07-06 11:30:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Images

Browse source
This commit is contained in:
Daniel Bulant 2021-02-24 11:46:08 +01:00
parent a563bf964e
commit 0f9d726501
5 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/screenshots/animasher.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 325 KiB

BIN
public/screenshots/igni.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
public/screenshots/thetutorials.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

22
src/App.svelte
View file

@ -31,11 +31,9 @@
<div class="bar" class:dark={$darkmode}> <div class="bar" class:dark={$darkmode}>
<Bar> <Bar>
<h3>Daniel Bulant</h3> <h3>Daniel Bulant</h3>
<a href="#contact" class="big">Contact</a>
<Split /> <Split />
<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button> <Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
<a href="#contact" class="small">Contact</a> <a href="#contact" class="big">Contact</a>
<a href="mailto:danbulant@danbulant.eu" class="big">danbulant@danbulant.eu</a>
</Bar> </Bar>
</div> </div>
<main class:dark={$darkmode}> <main class:dark={$darkmode}>
@ -49,19 +47,19 @@
<blockquote> <blockquote>
I helped many projects come to life. Here are some examples: I helped many projects come to life. Here are some examples:
</blockquote> </blockquote>
<Project link="https://learnerapp.eu" tags={["Website design", "Frontend"]}> <Project link="https://learnerapp.eu" tags={["Website design", "Frontend"]} image="https://beta.learnerapp.eu/app.png">
<b>Learner</b> - A learning platform for students <b>Learner</b> - A learning platform for students
</Project> </Project>
<Project link="https://thetutorials.cz" tags={["Writer", "Full stack"]}> <Project link="https://thetutorials.cz" tags={["Writer", "Full stack"]} image="/screenshots/thetutorials.jpg">
<b>TheTutorials</b> - Czech tutorials and blog about programming <b>TheTutorials</b> - Czech tutorials and blog about programming
</Project> </Project>
</div> </div>
<div> <div>
<div class="pad"></div> <div class="pad"></div>
<Project link="https://top.gg/bot/739864286775738399" tags={["Discord bot", "Backend"]}> <Project link="https://top.gg/bot/739864286775738399" tags={["Discord bot", "Backend"]} image="/screenshots/igni.png">
<b>igni</b> - The universal discord bot <b>igni</b> - The universal discord bot
</Project> </Project>
<Project link={"data:text/plain,No website available yet"} tags={["Backend"]}> <Project tags={["Backend"]} image="/screenshots/animasher.png">
<b>Animasher</b> - Platform for creating and sharing animations <b>Animasher</b> - Platform for creating and sharing animations
</Project> </Project>
</div> </div>
@ -75,7 +73,7 @@
<Bar> <Bar>
<h3>Daniel Bulant</h3> <h3>Daniel Bulant</h3>
<Split /> <Split />
<a href="https://github.com/shinoa-hiragi" target="_blank"> <a href="https://github.com/shinoa-hiragi" target="_blank" class="text-right">
<h3> <h3>
Design by Carl Hansen Design by Carl Hansen
</h3> </h3>
@ -84,6 +82,9 @@
</div> </div>
<style> <style>
.text-right {
text-align: right;
}
main { main {
margin: 0 min(50px, 5%) 0 min(50px, 5%); margin: 0 min(50px, 5%) 0 min(50px, 5%);
width: calc(100% - min(100px, 10%)); width: calc(100% - min(100px, 10%));
@ -163,6 +164,11 @@
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
background: white; background: white;
} }
@media (max-width: 400px) {
.bar {
width: 100vw;
}
}
.dark.bar { .dark.bar {
background: rgb(28, 28, 33); background: rgb(28, 28, 33);
} }

14
src/components/project.svelte
View file

@ -1,12 +1,20 @@
<script> <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 link = "";
export var tags = []; export var tags = [];
function handle(e) {
if(!link) {
e.preventDefault();
alert("No link available");
}
}
</script> </script>
<a href={link} target="_blank" class="full"> <a href={link} target="_blank" class="full" on:click={handle}>
<div class="project"> <div class="project">
<img src={image} alt="Project" draggable={false}> {#if image}
<img src={image} alt="Project" draggable={false}>
{/if}
<h3><slot /></h3> <h3><slot /></h3>
<div class="tags"> <div class="tags">
{#each tags as tag, i} {#each tags as tag, i}