Zain Portfolio

About the Project:

A personal portfolio for computer science student Zain Alabdin Mansour, presenting his story, resume, certifications, projects and competition achievements.

The goal was one clear page that anyone reviewing his profile could read from top to bottom. We gave each part of his journey its own section and broke up the long scroll with quotes that reflect his outlook.

What We Built

Everything lives on one English-language page, with a menu split around his circular profile photo that jumps to each section.

• Hero: his name and the title "Enthusiastic Future Developer" over a full-width photo, with social links above
• Introduction: About Me, personal info and areas of interest such as frontend development, STEM competitions, research and reading
• Video introduction: an embedded YouTube video under "Get to Know Me Better!"
• Resume: experience highlights, education, certifications, programming skills and languages
• Certifications and web projects: a certificate gallery, then project cards for a YouTube clone, a movies app and an admin dashboard
• Successes: stories from international mathematical modeling competitions and the 22nd Kolmogorov Readings International Science Conference

Key Features

• A navigation bar with his profile photo at its center
• An embedded video introduction
• Programming skills shown as labeled progress bars
• A certificate gallery with filter tabs
• Project cards with short descriptions and Explore buttons, with a label for work still in progress
• Full-width quote banners between sections
• A closing "End of Portfolio" note with social links

Design & User Experience

We kept the design light and readable: white sections with thin card borders, a coral red accent on section titles such as "My Resume" and "My Certifications", and dark charcoal bands for the quotes. The hero sets his name in large bold white type over a darkened photo, and the competition logos and certificate images add color to an otherwise calm page. Information is arranged in clear columns so a reader can scan his background quickly.