Overview
This prompt guides developers in creating an engaging 3D animated portfolio website. Developers and designers will benefit from the structured steps and implementation guidance provided.
Prompt Overview
Purpose: This project aims to create an engaging 3D animated portfolio website that showcases coding skills.
Audience: The target audience includes potential employers, clients, and fellow developers seeking innovative design solutions.
Distinctive Feature: A realistic 3D fish swimming in the background enhances aesthetics without distracting from the main content.
Outcome: Users will enjoy an immersive browsing experience through interactive 3D project divisions, showcasing each project effectively.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Animation & VFX, Content & Media Creation
- Techniques: Decomposition, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You are a developer tasked with creating a 3D animated portfolio website. Your main objective is to implement a visually engaging background animation featuring a fish swimming smoothly, enhancing the site’s overall aesthetics. Additionally, the project section of your portfolio must be designed entirely in 3D, with interactive 3D divisions representing each project, providing users with an immersive browsing experience.
**Focus on:**
– Creating a realistic and smoothly animated 3D fish swimming in the background.
– Designing the project section so that each project is displayed within a dedicated 3D division.
– Ensuring that the 3D elements integrate seamlessly with the website’s layout while maintaining performance and responsiveness.
**# Steps**
1. Design or source a 3D fish model suitable for web animation.
2. Animate the fish to swim with smooth, realistic motion using a suitable 3D web technology (e.g., Three.js, Babylon.js).
3. Set the animated fish as a subtle background element that does not distract from the content.
4. Develop the portfolio’s project section using 3D divisions, with each division representing a project.
5. Implement user interaction or navigation within the 3D project divisions where appropriate.
6. Test for performance and responsiveness across various devices and browsers.
**# Output Format**
Provide detailed implementation guidance, including:
– Technology choices
– Sample code snippets or pseudo-code for 3D animation and project sections
– Best practices for integrating 3D elements into a portfolio website
**# Notes**
– Prioritize user experience by balancing visual richness with usability.
– Keep the 3D animations optimized to prevent slowing down the site.
– Ensure accessibility considerations are met, even with 3D content.
Screenshot Examples
How to Use This Prompt
- Copy the prompt for context and instructions.
- Identify suitable 3D technologies like Three.js or Babylon.js.
- Follow the steps to create the animated fish and project sections.
- Implement the code snippets and best practices provided.
- Test the website on multiple devices for performance.
Tips for Best Results
- Choose the Right Tools: Use Three.js or Babylon.js for creating and animating 3D elements, as they offer robust features and community support.
- Optimize Your Models: Ensure the 3D fish model is low-poly to maintain performance while still looking realistic during animations.
- Seamless Integration: Position the animated fish in a way that complements the content without overwhelming it, using CSS for layering and responsiveness.
- Test Across Devices: Regularly test the website on various devices and browsers to ensure smooth performance and a consistent user experience.
FAQ
- What technology can I use for 3D animations on the web?
You can use Three.js or Babylon.js for creating 3D animations in web applications. - How can I create a realistic swimming fish animation?
Source a 3D fish model and animate it using keyframes in your chosen 3D library. - What should I consider for 3D project divisions?
Design each division to be interactive and ensure it displays project details clearly. - How do I ensure performance with 3D elements?
Optimize models and animations, and test across devices to maintain responsiveness.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
