178 lines
5.0 KiB
Markdown
178 lines
5.0 KiB
Markdown
|
||
# Portfolio (Vite + React + Tailwind)
|
||
|
||
Personal portfolio site built with React + TypeScript and styled with Tailwind. Includes a light/dark theme toggle and an optional “Professional Reviews” section backed by Firebase Firestore.
|
||
|
||
## Features
|
||
|
||
- **Responsive single-page app** (SPA) with multiple portfolio sections.
|
||
- **Light/Dark theme** with persisted preference (`localStorage`).
|
||
- **Professional Reviews**
|
||
- Read reviews from Firestore on page load.
|
||
- Add review modal (name, position, rating, review text).
|
||
- If Firebase env vars are missing, reading returns an empty list and adding is disabled.
|
||
|
||
## Tech Stack
|
||
|
||
- **Vite** (build + dev server)
|
||
- **React 19** + **TypeScript**
|
||
- **Tailwind CSS v4** (via `@tailwindcss/vite`)
|
||
- **Firebase (Firestore)** for reviews
|
||
- **Docker + Nginx** for production container
|
||
|
||
## Getting Started (Local Dev)
|
||
|
||
### Prerequisites
|
||
|
||
- Node.js (recommended: **Node 22** to match the Docker build image)
|
||
- pnpm (recommended) or npm
|
||
|
||
If you don’t have pnpm yet:
|
||
|
||
```bash
|
||
corepack enable
|
||
corepack prepare pnpm@latest --activate
|
||
```
|
||
|
||
### Install
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### Run dev server
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
Vite will print the local URL (typically `http://localhost:5173`).
|
||
|
||
## Environment Variables (Firebase)
|
||
|
||
Firebase is optional, but required to use the Reviews feature.
|
||
|
||
Create a `.env` file in the project root:
|
||
|
||
```bash
|
||
VITE_FIREBASE_API_KEY=...
|
||
VITE_FIREBASE_AUTH_DOMAIN=...
|
||
VITE_FIREBASE_PROJECT_ID=...
|
||
VITE_FIREBASE_STORAGE_BUCKET=...
|
||
VITE_FIREBASE_MESSAGING_SENDER_ID=...
|
||
VITE_FIREBASE_APP_ID=...
|
||
|
||
# Optional
|
||
VITE_FIREBASE_MEASUREMENT_ID=...
|
||
```
|
||
|
||
Vite only exposes environment variables prefixed with `VITE_`.
|
||
|
||
### Firestore data model
|
||
|
||
Reviews are stored in a Firestore collection named `reviews`.
|
||
|
||
Document shape:
|
||
|
||
```ts
|
||
interface Review {
|
||
name: string;
|
||
rating: number; // 1..5
|
||
position: string;
|
||
text: string;
|
||
};
|
||
```
|
||
|
||
## Firebase / Firestore Setup (for Reviews)
|
||
|
||
1. Create a Firebase project.
|
||
2. Enable **Firestore Database**.
|
||
3. (Recommended for development) Start with permissive rules, then tighten before production.
|
||
4. Copy your Firebase web app config values into `.env.local`.
|
||
|
||
Notes:
|
||
|
||
- If Firebase is not configured, the app still runs normally—reviews will simply be empty and adding is disabled.
|
||
|
||
## Scripts
|
||
|
||
- `pnpm dev` — start Vite dev server
|
||
- `pnpm build` — typecheck (`tsc -b`) then build (`vite build`)
|
||
- `pnpm preview` — preview the production build locally
|
||
- `pnpm lint` — run ESLint
|
||
|
||
## Production (Docker + Nginx)
|
||
|
||
This repo includes a multi-stage Docker build:
|
||
|
||
1. **Node build stage** runs `npm install` + `npm run build`
|
||
2. **Nginx stage** serves the `dist/` folder and provides SPA routing (`try_files ... /index.html`)
|
||
|
||
### Build the image
|
||
|
||
You must pass Firebase values as build args (they’re embedded at build time by Vite):
|
||
|
||
```bash
|
||
docker build \
|
||
--build-arg VITE_FIREBASE_API_KEY=... \
|
||
--build-arg VITE_FIREBASE_AUTH_DOMAIN=... \
|
||
--build-arg VITE_FIREBASE_PROJECT_ID=... \
|
||
--build-arg VITE_FIREBASE_STORAGE_BUCKET=... \
|
||
--build-arg VITE_FIREBASE_MESSAGING_SENDER_ID=... \
|
||
--build-arg VITE_FIREBASE_APP_ID=... \
|
||
--build-arg VITE_FIREBASE_MEASUREMENT_ID=... \
|
||
-t portfolio:latest .
|
||
```
|
||
|
||
### Run the container
|
||
|
||
```bash
|
||
docker run --rm -p 8080:80 portfolio:latest
|
||
```
|
||
|
||
Then open `http://localhost:8080`.
|
||
|
||
### Docker Compose
|
||
|
||
`docker-compose.yml` is provided and forwards Firebase env vars as build args.
|
||
|
||
```bash
|
||
docker compose up --build
|
||
```
|
||
|
||
Note: the compose file currently uses `ports: - "80"` (short syntax). That exposes container port 80, for use with reverse proxy services, like Traefik, or more complex deployment methods, like Dokploy or Coolify. If you want a stable port, change it to something like:
|
||
|
||
```yaml
|
||
ports:
|
||
- "8080:80"
|
||
```
|
||
|
||
## Project Structure
|
||
|
||
```text
|
||
.
|
||
├─ src/
|
||
│ ├─ main.tsx # React entrypoint
|
||
│ ├─ App.tsx # Main page composition + reviews modal
|
||
│ ├─ firebase.ts # Firebase + Firestore initialization
|
||
│ ├─ reviewsApi.ts # Firestore read/write helpers
|
||
│ ├─ contexts/
|
||
│ │ └─ ThemeContext.tsx # Theme state + CSS variables
|
||
│ └─ components/ # Page sections (Hero, Tech, Reviews, Footer, ...)
|
||
├─ nginx.conf # SPA routing for production container
|
||
├─ Dockerfile # Vite build → Nginx serve
|
||
└─ vite.config.ts # Vite config (React + Tailwind)
|
||
```
|
||
|
||
## Customization Notes
|
||
|
||
- Some sections accept an `isOutOfCollege` prop and are currently **disabled by default** in `src/App.tsx`. If you want those sections to render, pass `isOutOfCollege={true}` into the relevant components.
|
||
- Contact links are in the Hero section and Footer.
|
||
|
||
## Troubleshooting
|
||
|
||
- **Reviews don’t show up**: confirm Firestore is enabled and your Firebase env vars are set (`VITE_FIREBASE_*`).
|
||
- **“Firestore is not configured” error**: you’re missing one or more required Firebase variables.
|
||
- **Docker build doesn’t pick up env vars**: ensure you pass them as `--build-arg ...` (Vite embeds them during build).
|
||
|