Skip to content
ALI HAITHAM·TECH·responds in <1h
  • Homestart here
  • Workcase studies, projects
  • Serviceswhat I will build for you
  • Writingessays, series
  • Traincourses, labs, cohorts
  • Aboutthe engineer behind this site
Sign inStart a project
ALI HAITHAM · TECH
  • Home↗
  • Work↗
  • Services↗
  • Writing↗
  • Train↗
  • About↗
Sign inStart a project
Online
ALI HAITHAM·TECH

Engineering studio. Damascus, GMT+3.

aliyosef.online

Studio

  • Work
  • Writing
  • Training
  • About
  • Contact me

Portal

  • Sign in
  • Open a ticket
  • Track project
  • My account

Resources

  • Docs
  • Status
  • Changelog
  • Brand kit
  • Privacy
  • Terms

Newsletter

Field notes and tech news. Weekly. No fluff.

Free. Unsubscribe anytime.

Find me elsewhere
© 2026 Ali Haitham Yosef. All rights reserved.Hand-built in React 19. No frameworks of frameworks.Last deployed · 2026-05-08All systems operational
Case 112024–2025Designer + Developer

Ali Omuom

Personal site for the CEO of CyberV. Bilingual editorial layout, Laravel back end, designed for written essays and speaking-engagement bookings, not a CV dump.

RoleDesigner + Developer
Year2024–2025
StackLaravel, Tailwind, Alpine.js
Livealiomuom.cyberv.tech↗
Overview

About the project.

A personal site for the CEO of CyberV, designed to read like a published essayist rather than a resume. The build is a Laravel back end with a bilingual editorial layout, structured for long-form writing and speaking-engagement bookings. I designed and built it end to end, paying close attention to Arabic typography, reading rhythm, and how the cover image of each essay carries the visual weight of the home page.

Challenge

What we walked into.

The CEO of CyberV needed a personal site that read like a published essayist, not a resume — bilingual editorial layout, speaking-engagement bookings, long-form writing as the centre of gravity.

Approach

What we did.

Laravel back end + bilingual editorial layout. Designed for written essays first, speaking bookings second, "about" page third. Arabic typography weighted as carefully as English.

Outcome

What it became.

Personal essay surface that reads like a magazine column. Speaking inquiries routed via structured form.

IndustryExecutive personal brand
TypeEditorial personal site
Timeline2 months
TeamSolo · designer + developer
Ownership

My role on this project.

Solo · 100% — design + Laravel back end + bilingual editorial layout + speaking-engagement form. Client supplied essays + brand direction; everything else is mine.

  • 01

    Designer (editorial)

    Magazine-column reading rhythm. Arabic + Latin typography paired carefully. Essay cover images carry the visual weight of the home page.

  • 02

    Backend engineer (Laravel)

    Bilingual essay model, draft → publish workflow, cover-image pipeline, speaking-bookings inbox.

  • 03

    Performance engineer

    Editorial-grade reading typography is heavy on font weight; web-font subsetting kept first-paint under 1s.

In production

The numbers that matter.

  • EssaysCentral content typeNot "blog posts" — essays. Different reading rhythm, different metadata, different display.
  • Bilingualar/en parityEach essay can be published in either language or both; never machine-translated.
  • <1sFirst paintWeb-font subset (Latin only) + Arabic fallback chain; hero image lazy-loaded.
  • StructuredSpeaking bookingsForm captures event date, audience size, topic; routes to assistant inbox.
Why this was hard

What was actually broken.

Most CEO personal sites are vanity resumes — chrome, awards lists, photo galleries. The CEO of CyberV writes seriously about leadership and engineering, and he wanted a site that respected that. The brief was a site that, when someone landed on it, made them want to read — not scroll past to find a "contact" button.

Engineering challenges

The hard surface area.

  • 01Editorial typography that holds attention across 1,500-word essays in both Arabic and English.
  • 02Cover-image discipline — every essay has one, and it carries the visual weight of the home page.
  • 03Speaking-bookings form that captures the structured fields needed (date, audience, topic) without feeling transactional.
Hard problems solved

Engineering wins worth naming.

01

Bilingual reading rhythm

Arabic body-text needs 1.85+ line-height; Latin needs 1.55. Designed two reading-rhythm presets, switched per locale, sharing the same essay grid.

02

Cover-image weight

Each essay cover is a hero on the home page when featured. Photographer-grade aspect ratio (3:2), srcset for retina, blur-up placeholder for slow connections.

System architecture

How the system is wired.

01 — Edge

Edge tier

CloudflareCDN · DNSGlobal edges
02 — App

Application tier

Laravel 11PHP 8.3 · BladeEssay model, speaking-bookings form, editor surface
Tailwind frontEditorial typographyMagazine-grade reading rhythm; serif + sans pairings
03 — Data

Data tier

MySQL 8Single DBEssays, bookings, content blocks
Why this stack

The decisions behind each choice.

Laravel over headless CMS

  • Single-author essay site does not need a separate CMS service. Laravel + a Filament admin is enough.
  • Editor surface stays at the same domain as the public site, on the same login.

Editorial typography over generic Tailwind

  • Generic Tailwind type-scale is fine for SaaS. For a writing site, the scale needs hand-tuning per locale.
  • Arabic body text is its own design problem with its own answers.
Lessons learned

What the build taught us.

  • When the content is the product, typography is the product. Spend the time.
  • Bilingual is not "translate the strings." It is two reading-rhythm systems sharing one grid.
Visuals

From the project.

Continue reading
Previous caseAdooarNext caseAsl Evaluation
Build with us

Want something like this?

I take on a small number of engagements each quarter. Tell me what you have in mind.

Start the conversation→