Behind the Code

Austin is a father, musician, and Austinite at heart. When he’s not building software, he’s usually out with his young family checking out local parks, playgrounds, neighborhood spots, and the occasional craft brewery.

How this site is crafted

Time for the good stuff! Here's a peek under the hood of how this site is built and deployed.

Project structure

src/
├── app/
│   ├── layout.tsx              # Root layout (Navbar + Footer)
│   ├── page.tsx                # Home / Hero
│   ├── experience/page.tsx     # Work experience timeline
│   ├── skills/page.tsx         # Skill cards + highlights
│   ├── about/page.tsx          # Bio + architecture walkthrough
│   ├── components/             # Shared UI components
│   └── globals.css             # Global styles + Tailwind directives
└── lib/
    ├── db.ts                   # Drizzle client (Neon HTTP)
    ├── schema.ts               # Drizzle table definitions
    └── queries.ts              # Typed query functions

db/
├── migrations/                 # Auto-generated SQL migrations
└── seed.ts                     # Idempotent seed script

drizzle.config.ts               # Drizzle Kit configuration
tailwind.config.ts              # Tailwind theme configuration

App Router (Next.js 16)

The page routes are defined by folder structure and wrapped by a shared layout that contains the navbar and footer.

Components

Each component has a single responsibility, from timeline entries to skill cards and architecture blocks.

Tailwind CSS

The color palette is inspired by hues from the bio photo. Prefixes are used to set breakpoints that respond to window dimensions.

Drizzle ORM

Defines API contracts and generates SQL migrations that execute with each deployment. This keeps the database schema in sync, ensuring type safety.

PostgresQL Data Layer

Vercel hosts a relational Postgres database containing resume data, which Server Components query at request time. Responses map to interfaces that comport with props.