Inspiration

The project aimed to create a visually immersive, professional online portfolio for a Senior Graphic Designer. It draws from minimalist yet bold aesthetics, presentation-style section transitions, strong personal branding with Ahmed’s image, and full bilingual (LTR + RTL) support.

How we built it

Built with React + TypeScript and Tailwind CSS, using Vite for fast builds and Lucide React for icons. A component-based architecture powers a full-screen slideshow experience, with global state managed via Context API for theme and language (incl. RTL handling). Responsive scaling ensures consistent layout, and contact forms are handled via a modal. Ahmed’s photo is integrated seamlessly into the design.

Challenges we ran into

Key challenges included maintaining a unified design across all slides, ensuring responsive full-screen scaling, implementing full RTL support (beyond text direction), managing dynamic modal forms, and preserving aesthetic integrity when integrating personal assets.

Accomplishments that we're proud of

We delivered a stunning, cohesive, full-screen experience that’s multilingual and user-friendly. The modular codebase is scalable, and the design effectively communicates Ahmed’s value. Smooth transitions, theme toggles, and an elegant contact modal enrich the user experience.

What we learned

We deepened our understanding of utility-first CSS, advanced internationalization, React Context, and responsive scaling. Iterative design proved essential to polish complex slides like TitleSlide and form modals.

What's next for Afifi's Presentation website

Next steps include backend contact form handling, CMS integration for easy content updates, richer project showcases, performance tuning, advanced SEO, analytics, micro-interactions, and production deployment.

Built With

• react