Leo's Personal Website Build

Thanks for checking this out! Hope you have fun curating your personal portfolio. Feel free to reach out at liuruogu[at]ucla.edu

Personal portfolio site built with React + TypeScript + Vite, backed by Supabase.

Local development

npm install
npm run dev

Build

npm run build
npm run preview

Environment variables

Create a .env.local in the repo root:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Do not commit real keys.

Supabase setup (required for full functionality)

1) Database tables

This app expects these tables:

• photos
• fine_arts
• page_content
• experiences
• products
• projects

Minimum columns used by the app:

photos

• id (uuid)
• title (text)
• image_url (text)
• thumbnail_url (text)
• category (text)
• album (text)
• location (text)
• date (text)
• latitude (numeric)
• longitude (numeric)
• order_index (int)
• map_x (numeric, optional)
• map_y (numeric, optional)

fine_arts

• id (uuid)
• title (text)
• medium (text)
• year (text or int)
• dimensions (text)
• image_url (text)
• thumbnail_url (text)
• description (text)
• order_index (int)

page_content

• id (uuid)
• page (text)
• description (text)

If you need to add map pin columns:

alter table photos
  add column if not exists map_x double precision,
  add column if not exists map_y double precision;

2) Storage buckets

Create public buckets:

• photos-original
• photos-thumb
• fine-arts-original
• fine-arts-thumb

The app reads from public URLs, so the buckets must be public.

3) Edge function (upload-photo)

The admin uploader uses an Edge Function to avoid base64 blobs in the database.

Function file:

• supabase/functions/upload-photo/index.ts

Required secrets in Supabase Edge Functions:

SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

Function behavior:

• Accepts multipart/form-data with file and table (photos or fine_arts)
• Uploads original + thumbnail to storage
• Returns { imageUrl, thumbnailUrl }

4) Admin map pins (optional)

In the admin Photography editor you can open “PIN LOCATIONS” and place location pins directly on the map. Those pins are stored in photos.map_x and photos.map_y (percentage values 0–100).

Deploy (example workflow)

1. Create a Supabase project and configure:

   • Database tables
   • Storage buckets
   • Edge Function + secrets

2. Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in your hosting provider’s env vars.

3. Build and deploy:

   • Vercel: set build command npm run build, output dist
   • Netlify: set build command npm run build, publish dist

Notes

• This repo includes admin tooling under /admin for content management.
• The photography map view uses manual pins when present; otherwise it falls back to lat/lon projection.