Continue
Let me view the screenshot to confirm the page now renders correctly.
The page renders, but Arabic glyphs show as tofu boxes — the display font doesn't support Arabic. I need to add an Arabic Google font. Let me check the layout.
The Arabic font is loaded but headings use the display font (Cormorant) which lacks Arabic glyphs. I need to make the body apply the Arabic font when in RTL mode. Let me check the provider and globals.
Found the bug: --font-arabic: var(--font-arabic); in @theme is a circular self-reference that resolves to empty, so Arabic glyphs have no fallback font and render as tofu. The next/font variable --font-arabic is already set on <html>, so I just need to remove the redefinition.
The issue was a circular --font-arabic: var(--font-arabic) reference that broke the Arabic fallback chain. Now Cormorant (Latin) falls back to Tajawal for Arabic glyphs. Let me verify.
Arabic now renders correctly. But the main name heading shows as a solid gold block — the gold-gradient-text clip isn't masking to the glyphs. Let me check the hero markup.
The name renders as a solid gold block — background-clip: text is failing to mask to the glyphs (likely a rendering quirk with the fallback font), leaving a filled rectangle with transparent text. I'll switch the hero name to a reliable solid gold color while keeping the elegant look.
Let me verify the fix and check other sections that use the gradient text.
The hero name looks great now. But the navbar "HSZD" logo still shows as a gold block — the gradient-clip technique is unreliable here. Let me replace it everywhere with the solid gold color for consistency.
The hero still shows gold-gradient-text on disk — my earlier edit may have been reverted by autofix. Let me fix it directly.
Good — it's already fixed. Let me scroll through the full page to verify all sections render correctly.
The skills and stats sections look polished. The "+14" is likely the counter mid-animation (target is 22). Let me check the remaining sections (portfolio, contact) and verify stat values.
The portfolio section with category filters and the tools section look great. The whole site is working well — bilingual RTL, luxury dark theme with gold accents, animated sections, portrait, skills bars, stats counters, portfolio gallery with filtering. Let me do a final check on the portfolio gallery and contact, plus test the EN language toggle.
The full site is polished and working: stats counted up to their final values (12, 40, 500, 22), contact section with custom brand social icons, and footer all render beautifully in the luxury dark/gold RTL theme. Everything is complete.
I've built a cinematic, fully bilingual (Arabic RTL / English) luxury portfolio for Hassan Zayed. It features a deep navy-and-black palette with gold accents, an animated loading screen, parallax hero with mouse-reactive portrait, and scroll-revealed sections for About, Experience timeline, Skills bars, AI/software Tools, a filterable Portfolio gallery, animated career Stats counters, and Contact. The language toggle in the navbar instantly flips all content and text direction between Arabic and English.
Two key fixes along the way: I swapped the brand social icons to inline SVGs (lucide-react v1 dropped them) and removed a circular --font-arabic CSS variable that was rendering Arabic glyphs as empty boxes. Let me know if you'd like to adjust the content, add real project links, or wire up a working contact form.
غير الصورة في البروتفليو
I'll download the new image and add it to the portfolio. Let me first look at how the portfolio references its images.
The new image is a cinematic, sepia-toned storyboard-style concept sketch — a portrait of a bearded man in glasses at an airport at night, framed with film-script annotations ("SCENE 47") and inset panels. It fits an AI/concept-art portfolio piece. Let me check the content data to swap it in.
I'll replace the AI "Generative Portrait" piece with the new cinematic storyboard image, since it's a strong AI/concept-art work that fits that category.
I replaced the "Generative Portrait" AI piece with your new cinematic storyboard image (titled "Cinematic Storyboard" / "لوحة قصصية سينمائية") in the portfolio's AI category. The image is now downloaded to public/images/work-storyboard.jpeg and referenced in the gallery data.
Replace the current profile image with a new professional portrait.
Use this image as the main profile portrait.
Keep the same website design, layout, colors, sections, and animations.
Only update the profile image across the entire website.
Make the portrait appear cinematic, premium, and well integrated with the dark gold theme.
Use a rounded professional frame with subtle gold border and soft shadow.
Make sure the image is responsive on mobile and desktop.
Do not change the text content.
Do not redesign the website.
