Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for "Jack," a 3D Creator, designed to showcase his portfolio in an engaging and visually appealing way. The focus is on clean design, smooth animations, and an intuitive user experience, leveraging modern web technologies.

## CORE FEATURES
1. **Hero Section**: A full viewport height section featuring a welcoming message, navigation links, and a visually striking portrait of Jack with mouse-following effects.
2. **Marquee Section**: A dynamic scrolling gallery showcasing various GIF images that highlight Jack's work, creating an engaging visual experience.
3. **About Section**: A centered section that introduces Jack with an animated text reveal and decorative 3D images in the corners, enhancing the portfolio's unique identity.
4. **Services Section**: A detailed list of services offered, each with descriptions that showcase Jack's skills in 3D modeling, rendering, and more.
5. **Projects Section**: A showcase of selected projects featuring sticky-stacking cards that scale as users scroll, providing an interactive way to explore Jack's work.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout consists of full-width sections organized vertically, with a focus on visual hierarchy and clear navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Framer Motion for animations, Lucide React for icons, and any additional libraries for optimized performance and user experience.

## IMPLEMENTATION STEPS
1. **Setup Development Environment**: Initialize a new React project with TypeScript using Vite. Install required dependencies: `react`, `react-dom`, `framer-motion`, `lucide-react`, and `tailwindcss`.
2. **Global Styles**: Implement global styles in `index.css`, including background color, font family, and typography reset. Set up Tailwind CSS configurations.
3. **Create Components**: Develop components for each section (Hero, Marquee, About, Services, Projects) using functional components in TypeScript.
4. **Add Navigation**: Create a navigation bar within the Hero section that links to each subsequent section.
5. **Implement Animations**: Use Framer Motion to add fade-in animations to elements in the Hero and About sections, enhancing the visual appeal.
6. **Marquee Section**: Implement the Marquee section with horizontal scrolling images using React state to track scroll position.
7. **Responsive Design**: Ensure all sections are responsive using Tailwind's utility classes, optimizing for different screen sizes with breakpoints.
8. **Testing and Optimization**: Conduct thorough testing on various devices and browsers, optimizing loading times and performance.
9. **Deployment**: Deploy the application on platforms like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will be greeted with a visually striking landing page that introduces Jack and his portfolio. Smooth animations will guide them through the sections, providing engaging content that highlights his services and projects. The layout encourages exploration, with easy navigation and responsive design ensuring a seamless experience across devices.