Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a personal portfolio for Louise Meulebrouck, showcasing her professional journey and competencies through a minimalist, well-organized design. The primary purpose is to present her skills, unique selling propositions, testimonials, and background in a visually appealing and easily navigable format.

## CORE FEATURES
1. **Centered Profile Section**: A prominent display of Louise's name and one-liner with a profile picture, featuring smooth fade-in animations for a polished entry.
2. **Unique Selling Propositions (USPs)**: A responsive grid of five cards that detail why this role fits her, each card animating sequentially on scroll.
3. **Skills Overview**: A vertical list displaying skills with animated progress bars that reflect proficiency out of 10, enhancing visual engagement.
4. **Testimonials Tab**: A tabbed interface allowing users to switch between testimonials from colleagues and customers, with smooth transitions and a clean grid layout.
5. **Background & Trajectory Section**: A structured overview of Louise's experience and what that experience adds to her competencies, presented in a clean two-column layout.
6. **Educational Background & Skills**: A concise section summarizing her education and core skills, maintaining a minimalist aesthetic.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a limited color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: A centered layout for the main profile, responsive grid for USPs, vertical list for skills, and a clean two-column layout for the experience section.
- **Typography**: Use a sans-serif font such as 'Inter' for body text and a bolder variant for headings, maintaining a clear hierarchy with large headlines and subtle emphasis on key elements.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid styling and responsiveness
- **UI Components**: shadcn/ui for building modular and reusable components
- **State Management**: React's built-in state management for handling UI interactions

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using TypeScript and Tailwind CSS.
2. **Create the Main Layout**: Develop a main layout component that houses the centered content for the profile section.
3. **Profile Section**: Implement the profile section with a large name headline, one-liner subheading, and a circular profile image. Use CSS animations for the fade-in effects.
4. **USPs Section**: Create a responsive grid component for the five USPs, ensuring each card has a headline and a sentence. Implement scroll animations for card appearance.
5. **Skills Overview**: Build a vertical list component for skills with progress bars. Animate the bars to fill from 0 to the specified score upon scrolling into view.
6. **Testimonials Tab**: Design a tabbed interface for testimonials. Use state management to switch between the "By colleagues" and "By customers" tabs with smooth fade transitions.
7. **Background & Trajectory Section**: Develop a two-column layout component to present experience and background insights, ensuring it is responsive for mobile viewing.
8. **Educational Background & Skills Section**: Create a concise section summarizing education and skills using minimal typography and accent dividers.
9. **Closing Signal**: Implement the final section with centered layout and subtle fade-in animations, ensuring it feels factual and straightforward.
10. **Testing and Optimization**: Test the application for responsiveness across devices and optimize performance for smooth scrolling and animations.

## USER EXPERIENCE
Users will engage with a seamless experience where they can easily navigate through sections. The smooth animations will enhance the aesthetic appeal while ensuring that content is the focal point. The interactive elements, such as tabbed testimonials and animated skills, will provide an engaging way to explore Louise's professional narrative, reinforcing her credibility and suitability for roles she seeks. The overall structure will guide users through a logical flow, leading them from personal branding to detailed professional insights.



Content: 


Layout
Centered content


Large name headline


Space for a profile picture (rounded rectangle or circle)


Subtle fade-in on load


Content
 Louise Meulebrouck
Subheading (one-liner):
I work at the intersection of strategy and execution, especially when things are still taking shape.
Animation
Name fades in first


One-liner appears slightly after


Profile image scales in gently



Section 2 — Why this role fits me (5 USPs)
Layout
Five cards in a responsive grid


Each card contains a headline and one sentence


Cards animate in sequentially on scroll


Background
#fceece


Card content
Strategic, but practical
 I enjoy thinking about the long term, as long as it connects to what needs to happen this week.


Comfortable in ambiguity
 Undefined roles and half-built processes don’t slow me down. They usually help me see what matters first.


High ownership
 When something is important for the business, I treat it as my responsibility to help it move forward.


Curious about systems and tools
 I like improving the way people work, especially when small changes can make a big difference.


Calm when things get busy
 I tend to stay level-headed when priorities shift or pressure goes up.


Design
White cards


Headlines in #22221d


Subtle accent line or icon in #edc14a



Section 3 — Skills (animated)
Layout
Vertical list of skills


Each skill shows a score out of 10


Progress bars animate from 0 to score on scroll


Content
Strategic thinking — 9 / 10


Problem solving — 9 / 10


Communication & alignment — 10 / 10


AI & tooling in daily work — 8 / 10


Execution under pressure — 9 / 10


Design
Text in #22221d


Progress fill in #edc14a


Background track in neutral tone



Section 4 — Testimonials (tabbed)
Layout
Two tabs at the top:


“By colleagues”


“By customers”


Clicking a tab switches testimonials dynamically


Grid of 2 columns × 3 cards


Tab interaction
Active tab underlined or highlighted in #edc14a


Smooth fade transition when switching tabs


Tab: By colleagues
“Louise has a way of bringing structure without making things feel rigid. That balance is rare.”
 — Colleague


“She asks the questions others are thinking, but haven’t said out loud yet.”
 — Team lead


“When things got complex quickly, she helped us slow down just enough to make better decisions.”
 — Founder


“You can give her a messy problem and trust that it will come back clearer.”
 — Project partner


“Very independent, but never operating in a vacuum.”
 — Manager


“Strong sense of ownership without stepping on toes.”
 — Colleague


Tab: By customers
“She quickly understood our context and focused on what would actually help us move forward.”
 — Customer


“Clear communication, no unnecessary complexity.”
 — Client stakeholder


“You could tell she cared about getting it right, not just getting it done.”
 — Customer


“Asked sharp questions that improved the outcome for everyone involved.”
 — Partner


“Reliable, thoughtful, and easy to work with.”
 — Client


“Brought calm and clarity into a fast-moving situation.”
 — Customer


Card design
White cards


Soft shadow


Text in #22221d



Section 5 — Motivational letter TLDR
Layout
Centered


Large typography


One paragraph only


Background
#22221d


Text color
White, with subtle emphasis highlights in #edc14a


Content
I like building things that are still in motion.
 I’m motivated by roles where thinking, doing and learning happen at the same time.
 Koppie feels like a place where structure is being built with purpose, and where curiosity, ownership and impact actually matter.
 That’s the kind of environment where I tend to do my best work.
Animation
Text reveals line by line on scroll


Slow, deliberate pacing



Overall behavior
Smooth scrolling


Fully responsive


No CV labels or traditional résumé structure


Feels like exploring a thoughtful, well-designed product


Add one additional, compact section at the end of the mini website.
 This section is designed specifically for a CEO or CPO scanning for credibility, trajectory, and judgment.
Keep it short, factual, and calm.

Section 6  — Background & trajectory
Layout
Clean, two-column layout on desktop


Single column on mobile


No cards, no icons


White background



Left column — Experience (condensed)
Experience
Teamleader
 Customer Onboarding Manager (Orbit)
 Sales Executive
 Business Development Representative
Progressed from first-touch sales to managing onboarding and post-sale execution


Worked closely with sales, onboarding, support and product-facing teams


Owned complex customer trajectories from discovery to long-term use


Regularly involved in cross-functional projects and voice-of-customer initiatives


IVC Group
 Sales Assistant Eastern Europe
Lidl Belgium & Luxembourg
 Intern Actions & Promotions (Food)

Right column — What this background adds
What this shaped
Strong customer intuition from working with 600+ SMEs


Comfort operating across the full funnel, not just one function


Habit of translating strategy into concrete next steps


High ownership in roles with real responsibility, not just analysis



Section 7 — Skills & working tools (tight)
Layout
Single column


Minimal typography


Slight accent divider in #edc14a


Content
Languages
 Dutch, English (professional)
Core strengths
 Change management · Project management · Business development · Customer-centric problem solving
Tools & systems
 HubSpot · Teamleader Focus · Make.com · CRM workflows
 Basic HTML & CSS

Section — Education (one line)
Education
Master in Commercial Management & Business Administration
 Ghent University
Selected certifications & training
Essentials in Change Management
 Vlerick Business School
Project Management Simplified
 LinkedIn Learning
Sales Conversations That Win
 Sales Impact Academy
Discovery & Value Proposition Deep Dive
 Sales Impact Academy

Section 8 — Closing signal (single sentence)
Layout
Centered


Slightly larger text


No animation, or very subtle fade-in


Content
I’ve grown by taking on responsibility early, learning fast, and staying close to the reality of customers and teams.



No motivational language


No adjectives that aren’t backed by context


Purpose: remove doubt, not create excitement