3D Portfolio

About the Project:

A 3D portfolio for frontend developer Zain Alabdin Mansour that presents his experience, web applications and websites to clients and employers.

The aim was a portfolio that shows technical skill the moment it loads. We opened the page with an interactive 3D desk scene, then told the rest as a clear story: who he is, where he has worked, what he has built and how to reach him.

What We Built

The home page is a single scrolling story with a top menu and a Download CV button, backed by two extra views: a details page for each web application and a page listing all of his websites.

• Hero: "Hi, I'm Zain" with his specialties, above an interactive 3D desk with a desktop PC and monitor
• Overview: a short introduction, a Download CV button and four role cards: Frontend Developer, React Specialist, Performance Optimizer and Applications Architect
• Work Experience: a vertical timeline of his roles at Dopa Tech, Building Rank Group and on freelance projects
• Web Applications: cards for systems such as asset management, project management, appointments, HR and an engineering chat PWA, each with tags and a link to its details page
• Websites: a carousel of sites he has built, from a graphic designer portfolio to the Dopa Beauty blog and Building Rank branch websites
• Contact: a message form beside a 3D planet model

Key Features

• An interactive 3D desk scene in the hero, with a scroll indicator beneath it
• A 3D planet next to the contact form and an animated star field behind it
• His tools shown as 3D icon badges, from React and Next.js to TypeScript and Tailwind CSS
• Web application pages that break each project into Overview, Problem and Solution & Impact
• A websites carousel with arrows and pagination dots, plus a "Discover All Websites" page
• A client testimonials section
• A contact form with name, email and message fields

Design & User Experience

We chose a deep navy and violet palette with a glowing purple accent, so the 3D models and project screenshots stand out like a lit workspace at night. Bold headings that end with a period, such as "Overview." and "Work Experience.", sit under small uppercase labels and give every section the same rhythm. Content fades and slides into view as visitors scroll, and on phones the 3D tool badges are left out to keep the page light and quick.