Qazi Maaz Arshad — Portfolio

Software Engineer @ Salesforce · Full-stack, AI-first

 

---

A modern, interactive personal portfolio — designed and built from the ground up as a typed, component-driven single-page app, then hardened with a full unit / e2e / visual / responsiveness test suite.

Live: https://qazimaazarshad.github.io/

✨ Highlights

• Animated canvas particle constellation + aurora backdrop that reacts to the cursor
• Interactive projects gallery — searchable, category-filterable, with detail modals (focus-trapped & accessible)
• Scroll-reveal animations, scroll progress bar, active-section nav tracking, 3D tilt cards, glassmorphism UI
• Fancy preloader, custom favicon, and a polished dark theme (violet → cyan)
• Fully responsive (verified across 7 viewports) and accessible — keyboard-navigable, prefers-reduced-motion aware
• 100% data-driven — all content lives in one typed source (src/data/content.ts)

🛠 Tech stack

Area	Tools
Framework	React 19 + TypeScript (strict)
Build	Vite
Styling	Tailwind CSS (custom design tokens)
Animation	Framer Motion
Icons	lucide-react + react-icons
Testing	Vitest + React Testing Library · Playwright (e2e, visual, responsive)

🚀 Getting started

npm install
npm run dev        # start the Vite dev server
npm run build      # type-check + production build → dist/
npm run preview    # preview the production build

🧪 Testing

npm test                 # unit + component tests (Vitest)
npm run test:coverage    # unit tests with coverage
npm run test:e2e         # e2e, visual & responsiveness tests (Playwright)
npm run test:e2e:update  # regenerate visual baselines

📁 Structure

src/
  data/content.ts     # single source of truth for all content (typed)
  lib/                # utils (cn, asset), motion variants
  hooks/              # useActiveSection
  components/
    ui/               # Section, SectionHeading, Reveal, TiltCard, SocialLinks
    effects/          # AnimatedBackground, ScrollProgress, Preloader
    …                 # hero / projects / skills / timeline / …
  sections/           # Navbar, Hero, About, Experience, Projects, Skills, …
  App.tsx             # composition root
e2e/                  # Playwright specs + visual baselines
public/               # images, resume, static assets

✍️ Editing content

Everything — profile, experience, projects, skills, education, achievements — lives in src/data/content.ts. Update the data and the UI updates automatically; no markup changes needed.

📦 Deployment

Deployed to GitHub Pages (user site) from the gh-pages branch:

npm run build
npx gh-pages -d dist

📫 Connect

Portfolio · LinkedIn · GitHub · LeetCode

📄 License

MIT