1
0
Fork
You've already forked react-portfolio
0
No description
  • TypeScript 88.8%
  • JavaScript 5.9%
  • HTML 5.2%
  • CSS 0.1%
2026年02月27日 15:17:29 -05:00
.github/workflows Add GitHub Actions workflow for deploying to Pages 2026年02月27日 11:17:27 -05:00
public replaced books unlimited with wikiscape 2026年01月07日 14:09:17 -05:00
src Remove Contact import from App.tsx 2026年02月27日 11:19:08 -05:00
.gitattributes Initial commit 2025年10月14日 16:37:22 -04:00
.gitignore Initial commit 2025年10月14日 16:37:22 -04:00
eslint.config.js Initial commit 2025年10月14日 16:37:22 -04:00
index.html Initial commit 2025年10月14日 16:37:22 -04:00
LICENSE Create LICENSE 2025年10月14日 23:48:07 -04:00
package-lock.json fix cloudflare 2025年10月18日 20:13:41 -04:00
package.json fix cloudflare 2025年10月18日 20:13:41 -04:00
README.md switch from recaptcha to cloudflare 2025年10月18日 19:54:19 -04:00
tailwind.config.js shadcn 2025年10月15日 01:46:04 -04:00
tsconfig.app.json Initial commit 2025年10月14日 16:37:22 -04:00
tsconfig.json Initial commit 2025年10月14日 16:37:22 -04:00
tsconfig.node.json Initial commit 2025年10月14日 16:37:22 -04:00
vite.config.ts Set base path for Vite configuration 2026年02月27日 15:17:29 -05:00

React Portfolio with Flask Backend

A modern portfolio website built with React, TypeScript, and Flask. Features a responsive design, contact form with Cloudflare Turnstile protection, and email integration.

Features

  • React Frontend: Modern, responsive design with TypeScript
  • Flask Backend: Integrated Python backend for contact form processing
  • Cloudflare Turnstile: Spam protection for the contact form
  • Email Integration: Contact form sends emails via SMTP
  • Production Ready: Flask serves the built React app

Project Structure

react-portfolio/
├── src/ # React source code (TypeScript)
├── public/ # Static assets (projects.json, images)
├── dist/ # Built React app (generated)
├── app.py # Flask backend server
├── requirements.txt # Python dependencies
├── package.json # Node.js dependencies
└── .env.example # Environment variables template

Quick Start

1. Install Dependencies

Node.js (Frontend):

npm install

Python (Backend):

pip install -r requirements.txt

2. Environment Configuration

Copy .env.example to .env and configure:

# Email Configuration
EMAIL_ADDRESS=your-email@example.com
EMAIL_PASSWORD=your-email-password
# Cloudflare Turnstile Configuration
TURNSTILE_SITE_KEY=your-turnstile-site-key
TURNSTILE_SECRET_KEY=your-turnstile-secret-key

3. Development

Integrated Production Build

# Build React app
npm run build
# Serve with Flask (port 5000)
python app.py

Cloudflare Turnstile Setup

  1. Get API keys from Cloudflare Turnstile Dashboard
  2. Add domain
  3. Update .env with site key and secret key
  4. Replace the placeholder site key in src/hooks/useTurnstile.ts

Available Scripts

  • npm run dev - Start React development server
  • npm run build - Build React app for production
  • npm run preview - Preview production build
  • python app.py - Start Flask server

Technologies Used

  • Frontend: React 18, TypeScript, Vite, Tailwind CSS
  • Backend: Flask, Python 3
  • Security: Cloudflare Turnstile
  • Email: SMTP with SSL
  • Deployment: Flask static file serving

Contact Form Features

  • Real-time form validation
  • Cloudflare Turnstile protection
  • Loading states and user feedback
  • Email delivery via SMTP
  • Server-side spam protection

License

GNU License - see LICENSE file for details