Add some of my Certificates to the page

src/components/Card.astro

@@ -10,9 +10,9 @@ const { href, title, body } = Astro.props;
 
 <li class="link-card">
 	<a href={href}>
-		<h2>
+		<h3>
 			{title}
-		</h2>
+		</h3>
 		<p>
 			{body}
 		</p>
@@ -32,7 +32,6 @@ const { href, title, body } = Astro.props;
 
 		border-radius: $radius;
 
-		box-shadow: 0 0 0 rgba(#000, 0);
 		list-style: none;
 		overflow: hidden;
 

src/components/Certificate.astro

@@ -0,0 +1,57 @@
+---
+const { certificate } = Astro.props;
+---
+
+<div class="certificate">
+    <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.link && (
+        <a href={certificate.data.link} class="button">View</a>
+    )}
+</div>
+
+<style lang="scss">
+    @import "../styles/vars.scss";
+
+    .certificate {
+        padding: 16px;
+
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+
+        text-decoration: none;
+        text-align: center;
+
+        border-radius: $radius;
+        border: 2px solid $gray;
+        background-color: $dark;
+        color: $light;
+
+        > h3 {
+            margin-bottom: 4px;
+        }
+        > .pill-list {
+            margin-top: 4px;
+
+            justify-content: center;
+        }
+        > .button {
+            margin-top: 4px;
+        }
+    }
+</style>

src/content/certificates/Databases-with-SQL-and-Python.json

@@ -0,0 +1,7 @@
+{
+  "title": "Databases with SQL and Python",
+  "provider": "Hyperskill",
+  "achieved": "2023-07-01",
+  "skills": [ "SQL", "SQLAlchemy", "Python", "SQLite" ],
+  "link": ""
+}

src/content/certificates/Introduction-to-Command-Line-and-Unix-Shell.json

@@ -0,0 +1,7 @@
+{
+  "title": "Introduction to Command Line and Unix Shell",
+  "provider": "Hyperskill",
+  "achieved": "2023-07-01",
+  "skills": [ "Bash", "Shell Scripting", "Linux", "Unix" ],
+  "link": ""
+}

src/content/certificates/Introduction-to-Python.json

@@ -0,0 +1,7 @@
+{
+  "title": "Introduction to Python",
+  "provider": "Hyperskill",
+  "achieved": "2023-07-01",
+  "skills": [ "Python" ],
+  "link": ""
+}

src/content/certificates/Introduction-to-SQL.json

@@ -0,0 +1,7 @@
+{
+  "title": "Introduction to SQL",
+  "provider": "Hyperskill",
+  "achieved": "2023-07-01",
+  "skills": [ "SQL", "SQLite", "Databases" ],
+  "link": ""
+}

src/content/content.ts

@@ -22,7 +22,19 @@ const projectsCollection = defineCollection({
     }),
 });
 
+const certificatesCollection = defineCollection({
+    type: "data",
+    schema: z.object({
+       title: z.string(),
+        provider: z.string(),
+        achieved: z.date(),
+        skills: z.array(z.string()).optional(),
+        link: z.string().optional(),
+    }),
+})
+
 export const collections = {
     "posts": postsCollection,
     "projects": projectsCollection,
+    "certificates": certificatesCollection,
 };

src/layouts/Markdown.astro

@@ -49,6 +49,14 @@ const { Content } = await post.render();
     #markdown {
         flex-grow: 1;
 
+        h1, h2, h3, h4, h5, h6 {
+            padding-bottom: 16px;
+        }
+
+        p {
+            padding-bottom: 8px;
+        }
+
         a {
             text-decoration: none;
             color: $orange;

src/pages/index.astro

@@ -1,12 +1,16 @@
 ---
-import { getPosts} from "../utils";
+import { getCollection } from "astro:content";
+
+import { getPosts } from "../utils";
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
+import Certificate from "../components/Certificate.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 certificates = await getCollection("certificates");
 const projects = await getPosts("projects");
 const posts = await getPosts("posts");
 ---
@@ -15,7 +19,7 @@ const posts = await getPosts("posts");
 	<h1>Leggy Land</h1>
 	<p>Made with Coffee, lots of it.</p>
 
-	<div style="margin: 32px 0">
+	<div style="margin: 16px 0 32px">
 		<Music />
 	</div>
 
@@ -33,7 +37,6 @@ const posts = await getPosts("posts");
 	</div>
 
 	<div class="section">
-		<h2>Find me on</h2>
 		<ul class="pill-list">
 			<li><a class="button" href="https://www.twitter.com/fluffybeanUwU" target="_blank">Twitter</a></li>
 			<li><a class="button" href="https://bsky.app/profile/leggy.dev" target="_blank">BlueSky</a></li>
@@ -63,6 +66,17 @@ const posts = await getPosts("posts");
 		</ul>
 	</div>
 
+	<div class="section">
+		<h2>Certificates</h2>
+		<ul class="project-list">
+			{certificates.map(certificate => (
+				<li>
+					<Certificate {certificate} />
+				</li>
+			))}
+		</ul>
+	</div>
+
 	<div class="section">
 		<h2>Projects</h2>
 		<ul class="project-list">

src/styles/_project_list.scss

@@ -5,4 +5,8 @@
     flex-direction: column;
 
     gap: 16px;
+
+    > li {
+        list-style: none;
+    }
 }