README.md

Ham Productions Portfolio

This is the source code for the Ham Productions portfolio website, hosted at hamproductions.github.io. It showcases various projects and experiments in a 3D interactive environment.

🚀 Technologies

• Next.js 16 - App Router & Server Components
• React 19 - UI Library
• TypeScript - Static Typing
• Three.js / R3F - 3D Graphics
• Tailwind CSS v4 - Styling
• Framer Motion - Animations
• Vitest - Testing

🛠️ Getting Started

1. Install Dependencies

   npm install

2. Run Development Server

   npm run dev

   Open http://localhost:3000 to view the app.

3. Run Tests

   npm test

4. Build for Production

   npm run build

📂 Project Structure

• app/ - Application source code (Next.js App Router).
  • components/ - UI and 3D components (Scene, Experience, Overlay).
  • data/ - Static data for the portfolio (repositories list).
• messages/ - Localization files (en, ja).
• public/ - Static assets and screenshots.

📝 Updating Content

The portfolio projects are defined in app/data/repos.json. The application automatically categorizes them:

• Featured: Selected manually in app/components/Overlay.tsx (see HIGHLIGHTS constant).
• Deployed Apps: Projects with a valid homepageUrl.
• Libraries/Code: Projects without a homepageUrl.

To add or update a project:

1. Add the project details to repos.json.
2. Screenshots:
   • Automatic: Run npm run update-screenshots. This will visit the homepageUrl of each project and generate a full-page screenshot.
   • Manual: Add a PNG to public/screenshots/ and update the screenshotPath in repos.json.

🌍 Localization

This project uses next-intl for internationalization. Translation strings are located in the messages/ directory.