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

web modernization

Browse source
This commit is contained in:
Daniel Bulant 2023-03-03 23:11:39 +01:00
parent b1337d2292
commit 1f27722c29
11 changed files with 113 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<nav class="bar-component"> <nav class="bar-component backdrop-blur">
<slot /> <slot />
</nav> </nav>
@ -15,7 +15,4 @@
:global(.dark nav.bar-component) { :global(.dark nav.bar-component) {
background: rgba(28, 28, 33, 0.2); background: rgba(28, 28, 33, 0.2);
} }
:global(nav.bar-component > *) {
margin: 5px 10px;
}
</style> </style>

6
src/lib/components/bottombar.svelte
View file

@ -9,7 +9,7 @@
<h3>Daniel Bulant</h3> <h3>Daniel Bulant</h3>
<Split /> <Split />
<h3> <h3>
Design by Carl Hansen 2020-2023
</h3> </h3>
</Bar> </Bar>
</div> </div>
@ -19,6 +19,10 @@
margin: 30px auto 30px auto; margin: 30px auto 30px auto;
width: calc(100% - min(100px, 10%)); width: calc(100% - min(100px, 10%));
} }
h3 {
margin: 5px 10px;
}
@media (max-width: 520px) { @media (max-width: 520px) {
.bottombar { .bottombar {
margin: 30px 0 0 0; margin: 30px 0 0 0;

10
src/lib/components/button.svelte
View file

@ -3,19 +3,21 @@
export var href = ""; export var href = "";
export var text = false; export var text = false;
let className;
export { className as class };
</script> </script>
{#if href} {#if href}
<a href={href} tabindex="0" class="button" class:text class:dark={$darkmode}><slot /></a> <a href={href} tabindex="0" class="button {className}" class:text class:dark={$darkmode}><slot /></a>
{:else} {:else}
<button class="button" on:click class:text class:dark={$darkmode}><slot /></button> <button class="button {className}" on:click class:text class:dark={$darkmode}><slot /></button>
{/if} {/if}
<style> <style>
.button { .button {
background: #006db3; @apply backdrop-blur bg-black/50 rounded;
border-radius: 5px;
padding: 10px 15px; padding: 10px 15px;
color: white; color: white;
cursor: pointer; cursor: pointer;

4
src/lib/components/hero.svelte
View file

@ -34,12 +34,10 @@
position: relative; position: relative;
padding: 40px 120px; padding: 40px 120px;
padding: 40px min(120px, 10vw); padding: 40px min(120px, 10vw);
margin: 0 20px; margin: 2rem 1.5rem;
/* min-height: calc(100vh - 129px - 80px + 5px); */ /* min-height: calc(100vh - 129px - 80px + 5px); */
max-height: 1080px; max-height: 1080px;
max-width: 1500px; max-width: 1500px;
margin-bottom: 30px;
} }
.bg { .bg {
position: absolute; position: absolute;

27
src/lib/components/navbar.svelte
View file

@ -9,14 +9,16 @@
} }
</script> </script>
<div class="bar fixed top-0 left-0 z-99 w-100vw max-w-1920px mx-auto mb-30px backdrop-blur" class:dark={$darkmode}> <div class="bar fixed top-0 left-0 z-99 w-100vw mx-auto mb-30px" class:dark={$darkmode}>
<Bar> <Bar>
<a href="/"><h3>Daniel Bulant</h3></a> <div class="subbar w-full flex items-center justify-between max-w-8xl m-auto">
<Split /> <a href="/"><h3>Daniel Bulant</h3></a>
<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button> <Split />
<div class="big"> <Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
<Button text href="/#contact" class="big">Contact</Button> <div class="big">
<Button text href="/posts" class="big">Blog</Button> <Button text href="/#contact" class="big">Contact</Button>
<Button text href="/posts" class="big">Blog</Button>
</div>
</div> </div>
</Bar> </Bar>
</div> </div>
@ -35,14 +37,9 @@
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
} }
/* @supports (-moz-appearance:none) { .bar .subbar > * {
.bar { margin: 5px 10px;
background: rgba(255,255,255,0.9) !important; }
}
.dark.bar {
background: rgba(28, 28, 33, 0.9) !important;
}
} */
@media (max-width: 400px) { @media (max-width: 400px) {
.bar { .bar {
width: 100vw; width: 100vw;

4
src/lib/components/post.svelte
View file

@ -70,8 +70,8 @@
flex-grow: 1; flex-grow: 1;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.post { img.thumbnail {
flex-wrap: wrap; width: 20vw;
} }
} }
h4 { h4 {

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

@ -77,8 +77,8 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.imgcon { .imgcon {
@apply rounded-lg mb-4;
width: 100%; width: 100%;
border-radius: 10px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -90,7 +90,7 @@
filter: blur(35px); filter: blur(35px);
} }
.desc { .desc {
@apply absolute top-0 left-0 w-full h-full rounded-10px opacity-0 select-none flex flex-col py-10px px-15px; @apply absolute top-0 left-0 w-full h-full rounded-lg opacity-0 select-none flex flex-col py-10px px-15px;
transition: background-color 0.3s, opacity 0.3s; transition: background-color 0.3s, opacity 0.3s;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
color: rgb(214, 214, 214); color: rgb(214, 214, 214);
@ -107,9 +107,9 @@
flex-grow: 1; flex-grow: 1;
} }
img { img {
@apply rounded-lg;
width: 100%; width: 100%;
height: auto; height: auto;
border-radius: 10px;
transition: filter 0.3s; transition: filter 0.3s;
filter: blur(0px) grayscale(0); filter: blur(0px) grayscale(0);
} }

6
src/routes/+layout.svelte
View file

@ -30,3 +30,9 @@
<slot /> <slot />
</PageTransition> </PageTransition>
</div> </div>
<style>
:global(*) {
box-sizing: border-box;
}
</style>

39
src/routes/+page.svelte
View file

@ -42,17 +42,22 @@
<b on:mouseenter={() => appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications</b> and <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> <b on:mouseenter={() => appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots</b>.</h1>
<!-- <h3>To be used later</h3> --> <!-- <h3>To be used later</h3> -->
<Button href="#projects">Check out my work</Button> <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> </Hero>
<div class="blog">
I recently started my own blog.<br>
{#if selectedPost}
You can checkout &ldquo;<a href={selectedPost.path}><b>{selectedPost.title}</b></a>&rdquo; and other recent blog posts:<br>
{/if}
<div style="text-align: center; margin-top: 5px;">
<Button href="/posts">blog</Button>
</div>
</div>
<div class="projects" id="projects"> <div class="projects" id="projects">
<div> <div>
<h2> <h2>
@ -84,6 +89,7 @@
extradark extradark
width={1920} width={1920}
height={940} height={940}
link="https://animasher.net"
name="Animasher" name="Animasher"
> >
<b>Animasher</b> - Platform for creating and sharing animations <b>Animasher</b> - Platform for creating and sharing animations
@ -246,19 +252,6 @@
background: white; background: white;
border-radius: 50%; border-radius: 50%;
} }
.blog {
margin: auto;
margin-top: 20px;
max-width: max-content;
padding: 15px;
border-radius: 5px;
background: #282B29;
color: white;
}
.dark .blog {
background: white;
color: #282B29;
}
/* :global(body) { /* :global(body) {
background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px)); background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
} }

61
src/routes/posts/+page.svelte
View file

@ -39,42 +39,55 @@
<meta property="og:profile:gender" content="male" /> <meta property="og:profile:gender" content="male" />
</svelte:head> </svelte:head>
<div class="posts" class:dark={$darkmode}>
<h1>Posts</h1> <div class="parent md:flex max-w-screen" class:dark={$darkmode}>
<h1 class="md:hidden">Posts</h1>
{#if tags} {#if tags}
<div class="tags"> <div class="tags md:flex-col">
{#each tags as tag} {#each tags as tag}
<div class="tag" class:selected={selectedTags.includes(tag)} on:click={() => toggle(tag)}> <div class="tag" class:selected={selectedTags.includes(tag)} on:click={() => toggle(tag)}>
{tag} {tag}
</div> </div>
{/each} {/each}
<a href="/posts/rss.xml" class="rss hidden flex items-center w-full md:block">
<img src="/rss-icon.svg" alt="RSS icon" class="w-6 h-6 inline" />
RSS
</a>
</div> </div>
{/if} {/if}
<hr> <div class="posts">
<h1 class="hidden md:block">Posts</h1>
{#if !selectedTags.length || selectedTags.find(tag => posts[0].categories.includes(tag))} {#if !selectedTags.length || selectedTags.find(tag => posts[0].categories.includes(tag))}
<HeroPost {...posts[0]} /> <HeroPost {...posts[0]} />
<hr> <hr>
{/if} {/if}
{#each filteredPosts as post (post.title)} {#each filteredPosts as post (post.title)}
<div animate:flip={{ duration: 250 }}> <div animate:flip={{ duration: 250 }}>
<Post {...post} bind:currentHover /> <Post {...post} bind:currentHover />
</div> </div>
{/each} {/each}
<small>There's also RSS feed available <a href="/posts/rss.xml">here</a>.</small> <small class="md:hidden block">There's also RSS feed available <a href="/posts/rss.xml">here</a>.</small>
</div>
</div> </div>
<style> <style>
.parent {
@apply pt-10 w-max m-auto px-5 gap-5;
}
.posts { .posts {
margin: auto; @apply max-w-2xl;
max-width: 700px; }
padding: 0 20px; @media (min-width: 42rem) {
.posts {
@apply w-2xl;
}
} }
.tags { .tags {
@apply flex flex-wrap gap-2 mt-2 mb-3; @apply flex flex-wrap gap-2 mt-2 mb-3;
@ -83,11 +96,9 @@
background: rgb(77, 77, 77); background: rgb(77, 77, 77);
} }
.tag { .tag {
background:rgb(173, 173, 173); @apply rounded-full cursor-pointer select-none px-4 py-2;
padding: 5px 10px; background: rgb(173, 173, 173);
border-radius: 99px; text-transform: capitalize;
cursor: pointer;
user-select: none;
} }
.dark .tag.selected { .dark .tag.selected {
background: rgb(0, 108, 170); background: rgb(0, 108, 170);
@ -107,12 +118,14 @@
background: white; background: white;
} }
small { small {
display: block;
text-align: center; text-align: center;
width: 100%; width: 100%;
margin: 30px 0; margin: 30px 0;
} }
small a { small a, .rss {
color: rgb(4, 192, 192) color: rgb(4, 192, 192)
} }
.rss {
@apply pl-4;
}
</style> </style>

18
static/rss-icon.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
<defs>
<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
<stop offset="1.0" stop-color="#D95B29"/>
</linearGradient>
</defs>
<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
<circle cx="68" cy="189" r="24" fill="#FFF"/>
<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB