# tombutcher-ui
[![Build Status](https://ci.tombutcher.work/job/tombutcher.work/job/tombutcher-ui/job/main/badge/icon)](https://ci.tombutcher.work/job/tombutcher.work/job/tombutcher-ui/job/main/)

This is a personal website front end built with **React.js** and hosted on **Cloudflare Workers**. The website is designed to showcase personal blogs and experience, provide a download to my cv, and include a contact form.

## Tech Stack

- **React.js**: A JavaScript library for building user interfaces.
- **Cloudflare Workers**: Serverless functions to handle backend tasks like form submissions, API requests, etc.
- **Cloudflare**: For CDN, SSL, Pages, and routing.

## Features

- **Responsive Design**: The website is fully responsive and adapts to different screen sizes.
- **Contact Form**: A simple form to allow users to send messages, powered by Cloudflare Workers.
- **Experience**: Showcases personal projects, skills, and achievements.
- **Social Media**: Add "linktree" style social media.
- **Blogs**: A blog section for personal thoughts or project updates.

## Prerequisites

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

- [Node.js](https://nodejs.org/) (for development)
- [Cloudflare Workers CLI](https://developers.cloudflare.com/workers/cli-wrangler/)
- [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/tombutcher-ui.git
cd tombutcher-ui
```

### 2. Install Dependencies

Install the necessary dependencies for the React app:

```bash
npm install
```

### 3. Set up Cloudflare Workers

Install and configure [Cloudflare Workers](https://developers.cloudflare.com/workers/) for handling backend logic such as form submissions. This typically includes:

- Configuring your Worker with the correct routes.
- Setting up environment variables for form handling (e.g., email configuration or API keys).

You can create a `wrangler.toml` file and configure it to deploy your workers.

### 4. Running Locally

To start the React development server locally:

```bash
npm run dev
```

The website should now be running at `http://localhost:3000`.

### 5. Deploying to Cloudflare Pages and Workers

#### Deploy the React App

To deploy the React app to [Cloudflare Pages](https://developers.cloudflare.com/pages), follow the steps in the Cloudflare Pages documentation:

1. Push your React app to a Git repository.
2. Link the repository with Cloudflare Pages.
3. Deploy!

#### Deploy Cloudflare Workers

To deploy the Cloudflare Worker, use:

```bash
wrangler publish
```

This will deploy your Worker to Cloudflare's global edge network.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

- [React](https://reactjs.org/)
- [Cloudflare Workers](https://developers.cloudflare.com/workers/)
- [Cloudflare Pages](https://developers.cloudflare.com/pages/)