mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-01-14 02:25:13 +00:00
Import image from path
Update page title based on post/project title Use more optimised Image element leg
This commit is contained in:
parent
5c41d81288
commit
44a15873f4
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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", () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue