Tetiana Kobzar
Behavioral Design Expert — Translating a complete Figma portfolio design into a fully functional, four-page Framer website for a behavioral design and gamification expert — with pixel-perfect fidelity, complex custom components, and seamless responsiveness across all devices.
About the Project
Tetiana Kobzar is a behavioral design and gamification expert with 15 years of experience, known for her Comportance Framework. She provided detailed Figma designs for a comprehensive portfolio spanning four pages: Homepage, Comportance Framework, Media Library, and Practical Resources. My role was to bring those designs to life in Framer — faithfully, performantly, and responsively.A Guiding Presence,
Designed to Stand Out
The concept behind Najm was to create a template that leads rather than follows. Every layout decision is intentional, guiding users through content in a way that feels natural and engaging. It balances bold expression with thoughtful structure, resulting in an experience that is both impactful and easy to navigate.
The Challenge
The designs were sophisticated and detail-dense, featuring a vertical timeline, YouTube video embed grids, rotating hero text, and multi-section resource layouts. The four-page architecture demanded consistent navigation, proper routing, and a coherent design system — all while keeping load times fast despite heavy media content. Every pixel had to match the original Figma frames.
Light and dark interplay, combined with sharp alignments, gives the template a modern, almost cinematic feel—perfect for brands that want a striking digital presence.
The Solution
Three pillars drove the build:
Pixel-Perfect Design Translation — Recreated every Figma frame in Framer with exact spacing, typography, and color. Built a reusable component library (navigation, cards, timelines, sections) to maintain consistency across all four pages and precise responsive breakpoints at desktop, tablet, and mobile.
Complex Component Development — Built a custom vertical timeline with connector lines and milestone cards for Tetiana's design journey. Developed YouTube video cards with proper aspect ratio embeds, resource cards with image overlays and hover states, and a rotating hero text element cycling through her titles (Founder, Creator, Behavioural Design Expert, Gamification Specialist) with smooth transitions.
Multi-Page Architecture — Structured four distinct pages with consistent header navigation, active link states, and smooth page transitions. Each page features a purpose-built layout: timeline storytelling on the homepage, framework explanation, a video gallery grid, and a resource card showcase — all with proper routing and deep-linking.
