Portfolio website for my product marketing career from my existing canva site portfolio
Generated Prompt
## APPLICATION OVERVIEW This application is a web portfolio designed to showcase your product marketing career, transitioning from your existing Canva portfolio. The goal is to create a professional, visually appealing online presence that highlights your skills, projects, and achievements in a minimalist style. ## CORE FEATURES 1. **Homepage**: A clean and simple landing page that features your name, a brief introduction, and a professional photo. The layout should include a prominent call-to-action to view your portfolio. 2. **Portfolio Section**: A dedicated area to display your marketing projects with images and descriptions. Each project should be clickable to view more details. 3. **About Me**: A section that outlines your background, skills, and professional journey. This should include a downloadable resume link. 4. **Contact Form**: A straightforward contact form that allows potential clients or employers to get in touch with you easily. 5. **Blog/Insights Section**: Optionally, a blog area to share insights about product marketing trends, showcasing your expertise. 6. **Testimonials**: A section for client or colleague testimonials to build credibility and trust. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist with a focus on clean lines and ample white space. The design should emphasize readability and simplicity, avoiding clutter. - **Color Mode**: Dark theme with light text on dark backgrounds to enhance readability and create a professional look. - **Layout**: The layout should follow a single-column structure for easy navigation, with a fixed header that includes links to the homepage, portfolio, about, and contact sections. Each section should be distinctly separated by ample white space. - **Typography**: Use a sans-serif font for headings (e.g., 'Roboto' or 'Open Sans') for a modern feel, and a serif font for body text (e.g., 'Merriweather') to add a touch of elegance. Maintain a clear hierarchy with larger font sizes for headings and smaller for body text. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript to ensure type safety and maintainability. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid prototyping and customization. - **UI Components**: Utilize shadcn/ui for pre-designed components that fit the minimalist aesthetic. - **State Management**: Consider using React Context or Redux if the application requires shared state across components. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any other necessary libraries via npm or yarn. 3. **Create Folder Structure**: Organize the project into folders for components, pages, and styles. 4. **Build the Layout**: Create a header component with navigation links and a footer component for additional information. 5. **Develop the Homepage**: Implement the homepage with a welcoming message, your name, and a call-to-action button. 6. **Design Portfolio Section**: Create a grid layout for the portfolio section, ensuring each project is visually distinct with hover effects. 7. **Build About Me Section**: Implement a clean layout that includes your bio, skills, and a resume download link. 8. **Create Contact Form**: Develop a simple contact form that captures user information and sends it to your email or a backend service. 9. **Add Blog/Insights Functionality**: If applicable, set up a basic blog structure that allows you to post articles. 10. **Test Responsiveness**: Ensure all components are responsive across devices using Tailwind's utility classes for mobile-first design. ## USER EXPERIENCE The user experience should prioritize easy navigation and seamless interactions. Users should effortlessly scroll through sections, click on portfolio projects to view details, and fill out the contact form without distractions. The site should load quickly and be optimized for both desktop and mobile devices, ensuring that it maintains its minimalist aesthetic across all screen sizes.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
