Jody Holt | Developer Portfolio

This is the source code for my personal portfolio. Created using React//Tailwind//TypeScript

---

Overview

This site demonstrates my personality, skills, and presents the tone I provide through all my collaborative/business endeavors.

STACK

• SPA with React (functional components, hooks)
• TailwindCSS (custom tokens and theme system)
• Theme Engine (5 themes with automated color adaption per user preference )
• IntersectionObserver (based scroll nav)
• Modular component layout

---

Project structure

src/
|-assets/ # Images
|-components/ #Reusable UI components 
|-hooks/ #Custom  React Hooks
|-styles/ #Tailwind + custom theme CSS
|App.tsx
|index.css

---

Theme System

within index:

5 unique themes are laid out by:

• color-bg
• color-primary
• color-text
• color-secondary
• color-tertiary

These themes are applied via html[data-theme="x"] and are used across the site for all gradients, tints, accents, etc.

To run on local client:

npm i

npm run dev

## Local:   http://localhost:5173/ (control + click local host url)

Contact Form Setup

Frontend env

Create .env in the project root:

VITE_CONTACT_API_URL=/api/contact
VITE_TURNSTILE_SITE_KEY=your_turnstile_site_key

Backend API

The contact backend lives in contact-api/.

cd contact-api
npm i
npm run dev

Create contact-api/.env from contact-api/.env.example and set your real Turnstile + SMTP credentials.

VPS service files

• systemd unit template: ops/jody-contact-api.service
• Nginx reverse proxy snippet: ops/nginx-contact-api.conf

Author

Jody Holt

Frontend Developer • Passion Pioneer

GitHub • LinkedIn