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 (for development)
- Cloudflare Workers CLI
- Git
Getting Started
1. Clone the Repository
Clone this repository to your local machine:
git clone https://git.tombutcher.work/tom/tombutcher-ui.git
cd tombutcher-ui
2. Install Dependencies
Install the necessary dependencies for the React app:
npm install
3. Set up Cloudflare Workers
Install and configure Cloudflare 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:
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, follow the steps in the Cloudflare Pages documentation:
- Push your React app to a Git repository.
- Link the repository with Cloudflare Pages.
- Deploy!
Deploy Cloudflare Workers
To deploy the Cloudflare Worker, use:
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 file for details.