MyResume Framer Website Development by Vaibhav KhulbeMyResume Framer Website Development by Vaibhav Khulbe

MyResume Framer Website Development

Vaibhav Khulbe

Verified

Completed work

Framer Designer

Framer Developer

Figma

Framer

Human Resources

🥱 TLDR;

✨ The Spark

✦ What were the client's needs and goals?

🚀 The Process

📸 Project Shots

📊 The Stats

✦ Timeline: ~ 2 weeks

✦ Budget: $1,500

✦ Deliverables: Finished Framer project file and a published link.

Impressed? Want me to create a Framer website for you? Check my Framer service details here and book instantly ⚡

🥱 TLDR;

I built MyResume's landing and pre-checkout pages in Framer.

MyResume's homepage hero section.

⤷ Live Preview: https://thisismyresume.framer.website

✨ The Spark

✦ What were the client's needs and goals?

Benjamin from ProductHQ sent me an inquiry stating that he was building a new SaaS product called MyResume and needed a Framer expert to build this new product's website pages in Framer from the provided Figma file.

MyResume Figma file cover.

The scope of work was the following:

Develop the homepage and the pre-checkout pages in Framer from the provided designs.

Ensure there is a pixel-perfect implementation that faithfully follows the Figma design.

Ensuring all pages are responsive across desktop, tablet, and phone breakpoints.

The site must be structured and optimised for SEO.

There should be multi-language support.

🚀 The Process

I completed the project in the following steps:

✧ Analysing the design: I was provided with the Figma file which consisted of the two pages’ UI for desktop and phone breakpoints. I checked how each section, component, and element was made (auto-layout, positioning, masks, etc.), how interactions should be implemented (if any), and how the tablet breakpoint design should be implemented so that it is both adaptive and responsive.

Bird's-eye view video of various breakpoint UI designs for different pages.

✧ Developing the website: after I got to know about the UI design, I started importing all the essential design tokens/variables like colors styles, text styles, assets, icons etc to the Framer project. The next step was to start developing the layout of the homepage, create repeated elements as components (with variables), checking out responsiveness, adding meta tags inside Site Settings and more.