Guestbook overhaul; Comments; New post; Updated packages

4 files changed, 67 insertions, 30 deletions

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 646dabb..5f1b34a 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -27,7 +27,7 @@ const { Content } = await entry.render();
 
 <style is:global>
     img {
-        width: 20%;
+        width: 45%;
     }
 
     @media (max-width: 768px) {
diff --git a/src/pages/guidelines.md b/src/pages/guidelines.md
index e569203..5a257a6 100644
--- a/src/pages/guidelines.md
+++ b/src/pages/guidelines.md
@@ -38,7 +38,7 @@ In order to comply with the Children's Online Privacy Protection Act (COPPA), yo
 
 These rules applies when using our Minecraft servers
 
-- Usage of hacked clients (including - but not limited to - Wurst, Wolfram, Sigma, etc.) is strictly prohibited.*
+- Usage of hacked clients (including - but not limited to - Future, Impact, Meteor, etc.) is strictly prohibited.*
 - Griefing is not allowed.*
 - Unwarranted combating is not allowed unless both parties have given permission.*
 - Our general guidelines applies here as well.
diff --git a/src/pages/index.astro b/src/pages/index.astro
index edae2ab..936ce8e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,40 +3,46 @@ import Layout from '../layouts/Default.astro';
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets';
 import { getCollection } from "astro:content";
+import projects from "../data/projects.json";
 
 import Profile from '../images/Alee.png';
 import '../styles/index.css';
+import '../styles/Page.css';
+import "../styles/cards.css";
 import { formatDate } from "../util";
 const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()).slice(0, 10);
+const featuredProjects = projects.filter(project => project.featured);
 
 ---
 
 <Layout title="Andrew Lee" description="Andrew Lee Website">
-	<main class="home">
-		<div class="headline">
-			<Image src={Profile} class="avatar" alt="Andrew Lee" height={200} width={200} />
-			<h1 id="title">Hey, I'm Andrew Lee!</h1>
-			<div class="social">
-				<a href="https://linkedin.alee14.me" target="_blank" aria-label="LinkedIn">
-					<Icon name="fa6-brands:linkedin" />
-				</a>
-				<a href="https://github.alee14.me" target="_blank" aria-label="GitHub">
-					<Icon name="fa6-brands:github" />
-				</a>
-				<a href="https://youtube.alee14.me" target="_blank" aria-label="YouTube">
-					<Icon name="fa6-brands:youtube" />
-				</a>
-				<a href="https://instagram.alee14.me" target="_blank" aria-label="Instagram">
-					<Icon name="fa6-brands:instagram" />
-				</a>
-			</div>
-			<div class="description">
-				<h2>19 Years Old</h2>
-				<h2>Student at Pearson Electrotechnology Centre</h2>
-				<h2>Living in Montreal, Quebec, Canada</h2>
-			</div>
-			<div>
-				<h3><a href="mailto:andrew@alee14.me" class="email-contact">andrew@alee14.me</a></h3>
+	<main>
+		<div class="home">
+			<div class="headline">
+				<Image src={Profile} class="avatar" loading="eager" alt="Andrew Lee" height={200} width={200} />
+				<h1 id="title">Hey, I'm Andrew Lee!</h1>
+				<div class="social">
+					<a href="https://linkedin.alee14.me" target="_blank" aria-label="LinkedIn">
+						<Icon name="fa6-brands:linkedin" />
+					</a>
+					<a href="https://github.alee14.me" target="_blank" aria-label="GitHub">
+						<Icon name="fa6-brands:github" />
+					</a>
+					<a href="https://youtube.alee14.me" target="_blank" aria-label="YouTube">
+						<Icon name="fa6-brands:youtube" />
+					</a>
+					<a href="https://instagram.alee14.me" target="_blank" aria-label="Instagram">
+						<Icon name="fa6-brands:instagram" />
+					</a>
+				</div>
+				<div class="description">
+					<h2>19 Years Old</h2>
+					<h2>Student at Pearson Electrotechnology Centre</h2>
+					<h2>Living in Montreal, Quebec, Canada</h2>
+				</div>
+				<div>
+					<h3><a href="mailto:andrew@alee14.me" class="email-contact">andrew@alee14.me</a></h3>
+				</div>
 			</div>
 		</div>
 		<div class="information">
@@ -44,7 +50,7 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
 				<h1>About me</h1>
 				<!--<a href="/history" class="link">History</a>-->
 				<p>Hey, I am Andrew Lee, a person who has a passion with computers.
-					I am currently a student at a vocational school in Pearson Electrotechnology Centre.
+					I am currently a student at a trade school to get my DEP for IT.
 					For years, I have been into programming, tinkering with virtual machines, and messing with Linux.</p>
 			</div>
 			<div class="box">
@@ -70,7 +76,7 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
 					<li>Model: DS918+</li>
 					<li>CPU: Intel Celeron J3455</li>
 					<li>RAM: 8 GB</li>
-					<li>Storage: 15 TB (3x5TB, 1x4TB)</li>
+					<li>Storage: 15 TB (3x6TB, 1x4TB)</li>
 				</ul>
 				<h2>Vultr (Web Server)</h2>
 				<ul>
@@ -98,5 +104,36 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
 				))}
 			</div>
 		</div>
+		<div class="container">
+			<div class="featured-projects">
+				<h1>Featured Projects</h1>
+				<div class="grid">
+					{
+						featuredProjects.map((project) => {
+							return (
+								<article class="card">
+									<h1>{project.name}</h1>
+									<p>{project.description}</p>
+									<div class="row">
+										{project.links.map((link) => {
+											return (
+												<a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a>
+											)
+										})}
+									</div>
+								</article>
+							)
+						})
+					}
+				</div>
+			</div>
+		</div>
 	</main>
 </Layout>
+<style>
+	.row {
+		display: flex;
+		flex-direction: row;
+		gap: 1em;
+	}
+</style>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 9b2b8a2..ee574c6 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -2,7 +2,7 @@
 import Page from "../layouts/Page.astro";
 import projects from "../data/projects.json";
 import "../styles/cards.css";
-import GitHubProjects from "../components/GitHubProjects";
+import GitHubProjects from "../components/GitHubProjects.svelte";
 
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">