diff --git a/public/banner-alt.webp b/public/banner-alt.webp new file mode 100644 index 0000000..d6aa905 Binary files /dev/null and b/public/banner-alt.webp differ diff --git a/src/components/Music.astro b/src/components/Music.astro index aa01d2c..bf3e7a0 100644 --- a/src/components/Music.astro +++ b/src/components/Music.astro @@ -1,44 +1,48 @@ --- --- - - Track cover art + + Track cover art \ No newline at end of file diff --git a/src/env.d.ts b/src/env.d.ts index f964fe0..acef35f 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1 +1,2 @@ +/// /// diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 972f546..d3e1bd3 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -40,9 +40,12 @@ const { title, src, alt } = Astro.props; .banner { margin: 0 -16px; - background-color: $gray; height: 700px; + background-color: rgba($light, 0.01); + + box-shadow: 0 8px 8px rgba(#000, 0.3); + > img { width: 100%; height: 100%; diff --git a/src/pages/index.astro b/src/pages/index.astro index 6f5948c..e524e64 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -12,65 +12,59 @@ const projects = await getCollection('projects'); const posts = await getCollection('posts'); --- - +

Leggy Land

Made with Coffee, lots of it.

- +

Who am I

-

My name is Fluffy, I'm an 19-year-old nerd, who likes to code and tinker with computers!

+

My name is Fluffy or Michał, I'm 19 and like computers


-

I specialise in Front-End development, but also enjoy working with the back end. My Favorite framework currently is Flask, but this website runs on Django, lol

+

I mainly do website stuff, work with the front and backend, but I also like networking and breaking things


-

My favorite language is Python, but I also know how to use PHP, HTML, CSS/Sass, JavaScript, Docker, SQL, Shell Scripting, and a little bit of Rust.

+

My favorite language currently is Go, but I also know a few other languages that are listed below!


-

I also have experience in a few different systems, mainly Arch, Ubuntu and Proxmox.

+

I use Arch btw.

-

Social Media

-

Tools

-
    - {tools.map(tool => ( -
  • {tool}
    • - ))} +
      + {tools.map(tool => (
    • {tool}
      • ))}

Languages

-
    - {languages.map(language => ( -
  • {language}
    • - ))} +
      + {languages.map(language => (
    • {language}
      • ))}

Frameworks

-
    - {frameworks.map(framework => ( -
  • {framework}
    • - ))} +
      + {frameworks.map(framework => (
    • {framework}
      • ))}

Projects

-

Recent Posts

-
@@ -105,6 +99,10 @@ const posts = await getCollection('posts'); flex-direction: row; flex-wrap: wrap; gap: 8px; + + > li { + list-style: none; + } } .project-list { @@ -118,26 +116,5 @@ const posts = await getCollection('posts'); #see-all-posts { margin-top: 16px; margin-left: auto; - padding: 0 32px; - - width: max-content; - height: 35px; - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 8px; - - text-decoration: none; - - border-radius: 9999px; - border: 0 solid $gray; - background-color: $gray; - color: $light; - - &:hover, &:focus-visible { - background-color: lighten($gray, 1%); - } } diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro index 87e6b19..3340540 100644 --- a/src/pages/posts/[...slug].astro +++ b/src/pages/posts/[...slug].astro @@ -17,7 +17,7 @@ const { post } = Astro.props; --- - Back + Back

{post.data.title}

{post.data.description}

    @@ -37,27 +37,6 @@ const { post } = Astro.props; #back { margin-bottom: 32px; - padding: 0 32px; - - width: max-content; - height: 35px; - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 8px; - - text-decoration: none; - - border-radius: 9999px; - border: 0 solid $gray; - background-color: $gray; - color: $light; - - &:hover, &:focus-visible { - background-color: lighten($gray, 1%); - } } #tags { diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro index ac83140..3c78610 100644 --- a/src/pages/posts/index.astro +++ b/src/pages/posts/index.astro @@ -8,7 +8,7 @@ const posts = await getCollection('posts'); --- - Back + Back

    All Posts

    Some regrettable, some not so bad...

    @@ -37,26 +37,5 @@ const posts = await getCollection('posts'); #back { margin-bottom: 32px; - padding: 0 32px; - - width: max-content; - height: 35px; - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 8px; - - text-decoration: none; - - border-radius: 9999px; - border: 0 solid $gray; - background-color: $gray; - color: $light; - - &:hover, &:focus-visible { - background-color: lighten($gray, 1%); - } } diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro index bff412c..bbf8c5c 100644 --- a/src/pages/projects/[...slug].astro +++ b/src/pages/projects/[...slug].astro @@ -17,7 +17,7 @@ const { project } = Astro.props; --- - Back + Back

    {project.data.title}

    {project.data.description}

    @@ -38,27 +38,6 @@ const { project } = Astro.props; #back { margin-bottom: 32px; - padding: 0 32px; - - width: max-content; - height: 35px; - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 8px; - - text-decoration: none; - - border-radius: 9999px; - border: 0 solid $gray; - background-color: $gray; - color: $light; - - &:hover, &:focus-visible { - background-color: lighten($gray, 1%); - } } #tags { diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro index 5588d45..bdf799a 100644 --- a/src/pages/projects/index.astro +++ b/src/pages/projects/index.astro @@ -8,7 +8,7 @@ const projects = await getCollection('projects'); --- - Back + Back

    All Projects

    Too many, so many

    @@ -37,26 +37,5 @@ const projects = await getCollection('projects'); #back { margin-bottom: 32px; - padding: 0 32px; - - width: max-content; - height: 35px; - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 8px; - - text-decoration: none; - - border-radius: 9999px; - border: 0 solid $gray; - background-color: $gray; - color: $light; - - &:hover, &:focus-visible { - background-color: lighten($gray, 1%); - } } diff --git a/src/styles/_button.scss b/src/styles/_button.scss new file mode 100644 index 0000000..ba22127 --- /dev/null +++ b/src/styles/_button.scss @@ -0,0 +1,52 @@ +.button { + padding: 0 32px; + + width: max-content; + height: 35px; + + position: relative; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 8px; + + text-decoration: none; + + border-radius: 9999px; + border: 0 solid $gray; + background-color: rgba($light, 0.05); + color: $light; + + overflow: hidden; + + &:before { + content: ''; + + width: 100%; + height: 100%; + + position: absolute; + top: 0; + left: 0; + + border-radius: 9999px; + background-color: rgba($light, 0.05); + + transform: scale(0); + opacity: 0; + pointer-events: none; + } + + &:hover, &:focus-visible { + outline: 0 solid transparent; + + &:before { + transform: scale(1); + opacity: 1; + + transition: opacity 0.3s cubic-bezier(0,1,0,1), transform 0.5s cubic-bezier(0,1,0,1); + } + } +} \ No newline at end of file diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 76f259c..a6ae2d3 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -9,6 +9,8 @@ main { border-top-left-radius: $radius; border-top-right-radius: $radius; + border: 2px solid $gray; + border-bottom: 0 solid transparent; background-color: $dark; box-shadow: 0 8px 8px rgba(#000, 0.3); diff --git a/src/styles/styles.scss b/src/styles/styles.scss index c8060a8..86c508c 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,5 +1,6 @@ @import "vars"; @import "reset"; +@import "button"; @import "pill"; @import "main"; diff --git a/src/styles/vars.scss b/src/styles/vars.scss index a04031d..2669919 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -2,5 +2,6 @@ $dark: #312620; $gray: #382e28; $light: #f0e7e4; $orange: #f2672c; +$green: #1f2d23; $radius: 4px;