Added introduction component

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "personal-website",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
@@ -10,9 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/tailwind": "^4.0.0",
-    "astro": "^2.9.6",
-    "astro-icon": "^0.8.1",
-    "tailwindcss": "^3.3.3"
+    "@astrojs/tailwind": "^5.0.4",
+    "astro": "^4.0.7",
+    "astro-icon": "^0.8.2",
+    "tailwindcss": "^3.4.0"
   }
-}
+}

src/components/AppBar/index.astro

@@ -50,7 +50,7 @@ const backgroundColorForPageLink = (page: Page): Record<string, boolean> => ({
 });
 
 const hasIcon = (
-  page: Page
+  page: Page,
 ): page is Omit<Page, "icon"> & { icon: NonNullable<Page["icon"]> } => {
   return page.icon !== undefined && page.icon.enabled;
 };

src/components/Page/Home/Introduction.astro

@@ -0,0 +1,41 @@
+---
+import { Image } from "astro:assets";
+
+import banner from "./me.jpg";
+
+const size = 300;
+---
+
+<header class="flex flex-col md:flex-row gap-10 md:mt-40 w-4/5 md:w-3/5">
+    <Image
+        src={banner}
+        alt="Home Page Banner"
+        class="rounded-2xl self-center"
+    />
+    <div class="border border-color-4 opacity-25 hidden md:inline-block flex-1">
+    </div>
+    <div class="flex flex-col gap-3 justify-center text-justify">
+        <h1 class="text-6xl font-bold text-center md:text-start">
+            Hi, I'm <span class="text-color-5">Nuno</span>.
+        </h1>
+        <p class="text-color-4">
+            I'm a Software Engineering Masters student @ <a
+                href="https://sigarra.up.pt/feup/pt/web_page.inicial"
+                target="_blank"
+                class="underline">FEUP</a
+            > in Oporto, Portugal.
+        </p>
+        <p class="text-color-4 text-wrap">
+            I'm a passionate learner and a curious person. I love to wrap my
+            head around complex problems and find solutions to them.
+        </p>
+        <p class="text-color-4 text-wrap">
+            My main topics of interest are <span class="text-color-5"
+                >System Design</span
+            > and <span class="text-color-5">Backend Development</span>. I also
+            love working in the field of <span class="text-color-5">DevOps</span
+            > and <span class="text-color-5">Computer Networking</span> although
+            I'm not as skilled in those.
+        </p>
+    </div>
+</header>

src/components/Project/Card.astro

@@ -14,7 +14,7 @@ interface Props {
  * @returns a list of techs to be displayed in the preview card
  */
 const parsePreviewTechs = (
-  techs: CollectionEntry<"project">["data"]["techStack"]
+  techs: CollectionEntry<"project">["data"]["techStack"],
 ): string[] => {
   if (!techs) {
     return [];
@@ -39,11 +39,7 @@ const project = projectMetadata.data;
 
 <article id=`project-card-${projectMetadata.slug}` class="rounded bg-white">
   <a href=`/projects/${projectMetadata.slug}`>
-    <img
-      height="204.1px"
-      src={project.previewImage}
-      alt=`Preview image for ${project.name}`
-    />
+    <img height="204.1px" src={project.previewImage} alt={project.name} />
     <section class="">
       <header>
         <h2>{project.name}</h2>

src/content/project/website.md

@@ -10,4 +10,5 @@ techStack:
     - "AstroJS"
     - "TypeScript"
     - "CSS"
+    - "TawilwindCSS"
 ---

src/layouts/Content.astro

@@ -7,7 +7,7 @@ const { title } = Astro.props;
 ---
 
 <Base title={title}>
-  <main class="px-10 py-8 content-center flex-1">
+  <main class="px-10 py-8 items-center flex-col flex-1 flex">
     <slot />
   </main>
 </Base>

src/layouts/Page.astro

@@ -12,5 +12,7 @@ const { title: pageTitle, contentTitle, description } = Astro.props;
 
 <BaseLayout title={pageTitle}>
   <Header title={contentTitle} description={description} />
-  <slot />
+  <main class="px-10 py-8 items-center flex-col flex-1 flex">
+    <slot />
+  </main>
 </BaseLayout>

src/pages/index.astro

@@ -1,7 +1,9 @@
 ---
 import Layout from "../layouts/Content.astro";
+
+import Introduction from "../components/Page/Home/Introduction.astro";
 ---
 
 <Layout title="Nuno Pereira">
-  <h1 class="">Naapperas</h1>
-</Layout>
+  <Introduction />
+</Layout>

src/pages/projects/[project].astro

@@ -1,6 +1,6 @@
 ---
 import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
-import { CollectionEntry, getCollection } from "astro:content";
+import { type CollectionEntry, getCollection } from "astro:content";
 import Layout from "../../layouts/Content.astro";
 
 import TechStack from "../../components/Project/TechStack/index.astro";
@@ -21,7 +21,7 @@ const { entry: projectMetada } = Astro.props;
 const mapSemesterOrdinal = (
   semester: Required<
     CollectionEntry<"project">["data"]
-  >["academicData"]["course"]["semester"]
+  >["academicData"]["course"]["semester"],
 ): string => {
   switch (semester) {
     case 1:
@@ -36,11 +36,7 @@ const project = projectMetada.data;
 
 <Layout title={`Project - ${project.name}`}>
   <main class="">
-    <img
-      class=""
-      src={project.previewImage}
-      alt=`Preview image for ${project.name}`
-    />
+    <img class="" src={project.previewImage} alt={project.name} />
     <section class="">
       <header class="">
         <h1>{project.name}</h1>
@@ -58,7 +54,7 @@ const project = projectMetada.data;
               <p class="">
                 {project.academicData.course.year} -{" "}
                 {`${mapSemesterOrdinal(
-                  project.academicData.course.semester
+                  project.academicData.course.semester,
                 )} semester`}
               </p>
               {project.academicData.marks !== undefined ? (