From 44a15873f481609768dffe61e31afc303c3959a6 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 24 May 2024 19:47:03 +0100
Subject: [PATCH] Import image from path Update page title based on
 post/project title Use more optimised Image element leg

---
 src/components/Certificate.astro   | 60 +++++++++++++++++++++---------
 src/components/Music.astro         |  5 ++-
 src/layouts/Layout.astro           |  4 +-
 src/pages/index.astro              |  3 +-
 src/pages/leg.astro                |  3 +-
 src/pages/posts/[...slug].astro    |  2 +-
 src/pages/posts/index.astro        |  3 +-
 src/pages/projects/[...slug].astro |  2 +-
 src/pages/projects/index.astro     |  3 +-
 9 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/components/Certificate.astro b/src/components/Certificate.astro
index 3bd0460..bad2db0 100644
--- a/src/components/Certificate.astro
+++ b/src/components/Certificate.astro
@@ -3,21 +3,24 @@ const { certificate } = Astro.props;
 ---
 
 <div class="certificate">
-    <h3>{certificate.data.title}</h3>
-    <p>{certificate.data.achieved}</p>
-    <p>By: {certificate.data.provider}</p>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M168,157.94h0a44,44,0,1,1,56-67.88h0V56a8,8,0,0,0-8-8H40a8,8,0,0,0-8,8V184a8,8,0,0,0,8,8H168Z" opacity="0.2"/><line x1="72" y1="136" x2="120" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="72" y1="104" x2="120" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="196" cy="124" r="44" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M168,192H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V90.06" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="168 157.94 168 224 196 208 224 224 224 157.94" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+    <div class="certificate-front">
+        <h3>{certificate.data.title}</h3>
+        <p>{certificate.data.achieved}</p>
+        <p>By: {certificate.data.provider}</p>
 
-    {certificate.data.skills && (
-        <ul class="pill-list">
-            {certificate.data.skills.map(skill => (
-                <li class="pill">{skill}</li>
-            ))}
-        </ul>
-    )}
+        {certificate.data.skills && (
+                <ul class="pill-list">
+                    {certificate.data.skills.map(skill => (
+                            <li class="pill">{skill}</li>
+                    ))}
+                </ul>
+        )}
 
-    {certificate.data.link && (
-        <a href={certificate.data.link} class="button">View</a>
-    )}
+        {certificate.data.link && (
+                <a href={certificate.data.link} class="button">View</a>
+        )}
+    </div>
 </div>
 
 <style lang="scss">
@@ -28,6 +31,31 @@ const { certificate } = Astro.props;
 
         height: 100%;
 
+        position: relative;
+
+        border-radius: $radius;
+        border: 2px solid $gray;
+        background-color: $dark;
+        color: $light;
+
+        overflow: hidden;
+
+        > svg {
+            width: 200px;
+            height: 200px;
+
+            position: absolute;
+            top: -37px;
+            left: -25px;
+
+            opacity: 0.03;
+            z-index: +1;
+        }
+
+    }
+    .certificate-front {
+        position: relative;
+
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -37,10 +65,8 @@ const { certificate } = Astro.props;
         text-decoration: none;
         text-align: center;
 
-        border-radius: $radius;
-        border: 2px solid $gray;
-        background-color: $dark;
-        color: $light;
+        z-index: +2;
+
 
         > h3 {
             margin-bottom: 4px;
diff --git a/src/components/Music.astro b/src/components/Music.astro
index 7043b0d..2c1794a 100644
--- a/src/components/Music.astro
+++ b/src/components/Music.astro
@@ -1,8 +1,11 @@
 ---
+import { Image } from "astro:assets";
+
+import leg from "../../public/leg.webp";
 ---
 
 <a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank">
-    <img src="/leg.webp" alt="Track cover art" id="music-image"/>
+    <Image src={leg} width="64" height="64" loading="eager" alt="Track cover art" id="music-image" />
     <ul>
         <li id="music-title">Track Name</li>
         <li id="music-artist">by Artist</li>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index acdb58a..be70c1b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,8 @@
 ---
 import "../styles/styles.scss";
 
+import { Image } from "astro:assets";
+
 interface Props {
     title: string;
     src?: string,
@@ -28,7 +30,7 @@ const { title, src, alt } = Astro.props;
     <body>
         <div class="banner">
             {src && (
-                <img src={src} alt={alt} />
+                <Image src={src} width="1080" height="700" loading="eager" alt={alt}  />
                 <script>
                     const img = document.querySelector(".banner > img");
                     document.addEventListener("scroll", () => {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b0c01f6..36ee02f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,6 +6,7 @@ import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 import Certificate from "../components/Certificate.astro";
 import Music from "../components/Music.astro";
+import BannerImg from "../../public/banner-alt.webp";
 
 const tools = ["Proxmox", "JetBrain IDEs", "Docker", "Linux", "SQLite", "Postgres", "MySQL"];
 const languages = ["Go", "Python", "HTML", "CSS", "Sass", "TypeScript", "JavaScript", "Scratch", "PHP", "SQL", "Bash"];
@@ -15,7 +16,7 @@ const projects = await getPosts("projects");
 const posts = await getPosts("posts");
 ---
 
-<Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
+<Layout title="Leggy Land" src={BannerImg} alt="Temporary Banner">
 	<h1>Leggy Land</h1>
 	<p>Made with Coffee, lots of it.</p>
 
diff --git a/src/pages/leg.astro b/src/pages/leg.astro
index 1bd5237..5cdc266 100644
--- a/src/pages/leg.astro
+++ b/src/pages/leg.astro
@@ -1,8 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import BannerImg from "../../../public/banner-alt.webp";
 ---
 
-<Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
+<Layout title="LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG" src={BannerImg} alt="Temporary Banner">
     <a class="button" href="/" id="home">Home</a>
 
     <h1>Maned Wolf Jumpscare</h1>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 2c39c50..de7060c 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -19,6 +19,6 @@ export async function getStaticPaths() {
 const { post, prev, next } = Astro.props;
 ---
 
-<Layout title="Leggy Land" src={post.data.image.url} alt={post.data.image.alt}>
+<Layout title=`Leggy Land - ${post.data.title}` src={post.data.image.url} alt={post.data.image.alt}>
     <Markdown {post} {prev} {next} base="/posts" />
 </Layout>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 85ee6f8..0010a00 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -3,11 +3,12 @@ import { getCollection } from 'astro:content';
 
 import Layout from "../../layouts/Layout.astro";
 import Card from "../../components/Card.astro";
+import BannerImg from "../../../public/banner-alt.webp";
 
 const posts = await getCollection('posts');
 ---
 
-<Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
+<Layout title="Leggy Land - All Posts" src={BannerImg} alt="Temporary Banner">
     <a class="button" id="home" href="/">Home</a>
 
     <h1>All Posts</h1>
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
index 63119c6..5de6d33 100644
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -19,6 +19,6 @@ export async function getStaticPaths() {
 const { post, prev, next } = Astro.props;
 ---
 
-<Layout title="Leggy Land" src={post.data.image.url} alt={post.data.image.alt}>
+<Layout title=`Leggy Land - ${post.data.title}` src={post.data.image.url} alt={post.data.image.alt}>
     <Markdown {post} {prev} {next} base="/projects" />
 </Layout>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index a0f51cb..45c0d94 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -3,11 +3,12 @@ import { getCollection } from 'astro:content';
 
 import Layout from "../../layouts/Layout.astro";
 import Card from "../../components/Card.astro";
+import BannerImg from "../../../public/banner-alt.webp";
 
 const projects = await getCollection('projects');
 ---
 
-<Layout title="Leggy Land" src="/banner-alt.webp" alt="Temporary Banner">
+<Layout title="Leggy Land - All Projects" src={BannerImg} alt="Temporary Banner">
     <a class="button" id="home" href="/">Home</a>
     <h1>All Projects</h1>
     <p>Come back next week for 4 new projects!</p>