Add Astro Vercel serverless adapter and update Astro version in package.json

astro.config.mjs

@@ -1,7 +1,11 @@
 import { defineConfig } from 'astro/config';
 import icon from "astro-icon";
 
+import vercel from "@astrojs/vercel/serverless";
+
 // https://astro.build/config
 export default defineConfig({
-    integrations: [icon()],
-});
+  integrations: [icon()],
+  output: "server",
+  adapter: vercel()
+});

package.json

@@ -10,8 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/vercel": "^6.1.3",
     "@iconify-json/fa6-brands": "^1.1.18",
-    "astro": "^4.0.5",
+    "astro": "^4.1.1",
     "astro-icon": "^1.0.2"
   }
 }

src/pages/index.astro

@@ -2,13 +2,14 @@
 import Layout from '../layouts/Default.astro';
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets';
+import Profile from '../images/Alee.png';
 import '../styles/index.css';
 ---
 
 <Layout title="Andrew Lee">
 	<main class="home">
 		<div class="headline">
-			<Image class="avatar" src="/Alee.png" alt="Andrew Lee" height="200px" width="200px" />
+			<Image src={Profile} class="avatar" alt="Andrew Lee" height="200px" width="200px" />
 			<h1 id="title">Hey, I'm Andrew Lee!</h1>
 			<div class="social">
 				<a href="https://github.alee14.me">
@@ -33,14 +34,17 @@ import '../styles/index.css';
 				<h3><a href="mailto:andrew@alee14.me" class="email-contact">andrew@alee14.me</a></h3>
 			</div>
 		</div>
-		<div class="infobox">
-			<div class="about">
+		<div class="information">
+			<div class="box">
 				<h1>About me</h1>
 				<p>I have been into computers since I was a kid, and it has been my passion for a long time. <br>Currently studying “Computing Support” (more preferably IT) at a vocational school.</p>
 			</div>
-			<div class="about">
+			<div class="box">
 				<h1>Computer Specs</h1>
 			</div>
+			<div class="box">
+				<h1>Latest Posts</h1>
+			</div>
 		</div>
 	</main>
 </Layout>

src/styles/index.css

@@ -38,13 +38,13 @@ h2 {
     font-size: 2.2vh;
 }
 
-.infobox {
+.information {
     display: flex;
     flex-direction: column;
     gap: 2vh;
 }
 
-.about {
+.box {
     padding: 1vw;
     text-align: left;
     background: #3B513B;