feat: initial next.js boilerplate, set up .env, add outline documents
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
// 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
// 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 /work specifically.
|
||||
export const metadata: Metadata = {
|
||||
title: "Work — 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 WorkPage() {
|
||||
return (
|
||||
<main className="mx-auto max-w-2xl px-6 py-24">
|
||||
<h1 className="text-3xl font-semibold mb-12">Work</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>
|
||||
|
||||
<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="/about" className="hover:text-white">
|
||||
See about
|
||||
</Link>
|
||||
</nav>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user