Behavioral Design Expert Portfolio
Scroll to explore
Tetiana Kobzar, a behavioral design and gamification expert with 15 years of experience, provided complete Figma designs for a comprehensive portfolio website showcasing her Comportance Framework, media appearances, and practical resources. My role was to faithfully translate these designs into a fully functional Framer website with four main pages: Homepage, Comportance Framework, Media Library, and Practical Resources. The project required meticulous attention to design fidelity, implementing complex timeline visualizations, video embeds, resource cards, and contact forms while maintaining performance and responsiveness across all devices.
Details
he primary challenge was translating sophisticated Figma designs into Framer while preserving every design detail, interaction, and visual hierarchy. The website featured complex layouts including a vertical timeline with custom connectors, YouTube video embed grids, rotating hero text elements, and multiple resource showcase sections. Additionally, the four-page architecture required consistent navigation, proper routing, and maintaining design system coherence across all pages while ensuring fast load times despite heavy media content.
• Pixel-Perfect Design Translation: Meticulously recreated every Figma frame in Framer, maintaining exact spacing, typography, colors, and visual hierarchy. Built a comprehensive design system with reusable components for navigation, cards, timelines, and sections that maintain consistency across all four pages. Implemented precise breakpoints matching the Figma responsive designs, ensuring the site looks identical to the original designs on desktop, tablet, and mobile devices.
• Complex Component Development: Developed custom timeline component with vertical connector lines and milestone cards for the "My Path Into Behavioural Design" section. Created video card components that properly embed YouTube thumbnails and maintain aspect ratios. Built resource showcase cards with image overlays and hover states. Implemented rotating text elements in the hero that cycle through different titles (Founder, Creator, Behavioural Design Expert, Gamification Specialist) with smooth transitions.
• Multi-Page Architecture with Seamless Navigation: Structured four distinct pages (Homepage, Comportance Framework, Media Library, Practical Resources) with consistent header navigation and smooth page transitions. Implemented active link states showing current page location. Created dedicated content layouts for each page type: timeline-based storytelling on homepage, framework explanation on dedicated page, video gallery grid for media library, and resource card showcases for practical tools. Ensured proper routing and deep-linking functionality for all pages.
