Framer Portfolio Site Customization

**IMPORTANT — PLEASE READ THIS BEFORE GOING THROUGH THE BRIEF**

My budget is **FIXED at $30**. I understand that the amount of work required for this project is worth more than $30, but $30 is my budget, and I cannot increase it.

If you are comfortable completing the project for **$30, message me to confirm your availability. Please do not send a quote or negotiate the price.** If this budget doesn't work for you, you can simply ignore this listing. Thank you for understanding.

---

# Framer Portfolio Website Customization

I already have the **ReelHaus Framer template** and need an experienced Framer developer to customize it into my Motion Designer portfolio.

**Template:** https://www.framer.com/marketplace/templates/reelhaus/
**Main reference website:** https://lusion.co/

### 1. Reference Websites and Animations

Lusion will be the primary reference for approximately **70–80% of the animations and interactions** I want.

The remaining **20–30% will come from other reference websites I provide**. I’ll identify the specific features or animations I want recreated and explain the details during a call.

The goal is to combine selected elements from multiple references into one cohesive website while maintaining consistent design, smooth animations, and performance.

### ### 2. Animations and Interactions

The animations and interactions listed below are inspired by the **Lusion reference website**: https://lusion.co/. Please study the website carefully to understand the effects and recreate them in my portfolio.

- Animate text and icons when the website loads.
- The **PLAYREEL** section should slide in from the left toward the center while scrolling.
- Project cards and text should animate based on scroll direction, both down and up.
- Add subtle background music on page load, subject to browser autoplay restrictions.

**Important:** These are reference-based requirements, not animations I expect you to invent from scratch. Study the Lusion website to understand the intended motion and interactions, then adapt them to my portfolio. I’ll explain the remaining details and additional reference elements during a call.

### 3. Final Navigation Layout

Place the navigation across the top, with **Work and About on the left**, and **Showreel and Let’s Talk on the right**.

- **Work, About, and Let’s Talk:** Smooth-scroll to their respective sections without changing the URL.
- **Showreel:** Smooth-scroll to the PLAYREEL section and change the URL to `/showreel`, without a `#` hash.
- Opening `/showreel` directly must load the website and automatically scroll to the Showreel section.

### 4. Design and CMS

- Use a strict black, white, and grey colour palette.
- Integrate CMS so I can easily manage and update projects.
- Videos must play directly on the website, without redirecting visitors to YouTube or external pages.

### 5. Responsive Breakpoints — Mandatory

The existing ReelHaus template has only **3 breakpoints: Desktop, Tablet, and Mobile**.

You must **add one completely new breakpoint named Laptop**.

The final website must have **4 separate breakpoints: Desktop, Laptop, Tablet, and Mobile**.

Do not simply adjust the existing three breakpoints. Create the additional Laptop breakpoint and ensure the layout is properly designed and responsive across all four. I will personally verify all four breakpoints during handover.

### 6. Performance — Non-Negotiable

Website speed is a top priority. Videos and animations must not make the website unnecessarily slow. The experience should remain smooth and responsive.

### 7. Handover Deliverables

- Fully customized website in my existing Framer project.
- All four responsive breakpoints, properly designed and tested.
- Working animations, navigation, CMS, and on-site video playback.
- A functioning `/showreel` URL that also works when opened directly.
- Testing across desktop, laptop, tablet, and mobile.
- Confirmation that all agreed features are implemented and ready for review.

### Before Messaging Me

Please review the ReelHaus template and all the requirements above. **Before confirming that you can take on the project for $30, please answer these questions:**

1. **Video integration:** How do you plan to host and integrate my videos so they play directly inside my portfolio without redirecting visitors to external websites?

2. **Website speed:** With multiple videos and animations, how will you maintain fast loading times and smooth performance? Explain your approach to video optimization, lazy loading, and other relevant techniques.

3. **Motion and interactions:** A Motion Designer’s portfolio should be more than a collection of videos. Visitors should feel the motion while scrolling, hovering, and interacting with the website. How will you achieve this while keeping the experience smooth and professional?

4. **Experience and feasibility:** Share relevant Framer projects you’ve built and confirm that you can implement the requested animations, navigation behaviour, CMS, and the additional Laptop breakpoint within the fixed $30 budget.

**Please message me only if you agree to the fixed budget and can handle the requirements.**