// Public Prompt
Portfolio Website Builder
Create a stunning React portfolio with this AI prompt, featuring interactive design and seamless functionality.
PromptPerformanceShared Dec 10, 2025
Prompt content
<context> You are operating in an oversaturated digital market where generic portfolio websites blend into oblivion. Most developers and designers use the same templates, safe color schemes, and forgettable layouts that hiring managers scroll past without a second thought. Your expertise lies in creating showstopping portfolio experiences that balance bold visual impact with flawless functionality - the kind that makes decision-makers stop their mindless scrolling and think "I need to work with this person." This isn't about pretty designs that lack substance; you're building premium digital experiences that feel alive, intentional, and impossible to ignore while remaining professional enough to land serious opportunities. </context> <role> Adopt the role of an expert top 0.1% web designer and full-stack developer who has built award-winning portfolio sites for creative directors at Apple, Nike, and leading design studios. Your primary objective is to create a complete, production-ready React portfolio application that combines cutting-edge frontend engineering with visual storytelling in a structured, step-by-step development format that feels like a premium digital experience. </role> <information_about_me> - My personal brand and unique value proposition: [INSERT YOUR PROFESSIONAL HEADLINE AND WHAT MAKES YOU UNIQUE] - My featured projects and case studies: [INSERT YOUR 3-5 BEST PROJECTS WITH DESCRIPTIONS] - My technical skills and expertise areas: [INSERT YOUR PROGRAMMING LANGUAGES, FRAMEWORKS, AND SPECIALIZATIONS] - My professional background and story: [INSERT YOUR CAREER JOURNEY AND PERSONAL BIO] - My contact information and social links: [INSERT YOUR EMAIL, LINKEDIN, GITHUB, AND OTHER PROFESSIONAL PROFILES] </information_about_me> <output> Structure your development approach with these sections: ● Foundation Setup: Project structure, Tailwind configuration, and theme system ● Core Layout and Navigation: Glassmorphism navigation with scroll effects ● Hero Section: Animated gradient backgrounds with parallax effects ● Interactive Projects Gallery: Hover animations and filterable project cards ● Case Study Pages: Rich content layouts with lightbox galleries ● About and Skills Section: Animated skill tags and professional storytelling ● Contact Form: Real-time validation with success animations ● Performance and Accessibility: Mobile optimization and enterprise-grade code quality Provide complete, functional React components with TypeScript, proper animations using Framer Motion, and deployment-ready code. Take a deep breath and work on this problem step-by-step. </output> What This Prompt Does ● Guides in creating a standout React portfolio application with a focus on visual storytelling and functionality. ● Provides a structured development approach for building a premium digital experience. ● Ensures the portfolio is optimized for performance and accessibility, making it professional and engaging. How To Use ● Fill in the [INSERT YOUR PROFESSIONAL HEADLINE AND WHAT MAKES YOU UNIQUE], [INSERT YOUR 3-5 BEST PROJECTS WITH DESCRIPTIONS], [INSERT YOUR PROGRAMMING LANGUAGES, FRAMEWORKS, AND SPECIALIZATIONS], [INSERT YOUR CAREER JOURNEY AND PERSONAL BIO], and [INSERT YOUR EMAIL, LINKEDIN, GITHUB, AND OTHER PROFESSIONAL PROFILES] placeholders with your specific professional details and achievements. ● Example: "I am a creative web designer specializing in immersive digital experiences. My featured projects include a dynamic e-commerce platform for a fashion brand and an interactive art gallery website. I am proficient in React, TypeScript, and Tailwind CSS. My career journey includes working with top design studios and leading tech companies. You can reach me at [email protected] or connect with me on LinkedIn and GitHub." Tips ● Define your unique value proposition and professional headline to ensure your portfolio stands out in a crowded market. ● Showcase your best projects with detailed descriptions to highlight your skills and expertise effectively. ● Continuously update your technical skills and expertise areas to reflect the latest trends and technologies in web development.
Enhance your coding prompts.
Right where you code.
For clearer instructions, faster output, and better
coding results.
