▸ note01
Feature-Sliced Design
The code is split into app / pages / widgets / shared layers. Every section of the landing is a self-contained widget with its own markup, CSS Module and motion.
guest@gubanov:~$ cat ./projects/oriby/README.md
Oriby
Website for a design-only studio — from Figma mockups to a fast React frontend.
I designed the site and built its frontend; a teammate made the backend that receives leads. In 2026 I came back and made the page 14× lighter without touching the design.
- role01
- Web design + frontend
- period02
- Sep — Nov 2025
- team03
- 2 · me + backend dev
- type04
- Landing page
[01]guest@gubanov:~$ cat overview.md01 / 06
Overview
// context
Oriby is a design-only studio: it crafts UI/UX in Figma for startups and brands and hands developers ready-to-build files. The site had to sell exactly that — look premium, explain the workflow in a few screens and turn visitors into requests.
I designed it in Figma and built the frontend on React + TypeScript: one landing page with services, portfolio, process, FAQ, results and a contact form, plus confirmation and 404 pages. The form sends leads to the studio's backend through a REST API.
[02]guest@gubanov:~$ cat ./work.log02 / 06
What I did
Design and frontend are mine; the backend and the lead API — my teammate's.
- 01
Designed the site in Figma: layout, 3D visuals, desktop and mobile versions.
- 02
Built the frontend on React 19, TypeScript and Vite, structured by Feature-Sliced Design.
- 03
Animated it with Framer Motion: the hero title slides in line by line, 3D shapes follow scroll and cursor, the header turns into a glass pill with a progress bar, cards light up under the cursor and numbers count up.
- 04
Connected the lead form to the backend REST API: validation, phone formatting, inline errors and a confirmation page.
- 05
Made it responsive from 320 to 1440 px and accessible: keyboard navigation, ARIA for the menu and FAQ, fixed contrast, prefers-reduced-motion support.
- 06
Ran a performance pass: WebP images with srcset, subset WOFF2 fonts, form libraries loaded on demand, vendor chunks for caching.
[03]guest@gubanov:~$ open ./screens03 / 06
Screens
Click a screenshot to open it full screen; arrow keys switch between them.
[04]guest@gubanov:~$ cat ./notes/architecture.md04 / 06
Under the hood
▸ note02
Motion without jank
Only transform and opacity are animated, framer-motion is loaded through LazyMotion and scroll effects are computed outside React — scrolling holds 60 fps even with a 4× CPU slowdown.
▸ note03
Assets on a diet
PNG → WebP sized for the screen with srcset. A 2 MB grain texture became a 7 KB tile, 900 KB of TTF became 33–59 KB variable WOFF2 subsets with preload.
▸ note04
Load on demand
axios and libphonenumber-js arrive only when the visitor starts filling in the form, images below the fold wait for the page load, vendor libraries live in cacheable chunks.
[05]guest@gubanov:~$ lighthouse --compare before.json after.json05 / 06
Results
Performance pass, 2026. Lighthouse 12, production build, gzip. Mobile profile — slow 4G and a throttled CPU.
- Performance, mobile01
- was 6691
- SEO02
- was 67100
- Largest Contentful Paint, mobile03
- was 8.0 s3.5s
- Page weight04
- was 6.3 MB0.46MB
| metric | before | after |
|---|---|---|
| Performance, mobile | 66 | 91 |
| Performance, desktop | 95 | 100 |
| Accessibility, mobile / desktop | 85 / 81 | 96 / 96 |
| Best Practices | 96 | 100 |
| SEO | 67 | 100 |
| First Contentful Paint, mobile | 3.9 s | 1.7 s |
| Largest Contentful Paint, mobile | 8.0 s | 3.5 s |
| Page weight | 6.3 MB | 0.46 MB |
| JS on load, gzip | 171 KB | 115 KB |
| ESLint errors | 20 | 0 |
[06]guest@gubanov:~$ cat package.json06 / 06
Stack
React 19
interface
TypeScript
typed components and API client
Vite 7
dev server, build, vendor chunks
React Router 7
routes /, /confirm and 404
Framer Motion 12
animations through LazyMotion
CSS Modules
component styles
axios, libphonenumber-js
lead form, loaded on demand
Figma
design and handoff