Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-05-14 08:02:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Post, Project and index pages

Browse source 
Example posts
This commit is contained in:
Michał Gdula 2024-05-22 22:05:26 +01:00
parent 5970f11bcc
commit d3dafddf74
21 changed files with 625 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/banner.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1,022 KiB

BIN
public/leg.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

35
src/components/Card.astro
View file

@ -23,8 +23,10 @@ const { href, title, body } = Astro.props;
<style lang="scss"> <style lang="scss">
@import "../styles/vars.scss"; @import "../styles/vars.scss";
$corner-speed: 0.2s;
.link-card { .link-card {
height: 150px; height: 125px;
position: relative; position: relative;
@ -33,7 +35,6 @@ const { href, title, body } = Astro.props;
box-shadow: 0 0 0 rgba(#000, 0); box-shadow: 0 0 0 rgba(#000, 0);
list-style: none; list-style: none;
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
overflow: hidden; overflow: hidden;
> a { > a {
@ -41,6 +42,8 @@ const { href, title, body } = Astro.props;
height: 100%; height: 100%;
display: block; display: block;
text-decoration: none;
border-radius: $radius; border-radius: $radius;
border: 2px solid $gray; border: 2px solid $gray;
background-color: $dark; background-color: $dark;
@ -59,40 +62,50 @@ const { href, title, body } = Astro.props;
border-top: 2px solid $gray; border-top: 2px solid $gray;
border-left: 2px solid $gray; border-left: 2px solid $gray;
background-color: $dark; background-color: $dark;
background-image: linear-gradient(135deg, $dark, darken($dark, 1%));
color: $light; color: $light;
transition: right 0.3s ease-in-out, bottom 0.3s ease-in-out; box-shadow: -4px -4px 0 rgba(#000, 0);
transition: right $corner-speed ease-in-out, bottom $corner-speed ease-in-out, box-shadow $corner-speed ease-in-out;
pointer-events: none;
overflow: hidden;
z-index: +3; z-index: +3;
&::after { &::after {
content: ''; content: '';
height: 2px; height: 100px;
width: 100px; width: 100px;
position: absolute; position: absolute;
top: 3px; top: -16px;
left: calc(-150%); left: -16px;
transform: rotate(-45deg); transform: rotate(-45deg);
background-color: #382e28; border-top: 2px solid $gray;
background-color: $dark;
transition: left 0.3s ease-in-out; transition: left $corner-speed ease-in-out, top $corner-speed ease-in-out;
} }
} }
&:hover, &:focus-within { &:hover, &:focus-within {
/*box-shadow: 0 8px 8px rgba(#000, 0.3);*/ > a {
/*transform: translateY(-8px);*/ text-decoration: underline;
outline: none;
}
.link-card-corner { .link-card-corner {
bottom: 0; bottom: 0;
right: 0; right: 0;
box-shadow: -4px -4px 10px rgba(#000, 0.1);
&::after { &::after {
top: 3px; top: 3px;
left: calc(-50% + 2px); left: 3px;
} }
} }
} }

58
src/components/Music.astro Normal file
View file

@ -0,0 +1,58 @@
---
---
<div id="current-music">
<img src="/leg.webp" alt="Track cover art" id="current-music-image"/>
<ul>
<li id="current-music-title">Track Name</li>
<li id="current-music-artist">by Artist</li>
<li id="current-music-album">on Album</li>
</ul>
</div>
<script>
const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
const data = await request.json();
console.log(data);
document.getElementById("current-music-image").src = data["track"]["image"][1]["#text"];
document.getElementById("current-music-title").innerText = `Listening to ${data["track"]["name"]}`;
document.getElementById("current-music-artist").innerText = `by ${data["track"]["artist"]["#text"]}`;
document.getElementById("current-music-album").innerText = `on ${data["track"]["album"]["#text"]}`;
</script>
<style lang="scss">
@import "../styles/vars.scss";
#current-music {
padding: 8px;
display: flex;
flex-direction: row;
border-radius: $radius;
border: 2px solid $gray;
background-color: $dark;
color: $light;
> img {
margin-right: 16px;
width: 64px;
height: 64px;
border-radius: $radius;
}
> ul {
display: flex;
flex-direction: column;
> li {
font-size: 16px;
list-style: none;
}
}
}
</style>

36
src/components/Pill.astro
View file

@ -1,36 +0,0 @@
---
interface Props {
name: string;
}
const { name } = Astro.props;
---
<li class="pill">
<span>{name}</span>
</li>
<style lang="scss">
@import "../styles/vars.scss";
.pill {
padding: 0 10px;
width: max-content;
height: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 13px;
border-radius: 99999px;
border: 2px solid rgba($light, 0.04);
background-color: $dark;
color: $light;
list-style: none;
}
</style>

28
src/content/content.ts Normal file
View file

@ -0,0 +1,28 @@
import { z, defineCollection } from 'astro:content';
const postsCollection = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.date(),
image: z.string().optional(),
tags: z.array(z.string()),
}),
});
const projectsCollection = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
description: z.string(),
image: z.string().optional(),
tags: z.array(z.string()),
}),
});
export const collections = {
"posts": postsCollection,
"projects": projectsCollection,
};

5
src/pages/projects/example.md → src/content/posts/example.md
View file

@ -2,12 +2,11 @@
layout: ../../layouts/Markdown.astro layout: ../../layouts/Markdown.astro
title: This is an example Post title: This is an example Post
author: GwaGwa description: "Blamby ford"
description: "After learning some Astro, I couldn't stop!" pubDate: 2022-07-08
image: image:
url: "https://docs.astro.build/assets/arc.webp" url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs." alt: "Thumbnail of Astro arcs."
pubDate: 2022-07-08
tags: tags:
- "GwaGwa" - "GwaGwa"
- "Gaming" - "Gaming"

16
src/content/projects/example-2.md Normal file
View file

@ -0,0 +1,16 @@
---
layout: ../../layouts/Markdown.astro
title: Project 2
description: Another one
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
tags:
- "GwaGwa"
- "Gaming"
- "Urchin"
- "Fortnite"
---
AURGH

16
src/content/projects/example.md Normal file
View file

@ -0,0 +1,16 @@
---
layout: ../../layouts/Markdown.astro
title: Project 1
description: Example Project Im working on
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
tags:
- "GwaGwa"
- "Gaming"
- "Urchin"
- "Fortnite"
---
Gay Balls even

16
src/content/projects/gwagwa.md Normal file
View file

@ -0,0 +1,16 @@
---
layout: ../../layouts/Markdown.astro
title: GwaGwa
description: :3
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
tags:
- "GwaGwa"
- "Gaming"
- "Urchin"
- "Fortnite"
---
gwagwa

80
src/layouts/Layout.astro
View file

@ -1,5 +1,5 @@
--- ---
import { Image } from 'astro:assets'; import "../styles/styles.scss";
interface Props { interface Props {
title: string; title: string;
@ -27,7 +27,7 @@ const { title, src, alt } = Astro.props;
</head> </head>
<body> <body>
<div class="banner"> <div class="banner">
{src && <Image src={src} alt={alt} inferSize={true} />} {src && <img src={src} alt={alt} />}
</div> </div>
<main> <main>
<slot /> <slot />
@ -37,33 +37,11 @@ const { title, src, alt } = Astro.props;
<style is:global lang="scss"> <style is:global lang="scss">
@import "../styles/vars"; @import "../styles/vars";
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'IBM Plex Mono', monospace;
}
html {
min-height: 100vh;
font-size: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
/*border-top: 2px solid $orange;*/
/*border-bottom: 2px solid $orange;*/
background-color: #261f1b;
color: $light
}
.banner { .banner {
margin: 0 -16px;
background-color: $gray; background-color: $gray;
height: 400px; height: 700px;
> img { > img {
width: 100%; width: 100%;
@ -75,45 +53,6 @@ const { title, src, alt } = Astro.props;
} }
} }
main {
margin: -300px auto 0;
padding: 32px;
width: 100%;
max-width: 800px;
flex-grow: 1;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
background-color: $dark;
box-shadow: 0 8px 8px rgba(#000, 0.3);
animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
> h1 {
padding-bottom: 8px;
}
> hr {
margin: 32px 0;
height: 2px;
border: 0 solid transparent;
background-color: $gray;
}
}
@keyframes mainSlide {
0% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
footer { footer {
padding: 0 32px; padding: 0 32px;
@ -125,11 +64,18 @@ const { title, src, alt } = Astro.props;
align-items: center; align-items: center;
} }
hr {
margin: 32px 0;
border: 0 solid transparent;
border-bottom: 2px solid $gray;
}
section { section {
padding-bottom: 32px; padding-bottom: 32px;
> h2 { > h2 {
padding-bottom: 8px; padding-bottom: 10px;
} }
&:last-of-type { &:last-of-type {

10
src/layouts/Markdown.astro
View file

@ -1,6 +1,6 @@
--- ---
import Layout from "./Layout.astro"; import Layout from "./Layout.astro";
import Pill from "../components/Pill.astro";
const { frontmatter } = Astro.props; const { frontmatter } = Astro.props;
--- ---
@ -10,8 +10,8 @@ const { frontmatter } = Astro.props;
<p>By {frontmatter.author}</p> <p>By {frontmatter.author}</p>
<ul id="tags"> <ul id="tags">
{frontmatter.tags.map((item) => ( {frontmatter.tags.map(item => (
<Pill name={item} /> <li class="pill">#{item}</li>
))} ))}
</ul> </ul>
@ -38,12 +38,12 @@ const { frontmatter } = Astro.props;
text-decoration: none; text-decoration: none;
border-radius: 9999px; border-radius: 9999px;
border: 2px solid $gray; border: 0 solid $gray;
background-color: $gray; background-color: $gray;
color: $light; color: $light;
&:hover, &:focus-visible { &:hover, &:focus-visible {
background-color: transparent; background-color: lighten($gray, 1%);
} }
} }

138
src/pages/index.astro
View file

@ -1,90 +1,109 @@
--- ---
import { getCollection } from 'astro:content';
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro"; import Card from "../components/Card.astro";
import Pill from "../components/Pill.astro"; import Music from "../components/Music.astro";
const tools = ["Proxmox", "JetBrain IDEs", "Docker", "Linux", "SQLite", "Postgres", "MySQL"];
const languages = ["Go", "Python", "HTML", "CSS", "Sass", "TypeScript", "JavaScript", "Scratch", "PHP", "SQL", "Bash"];
const frameworks = ["Gin", "Echo", "Flask", "Svelte", "Astro", "raylib"];
const projects = await getCollection('projects');
--- ---
<Layout title="Leggy Land"> <Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<h1>Leggy Land</h1> <h1>Leggy Land</h1>
<p>Made with Coffee</p> <p>Made with Coffee, lots of it.</p>
<div style="margin-top: 16px" />
<Music />
<div style="margin-top: 16px" />
<hr> <!--<hr>-->
<section> <section>
<h2>Who am I</h2> <h2>Who am I</h2>
<p> <p>My name is Fluffy, I'm an 19-year-old nerd, who likes to code and tinker with computers!</p>
My name is Fluffy, I'm an 18-year-old nerd, who likes to code and tinker with computers! <br>
<br /><br /> <p>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</p>
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 <br>
<br /><br /> <p>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.</p>
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. <br>
<br /><br /> <p>I also have experience in a few different systems, mainly Arch, Ubuntu and Proxmox.</p>
I also have experience in a few different systems, mainly Arch, Ubuntu and Proxmox.
</p>
</section> </section>
<section> <section>
<h2>Developer tools</h2> <h2>Social Media</h2>
<ul role="list" class="language-list"> <ul role="list" class="pill-list">
<Pill name="Proxmox" /> <li class="pill large"><a href="#">Twitter</a></li>
<Pill name="JetBrain IDEs" /> <li class="pill large"><a href="#">BlueSky</a></li>
<Pill name="Docker" /> <li class="pill large"><a href="#">Discord</a></li>
<li class="pill large"><a href="#">Telegram</a></li>
</ul>
</section>
<section>
<h2>Tools</h2>
<ul role="list" class="pill-list">
{tools.map(tool => (
<li class="pill large">{tool}</li>
))}
</ul> </ul>
</section> </section>
<section> <section>
<h2>Languages</h2> <h2>Languages</h2>
<ul role="list" class="language-list"> <ul role="list" class="pill-list">
<Pill name="GoLang" /> {languages.map(language => (
<Pill name="Python" /> <li class="pill large">{language}</li>
<Pill name="HTML" /> ))}
<Pill name="TypeScript" />
</ul> </ul>
</section> </section>
<section> <section>
<h2>Web Frameworks</h2> <h2>Frameworks</h2>
<ul role="list" class="language-list"> <ul role="list" class="pill-list">
<Pill name="Gin" /> {frameworks.map(framework => (
<Pill name="Echo" /> <li class="pill large">{framework}</li>
<Pill name="Flask" /> ))}
<Pill name="Svelte" />
</ul>
</section>
<section>
<h2>Game Frameworks</h2>
<ul role="list" class="language-list">
<Pill name="RayLib" />
</ul> </ul>
</section> </section>
<section> <section>
<h2>Projects</h2> <h2>Projects</h2>
<ul role="list" class="project-list">
{projects.map(project => (
<Card
href=`/projects/${project.slug}`
title={project.data.title}
body={project.data.description}
/>
))}
</ul>
<a href="/projects" id="see-all-projects">See Projects</a>
</section>
<section>
<h2>Recent Posts</h2>
<ul role="list" class="project-list"> <ul role="list" class="project-list">
<Card <Card
href="/projects/example" href="/projects/example"
title="Python Gallery" title="Bruh"
body="Abandoned Python based image Gallery" body="Lmao"
/> />
<Card <Card
href="/projects/example" href="/projects/example"
title="Unnamed game" title="Aurgh"
body="First written in Python, then moved to Go + RayLib" body="Blowing up Blandfords"
/>
<Card
href="/projects/example"
title="College Work"
body="Aurgh"
/> />
</ul> </ul>
<a href="/posts" id="see-all-posts">See Posts</a>
</section> </section>
</Layout> </Layout>
<style lang="scss"> <style lang="scss">
@import "../styles/vars.scss"; @import "../styles/vars.scss";
.language-list { .pill-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -97,4 +116,31 @@ import Pill from "../components/Pill.astro";
gap: 16px; gap: 16px;
padding: 0; padding: 0;
} }
#see-all-projects,
#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%);
}
}
</style> </style>

71
src/pages/posts/[...slug].astro Normal file
View file

@ -0,0 +1,71 @@
---
import { getCollection } from 'astro:content';
import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() {
const collection = await getCollection('posts')
return collection.map(post => {
return {
params: { slug: post.slug },
props: { post: post },
};
})
}
const { post } = Astro.props;
---
<Layout title="Leggy Land" src={post.data.image.url} alt={post.data.image.alt}>
<a id="back" href="/">Back</a>
<h1>{post.data.title}</h1>
<p>{post.data.description}</p>
<ul id="tags">
{post.data.tags.map(item => (
<li class="pill">#{item}</li>
))}
</ul>
<hr>
<div>
{post.body}
</div>
</Layout>
<style is:global lang="scss">
@import "../../styles/vars";
#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 {
padding-top: 16px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
</style>

62
src/pages/posts/index.astro Normal file
View file

@ -0,0 +1,62 @@
---
import { getCollection } from 'astro:content';
import Layout from "../../layouts/Layout.astro";
import Card from "../../components/Card.astro";
const posts = await getCollection('posts');
---
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<a id="back" href="/">Back</a>
<h1>All Posts</h1>
<p>Some regrettable, some not so bad...</p>
<hr>
<ul role="list" class="project-list">
{posts.map(project => (
<Card
href=`/projects/${project.slug}`
title={project.data.title}
body={project.data.description}
/>
))}
</ul>
</Layout>
<style lang="scss">
@import "../../styles/vars.scss";
.project-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
gap: 16px;
padding: 0;
}
#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%);
}
}
</style>

72
src/pages/projects/[...slug].astro Normal file
View file

@ -0,0 +1,72 @@
---
import { getCollection } from 'astro:content';
import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() {
const collection = await getCollection('projects')
return collection.map(project => {
return {
params: { slug: project.slug },
props: { project: project },
};
})
}
const { project } = Astro.props;
---
<Layout title="Leggy Land" src={project.data.image.url} alt={project.data.image.alt}>
<a id="back" href="/">Back</a>
<h1>{project.data.title}</h1>
<p>{project.data.description}</p>
<ul id="tags">
{project.data.tags.map(item => (
<li class="pill">#{item}</li>
))}
</ul>
<hr>
<div>
{project.body}
</div>
</Layout>
<style is:global lang="scss">
@import "../../styles/vars";
#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 {
padding-top: 16px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
</style>

62
src/pages/projects/index.astro Normal file
View file

@ -0,0 +1,62 @@
---
import { getCollection } from 'astro:content';
import Layout from "../../layouts/Layout.astro";
import Card from "../../components/Card.astro";
const projects = await getCollection('projects');
---
<Layout title="Leggy Land" src="/banner.webp" alt="Temporary Banner">
<a id="back" href="/">Back</a>
<h1>All Projects</h1>
<p>Too many, so many</p>
<hr>
<ul role="list" class="project-list">
{projects.map(project => (
<Card
href=`/projects/${project.slug}`
title={project.data.title}
body={project.data.description}
/>
))}
</ul>
</Layout>
<style lang="scss">
@import "../../styles/vars.scss";
.project-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
gap: 16px;
padding: 0;
}
#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%);
}
}
</style>

29
src/styles/_main.scss Normal file
View file

@ -0,0 +1,29 @@
main {
margin: -500px auto 0;
padding: 32px;
width: 100%;
max-width: 800px;
flex-grow: 1;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
background-color: $dark;
box-shadow: 0 8px 8px rgba(#000, 0.3);
animation: mainSlide 1s cubic-bezier(0,1,0,1) forwards;
> h1 {
padding-bottom: 8px;
}
}
@keyframes mainSlide {
0% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}

31
src/styles/_pill.scss Normal file
View file

@ -0,0 +1,31 @@
.pill {
padding: 0 10px;
width: max-content;
height: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 13px;
border-radius: 99999px;
border: 2px solid rgba($light, 0.04);
background-color: $dark;
color: $light;
list-style: none;
> a {
//text-decoration: none;
color: inherit;
}
}
.pill.large {
padding: 0 16px;
height: 40px;
font-size: 16px;
}

23
src/styles/_reset.scss Normal file
View file

@ -0,0 +1,23 @@
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'IBM Plex Mono', monospace;
}
html {
min-height: 100vh;
font-size: 100%;
}
body {
padding: 0 16px;
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #261f1b;
color: $light
}

5
src/styles/styles.scss Normal file
View file

@ -0,0 +1,5 @@
@import "vars";
@import "reset";
@import "pill";
@import "main";