85 lines
2.6 KiB
Markdown
85 lines
2.6 KiB
Markdown
<div align="center">
|
||
|
||
# 🌐 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._
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## ✨ 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:
|
||
|
||
```js
|
||
{
|
||
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`, or `script.js` needs 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):**
|
||
|
||
```bash
|
||
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
|