Mohammed Baobaid
A polished personal site with structured sections, motion, and interactive case studies.
A refined portfolio surface that keeps the existing layout while upgrading copy, component reuse, motion, and project exploration.
Role
Designer and developer
Outcome
Improved first impression and made project depth available without forcing navigation.
The portfolio needed to make a strong first impression while providing enough depth for hiring managers to evaluate technical capability. A single-page layout risked being either too shallow or too overwhelming.
I structured the portfolio as a narrative that guides visitors through identity, capabilities, evidence, and contact. Each section uses scroll-reveal animations to maintain engagement. Project details are available through both quick modals and dedicated case study pages for deeper reading.
The page follows a deliberate story arc: establish identity (hero), build credibility (about + skills), show evidence (projects + experience), and make it easy to act (contact). Each transition is designed to keep the visitor scrolling.
Scroll-triggered reveals, magnetic hover effects on buttons, 3D tilt on project cards, and animated counters all serve a dual purpose: they make the site feel alive, and they demonstrate the frontend engineering skills being claimed.
Colors are driven by CSS custom properties that swap between light and dark palettes. The toggle persists via localStorage and respects the system preference on first visit. A 400ms transition class prevents jarring color shifts.
I build systems like this for teams that need reliable engineering, clean interfaces, and measurable outcomes.