OsamaGharibElwaly

Osama Alwaly’s Front-End Portfolio

Welcome to my portfolio! I’m Osama Alwaly, a fresh graduate in Computer Engineering with a passion for Front-End development. I specialize in creating responsive, user-friendly websites and web applications. This portfolio showcases my skills, projects, certifications, and experience.

About Me

• Name: Osama Alwaly
• Email: osamagharib04@gmail.com
• Phone: +20 1210916041
• LinkedIn: linkedin.com/in/osama-alwaly
• GitHub: github.com/OsamaGharibElwaly
• Portfolio: osama-gharib-elwaly.vercel.app

Education

• B.Sc. in Computer Engineering, Port Said University, Egypt (2020 – 2025)
  • GPA: 2.97 (Good)

Front-End Skills

• Languages:

• Frameworks & Libraries:

• Tools:

Work Experience

Volunteer Speaker - Pioneer of Success Initiative

Egyptian Ministry of Youth and Sports
Aug 2025 – Present

• Delivered online training on LinkedIn usage, AI job search tools, and CV optimization.
• Utilized: Zoom, Google Meet, Microsoft Office.

Trainee - Internship

Suez Canal Authority
June 2023 – Sept 2023

• Worked with network systems, optimizing performance.
• Utilized: Cisco Packet Tracer for network simulations and troubleshooting.

Trainee - Internship

Port Said University
June 2022 – Sept 2022

• Worked in electronics labs, applying engineering concepts.
• Utilized: MATLAB for system analysis and modeling.

Projects

1. FitTrack - Training Management System

• Developed a modern gym tracking web application using Next.js, React, and TailwindCSS.
• Focus on Front-End development with responsiveness and smooth animations.
• Technologies used: Next.js, React.js, TailwindCSS, Framer motion.

2. UI/UX Design Projects

• Designed multiple mobile and web interfaces using Figma.
• Projects include: Bajaru App, Piddi URL Landing Page, LinguaLearn Platform.

Certifications

• Effective Communication Skills Program – AAST
  • Training on presentation skills and teamwork.
• UX Design Fundamentals Certificate – Maharatech
  • Knowledge of user-centered design principles.

Recent Enhancements (January 27, 2025)

🎨 Image Gallery & Carousel System

• Professional Image Carousel Component: Created a full-featured image carousel/lightbox for project galleries
  • Modal lightbox with backdrop blur
  • Keyboard navigation (Arrow keys, ESC to close)
  • Touch gesture support for mobile devices (swipe left/right)
  • Image counter display (e.g., “1 / 9”)
  • Thumbnail strip for quick navigation
  • Smooth animations using Framer Motion
  • Clickable gallery grid with hover effects
• Enhanced Cover Image Display: Improved main cover image presentation in project detail pages
  • Flexible aspect ratio handling for different image types
  • Uses object-contain to display full images without cropping
  • Clickable to open in fullscreen carousel
  • Beautiful hover effects with scale animations
  • Decorative corner accents
  • Gradient backgrounds for visual depth
• Improved Project Cards: Enhanced project cards on the main page
  • Better image presentation with hover zoom effects
  • “View Project” overlay button on hover
  • Staggered fade-in animations
  • Enhanced shadows and transitions
  • Better dark mode support
  • Improved responsive design

💬 Client Reviews Carousel

• Review Carousel Component: Created a professional client review carousel
  • Auto-play functionality (rotates every 5 seconds)
  • Manual navigation with Previous/Next buttons
  • Star rating display (1-5 stars)
  • Client avatar with initial letter
  • Smooth slide animations
  • Dot indicators for quick navigation
  • Pause on user interaction
  • Fully responsive and accessible
• JSON Integration: Added reviews section to portfolio.json
  • Structured review data with client name, job title, rating, and review text
  • Easy to add/update reviews through JSON
  • TypeScript interfaces for type safety
• Navigation Enhancement: Added Reviews link to navbar
  • Smooth scroll to reviews section
  • Works from homepage and other pages
  • Consistent with other navigation links

🛠️ Technical Improvements

• Created reusable UI components:
  • ImageCarousel - Gallery carousel with modal
  • CoverImage - Enhanced cover image display
  • ProjectImageViewer - Wrapper for cover + gallery integration
  • ReviewCarousel - Client reviews display
• Improved TypeScript type safety with proper interfaces
• Enhanced accessibility with ARIA labels
• Optimized image loading with Next.js Image component
• Better mobile responsiveness across all components

Contact

Feel free to reach out to me for collaboration or inquiries. Let’s connect and create something amazing together!

• Email: osamagharib04@gmail.com
• Phone: +20 1210916041