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
Education
- B.Sc. in Computer Engineering, Port Said University, Egypt (2020 – 2025)
Front-End Skills
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
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