Creative work. A personal signature.HaiderMateen
A creative career.
A memorable digital presence.
A portfolio website for creative lead and motion designer Haider Mateen. Hot Ice Cube brought his career, services and 99 Behance projects together in a distinctive, motion-led experience.
Explore the project
- Industry
- Creative professional
- Services
- Portfolio design & development
- Tech stack
- HTML · CSS · JavaScript
- Key features
- 99 projects · Timeline · Motion
02 / The challenges
A wide creative practice. One coherent story.
The brief brought together a detailed CV, a growing portfolio and a portrait-led opening. These were the practical challenges we addressed during delivery.
A CV into a visual journey.
Eleven years of roles needed a clear reading order. We organised the supplied career details into a timeline, with expandable cards for the full story.
99 projects, one portfolio.
The initial selection expanded into all 99 public Behance projects. We added unique covers and links, then checked the package for missing assets and duplicate destinations.
A portrait that works on mobile.
The opening text overlapped the portrait on small screens. We moved the mobile headline and introduction below the image and checked spacing at 320px and 390px.
Credible collaboration highlights.
The client wanted his portrait removed from the collaboration cards. We used labelled stock workplace imagery alongside factual experience summaries, rather than presenting them as client portraits or quoted testimonials.
03 / How we approached it
From the business, to the details.
We used the supplied CV, portrait and public portfolio to connect the personal introduction, career narrative, project gallery and enquiry route.
Establish the content
We reviewed the supplied CV and portrait, mapped the career history and services, and selected the first portfolio projects.
Develop the presentation
We personalised the typography, portrait composition, navigation and motion. After a colour review, the client selected the yellow-accented version.
Expand the portfolio
The gallery grew from nine selected projects to all 99 public Behance entries, with downloaded covers and links to each complete project.
Refine the interactions
Career-detail popups, FAQ accordions, collaboration slides and section navigation organise a long single-page experience. Email links provide a direct contact route.
Check and package
We checked unique project links and local asset references, refined the phone layout and supplied a hosting-ready ZIP with upload instructions. The website is now live at haidermateen.pro.
03.1 / Custom functionality
More than a gallery. A connected introduction.
- Linked portfolio99 project covers open their full Behance case studies. The collection is a delivered snapshot, not an automatic feed.
- Career-detail popupsSeven career chapters expand into fuller descriptions of roles, responsibilities and experience.
- Clear service enquiriesThree service packages open an email enquiry so visitors can discuss the scope, timing and creative support they need.
- Motion and navigationSection navigation, hover effects, animated typography, an eight-slide collaboration carousel and eight FAQ answers help visitors explore.
04 / Responsive design
One experience. Every screen.
This is a single-page portfolio. The five screen pairs show the actual homepage, career journey, portfolio, services and FAQ sections at desktop and phone widths.
05 / Speed & performance
Motion with a purpose. Measured transparently.
Local assets and a static hosting package simplify delivery. The live site also carries an animation and interaction stack, so we measured the actual experience rather than assuming that static hosting guarantees speed.
Mobile
Google PageSpeed Insights · 3 November 2026
Lighthouse 13.6.0 · View Google report ↗
Desktop
Google PageSpeed Insights · 3 November 2026
Lighthouse 13.6.0 · View Google report ↗
Measured 3 November 2026 at 15:37 GMT+5 · https://haidermateen.pro/ · Lab tests, not field data. Mobile LCP 3.3s; desktop LCP 1.3s. Desktop script blocking, contrast, language metadata and ARIA remain improvement opportunities; the report provides a baseline for future optimisation.
06 / Easy to maintain
A focused build. Fewer moving parts.
The handover contains index.html, local assets and upload instructions. A standard static web host can serve it without a database, server-side application or WordPress administration. Content updates are made in the supplied files by someone comfortable editing the source.
There is no WordPress plugin stack to maintain. The site does retain JavaScript libraries for its motion and interactions; those still need compatibility checks. Keeping assets together makes deployment simpler, while avoiding CMS plugins removes that particular source of update conflicts.
Clear files.
Consistent updates.
- Content
- Editable HTML and source scripts
- Portfolio
- 99 locally stored covers + Behance links
- Visual design
- CSS, fonts and portrait assets
- Contact
- Email-app links
New Behance projects are added manually; the gallery does not auto-sync.
07 / Search foundations
A clear professional identity. Searchable content.
The live homepage has a descriptive title and meta description identifying Haider’s creative specialisms. Its heading structure, service copy, named portfolio links and image descriptions give visitors meaningful context.
Responsive presentation and internal section links support navigation through the long page. Google’s lab report recorded 100 for basic SEO checks on both devices; that is not a search-ranking guarantee or proof of a complete technical SEO audit.
Canonical, structured-data and sitemap implementation have not been verified as delivered features. Hosting and cache configuration are outside the confirmed project record.
Haider Mateen
Delivered website scope
- Portfolio projects
- 99
- Career chapters
- 7
- Service packages
- 3
- Core journey
- Explore → Connect
StatusLive
Visit the website ↗