119 lines
3.5 KiB
Markdown
119 lines
3.5 KiB
Markdown
|
|
# 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/tombutcher.work/2026-tombutcher-ui.git
|
|
cd 2026-tombutcher-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
|
|
|
|
```
|
|
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
|
|
```
|
|
|
|
## 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/) |