A personal portfolio and "living resume" for Lawrence Baker, Staff Backend Software Engineer.
Built as a fast, accessible, single-page site. Content is stored as typed, structured data — separate from presentation — so the resume is easy to keep up to date.
- Astro — static site generation (
output: 'static') - Tailwind CSS v4 — styling, via the
@tailwindcss/viteplugin (the current recommended integration for Astro) - TypeScript — strict mode
- Prettier (+
prettier-plugin-astro) — formatting
Requires Node.js 18.20.8+, 20.3.0+, or 22+.
npm install # install dependencies
npm run dev # start the dev server at http://localhost:4321| Command | Description |
|---|---|
npm run dev |
Start the local dev server |
npm run build |
Build the production site to ./dist/ |
npm run preview |
Preview the production build locally |
npm run format |
Format all files with Prettier |
npm run format:check |
Check formatting without writing changes |
All resume content lives in a single typed file:
src/data/resume.ts
It exports a resume object typed as Resume, composed of Profile,
Experience[], SkillGroup[], Education[], and ContactLink[]. Update the
objects there and the page re-renders automatically. Placeholder copy is marked
with TODO.
lbaker-dev/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ ├── ExperienceItem.astro
│ │ ├── Footer.astro
│ │ ├── Nav.astro
│ │ └── Section.astro
│ ├── data/
│ │ └── resume.ts # typed resume content (single source of truth)
│ ├── layouts/
│ │ └── BaseLayout.astro # <head>, meta, SEO, Open Graph, theme bootstrap
│ ├── pages/
│ │ └── index.astro # the single-page living resume
│ └── styles/
│ └── global.css # Tailwind entry + design tokens + base styles
├── astro.config.mjs
├── tsconfig.json
└── package.json
This site builds to static files, so no adapter is required.
- Push the repository to GitHub.
- In Vercel, Add New → Project and import the repo.
- Vercel auto-detects Astro. Confirm the settings:
- Framework preset: Astro
- Build command:
astro build(ornpm run build) - Output directory:
dist
- Deploy.
- In the Vercel project, go to Settings → Domains and add
lbaker.dev(and optionallywww.lbaker.dev). - Update DNS at your registrar as Vercel instructs:
- Apex (
lbaker.dev): anArecord to76.76.21.21, or use Vercel's nameservers for automatic management. www: aCNAMErecord tocname.vercel-dns.com.
- Apex (
- Vercel provisions an SSL certificate automatically once DNS resolves.
If server-rendered routes are ever needed, install
@astrojs/verceland setoutput: 'server'(or'hybrid') inastro.config.mjs.
- Semantic HTML landmarks, a skip-to-content link, and visible focus styles.
- Respects
prefers-reduced-motion. - Class-based light/dark theme that follows the OS preference and persists a manual choice, with no flash of the wrong theme on load.