Web experience · Design & development
This websiteThe portfolio is a project, too.
I wanted a distinct technical presence with a short path to my work. The challenge is keeping the portrait and scene engaging while the content remains usable if effects fail.
Role & scope
Direction, content and experience review by the owner. A static bilingual site with local browser demonstrations.
How does it work?
- Content
A shared project and case-study record used by the homepage and quick profile.
- Pages
Astro generates Arabic and English HTML. Content and links arrive before motion.
- Interaction
Three.js renders the hardware; a state controller drives the signal and an SVG fallback preserves its meaning.
The decisions behind it
Why no data backend?
The site presents work and links to direct contact destinations. Static pages serve that purpose without accounts or visitor-data storage. Workspace records stay in an isolated frame.
What if JavaScript fails?
Tool links remain available instead of dead controls. Preview actions are enabled after initialization. An InfraOps loading failure produces a clear retry state.
How is motion controlled?
The control sits next to the introduction, with system reduced-motion preferences taking priority. Rendering pauses when hidden and drag/button rotation share the same angle. A bounded lighting environment reduces WebGL setup cost.
Inspect the work.
The source links show the signal transitions and preview regression checks. Languages, layouts and loading failures are tested locally; real-device measurements and public deployment remain separate checks.
Hello, I’m
Tarek AlkhalafSoftware, systems & securitySwitch language and watch the layout follow.
Static pages with browser interactions and reduced-motion support.
Astro
TypeScript
Three.js
GSAP