January 28, 2026

January 28, 2026

OFFSEEK

OFFSEEK

OFFSEEK

Ofseek is a content-driven platform being rebuilt in Framer with a complex CMS structure for blogs, case studies, and dynamic content. The focus is on creating a scalable, responsive system that supports filtering, pagination, and structured content growth.

Ofseek is a content-driven platform being rebuilt in Framer with a complex CMS structure for blogs, case studies, and dynamic content. The focus is on creating a scalable, responsive system that supports filtering, pagination, and structured content growth.

Ofseek is a content-driven platform being rebuilt in Framer with a complex CMS structure for blogs, case studies, and dynamic content. The focus is on creating a scalable, responsive system that supports filtering, pagination, and structured content growth.

Live Preview
Live Preview
Live Preview
man wearing black shirt
man wearing black shirt
man wearing black shirt

Year

2025

Client

Pushkar tiwari

Category

marketing site

Product Duration

1 - 2 Weeks
Where It Started ?
Where It Started ?
Where It Started ?

Ofseek already had a live website.
The client decided to move toward a new visual direction and rebuild it in Framer.

The Figma designer provided a static desktop design for the new version. There were no responsive layouts or motion references provided.

My responsibility was to turn that static desktop concept into a fully responsive, interactive Framer website

Project Goal
Project Goal
Project Goal

  • Rebuild the existing website in Framer

  • Maintain the visual direction defined in desktop design

  • Ensure full responsiveness across all devices

  • Add smooth interactions and animations

  • Deliver a modern, production-ready website

The main focus was not redesigning the brand, but translating the new direction into a working system.

woman holding orange fruit during daytime
woman holding orange fruit during daytime
woman holding orange fruit during daytime
Constraints
Constraints
Constraints

This project became more complex during development because of the CMS requirements.

  • Multiple CMS collections had to be structured separately (Work, Blog, Case Studies, News, Articles)

  • Each content type required its own detailed layout template

  • Filtering and pagination logic needed to function smoothly across collections

  • Layout consistency had to be maintained despite dynamic content

  • Responsive behavior had to be rethought for CMS-driven pages

  • Animations had to work without affecting performance

  • Ongoing development while managing complex content relationships

The main constraint wasn’t visual design — it was building a clean and scalable CMS system inside Framer.

Scattered sheets of white paper covering the entire frame
Scattered sheets of white paper covering the entire frame
Scattered sheets of white paper covering the entire frame
My Role
My Role
My Role

Design Collaboration & Framer Implementation Lead

This project was executed in close collaboration with a Figma design partner. While the initial visual direction and UI explorations were developed in Figma, I led the translation, system structuring, and production build within Framer.

Responsibilities:

  • Collaborated with Figma designer to align on layout intent, hierarchy, and visual direction

  • Translated static design concepts into a fully functional Framer template

  • Built all sections and reusable component structures

  • Structured consistent spacing and layout systems for scalability

  • Ensured full responsiveness across desktop, tablet, and mobile breakpoints

  • Integrated smooth scrolling and subtle motion interactions

  • Optimized performance and usability for marketplace standards

  • Managed preparation and submission for Framer marketplace approval

selective focus photography of woman holding red lace apparel
selective focus photography of woman holding red lace apparel
selective focus photography of woman holding red lace apparel
Responsive & Interaction Approach
Responsive & Interaction Approach
Responsive & Interaction Approach

Instead of shrinking the desktop layout:

  • I restructured content hierarchy for smaller screens

  • Adjusted typography scale for readability

  • Reduced visual density where needed

  • Balanced animation intensity to maintain performance

  • Ensured consistency across sections

Mobile experience was treated as a design decision, not a secondary step.

Instead of shrinking the desktop layout:

  • I restructured content hierarchy for smaller screens

  • Adjusted typography scale for readability

  • Reduced visual density where needed

  • Balanced animation intensity to maintain performance

  • Ensured consistency across sections

Mobile experience was treated as a design decision, not a secondary step.

Instead of shrinking the desktop layout:

  • I restructured content hierarchy for smaller screens

  • Adjusted typography scale for readability

  • Reduced visual density where needed

  • Balanced animation intensity to maintain performance

  • Ensured consistency across sections

Mobile experience was treated as a design decision, not a secondary step.

What This Project Demonstrates
What This Project Demonstrates
What This Project Demonstrates

  • Ability to interpret static designs into dynamic systems

  • Strong responsive thinking without predefined layouts

  • Ownership in defining mobile structure

  • Independent decision-making in motion design

  • End-to-end Framer implementation capability

  • Ability to interpret static designs into dynamic systems

  • Strong responsive thinking without predefined layouts

  • Ownership in defining mobile structure

  • Independent decision-making in motion design

  • End-to-end Framer implementation capability

  • Ability to interpret static designs into dynamic systems

  • Strong responsive thinking without predefined layouts

  • Ownership in defining mobile structure

  • Independent decision-making in motion design

  • End-to-end Framer implementation capability

Current Status
Current Status
Current Status

The project is currently under active development, with major focus on structuring and stabilizing the CMS ecosystem.

So far:

  • Core layout system is implemented

  • CMS collections for multiple content types are structured

  • Detail page templates are built

  • Filtering and pagination systems are in progress and being refined

  • Responsive behavior across breakpoints has been implemented

  • Animation framework is applied across static and dynamic pages

At this stage, the focus is on refining CMS logic, ensuring pagination works consistently, and maintaining performance across content-heavy pages before final deployment

The project is currently under active development, with major focus on structuring and stabilizing the CMS ecosystem.

So far:

  • Core layout system is implemented

  • CMS collections for multiple content types are structured

  • Detail page templates are built

  • Filtering and pagination systems are in progress and being refined

  • Responsive behavior across breakpoints has been implemented

  • Animation framework is applied across static and dynamic pages

At this stage, the focus is on refining CMS logic, ensuring pagination works consistently, and maintaining performance across content-heavy pages before final deployment

The project is currently under active development, with major focus on structuring and stabilizing the CMS ecosystem.

So far:

  • Core layout system is implemented

  • CMS collections for multiple content types are structured

  • Detail page templates are built

  • Filtering and pagination systems are in progress and being refined

  • Responsive behavior across breakpoints has been implemented

  • Animation framework is applied across static and dynamic pages

At this stage, the focus is on refining CMS logic, ensuring pagination works consistently, and maintaining performance across content-heavy pages before final deployment

Analytic Dashboard
Analytic Dashboard
Analytic Dashboard
Source of traffic
Source of traffic
Source of traffic

  • More Works More Works

Cover

Jayden Folio

Portfolio

Cover

Jayden Folio

Portfolio

Cover

Jayden Folio

Portfolio

Woman

HustleShelf®

E commerce

Woman

HustleShelf®

E commerce

Woman

HustleShelf®

E commerce

Open to

Opportunities

CONTACT NOW

BASED IN chennai,

india

DIgital Designer
+ Framer Developer

BASED IN india, I AM AN INNOVATIVE DESIGNER AND DIGITAL ARTIST. MY
PASSION FOR MINIMALIST AESTHETICS, ELEGANT TYPOGRAPHY, AND
INTUITIVE DESIGN IS EVIDENT IN MY WORK.
LINKEDIN
Twitter

Open to

Opportunities

CONTACT NOW

BASED IN chennai,

india

DIgital Designer
+ Framer Developer

BASED IN india, I AM AN INNOVATIVE DESIGNER AND DIGITAL ARTIST. MY
PASSION FOR MINIMALIST AESTHETICS, ELEGANT TYPOGRAPHY, AND
INTUITIVE DESIGN IS EVIDENT IN MY WORK.
LINKEDIN
Twitter

Open to

Opportunities

CONTACT NOW
BASED IN USA, I AM AN INNOVATIVE DESIGNER AND DIGITAL ARTIST. MY PASSION FOR MINIMALIST AESTHETICS, ELEGANT TYPOGRAPHY, AND INTUITIVE DESIGN IS EVIDENT IN MY WORK.
LINKEDIN
Twitter

Open to

Opportunities

CONTACT NOW

BASED IN chennai,

india

DIgital Designer
+ Framer Developer

BASED IN USA, I AM AN INNOVATIVE DESIGNER AND DIGITAL ARTIST. MY PASSION FOR MINIMALIST AESTHETICS, ELEGANT TYPOGRAPHY, AND INTUITIVE DESIGN IS EVIDENT IN MY WORK.
LINKEDIN
Twitter

Create a free website with Framer, the website builder loved by startups, designers and agencies.