mirror of
https://github.com/danbulant/design
synced 2026-05-19 04:08:46 +00:00
web modernization
This commit is contained in:
Daniel Bulant
parent
b1337d2292
commit
1f27722c29
11 changed files with 113 additions and 85 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<nav class="bar-component">
|
||||
<nav class="bar-component backdrop-blur">
|
||||
<slot />
|
||||
</nav>
|
||||
|
||||
|
|
@ -15,7 +15,4 @@
|
|||
:global(.dark nav.bar-component) {
|
||||
background: rgba(28, 28, 33, 0.2);
|
||||
}
|
||||
:global(nav.bar-component > *) {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<h3>Daniel Bulant</h3>
|
||||
<Split />
|
||||
<h3>
|
||||
Design by Carl Hansen
|
||||
2020-2023
|
||||
</h3>
|
||||
</Bar>
|
||||
</div>
|
||||
|
|
@ -19,6 +19,10 @@
|
|||
margin: 30px auto 30px auto;
|
||||
width: calc(100% - min(100px, 10%));
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.bottombar {
|
||||
margin: 30px 0 0 0;
|
||||
|
|
|
|||
|
|
@ -3,19 +3,21 @@
|
|||
|
||||
export var href = "";
|
||||
export var text = false;
|
||||
|
||||
let className;
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
{#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}
|
||||
<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}
|
||||
|
||||
<style>
|
||||
|
||||
.button {
|
||||
background: #006db3;
|
||||
border-radius: 5px;
|
||||
@apply backdrop-blur bg-black/50 rounded;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -34,12 +34,10 @@
|
|||
position: relative;
|
||||
padding: 40px 120px;
|
||||
padding: 40px min(120px, 10vw);
|
||||
margin: 0 20px;
|
||||
margin: 2rem 1.5rem;
|
||||
/* min-height: calc(100vh - 129px - 80px + 5px); */
|
||||
max-height: 1080px;
|
||||
max-width: 1500px;
|
||||
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -9,14 +9,16 @@
|
|||
}
|
||||
</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>
|
||||
<a href="/"><h3>Daniel Bulant</h3></a>
|
||||
<Split />
|
||||
<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
|
||||
<div class="big">
|
||||
<Button text href="/#contact" class="big">Contact</Button>
|
||||
<Button text href="/posts" class="big">Blog</Button>
|
||||
<div class="subbar w-full flex items-center justify-between max-w-8xl m-auto">
|
||||
<a href="/"><h3>Daniel Bulant</h3></a>
|
||||
<Split />
|
||||
<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
|
||||
<div class="big">
|
||||
<Button text href="/#contact" class="big">Contact</Button>
|
||||
<Button text href="/posts" class="big">Blog</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Bar>
|
||||
</div>
|
||||
|
|
@ -35,14 +37,9 @@
|
|||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
/* @supports (-moz-appearance:none) {
|
||||
.bar {
|
||||
background: rgba(255,255,255,0.9) !important;
|
||||
}
|
||||
.dark.bar {
|
||||
background: rgba(28, 28, 33, 0.9) !important;
|
||||
}
|
||||
} */
|
||||
.bar .subbar > * {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.bar {
|
||||
width: 100vw;
|
||||
|
|
|
|||
|
|
@ -70,8 +70,8 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post {
|
||||
flex-wrap: wrap;
|
||||
img.thumbnail {
|
||||
width: 20vw;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
|
|
|
|||
|
|
@ -77,8 +77,8 @@
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
.imgcon {
|
||||
@apply rounded-lg mb-4;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
filter: blur(35px);
|
||||
}
|
||||
.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;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: rgb(214, 214, 214);
|
||||
|
|
@ -107,9 +107,9 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
img {
|
||||
@apply rounded-lg;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
transition: filter 0.3s;
|
||||
filter: blur(0px) grayscale(0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,3 +30,9 @@
|
|||
<slot />
|
||||
</PageTransition>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(*) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -42,17 +42,22 @@
|
|||
<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> -->
|
||||
<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>
|
||||
<div class="blog">
|
||||
I recently started my own blog.<br>
|
||||
{#if selectedPost}
|
||||
You can checkout “<a href={selectedPost.path}><b>{selectedPost.title}</b></a>” 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>
|
||||
<h2>
|
||||
|
|
@ -84,6 +89,7 @@
|
|||
extradark
|
||||
width={1920}
|
||||
height={940}
|
||||
link="https://animasher.net"
|
||||
name="Animasher"
|
||||
>
|
||||
<b>Animasher</b> - Platform for creating and sharing animations
|
||||
|
|
@ -246,19 +252,6 @@
|
|||
background: white;
|
||||
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) {
|
||||
background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,42 +39,55 @@
|
|||
<meta property="og:profile:gender" content="male" />
|
||||
</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}
|
||||
<div class="tags">
|
||||
<div class="tags md:flex-col">
|
||||
{#each tags as tag}
|
||||
<div class="tag" class:selected={selectedTags.includes(tag)} on:click={() => toggle(tag)}>
|
||||
{tag}
|
||||
</div>
|
||||
{/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>
|
||||
{/if}
|
||||
|
||||
<hr>
|
||||
|
||||
{#if !selectedTags.length || selectedTags.find(tag => posts[0].categories.includes(tag))}
|
||||
<HeroPost {...posts[0]} />
|
||||
|
||||
<hr>
|
||||
{/if}
|
||||
|
||||
|
||||
{#each filteredPosts as post (post.title)}
|
||||
<div animate:flip={{ duration: 250 }}>
|
||||
<Post {...post} bind:currentHover />
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<small>There's also RSS feed available <a href="/posts/rss.xml">here</a>.</small>
|
||||
|
||||
<div class="posts">
|
||||
<h1 class="hidden md:block">Posts</h1>
|
||||
|
||||
{#if !selectedTags.length || selectedTags.find(tag => posts[0].categories.includes(tag))}
|
||||
<HeroPost {...posts[0]} />
|
||||
|
||||
<hr>
|
||||
{/if}
|
||||
|
||||
|
||||
{#each filteredPosts as post (post.title)}
|
||||
<div animate:flip={{ duration: 250 }}>
|
||||
<Post {...post} bind:currentHover />
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<small class="md:hidden block">There's also RSS feed available <a href="/posts/rss.xml">here</a>.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
@apply pt-10 w-max m-auto px-5 gap-5;
|
||||
}
|
||||
.posts {
|
||||
margin: auto;
|
||||
max-width: 700px;
|
||||
padding: 0 20px;
|
||||
@apply max-w-2xl;
|
||||
}
|
||||
@media (min-width: 42rem) {
|
||||
.posts {
|
||||
@apply w-2xl;
|
||||
}
|
||||
}
|
||||
.tags {
|
||||
@apply flex flex-wrap gap-2 mt-2 mb-3;
|
||||
|
|
@ -83,11 +96,9 @@
|
|||
background: rgb(77, 77, 77);
|
||||
}
|
||||
.tag {
|
||||
background:rgb(173, 173, 173);
|
||||
padding: 5px 10px;
|
||||
border-radius: 99px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@apply rounded-full cursor-pointer select-none px-4 py-2;
|
||||
background: rgb(173, 173, 173);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.dark .tag.selected {
|
||||
background: rgb(0, 108, 170);
|
||||
|
|
@ -107,12 +118,14 @@
|
|||
background: white;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
}
|
||||
small a {
|
||||
small a, .rss {
|
||||
color: rgb(4, 192, 192)
|
||||
}
|
||||
.rss {
|
||||
@apply pl-4;
|
||||
}
|
||||
</style>
|
||||
18
static/rss-icon.svg
Normal file
18
static/rss-icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in a new issue