Merge branch 'main' of https://git.tombutcher.work/tom/tombutcher-ui

Jenkinsfile

@@ -0,0 +1,52 @@
+pipeline {
+  agent any
+
+  environment {
+    NODE_ENV = 'production'
+    CLOUDFLARE_ACCOUNT_ID = credentials('cloudflare-account-id')
+    CLOUDFLARE_API_TOKEN = credentials('cloudflare-api-token')
+    PROJECT_NAME = 'tombutcher-ui'
+  }
+
+  stages {
+    stage('Checkout') {
+      steps {
+        checkout scm
+      }
+    }
+
+    stage('Install dependencies') {
+      steps {
+        sh 'npm install'
+      }
+    }
+
+    stage('Build') {
+      steps {
+        sh 'npm run build'
+      }
+    }
+
+    stage('Deploy to Cloudflare Pages') {
+      steps {
+        sh '''
+          npm install -g wrangler
+          wrangler pages deploy ./build \
+            --project-name $PROJECT_NAME \
+            --branch main \
+            --account-id $CLOUDFLARE_ACCOUNT_ID \
+            --api-token $CLOUDFLARE_API_TOKEN
+        '''
+      }
+    }
+  }
+
+  post {
+    failure {
+      echo 'Build or deployment failed.'
+    }
+    success {
+      echo 'Successfully deployed to Cloudflare Pages.'
+    }
+  }
+}

readme.md

@@ -0,0 +1,91 @@
+# Personal Website
+
+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/)