Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a premium, high-performance responsive portfolio website for Rebeca Martínez, a Senior Product Designer. It aims to showcase her work, highlight case studies, and provide an elegant and user-friendly experience to potential clients and employers.

## CORE FEATURES
- **Sticky Header Navigation**: A fixed header that remains at the top as users scroll, containing links to Home, My Work, About, Contact, and Resume.
- **Home Page**: The main landing page featuring an overview of Rebeca's work and an introduction.
- **Case Studies Section**: Detailed individual pages for each case study, showcasing Rebeca's projects with specific structures and content as outlined in the provided URLs.
- **Contact Information**: Direct mailto link for inquiries and an external link to Rebeca's resume.
- **Responsive Design**: Seamless performance and presentation across mobile, tablet, and desktop devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean, elegant aesthetic. Emphasis on white space and a sophisticated palette with vibrant accent colors for CTAs and highlights.
- **Color Mode**: Light theme featuring dark text on light backgrounds for optimal readability.
- **Layout**: 
  - **Header**: Sticky with logo and navigation links.
  - **Hero Section**: Introductory content with a compelling CTA.
  - **Case Studies Section**: Inline with smooth scrolling to individual case studies.
  - **About Section**: Brief biography and professional background at the bottom of the Home page.
  - **Footer**: Contact details and external links.
- **Typography**: High-contrast headings for quick scanning, optimized line-height for readability, and a clear hierarchy to enhance user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and scalable application structure.
- **Styling**: Tailwind CSS for utility-first styling, ensuring rapid design iterations and responsiveness.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the project's design goals.
- **State Management**: Consider using Context API or Zustand for managing global state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript, and install necessary dependencies (Tailwind CSS, Framer Motion, and shadcn/ui).
2. **Create Folder Structure**: Organize folders for components, pages, assets, and styles.
3. **Design Header Component**: Develop a sticky header with navigation links, ensuring accessibility with appropriate aria-labels.
4. **Build Home Page**: Create the main landing page with hero content, case studies section, and about section.
5. **Develop Case Studies Pages**: Create individual pages for each case study as per the specified URLs, ensuring consistent structure and design.
6. **Implement Responsive Design**: Use Tailwind CSS to ensure the site is fully responsive across devices.
7. **Add Animations**: Integrate Framer Motion for smooth transitions and hover effects throughout the site.
8. **Test Accessibility**: Verify compliance with WCAG standards, checking color contrast and semantic HTML usage.
9. **Deploy**: Launch the portfolio website on a suitable hosting platform.

## USER EXPERIENCE
Users will navigate through a sticky header, allowing easy access to various sections of the portfolio. The Home page will provide a compelling introduction and highlight Rebeca's work, while the case studies will offer in-depth insights into her projects. The responsive design will ensure that users have a seamless experience across all devices, with smooth animations enhancing interaction without distracting from the content. The contact section will facilitate direct communication, making it easy for potential clients to reach out.