Modern web development is shifting from manual coding to a more architectural role, where developers use AI agents to handle the implementation details of complex pipelines. This guide details a complete workflow for building a 3D portfolio website that features interactive character viewers, optimized assets, and a game-inspired aesthetic.
By utilizing agentic workflows, you can move from a blank project to a production-ready interactive site in a fraction of the time required by traditional methods.
1. Environment and Tooling Setup
To begin, you must establish a development environment centered around an AI coding agent capable of high-level planning and parallel task execution.
Selecting the Agent Platform
For this pipeline, the Verdent agentic platform is used. While it is available for VS Code and JetBrains, the desktop application is recommended for its streamlined interface, making it accessible for those focusing on the overall architecture rather than low-level syntax.
Try VerdentModel Selection and Integration
The core engine for this workflow is Claude 4.5 Opus. This model is particularly effective for 3D web applications due to its high reasoning capabilities and efficiency in generating complex code structures.
- GitHub Connection: Link your GitHub account to Verdent to allow the agent to manage version control and branch creation automatically.
- Workspace Management: One of the most powerful features of this setup is the ability to run multiple workspaces in parallel. This allows you to develop auxiliary tools (like asset optimizers) in one branch while building the main portfolio in another, avoiding the code conflicts common in standard AI code editors.
2. Developing a Custom 3D Asset Optimizer
A high-quality 3D portfolio relies on performance. 3D models (GLB files) are often heavy, sometimes exceeding 50MB, which is unacceptable for web load times. Before building the site, you should create a dedicated optimization tool.
Prompting the Tool Architecture
Open a new workspace and prompt the agent to create a local Next.js web application that utilizes the glTF-transform library. The goal is a simple "drag-and-drop" interface that automates the following:
- Conversion of textures to WebP format.
- Mesh optimization to reduce vertex counts.
- Texture resizing to a maximum of 1k or 2k resolutions.
Execution and Testing
Run the agent and allow it to build the file structure. Once complete, you can launch the local server and drop a heavy GLB model into the interface.
Why this matters
Effective optimization can reduce a model's size from 49MB to approximately 500KB without significant visual degradation.
Best Practice: Use 2k or 4k textures for high-fidelity needs, but ensure the optimizer compresses them for the final web build to ensure the site remains responsive on mobile devices.
3. Designing the Portfolio Architecture
With the optimization tool ready, move to a new workspace to begin the main portfolio project.
Utilizing Agentic Planning Mode
Instead of jumping straight into code, switch the agent to Plan Mode. This forces the agent to analyze the requirements, double-check its own logic, and present a roadmap.
- Reviewing the Diagram: The agent will generate a technical diagram of the site architecture.
- Reducing Complexity: AI agents often suggest multi-page layouts by default. To maintain a modern "game-style" feel, instruct the agent to consolidate the experience into a single, high-impact entry screen and a main viewer.
Defining the UI and UX Constraints
Communicate your vision using a combination of text and reference images. A highly effective prompt structure for this portfolio includes:
- Entry Screen: A landing page featuring a thumbnail and an "Enter Portfolio" button.
- Character Viewer Layout: A split-screen approach where the 3D character occupies 60% of the left side and an information card occupies the right side.
- Navigation: Buttons for cycling through characters (Left/Right) and a system that automatically fits the character to the screen height.
- Visual Style: A pure black background, an infinite grid floor that fades into the distance, and floating "sparkle" or "star dot" particles for depth.
4. Refining the 3D Environment
Once the agent begins building, it will pause to ask clarifying questions. This interactive loop is critical for achieving the specific "game-style" aesthetic.
Environmental Settings
When prompted by the agent, specify the following configurations:
- Grid Style: Choose an infinite grid that fades out to black. For branding consistency, you can later request the grid color be changed (e.g., to orange).
- Particle Style: Select "floating sparkles" to create a subtle sense of motion in the background.
- User Interaction: Disable auto-rotation. The character should only rotate based on user interaction to provide a more tactile, "game-menu" feel.
Handling Animation
Ensure your character models (GLB) include running or idle animations. The agent should be instructed to trigger these animations automatically upon the character loading.
5. Asset Integration and Automatic Path Fixing
A major advantage of this agentic workflow is the agent's ability to scan your local folders and adjust code based on what it finds.
Organizing Local Files
Navigate to your project folder in the file explorer and place your assets as follows:
- Models: Place optimized .glb files into the
public/modelsdirectory. - UI Images: Place thumbnails or profile pictures into the
public/imagesfolder.
Dynamic Data Injection
Provide the agent with a list of data for your characters, including: names and descriptions, tools used to create them, and links to source files or external video content. The agent will not only fill the data structures but also automatically fix file paths. For example, if you provide a .jpg but the code expected a .png, the agent will detect the file in your folder and update the code accordingly without manual intervention.
6. Iterative Refinement and Visual Feedback
The final stage of the pipeline involves a "feedback loop" where you use screenshots to "complain" to the agent about visual inconsistencies.
Correcting Proportions and Layout
Load the project in your browser. If the 3D model appears too small or the information card is misaligned, take a screenshot of the browser window.
The Screenshot Prompt: Upload the screenshot back into the agent and provide specific critiques. For example: "The right card is currently on a black background; move it so it overlays the 3D viewer. Also, make the model fit the full height of the screen and zoom in normally."
Advanced Styling
To move away from a generic look, apply custom branding:
- Branding: Request an "orange styling" theme to match specific brand colors.
- Component Upgrades: Instead of simple text links for external videos, ask the agent to create "YouTube thumbnail cards" that provide a visual preview of the content.
Final Outcome
By following this pipeline, you transition from a "coder" to an architect. The result is a high-performance, interactive 3D portfolio that includes:
Custom 3D Optimizer
A dedicated tool for preparing web-ready assets.
Interactive Character Carousel
Smooth transitions between 3D models with active animations.
Game-Style UI
A sleek, dark interface with floating particles, infinite grids, and branded interactive cards.
Automated Data Management
A system that links your 3D assets to descriptive metadata and external links automatically.
This entire process, from tool creation to final refinement, can be completed in approximately 20 minutes by effectively managing the AI agent's planning and execution phases.
The demo described in this guide is live on TOP 3D AI. Launch it to see the game-style 3D portfolio in action.
Launch 3D Portfolio Demo