From 64cd7fc83d43a0ad7db1b51214291736bd245b44 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Fri, 28 Jun 2024 20:31:02 -0400
Subject: Guestbook overhaul; Comments; New post; Updated packages

---
 src/pages/index.astro | 91 ++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 64 insertions(+), 27 deletions(-)

(limited to 'src/pages/index.astro')

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>
-- 
cgit v1.2.3