Prompt: Personal Portfolio Landing Page (FPC001)

Prompt Description

Design and implement a complete, responsive single-page personal portfolio landing page for a web developer named 'Alex Doe'. 

**Page Sections & Content:**
1.  **Hero Section:** 
    *   A compelling headline (e.g., 'Alex Doe - Creative Web Developer').
    *   A brief introductory paragraph.
    *   A call-to-action button (e.g., 'View My Work') that smoothly scrolls to the 'Projects' section. This button should be identifiable for testing as `data-testid='cta-view-work'`. 
    *   Include a professional-looking placeholder image or illustration.
2.  **About Me Section:**
    *   A more detailed description of Alex's skills, experience, and passion for web development. 
    *   Consider a two-column layout for text and perhaps a smaller image or relevant icons representing skills.
3.  **Projects Section (Identifiable as `projects-section` for scrolling):**
    *   Showcase at least 3 fictional projects. Each project should be a 'card' displaying:
        *   Project Title (e.g., 'E-commerce Platform Redesign').
        *   A short description.
        *   Technologies used (e.g., React, Node.js, Figma).
        *   A link to 'View Project' (can be a '#' link). Each project card should be identifiable for testing with `data-testid='project-card-N'` (N being 1, 2, 3).
4.  **Contact Section:**
    *   A simple contact form with fields for 'Name', 'Email', and 'Message'. The form should be identifiable as `data-testid='contact-form'`. 
    *   Include a submit button. (No backend logic needed, just the front-end structure and basic client-side validation hints like `required` attributes).
5.  **Footer:** 
    *   Copyright information (e.g., '© [Current Year] Alex Doe').
    *   Links to social media profiles (e.g., GitHub, LinkedIn - use placeholder icons and '#' links).

**Technical & Accessibility Requirements:**
*   The entire page MUST be structured with semantic HTML5 (header, nav (if any global nav), main, article, section, footer).
*   A clear H1 for the main page title (likely in the Hero section).
*   Heading hierarchy MUST be logical throughout the page.
*   All images MUST have appropriate `alt` text.
*   Interactive elements (buttons, links, form fields) MUST be keyboard accessible and have clear focus indicators.
*   The page MUST be responsive across common device sizes (mobile, tablet, desktop).
*   Smooth scrolling for the 'View My Work' CTA is required.
*   Use Tailwind CSS for general layout and styling, but feel free to add minimal custom CSS in a `<style>` tag if necessary for unique design elements or animations that are hard to achieve with Tailwind alone (e.g., subtle hover effects on project cards, the smooth scroll implementation if not CSS-only).

**Testing Identifiers (Ensure these are implemented):**
*   Hero CTA button: `data-testid='cta-view-work'`
*   Projects section (for scrolling target): `id='projects-section'` (Note: ID for scrolling, not data-testid unless also desired)
*   Project cards: `data-testid='project-card-1'`, `data-testid='project-card-2'`, etc.
*   Contact form: `data-testid='contact-form'`
*   Main page navigation (if present): `data-testid='main-navigation'`

Key Links & Info