17Body copy sits at 17 pixels with a 1.6 line height, so it reads easily on any phone.
Concept 01 · Stride Aero
HDRI studio lightPhysical materialsSoft contact shadow
Easingcubic-bezier(.19, 1, .22, 1)
site/
index.html
lab/stride/
index.html
m.html
style.css
app.js
poster.webp
assets/models/
stride-d.glb
stride-m.glb
vendor/
three, gsap, lenis
1// Phones get the light build, laptops the full one2const phone = matchMedia("(pointer: coarse)").matches;
3if (innerWidth <= 860 || phone) location.replace("m.html");
45// Load the 3D shoe only when it is on screen6whenVisible(stage, async () => {
7const shoe = awaitloadGLB("stride-d.glb");
8 scene.add(fitObject(shoe, 2.4));
9});
1011// One easing curve for the whole site12gsap.to(shoe.rotation, { y: Math.PI * 2,
13 ease: "expo.out", scrollTrigger: { scrub: true } });
0 console errors, 1440 x 900
0 console errors, 390 x 844
0 console errors, 360 x 740
Reduced motion respected
Phone build lighter than desktop
Tested on your own phone
Live
zyqor-portfolio.sites.tab.bot
01 / 09 · Discovery
It starts with one question.
What should a visitor do after ten seconds on your site: call, book, buy, or message you? We settle that first, on a short call or over WhatsApp voice notes, then I write it down as a one-page brief.
Day 120 to 30 min call
You get: A one-page brief you approve: goal, audience, the one action, must-haves.
02 / 09 · Moodboard
Pinning the feeling before the pixels.
I collect references for mood, layout and motion, and show you the direction in one board. It is quicker to say no to a board than to a finished page.
Days 1 to 2
You get: One moodboard and a short note on the direction.
03 / 09 · Palette
Three colours. Never more.
Every site gets one light, one dark and one accent, used roughly 60, 30 and 10. Try it: these are the real palettes from four Lab concepts.
Day 2
You get: Three hex codes with contrast checked for readable text.
04 / 09 · Type
A voice you can read at a glance.
A heavy display face for headlines, a clean text face for reading, and at most one accent. Fonts are self-hosted so the page never waits on another server.
Days 2 to 3
You get: A type scale and font pairing, licensed for the web.
05 / 09 · Wireframe
Boxes first, beauty second.
Before any colour, I draw the page as grey boxes: what goes where, how big, in what order. Keep scrolling to wipe the wireframe into the finished Stride concept.
Days 3 to 4about a week for 3D sites
You get: Desktop and phone wireframes you can comment on.
06 / 09 · 3D and motion
Movement with a reason.
3D models get real materials and studio lighting; motion gets one custom easing curve used everywhere, so the whole site moves like one hand made it. Only for sites that need it.
3D sites only1 to 2 weeks
You get: The hero scene and motion tested on a laptop and a phone.
07 / 09 · Build
Hand-written, light code.
Plain HTML, CSS and JavaScript, with three.js and GSAP where they earn their weight. Every site ships as two builds: a full desktop version and a lighter phone version.
Landing page: 3 to 5 days3D site: 1 to 2 weeks
You get: A private preview link that updates as I build.
08 / 09 · QA
Tested on three screens. Every time.
Before you see a final, I check the console for errors at 1440, 390 and 360 pixels wide, test reduced motion, and check page weight. Then you test it on your own phone.
1 to 2 days
You get: A checked build and a short list of what was tested.
09 / 09 · Launch
Live, and yours.
Once you approve the preview, the site goes live on your domain, usually the same day. You get the live link and the source code.
Same day as approval
You get: Your live site on your domain, plus the source code.
(T) Honest timelines
How long it really takes.
Typical weeks for a solo studio, counted from the day the brief is approved. Your feedback speed matters as much as mine; the exact dates go in the written agreement.
Landing pagetypical: 1 to 2 weeks
Brief
Look
Wireframe
Build
QA + launch
3D or scroll sitetypical: 3 to 5 weeks
Brief
Look
Wireframe
3D + motion
Build
QA + launch
Day 1Week 1Week 2Week 3Week 4Week 5
Landing page1–2 weeks
One long page, custom design, desktop and phone builds, live on your domain.
3D or scroll site3–5 weeks
A real-time 3D product or a scroll story, with extra time for models, lighting and motion.
(F) FAQ
Fair questions.
How long does a website take?
A typical landing page takes 1 to 2 weeks. A 3D product site or a scroll-world site takes about 3 to 5 weeks. The real dates depend on the size of the site and how quickly feedback comes back, and they are written into the agreement before work starts.
What do you need from me to start?
Your business name, what you sell, and the one thing a visitor should do. Your logo, photos or product videos help if you have them. If you do not, I can use licensed stock or build visuals in code.
How much does it cost?
Websites start from $300 for a clean landing page, and go up to around $10k for a full custom 3D or scroll build. You get a fixed price in writing before any work begins.
Will I see progress along the way?
Yes. You approve the brief, the moodboard and the wireframe, and from the build step on you get a private preview link that updates as I work.
Can I ask for changes?
Yes. Feedback is part of every stage, and it is cheapest early: changing a moodboard takes minutes, changing a finished page takes longer. How many rounds are included is written into the agreement.
Does it work on phones?
Every site ships as two builds: a full desktop version and a lighter phone version that loads fast on mobile data. Phones are sent to the right one automatically.
Are the Lab brands real clients?
No. Stride, Meridian, Volta and the rest are fictional concept brands I designed to show what is possible. They are labelled as concepts on the site.
What tools do you use?
Hand-written HTML, CSS and JavaScript, with three.js for 3D, and GSAP and Lenis for motion and smooth scrolling. Sites are static and fast, and can be hosted on Vercel or your own host.
Can you redesign my current site?
Yes. I start by reviewing what you have, keep what works, and rebuild the rest. My own portfolio went through the same process from version 2 to version 3.
(Next) Step one is yours
Tell me what the site should do.
Send your business name and the one thing visitors should do. I reply with an idea, a timeline and a price.