ItqanLab.com — Our Own Marketing Website, Built to Practice What We Preach

Why We Built Our Own Site from Scratch

Many studios use templates for their own websites. We chose to build ours from zero — applying the same standards and process we use for client work. The site isn’t just a marketing page; it’s a living proof of our craft.

Brand Identity

The Name: ItqanLab

“Itqan” (إتقان) is an Arabic word meaning mastery, precision, and excellence in craftsmanship. “Lab” signals experimentation and innovation. Together, the name bridges Arabic precision with a modern, exploratory spirit.

Colors

Our primary accent is amber (#d97706) — warm, confident, and distinctive in a sea of blue tech websites. We added switchable themes (Blue, Rose, Emerald, Violet) that visitors can toggle — an interactive detail that demonstrates our attention to craft.

Typography

• Outfit for headings — geometric, modern, bold
• Inter for body text — optimized for screen readability
• JetBrains Mono for code — technical precision
• IBM Plex Sans Arabic for Arabic text — designed specifically for Arabic digital typography

Every font was chosen because it serves its purpose precisely, not because it’s trendy.

Bilingual Architecture

The site supports English and Arabic with full RTL layout. Language switching is instant — client-side, no page reload. All translatable elements use data-i18n attributes mapped to a single translation object.

The Arabic copy isn’t machine-translated or literally translated from English. It’s written to feel native — natural phrasing, cultural context, and proper Arabic tone. When you switch to Arabic, the entire layout flips to RTL, and the content reads like it was written Arabic-first.

Tech Stack

We built with Astro 5 using static output. The result: zero JavaScript by default. Scripts load only when needed — Three.js for the interactive hero, lightweight vanilla JS for the language toggle and theme switcher.

Why Astro? For a marketing site, static generation wins. No hydration overhead, no framework runtime, just HTML and CSS delivered at the edge. The same recommendation we give clients in our tech stack guide.

Infrastructure

• Hosting: Dokploy (self-hosted) with GitHub auto-deploy from main
• CDN/DNS/SSL: Cloudflare with proxy enabled, Full SSL mode
• Build: Nixpacks
• Domain: itqanlab.com

This setup gives us full control, fast deploys, and global edge caching — without paying for managed hosting platforms.

SEO Foundations

Every page includes:

• Custom meta titles and descriptions — unique per page, not auto-generated
• Structured data (JSON-LD) — Organization, WebSite, FAQ, BlogPosting, and CreativeWork schemas
• Open Graph images — custom SVG → PNG for every page
• Hreflang tags — proper en, ar, and x-default alternates
• Auto-generated sitemap — via Astro’s built-in sitemap integration
• Semantic HTML — proper heading hierarchy, landmark roles, accessible markup

We don’t just build sites that look good — we build sites that search engines can understand.

Interactive Details

The homepage features a Three.js particle hero — an interactive 3D canvas that responds to cursor movement. It’s loaded asynchronously so it doesn’t block the critical rendering path.

Other details:

• Custom cursor with dot + ring that responds to interactive elements
• Scroll progress indicator at the top of the page
• Theme switcher with 5 color themes that persist across sessions
• Smooth scroll animations powered by GSAP with IntersectionObserver triggers

These aren’t gimmicks — they’re deliberate choices that make the site feel crafted, not templated.

Services

We present our six core services in a clean, scannable grid — each with a clear description and a link to the full service page. The layout translates seamlessly to Arabic.

Content System

Blog posts and project case studies use Astro Content Collections with Markdown files. Each content type has a strict schema defined in TypeScript — enforcing required fields, optional bilingual variants, and structured metadata.

This means:

• Adding a new blog post = creating a Markdown file with frontmatter
• Adding a new project = same, with bilingual body support via body_ar in frontmatter
• No CMS overhead, no database, no API calls — just files in a Git repo

The Result

A fast, beautiful, bilingual, SEO-optimized website that reflects exactly the level of quality we deliver to our clients. Not just a company site — a real project that proves our capabilities.

---

Want a site built with this level of craft? Let’s talk.