9 files changed, 86 insertions, 16 deletions
diff --git a/astro.config.mjs b/astro.config.mjs
index 882e651..5db1b38 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,4 +1,7 @@
 import { defineConfig } from 'astro/config';
+import icon from "astro-icon";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    integrations: [icon()],
+});
diff --git a/bun.lockb b/bun.lockb
index 20991b8..c7d1787 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index d20aae9..a4dddf5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.0.5"
+    "@iconify-json/fa6-brands": "^1.1.18",
+    "astro": "^4.0.5",
+    "astro-icon": "^1.0.2"
   }
 }
 \ No newline at end of file
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 17da17d..a838438 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -2,8 +2,8 @@
 import "./Navbar.css"
 ---
 <nav>
-    <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Projects</a></li>
+    <ul class="nav-list">
+        <li class="nav-links"><a href="/" class="nav-link">Home</a></li>
+        <li class="nav-links"><a href="#" class="nav-link">Projects</a></li>
     </ul>
 </nav>
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index 5987d16..7b1a334 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -3,7 +3,7 @@ nav {
     padding-top: 20px;
     padding-bottom: 30px;
 }
-ul {
+ul.nav-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -12,22 +12,23 @@ ul {
     justify-content: center;
 }
 
-li {
+li.nav-links {
     margin: 0 1rem;
 }
 
-a {
+
+a.nav-link {
     font-size: 1.2rem;
     text-decoration: none;
     color: #FFFFFF;
 }
 
-a:hover {
+a.nav-link:hover {
     font-weight: 500;
     color: #9ECD9D;
     transition: ease-in-out 0.1s;
 }
 
-a:active {
+a.nav-link:active {
     color: #609460;
 }
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 9cbaf7a..b54dc35 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -11,7 +11,7 @@ import Navbar from '../components/Navbar.astro';
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
+		<meta name="description" content="Andrew Lee Website" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -24,7 +24,7 @@ import Navbar from '../components/Navbar.astro';
 	<Navbar />
 		<slot />
 	<footer>
-		<p>&copy; Copyright 2018-2024, Andrew Lee</p>
+		<p>Copyright &copy; 2024 Andrew Lee</p>
 	</footer>
 	</body>
 </html>
@@ -39,8 +39,22 @@ import Navbar from '../components/Navbar.astro';
 
 	footer {
 		text-align: center;
-		font-size: 1.3em;
-		padding: 1rem;
+		font-size: 2.4vh;
+		padding: 1.3vh;
+	}
+
+	a {
+		text-decoration: none;
+		color: #d7fcc9;
+	}
+
+	a:hover {
+		color: #9ECD9D;
+		transition: ease-in-out 0.2s;
+	}
+
+	a:active {
+		color: #609460;
 	}
 
 	code {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bb8e3a9..4c25869 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Default.astro';
+import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets';
 import './index.css';
 ---
@@ -8,5 +9,27 @@ import './index.css';
 	<main class="home">
 		<Image class="avatar" src="/Alee.png" alt="Andrew Lee" height="200px" width="200px" />
 		<h1>Hey, I'm Andrew Lee!</h1>
+		<div class="social">
+			<a href="https://github.alee14.me" class="social-links">
+				<Icon name="fa6-brands:github" />
+			</a>
+			<a href="https://youtube.alee14.me" class="social-links">
+				<Icon name="fa6-brands:youtube" />
+			</a>
+			<a href="https://instagram.alee14.me" class="social-links">
+				<Icon name="fa6-brands:instagram" />
+			</a>
+			<a href="https://discord.alee14.me" class="social-links">
+				<Icon name="fa6-brands:discord" />
+			</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">andrew@alee14.me</a></h3>
+		</div>
 	</main>
 </Layout>
diff --git a/src/pages/index.css b/src/pages/index.css
index d242483..ddc1fc6 100644
--- a/src/pages/index.css
+++ b/src/pages/index.css
@@ -3,10 +3,36 @@
 }
 
 .avatar {
-    border-radius: 50%;
+    border-radius: 20%;
 }
 
 h1 {
     font-weight: 500;
-    font-size: 2.3rem;
+    font-size: 4vh;
+}
+
+h2 {
+    font-weight: 500;
+    font-size: 2.5vh;
+}
+
+.description {
+    line-height: 0.4;
+}
+
+h3 {
+    font-weight: 300;
+    font-size: 1.2rem;
+}
+
+.social {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    font-size: 6vh;
+    gap: 7vh;
+}
+
+.social-links {
+    color: #FFFFFF;
 }