2026 tombutcher.work UI
This is the front-end web application for tombutcher.work (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 (v18 or higher recommended)
- npm or yarn
- Wrangler CLI (for deployment)
- Git
Getting Started
1. Clone the Repository
Clone this repository to your local machine:
git clone https://git.tombutcher.work/tombutcher.work/2026-tombutcher-ui.git
cd 2026-tombutcher-ui
2. Install Dependencies
Install the necessary dependencies:
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:
npm run dev
The website will be available at http://localhost:5173 (Vite default port).
5. Building for Production
To create a production build:
npm run build
The optimized build will be output to the ./dist directory.
6. Preview Production Build
To preview the production build locally:
npm run preview
Deployment
Deploy to Cloudflare Pages
Deploy using Wrangler CLI:
npm run deploy
This will build the project and deploy it to Cloudflare Pages.
Project Structure
2026-tombutcher-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