chore: update components folder structure, add constants, update existing layout components, scaffold pages
This commit is contained in:
+2
-84
@@ -1,94 +1,12 @@
|
||||
// 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 Hero from "@/components/content/Hero";
|
||||
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>
|
||||
<Hero label="About"/>
|
||||
);
|
||||
}
|
||||
|
||||
+4
-12
@@ -1,26 +1,18 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
--font-sans: var(--font-inter);
|
||||
--font-serif: var(--font-instrument-serif);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
+10
-8
@@ -1,22 +1,24 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Inter, Instrument_Serif } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Header from "@/components/layout/Header";
|
||||
import Footer from "@/components/layout/Footer";
|
||||
import Container from "@/components/layout/Container";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const instrumentSerif = Instrument_Serif({
|
||||
variable: "--font-instrument-serif",
|
||||
subsets: ["latin"],
|
||||
weight: "400",
|
||||
style: ["normal", "italic"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Angel Mankel — Software Engineer"
|
||||
title: "Angel Mankel — Software Engineer",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -27,9 +29,9 @@ export default function RootLayout({
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
className={`${inter.variable} ${instrumentSerif.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">
|
||||
<body className="min-h-full flex flex-col font-sans">
|
||||
<Header />
|
||||
<Container>{children}</Container>
|
||||
<Footer />
|
||||
|
||||
+65
-1
@@ -1,3 +1,67 @@
|
||||
import Hero from "@/components/content/Hero";
|
||||
import Testimonials from "@/components/content/Testimonials";
|
||||
import SectionLabel from "@/components/layout/SectionLabel";
|
||||
import AccentLink from "@/components/navigation/AccentLink";
|
||||
|
||||
type Testimonial = {
|
||||
name: string;
|
||||
title: string;
|
||||
avatar?: string;
|
||||
quote: string;
|
||||
};
|
||||
|
||||
const testimonialsData: Testimonial[] = [
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
title: "Senior Software Engineer · Patient Platforms",
|
||||
quote:
|
||||
"Working with Angel was the first time I saw someone treat Claude Code as a real engineering tool instead of a toy. He’d built half a workflow before the rest of us figured out it was possible.",
|
||||
},
|
||||
{
|
||||
name: "Marcus Whitfield",
|
||||
title: "Staff Frontend Engineer",
|
||||
quote:
|
||||
"He owned the component library end-to-end and ran the migration without breaking a single screen. Quiet shipper — you only notice his work when you go looking for it.",
|
||||
},
|
||||
{
|
||||
name: "Priya Anand",
|
||||
title: "Product Designer",
|
||||
quote:
|
||||
"Angel is the rare engineer who actually reads designs and asks questions when something feels off. Half my polish budget got returned to me on the projects he was on.",
|
||||
},
|
||||
{
|
||||
name: "Daniel Okafor",
|
||||
title: "Engineering Manager",
|
||||
quote:
|
||||
"He’s at his best when the problem doesn’t fit cleanly into one stack. I’d hand him an ambiguous brief and a week later he’d come back with a working prototype and a plan.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return <p>Home</p>;
|
||||
return (
|
||||
<div>
|
||||
<Hero label="Angel Mankel">
|
||||
<div className="space-y-5">
|
||||
<p className="font-serif italic text-3xl leading-[1.3]">
|
||||
I’m a creator at heart.
|
||||
</p>
|
||||
|
||||
<p className="text-[19px] leading-[1.65]">
|
||||
Building software people rely on — and understanding what makes those
|
||||
people tick — is what drives my greatest ambitions.
|
||||
</p>
|
||||
|
||||
<p className="text-[19px] leading-[1.65]">
|
||||
I’m the kind of engineer who picks up whatever the problem needs and
|
||||
keeps digging — into the code, and into the people it’s meant for.
|
||||
The throughline isn’t a stack, it’s the curiosity.
|
||||
</p>
|
||||
</div>
|
||||
</Hero>
|
||||
<SectionLabel label="Selected Projects" />
|
||||
<AccentLink label="See all projects" link="/projects" />
|
||||
<SectionLabel label="What people say" />
|
||||
<Testimonials items={testimonialsData} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+3
-75
@@ -1,84 +1,12 @@
|
||||
// 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 Hero from "@/components/content/Hero";
|
||||
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() {
|
||||
export default function ProjectsPage() {
|
||||
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>
|
||||
<Hero label="Projects" subtitle="Selected work, written as postmortems." />
|
||||
);
|
||||
}
|
||||
|
||||
+3
-7
@@ -1,16 +1,12 @@
|
||||
import Hero from "@/components/content/Hero";
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
export const metadata: Metadata = {
|
||||
title: "Uses — Angel Mankel",
|
||||
};
|
||||
|
||||
export default function UsesPage() {
|
||||
return (
|
||||
<main className="mx-auto max-w-2xl px-6 py-24">
|
||||
<h1 className="text-3xl font-semibold mb-12">Uses</h1>
|
||||
|
||||
test
|
||||
</main>
|
||||
<Hero label="Uses" subtitle="Tools and technologies I use in my work."/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user