95 lines
3.6 KiB
TypeScript
95 lines
3.6 KiB
TypeScript
// File-based routing: this file's location IS the URL.
|
||
// /app/about/page.tsx → https://yoursite.com/about
|
||
//
|
||
// Conventions:
|
||
// page.tsx = the route's UI
|
||
// layout.tsx = a wrapper shared across this folder + any nested routes
|
||
// loading.tsx = shown while the page is loading
|
||
// not-found.tsx = shown on 404 within this segment
|
||
|
||
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
|
||
// Route-level metadata. Next reads this at build time and emits the
|
||
// correct <title>, <meta description>, OG tags, etc. into <head>.
|
||
// The root layout (/app/layout.tsx) had its own metadata; this overrides
|
||
// the title for /about specifically.
|
||
export const metadata: Metadata = {
|
||
title: "About — Angel Mankel",
|
||
// description:
|
||
// "Frontend engineer with deep AI-tooling fluency. Currently at Village Medical.",
|
||
};
|
||
|
||
// This is a Server Component by default. It runs on the server, sends
|
||
// HTML to the browser, and ships zero JavaScript for this page itself.
|
||
// You only add "use client" at the top of a file when you need
|
||
// interactivity (useState, onClick, etc).
|
||
//
|
||
// Because it's a server component, you could `await fetch()` here, read
|
||
// a markdown file from disk, or query a DB directly — no API route needed.
|
||
export default function AboutPage() {
|
||
return (
|
||
<main className="mx-auto max-w-2xl px-6 py-24">
|
||
<h1 className="text-3xl font-semibold mb-12">About</h1>
|
||
|
||
<section className="space-y-6 text-base leading-relaxed text-neutral-200">
|
||
<p>
|
||
I came up through healthcare IT — help desk, then Salesforce admin,
|
||
then software engineer at Village Medical, where I lead React and
|
||
TypeScript redesigns of patient-facing apps and the internal
|
||
component library.
|
||
</p>
|
||
<p>
|
||
In parallel I've gone deep on AI-assisted development. Claude
|
||
Code, custom slash commands, MCP integrations — the tooling layer
|
||
that's reshaping how I work across the stack.
|
||
</p>
|
||
<p>
|
||
I'm looking for remote-US product-engineering roles where
|
||
shipping React is the day job and using and building AI tooling is
|
||
first-class.
|
||
</p>
|
||
</section>
|
||
|
||
<section className="mt-16">
|
||
<div className="text-xs uppercase tracking-wider text-neutral-500 mb-3">
|
||
Timeline
|
||
</div>
|
||
<ul className="font-mono text-sm space-y-1.5 text-neutral-200">
|
||
<li>
|
||
<span className="text-neutral-500 mr-3">2024 – now</span>
|
||
Village Medical · Software Engineer
|
||
</li>
|
||
<li>
|
||
<span className="text-neutral-500 mr-3">2022 – 2024</span>
|
||
Village Medical · Salesforce Admin
|
||
</li>
|
||
<li>
|
||
<span className="text-neutral-500 mr-3">2019 – 2022</span>
|
||
Gila River · Help Desk / IT
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
{/* next/link does client-side navigation between routes (no full
|
||
page reload) and prefetches the target route when the link
|
||
enters the viewport. Use it for any internal nav. For external
|
||
links and file downloads, plain <a> is fine. */}
|
||
<p className="mt-10 text-sm">
|
||
<a href="/cv.pdf" className="underline underline-offset-4 text-amber-400">
|
||
Download CV (PDF)
|
||
</a>
|
||
</p>
|
||
|
||
<nav className="mt-16 pt-8 border-t border-neutral-800 flex gap-6 text-sm text-neutral-400">
|
||
<Link href="/" className="hover:text-white">
|
||
← Back home
|
||
</Link>
|
||
<Link href="/projects" className="hover:text-white">
|
||
See projects
|
||
</Link>
|
||
</nav>
|
||
</main>
|
||
);
|
||
}
|