2.6 KiB
🌐 Muaz Bhutta — Portfolio
A simple, zero-dependency personal portfolio built with plain HTML, CSS & JavaScript
No build step. No framework. No CI/CD. No node_modules. Just clean HTML/CSS/JS you can open in a browser.
✨ What's inside
- 🌗 Great themes — Light, Dark, and Auto modes. Auto follows your system setting and switches live if you change it.
- ⚡ Fully static — zero dependencies beyond Google Fonts, so it loads instantly.
- 📜 Scroll-reveal timeline — an animated, fully responsive career timeline.
- 🗂️ Single-file content — everything lives in
data.js. Edit one file, never touch the markup. - 📱 Responsive — looks good from desktop down to mobile.
📁 File Structure
portfolio/
├── index.html → page structure
├── style.css → design & theme tokens
├── script.js → renders data.js into the page (no need to edit)
└── data.js → ⭐ EDIT THIS FILE to add your content
✏️ Making it yours
All your content lives in data.js — name, about text, skills, projects, and credentials are just objects in arrays. To add a new project, add an object to the PROJECTS array:
{
id: "unique-id",
title: "Project Name",
summary: "1–2 line description.",
stack: ["Tech1", "Tech2"],
link: "https://...", // or "#" if there's no link
status: "production", // "production" or "lab"
},
💡 Skills, credentials, About paragraphs, and the timeline all work the same way — add or edit an object in the matching array. Nothing in
index.html,style.css, orscript.jsneeds to change.
🚀 Running it
These are static files, so "running" it just means opening it in a browser.
Option A (simplest): double-click index.html
Option B (recommended):
python3 -m http.server 8000
Then open http://localhost:8000.
That's it — no build, no dependencies, no pipeline.
🙌 Want to use it?
Go for it! Feel free to clone or download this project and use it as a starting point for your own portfolio. Just swap out the content in data.js for your own and you're done.
📬 Contact
Muaz Bhutta — Cloud & Network Infrastructure Engineer