Vite Three.js Portfolio Setup

This skill provides expert guidance for working with a creative coding portfolio built with Vite, Three.js, and p5.js. It covers the project's architecture, development patterns, and navigation system.

What This Skill Does

Project Overview

This is a creative coding portfolio showcasing interactive media projects. The codebase uses Vite with specialized plugins for shader development and features both Three.js 3D projects and p5.js generative art.

Step-by-Step Instructions

1. Development Commands

When starting work:

2. Understanding Project Structure

**Core Files:**

**Project Categories:**

**Assets:**

3. Working with Three.js Projects

**Standard Boilerplate Pattern:**

Each Three.js project follows this structure:

**Boilerplate Templates:**

**When creating new Three.js projects:**

1. Copy appropriate boilerplate from `pages/three/boiler-plates/`

2. Create project directory under `pages/three/`

3. Include `index.html`, `script.js`, `style.css`

4. For shader projects, add `shaders/` directory with `.glsl` files

5. Update `js/HomeLinks.js` to add navigation link

4. Working with Shader Projects

**GLSL Integration:**

**Uniform Structure Pattern:**

Follow consistent uniform organization:

```javascript

uniforms: {

uTime: { value: 0 },

uResolution: { value: new THREE.Vector2() },

uTexture: { value: null }

}

```

**When developing shaders:**

1. Create `shaders/` directory in project folder

2. Add `vertex.glsl` and `fragment.glsl` files

3. Import shaders in `script.js`

4. Pass uniforms to ShaderMaterial

5. Update uniforms in animation loop (e.g., `uTime`)

5. Working with p5.js Projects

**Sketch Pattern:**

**Enhanced Capabilities:**

**When creating new p5.js sketches:**

1. Create project directory under `pages/p5/`

2. Include `index.html`, `sketch_main.js`, `style.css`

3. Use p5.js instance mode or global mode as appropriate

4. Update `js/HomeLinks.js` to add navigation link

6. Navigation System Management

**Centralized Link Management:**

The `js/HomeLinks.js` file contains the `linkInfoArrayList` array that drives navigation throughout the portfolio.

**When adding new projects:**

1. Open `js/HomeLinks.js`

2. Add entry to `linkInfoArrayList`:

```javascript

{

title: "Project Name",

url: "./pages/three/project-folder/",

category: "three" // or "p5"

}

```

3. Navigation will automatically update on homepage

7. Asset Management

**Texture Assets:**

**General Assets:**

8. Development Best Practices

**Maintaining Consistency:**

**Performance Considerations:**

9. Key Dependencies

**Core Libraries:**

**Development Tools:**

10. Common Workflows

**Creating a new Three.js shader project:**

1. Copy `pages/three/boiler-plates/shader/` to new location

2. Create `shaders/vertex.glsl` and `shaders/fragment.glsl`

3. Implement shader logic and uniforms

4. Add debug controls with lil-gui

5. Update navigation in `HomeLinks.js`

**Creating a new p5.js sketch:**

1. Create new directory under `pages/p5/`

2. Add `index.html`, `sketch_main.js`, `style.css`

3. Implement creative sketch

4. Update navigation in `HomeLinks.js`

**Modifying existing projects:**

1. Navigate to project directory under `pages/`

2. Modify `script.js`/`sketch_main.js` for logic changes

3. Update shaders in `shaders/` directory if applicable

4. Adjust styles in `style.css` as needed

5. Test in development mode before building

Important Notes