# 2026 tombutcher.work UI

This is the front-end web application for **tombutcher.work** ([tombutcher.work](https://tombutcher.work)), built with **React.js** and hosted on **Cloudflare Pages**. The website showcases my personal work.

## Tech Stack

- **React 19**: Modern JavaScript library for building user interfaces
- **Vite**: Fast build tool and development server
- **Cloudflare Pages**: Static site hosting with global CDN
- **Cloudflare Turnstile**: Bot protection for form submissions
- **Keycloak**: Authentication and authorization

## Features

- Dynamic content delivery: pages, blogs, projects, companies, media, and CV assets load at runtime via React Query from the configured `VITE_API_URL`, so updates ship without redeploys.
- Immersive navigation: smooth-scrolling landing sections, animated sub-pages, and deep-link routing keep transitions fast while preserving stateful context.
- Adaptive theming: global theme context syncs typography and color tokens across devices, reacting to breakpoint changes for desktop, tablet, and mobile layouts.
- Account-aware UI: Keycloak SSO bootstraps user sessions for gated experiences while keeping the rest of the site public-by-default.
- Engagement tooling: Cloudflare Turnstile-secured contact form and multi-version CV download menu (digital vs. print) streamline outreach and asset sharing.

## Prerequisites

Before getting started, make sure you have the following installed:

- [Node.js](https://nodejs.org/) (v18 or higher recommended)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
- [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) (for deployment)
- [Git](https://git-scm.com/)

## Getting Started

### 1. Clone the Repository

Clone this repository to your local machine:

```bash
git clone https://git.tombutcher.work/tom/thehideout-ui.git
cd thehideout-ui
```

### 2. Install Dependencies

Install the necessary dependencies:

```bash
npm install
```

### 3. Configure Environment

Ensure any necessary environment variables are set up for:
- Cloudflare Turnstile site keys
- Keycloak configuration
- API endpoints

### 4. Running Locally

To start the development server locally:

```bash
npm run dev
```

The website will be available at `http://localhost:5173` (Vite default port).

### 5. Building for Production

To create a production build:

```bash
npm run build
```

The optimized build will be output to the `./dist` directory.

### 6. Preview Production Build

To preview the production build locally:

```bash
npm run preview
```

## Deployment

### Deploy to Cloudflare Pages

Deploy using Wrangler CLI:

```bash
npm run deploy
```

This will build the project and deploy it to Cloudflare Pages.

## Project Structure

```
thehideout-ui/
├── src/
│   ├── components/     # Reusable React components
│   ├── contexts/       # React context providers
│   ├── icons/          # Custom icon components
│   ├── utils/          # Utility functions
│   ├── App.jsx         # Main application component
│   └── main.jsx        # Application entry point
├── public/             # Static assets
├── dist/               # Production build output
└── assets/             # Additional assets
```

## Resources

- [React](https://react.dev/)
- [Vite](https://vite.dev/)
- [Ant Design](https://ant.design/)
- [Cloudflare Pages](https://developers.cloudflare.com/pages/)
- [Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/)