Portfolio

This personal portfolio website presents my work through a clean, structured layout that highlights selected projects, technical strengths, and development approach. It reflects my focus on clarity, scalability, and thoughtful engineering, offering a concise overview of my experience and the way I build digital products.

View Code

Demo

Overview

This portfolio is the most recent and complete project I've built, combining everything I've learned across frontend engineering, UI design, and modern web development. It uses a fully modern tech stack and represents exactly how a professional portfolio should look and feel. The project includes five main pages and two subpages, each designed with clean structure, smooth animations, and a strong focus on accessibility and performance. It is fully localized in Arabic and English, theme-aware, and built with reusable components that follow scalable architectural patterns. This portfolio reflects my personal engineering philosophy: clarity, maintainability, and attention to detail. It is the project I am most confident about, and it demonstrates my ability to build polished, production-ready interfaces using modern tools and best practices.

Key Features

Five main pages and two subpages

Fully localized (Arabic + English)

Light and dark theme support

Smooth animations using Framer Motion

Reusable UI components with shadcn/ui

Responsive design across all devices

SEO-friendly structure

Modern layout and navigation patterns

Clean code architecture with TypeScript

Challenges Faced

Designing a clean and scalable architecture for multiple pages
Ensuring full localization with RTL support
Building smooth animations without hurting performance
Creating reusable UI components with shadcn/ui
Balancing aesthetics with accessibility and readability

Solutions Implemented

Used a modular folder structure with reusable components
Implemented a dictionary-based i18n system
Optimized animations using Framer Motion best practices
Built a consistent UI system using TailwindCSS and shadcn/ui
Applied accessibility guidelines for typography and contrast

Future Improvements

1.Add a blog section with MDX
2.Add OpenGraph images for all pages
3.Add more interactive UI elements and micro-interactions
4.Improve SEO with additional structured data

Limitations

!Some animations may vary slightly across older mobile devices
!Future sections may be added as my experience grows