Finished first part of homepage

2 files changed, 51 insertions, 2 deletions

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;
 }