Behind the Code

Edward is a musician, pro wrestling fanatic, and horror movie enthusiast. He spends his days to the fullest with his soon-to-be wife, Kori, along with their two dogs and cat in the Metro Detroit area. You can catch him at hardcore shows, wrestling events, or playing games with his friends.

How This Site Is Crafted

Would you care for some computer alchemy?

Project Structure

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── experience/page.tsx
│   ├── skills/page.tsx
│   ├── about/page.tsx
│   ├── components/
│   └── globals.css
└── lib/
    ├── db.ts
    ├── schema.ts
    └── queries.ts
db/
├── migrations/
└── seed.ts
drizzle.config.ts
tailwind.config.ts

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 (wraps pg Pool)
    ├── 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 the folder structure. All routes are wrapped with a shared layout containing the nav bar and footer.

Components

Every component has a single responsibility, whether it is the hero, skill cards, timeline entries, etc. The props are initialized with response values from respective page queries.

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.