Overview
This prompt aims to guide developers in creating a professional portfolio website that showcases their skills in programming and AI. Developers seeking to enhance their online presence and attract potential employers will benefit from this structured approach.
Prompt Overview
Purpose: This portfolio showcases the developer’s skills and experience in programming and AI prompt engineering.
Audience: Targeted towards potential employers and clients seeking expertise in AI-enhanced web development.
Distinctive Feature: The site features smooth animations and a responsive design for an engaging user experience.
Outcome: Visitors will gain a clear understanding of the developer’s capabilities and be encouraged to connect.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Asset Management & Wealth Management, Content & Media Creation, Development Tools & DevOps
- Techniques: Decomposition, 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
Create a detailed plan and a responsive, animated portfolio website using ReactJS, HTML, and CSS that showcases the user’s skills and experience as a developer with strong AI prompt engineering abilities.
The portfolio should highlight their expertise in using AI tools to develop websites, fix bugs, and check errors, presenting their capabilities clearly and attractively to the world.
**Steps:**
1. Understand the user’s background and key skills:
– Developer with AI tool proficiency
– Expertise in AI prompt engineering
– Website development
– Bug fixing
– Error checking
2. Design a modern, fully responsive layout that works seamlessly across devices.
3. Incorporate subtle and smooth animations to enhance user engagement without compromising accessibility.
4. Structure sections such as:
– About Me
– Skills
– Projects (showcasing AI-enhanced development work)
– Experience
– Contact
5. Use ReactJS to build reusable components and manage state effectively.
6. Style the portfolio using CSS with attention to:
– Clarity
– Readability
– Aesthetics
7. Ensure accessibility best practices are followed.
8. Include calls to action that encourage visitors to connect or view detailed projects.
**Output Format:**
Provide the full ReactJS project code including:
– HTML in JSX format
– CSS styles
Include comments explaining key sections. Also, provide instructions on how to build and run the portfolio locally or deploy it.
Screenshot Examples
How to Use This Prompt
- Copy the prompt for portfolio website creation.
- Identify key skills and background of the user.
- Design a responsive layout for various devices.
- Implement smooth animations for user engagement.
- Structure sections like About Me, Skills, and Projects.
- Use ReactJS and CSS for building and styling the portfolio.
Tips for Best Results
- Understand Your Skills: Clearly outline your expertise in AI tools and web development to tailor your portfolio effectively.
- Responsive Design: Use CSS Flexbox or Grid to ensure your layout adapts to various screen sizes for an optimal user experience.
- Engaging Animations: Implement CSS transitions and animations to create a dynamic feel, but keep them subtle to maintain accessibility.
- Clear Calls to Action: Include buttons and links that guide visitors to contact you or view your projects, enhancing interaction.
FAQ
- What skills should the portfolio highlight?
The portfolio should highlight AI tool proficiency, website development, bug fixing, and error checking. - How should the layout of the portfolio be designed?
Design a modern, fully responsive layout that works seamlessly across all devices. - What type of animations should be included?
Incorporate subtle and smooth animations to enhance user engagement without compromising accessibility. - What sections should the portfolio contain?
Include sections like About Me, Skills, Projects, Experience, and Contact.
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.
