About Me page

e2e/fixtures.ts

@@ -1,11 +1,13 @@
 import { test as base } from "@playwright/test";
 import { HomePage } from "./pages/home-page";
 import { ProjectsPage } from "./pages/projects-page";
+import { AboutPage } from "./pages/about-page";
 import { Projects } from "./pages/projects";
 
 type Fixtures = {
   homePage: HomePage;
   projectsPage: ProjectsPage;
+  aboutPage: AboutPage;
   projects: Projects;
 };
 
@@ -16,6 +18,9 @@ export const test = base.extend<Fixtures>({
   projectsPage: async ({ page, baseURL }, use) => {
     await use(new ProjectsPage(page, baseURL as string));
   },
+  aboutPage: async ({ page, baseURL }, use) => {
+    await use(new AboutPage(page, baseURL as string));
+  },
   projects: async ({ page, baseURL }, use) => {
     await use(new Projects(page, baseURL as string));
   },

e2e/pages/about-page.ts

@@ -0,0 +1,12 @@
+import type { Page } from "@playwright/test";
+import { SharedPage } from "./shared-page";
+
+export class AboutPage extends SharedPage {
+  constructor(page: Page, baseURL: string) {
+    super(page, baseURL);
+  }
+
+  async goto() {
+    await super.goto("/about");
+  }
+}

e2e/pages/shared-page.ts

@@ -7,7 +7,7 @@ export abstract class SharedPage {
     private readonly baseURL: string,
   ) {}
 
-  async goto(path: "" | "/projects" = ""): Promise<void> {
+  async goto(path: "" | "/projects" | "/about" = ""): Promise<void> {
     await this.page.goto(this.baseURL + path);
   }
 

e2e/specs/about-page.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "../fixtures";
+
+test.beforeEach(async ({ aboutPage }) => {
+  await aboutPage.goto();
+});
+
+test("has title", async ({ page }) => {
+  await expect(page).toHaveTitle("Gil Hanan | About Me");
+});

src/app/about/page.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import AboutPage, { metadata } from "./page";
+
+describe("About", () => {
+  it("should contain metadata", () => {
+    expect(metadata.title).toBeTruthy();
+  });
+
+  it("should render title", () => {
+    render(<AboutPage />);
+
+    expect(
+      screen.getByRole("heading", { name: "About Me" }),
+    ).toBeInTheDocument();
+  });
+
+  it("should render content", () => {
+    const { container } = render(<AboutPage />);
+
+    expect(container.querySelectorAll("p").length).toBeGreaterThan(0);
+  });
+});

src/app/about/page.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import collage from "../../../public/images/collage.png";
+
+export const metadata: Metadata = {
+  title: "About Me",
+};
+
+export default function AboutPage() {
+  return (
+    <div className="mt-12 sm:mt-6">
+      <section>
+        <h1 className="text-3xl text-primary text-center">About Me</h1>
+        <div className="text-secondary">
+          <p className="mt-4">
+            My name is Gil Hanan and I&apos;m a web developer at Microsoft with
+            over 10 years of experience 👨‍💻. <br /> Programming is my passion,
+            and I discovered it when I developed bots to play games for me and
+            level up my characters. I&apos;m not sure if that&apos;s cheating or
+            genius 🤖, but it was a lot of fun 🥳.
+          </p>
+          <Image
+            src={collage}
+            width={200}
+            alt="My family"
+            className="float-left inline m-4 ml-0 rounded-md shadow-md"
+          />
+          <p className="mt-4">
+            Although I have a roman with ChatGPT, I&apos;m happily married 💍.
+            In my spare time, I like to build wooden items 🔨🪵 and play ball
+            games ⚽️🏀, but I hate running 🏃‍♂️. <br /> I love animals more than
+            humans, and our home is somewhat of a zoo 🐶🐱🦜🐇.
+          </p>
+          <p className="mt-4">
+            Recently, I&apos;ve taken an interest in building open-source
+            projects, and I created this portfolio website to showcase them 🖼️.
+            <br /> I hope you enjoy them, and I would appreciate any feedback
+            📨.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}