+
+
+
\ No newline at end of file
+{/key}
\ No newline at end of file
diff --git a/src/lib/components/project.svelte b/src/lib/components/project.svelte
index 773b096..5e67f4c 100644
--- a/src/lib/components/project.svelte
+++ b/src/lib/components/project.svelte
@@ -64,25 +64,18 @@
width: 100%;
border-radius: 10px;
position: relative;
+ overflow: hidden;
}
.project:hover .desc {
opacity: 1;
user-select: auto;
}
+ .project:hover img {
+ filter: blur(35px);
+ }
.desc {
- position: absolute;
- top: 0;
- left: 0;
+ @apply absolute top-0 left-0 w-full h-full rounded-10px opacity-0 select-none flex flex-col py-10px px-15px;
transition: background-color .3s, opacity .3s;
- width: calc(100% - 30px);
- height: calc(100% - 27px);
- border-radius: 10px;
- opacity: 0;
- user-select: none;
- backdrop-filter: blur(35px);
- display: flex;
- flex-direction: column;
- padding: 10px 15px;
background-color: rgba(0,0,0,0.2);
color: rgb(214, 214, 214);
}
@@ -102,12 +95,13 @@
height: auto;
border-radius: 10px;
transition: filter .3s;
+ filter: blur(0px) grayscale(0);
}
img.grayscale {
filter: grayscale(100%);
}
h3 {
- font-weight: 400;
+ @apply font-normal text-xl;
}
.bottom {
color: gray;
diff --git a/src/lib/layouts/post.svelte b/src/lib/layouts/post.svelte
index 673188d..13b8b49 100644
--- a/src/lib/layouts/post.svelte
+++ b/src/lib/layouts/post.svelte
@@ -119,6 +119,18 @@
}
:global(body .post-layout details summary) {
user-select: none;
+ }
+ :global(body .post-layout h2) {
+ @apply text-3xl font-bold my-0.8em;
+ }
+ :global(body .post-layout h3) {
+ @apply text-2xl font-bold my-0.6em;
+ }
+ :global(body .post-layout h4) {
+ @apply text-xl font-bold my-0.4em;
+ }
+ :global(body .post-layout p) {
+ @apply my-1em;
}
main {
margin: 0 auto;
@@ -126,6 +138,7 @@
padding: 0 20px 20px;
}
h1 {
+ @apply text-4xl font-bold;
padding: 0 0 15px;
}
span {
diff --git a/src/lib/stores/transitions.js b/src/lib/stores/transitions.js
deleted file mode 100644
index edda4d3..0000000
--- a/src/lib/stores/transitions.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { crossfade } from "svelte/transition";
-
-
-export const [heaventakerSendTransition, heaventakerReceiveTransition] = crossfade({
- duration: 700
-});
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index f570270..a2e8c74 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -5,12 +5,15 @@
-
+
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7fef7cb..cef72be 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -16,12 +16,10 @@
import Button from "$lib/components/button.svelte";
import Contact from "$lib/components/contact.svelte";
import Hero from "$lib/components/hero.svelte";
- import Navbar from "$lib/components/navbar.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";
-import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/stores/transitions";
var technologySelected = null;
var technologyHover = false;
@@ -51,7 +49,7 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
- I'm a young developer making appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites ,
+ I'm a young developer making appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites ,
appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications and
appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots .
@@ -81,9 +79,6 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
name="Heaventaker"
clickable
target="_self"
- crossfadesend={heaventakerSendTransition}
- crossfadereceive={heaventakerReceiveTransition}
- crossfadekey="heaventaker"
>
Heaventaker - Helltaker fan game
@@ -155,11 +150,11 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
- In addition, this website is open-source and available on
GitHub
+ In addition, this website is open-source and available on
GitHub
-
I also worked with the following:
+
I also worked with the following:
Clicking won't work if javascript is not enabled.
{typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.
technologyHover = true} on:mouseleave={() => technologyHover = false}>
@@ -202,7 +197,7 @@ import { heaventakerReceiveTransition, heaventakerSendTransition } from "$lib/st
technologySelected = "discord"}>
diff --git a/src/routes/posts/index.svelte b/src/routes/posts/index.svelte
index 28144c6..76caf64 100644
--- a/src/routes/posts/index.svelte
+++ b/src/routes/posts/index.svelte
@@ -88,9 +88,7 @@
padding: 0 20px;
}
.tags {
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
+ @apply flex flex-wrap gap-2 mt-2 mb-3;
}
.dark .tag {
background: rgb(77, 77, 77);
@@ -109,8 +107,7 @@
background: rgb(0, 162, 255);
}
h1 {
- margin: 0;
- padding: 0;
+ @apply m-0 mb-1 p-0 font-bold text-3xl;
}
hr {
height: 1px;
diff --git a/src/routes/posts/quick-comparison-of-s3/index.md b/src/routes/posts/quick-comparison-of-s3/index.md
index 27c5457..ee31949 100644
--- a/src/routes/posts/quick-comparison-of-s3/index.md
+++ b/src/routes/posts/quick-comparison-of-s3/index.md
@@ -116,8 +116,6 @@ Base plan is 5$/month.
## Storj.io
-***4$/TB/month***
-
| Category | Free | Paid |
| -------- | ---- | ---- |
| Storage | 150GB | $4/TB/month |
diff --git a/src/routes/projects/heaventaker.svelte b/src/routes/projects/heaventaker.svelte
index 4e98b4b..adfdf49 100644
--- a/src/routes/projects/heaventaker.svelte
+++ b/src/routes/projects/heaventaker.svelte
@@ -1,13 +1,15 @@
-
-
-
+
+
Heaventaker
+
GitHub
+ In addition, this website is open-source and available on 
- Discord
+ Discord bots
+