iTaqiZ Portfolio — AI & Data Science

Inspiration

I'm a BS Artificial Intelligence graduate from Faisalabad, Pakistan — early in my career, actively learning, and building toward my first real opportunity in data science and AI. I needed a professional online presence that honestly represented where I am: not an expert, but someone who takes learning seriously.

Most portfolio templates felt either too generic or too corporate. I wanted something that felt like me — minimal, technical, and honest.

What I Built

iTaqiZ Portfolio is a fully custom single-page portfolio website built from scratch using pure HTML, CSS, and vanilla JavaScript — no frameworks, no libraries, no dependencies.

Key features:

• Credential Vault — an interactive, searchable database of 261+ verified certifications from Google, IBM, Harvard, CertNexus, DataCamp, Coursera, and 15+ platforms, with live category filtering and direct verification backlinks
• Dark-mode first design — deep navy background \(\texttt{#05050a}\) with purple accent \(\texttt{#6c63ff}\) and teal highlights \(\texttt{#2dd4bf}\)
• Scroll-reveal animations — using the native IntersectionObserver API, zero dependencies
• Fully responsive — tested across desktop, tablet, and mobile (390px screens)
• Performance-first — no JavaScript frameworks, no external JS libraries, instant load

How I Built It

The entire site is a single portfolio.html file hosted on GitHub Pages at itaqiz.github.io/portfolio.

Design system I defined:

$$\text{Color palette} = { \texttt{bg: #05050a},\ \texttt{accent: #6c63ff},\ \texttt{teal: #2dd4bf} }$$

Typography: Syne (headings, 800 weight) + DM Sans (body, 300–500 weight) via Google Fonts.

Cert vault logic — filtering is pure JavaScript with Array.filter():

var filtered = certs.filter(function(c) {
  var matchCat = activeF === 'all' || c.c === activeF;
  var q = activeS.toLowerCase();
  return matchCat && (!q || c.t.toLowerCase().indexOf(q) > -1);
});

Scroll reveal — native IntersectionObserver with threshold: 0.07, elements animate in once and are unobserved immediately after:

var obs = new IntersectionObserver(function(entries) {
  entries.forEach(function(e) {
    if (e.isIntersecting) { e.target.classList.add('in'); obs.unobserve(e.target); }
  });
}, { threshold: 0.07 });

Challenges

• Mobile overflow — the hero h1 ("Muhammad") was breaking mid-word on 390px screens. Fixed using a three-tier clamp() system across three breakpoints rather than a single fixed size
• GitHub Pages JS timing — the credential vault was rendering 0 items on the live site because the script ran before the DOM was ready. Fixed by wrapping everything in DOMContentLoaded
• One-page constraint — fitting 261+ credentials into a usable UI without overwhelming the page required building the searchable/filterable vault system
• Honest self-presentation — avoiding the trap of overselling. The copy is intentionally written as a learner seeking a first opportunity, not a seasoned professional

What I Learned

• How IntersectionObserver works for performant scroll animations without scroll event listeners
• CSS clamp() for truly responsive typography across all screen sizes
• Why DOMContentLoaded matters for script execution order on static hosts
• How to build a searchable data vault in vanilla JS without any libraries
• The value of a clean, minimal design system defined upfront with CSS custom properties

What's Next

• Add real GitHub project links as repos get published
• Write AI learning articles on Medium/@itaqiz
• Keep the credential count growing 🚀

Built With

• css3
• github
• google-fonts
• html5
• intersectionobserver
• javascript