A modern, dark-themed glassmorphism portfolio built with pure HTML, CSS, and vanilla JavaScript — no frameworks, no build tools, no dependencies. It showcases my work as a graphic designer, UI/UX designer, brand identity specialist, and MERN stack developer, backed by a growing library of full-stack projects and verified certifications.
Every layout, animation, and interaction has been hand-crafted with attention to performance, accessibility, and mobile responsiveness — including a dedicated round of optimization to strip unnecessary GPU load and fix mobile layout issues.
✦ Zero dependencies ✦ SEO optimized
✦ Fully responsive ✦ Accessibility-first
✦ Performance-tuned ✦ Verified certifications showcase
|
|
|
|
| Project | Description | Stack |
|---|---|---|
| Skilzavo | Full-stack freelance marketplace with a Gantt-style project timeline visualizer, live chat, and dual freelancer/client roles | React · Node.js · MongoDB · Socket.io · JWT |
| Splitrak | Vendor management & quotation system with a Smart Split Optimizer, PDF export, and interactive analytics | React · Node.js · MongoDB · Recharts · jsPDF |
| WeekPlanr | AI-powered weekly study planner for students to manage deadlines and reduce academic stress | React · Node.js · MongoDB · Google Gemini API |
| AptifyAi | AI-driven aptitude test trainer for NTS, GAT, MDCAT & CSS/PMS prep with real-time scoring | React · Node.js · MongoDB · OpenRouter AI |
| Zilacart | Premium luxury e-commerce front-end experience, built backend-free | HTML5 · Tailwind CSS · Vanilla JS |
| ResuMatch AI | AI-powered resume analyzer with fuzzy keyword matching and score-impact suggestions | React · Node.js · Google Gemini |
See the Projects page for the complete showcase, including branding and UI/UX work.
| Certificate | Issuer | Issued |
|---|---|---|
| Frontend Development Libraries V8 | freeCodeCamp | Jun 2026 |
| MongoDB Node.js Developer Path | MongoDB | Jun 2026 |
| JavaScript Certificate | HackerRank | Jul 2026 |
Full details and credential badges available on the Certificates page.
portfolio/
│
├── 📄 index.html # Home / landing page
├── 📄 about.html # About me + journey
├── 📄 projects.html # Filterable project showcase
├── 📄 skills.html # Skills & tools matrix
├── 📄 certificates.html # Verified certifications showcase
├── 📄 contact.html # Contact form + details
├── 📄 connect-modal.html # Social links modal
│
├── 📁 css/
│ ├── 🎨 style.css # Global theme & components
│ ├── 🎨 pages.css # Page-specific styles
│ └── 🎨 animations.css # Reveal & motion animations
│
├── 📁 js/
│ ├── ⚙️ main.js # Core interactivity
│ └── ⚙️ animations.js # Scroll reveal & motion logic
│
├── 📁 assets/ # Images, mockups, certificates
│
├── 📄 .gitignore
├── 📄 LICENSE # All Rights Reserved
└── 📄 README.md # You are here 👋
- Any modern web browser (Chrome, Firefox, Safari, Edge, Brave)
- A text editor (VS Code recommended) — only needed if you want to modify
- (Optional) A local web server for development
# 1. Clone the repository
git clone https://github.com/muhammadkhuzaima25/portfolio.git
# 2. Navigate into the project
cd portfolio
# 3. Open in your browser
# Option A: Double-click index.html
# Option B: Use a local server (recommended):🖥️ Run a local server (click to expand)
Using Python 3:
python -m http.server 8000Using Node.js (npx):
npx http-server -p 8000Using VS Code: Install the Live Server extension and click "Go Live" in the status bar.
Then visit: http://localhost:8000
| Token | Color | Preview | Usage |
|---|---|---|---|
--bg |
#0a0a0f |
⬛ | Main background |
--bg-2 |
#0d0d18 |
⬛ | Section backgrounds |
--primary |
#00f5ff |
🟦 | Accent, buttons, links |
--secondary |
#4f6ef7 |
🟦 | Gradient end |
--text |
#ffffff |
⬜ | Primary text |
--text-2 |
rgba(255,255,255,0.6) |
◻️ | Secondary text |
--glass |
rgba(255,255,255,0.05) |
▫️ | Card backgrounds |
--fiverr |
#1dbf73 |
🟩 | Fiverr brand |
- Headings: Syne — weights 500, 700, 800
- Body: DM Sans — weights 400, 500, 700
- Icons: Custom inline SVG (no icon library)
© 2026 Muhammad Khuzaima. All Rights Reserved.
This project is NOT open source. The code, design, content, and all associated intellectual property are the exclusive property of the author. No part of this repository may be copied, cloned, forked, modified, reproduced, distributed, or used in any form or for any purpose without the author's prior written consent.
Unauthorized use will result in immediate legal action, including DMCA takedowns and civil litigation. See the LICENSE file for complete terms.
- Icons: Custom-crafted SVGs by the author
- Inspiration: The design community on Dribbble, Behance, and GitHub
- Tools: Built with VS Code