Turning data into actionable insights — one dashboard at a time.
A fully responsive, single-page portfolio website showcasing my work as a Junior Data Analyst & Business Intelligence professional. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no dependencies beyond Font Awesome icons.
Live at: https://xainyblblack.me
| Feature | Details |
|---|---|
| 🎨 Dark Monochrome Theme | Clean black & white design with elegant CSS variables |
| 📱 Fully Responsive | Optimized breakpoints at 968 px, 768 px, and 480 px |
| ⚡ Performance Optimized | Throttled scroll handlers, passive listeners, requestAnimationFrame animations |
| 🔠 Typing Animation | Hero section typewriter effect with requestAnimationFrame |
| 🔢 Counter Animations | Animated stat counters triggered by Intersection Observer |
| 🧲 Magnetic Buttons | Subtle mouse-follow effect on CTA buttons |
| 📜 Smooth Scrolling | Event-delegated anchor scrolling throughout |
| 📬 Contact Form | Powered by FormSubmit.co — no backend needed |
| 🔍 SEO Ready | Open Graph & Twitter Card meta tags included |
Home → About → Skills → Projects → Experience → Contact
- Home — Hero banner with typewriter name animation and CTA buttons
- About — Professional summary with animated stat counters
- Skills — Data Analysis · Visualization · Cloud & Tools · Analytics
- Projects — Uber Analytics Dashboard, Sales Dashboard, Customer Segmentation, Marketing ROI Tracker
- Experience — Timeline: E-commerce Data Analyst Intern @ Daraz, Social Media Marketing Intern @ International MUN, Data Analyst @ CodeAlpha
- Contact — Contact form + social links (GitHub, LinkedIn, Kaggle, Twitter)
| Category | Technologies |
|---|---|
| Languages | HTML5, CSS3, Vanilla JavaScript |
| Icons | Font Awesome 6.4 |
| Animations | CSS keyframes, Intersection Observer API, requestAnimationFrame |
| Form Backend | FormSubmit.co |
| Hosting | GitHub Pages (custom domain: xainyblblack.me) |
xainy75.github.io/
├── index.html # Main single-page application
├── style.css # All styles & CSS variables
├── CNAME # Custom domain configuration
└── README.md # You are here
No build step required — just open the file in your browser:
git clone https://github.com/xainy75/xainy75.github.io.git
cd xainy75.github.io
# Open index.html in your browser
open index.html # macOS
xdg-open index.html # Linux
start index.html # WindowsOr serve it with any static file server:
npx serve .
# → Available at http://localhost:3000| Platform | Link |
|---|---|
| 🌐 Website | xainyblblack.me |
| zain-ul-abidin-b387a1381 | |
| 🐙 GitHub | @xainy75 |
| 📊 Kaggle | @xainyblblack |
| @Xainyblblack | |
| ✉️ Email | xainyblblack@gmail.com |
© 2026 Zain Ul Abidin · Multan, Pakistan · Turning Data into Insights