Update README.md
This commit is contained in:
Muaz Bhutta
250
README.md
250
README.md
@@ -2,77 +2,25 @@
|
||||
|
||||
# 🌐 Muaz Bhutta — Portfolio
|
||||
|
||||
**A blazing-fast, zero-dependency static portfolio with automated CI/CD deployment**
|
||||
|
||||
[](https://muazbhutta.online)
|
||||
[](#-cicd--auto-deploy-on-every-push)
|
||||
[](LICENSE)
|
||||
**A simple, zero-dependency personal portfolio built with plain HTML, CSS & JavaScript**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*No build step. No framework. No node_modules black hole. Just clean HTML/CSS/JS — deployed automatically to a self-hosted VPS on every push.*
|
||||
|
||||
[Live Demo](https://muazbhutta.online) · [Report Bug](../../issues) · [Request Feature](../../issues)
|
||||
_No build step. No framework. No CI/CD. No node_modules. Just clean HTML/CSS/JS you can open in a browser._
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 📋 Table of Contents
|
||||
## ✨ What's inside
|
||||
|
||||
- [✨ Features](#-features)
|
||||
- [🏗️ Architecture](#️-architecture)
|
||||
- [📁 File Structure](#-file-structure)
|
||||
- [✏️ Updating Content](#️-updating-content-the-important-part)
|
||||
- [🚀 Getting Started](#-getting-started)
|
||||
- [Run Locally](#step-1--run-it-locally)
|
||||
- [Push to GitHub](#step-2--push-to-github)
|
||||
- [Manual Deploy](#step-3--manual-deploy-to-the-vps)
|
||||
- [CI/CD Setup](#step-4--cicd--auto-deploy-on-every-push)
|
||||
- [🔁 Deployment Flow](#-deployment-flow)
|
||||
- [🛠️ Tech Stack](#️-tech-stack)
|
||||
- [📄 License](#-license)
|
||||
- [📬 Contact](#-contact)
|
||||
|
||||
---
|
||||
|
||||
## ✨ Features
|
||||
|
||||
| Feature | Description |
|
||||
|---|---|
|
||||
| ⚡ **Fully Static** | Zero dependencies beyond Google Fonts — loads instantly |
|
||||
| 🌗 **Light / Dark / Auto Theme** | Auto mode follows the visitor's system setting and updates **live** if it changes |
|
||||
| 📜 **Scroll-Reveal Timeline** | Animated career timeline, fully responsive down to mobile |
|
||||
| 🗂️ **Single-File Content** | All content lives in `data.js` — edit one file, never touch markup |
|
||||
| 🤖 **Auto-Deploy CI/CD** | Every push to `main` deploys to the VPS via GitHub Actions + rsync |
|
||||
| 🔒 **Self-Hosted** | Served by Caddy with automatic HTTPS on a personal VPS |
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
```
|
||||
┌─────────────┐ git push ┌──────────────────┐
|
||||
│ Developer │ ────────────────▶ │ GitHub (main) │
|
||||
└─────────────┘ └────────┬─────────┘
|
||||
│ triggers
|
||||
▼
|
||||
┌──────────────────┐
|
||||
│ GitHub Actions │
|
||||
│ (deploy.yml) │
|
||||
└────────┬─────────┘
|
||||
│ rsync over SSH
|
||||
▼
|
||||
┌─────────────┐ HTTPS (443) ┌──────────────────┐
|
||||
│ Visitor │ ◀──────────────── │ VPS + Caddy │
|
||||
└─────────────┘ auto-SSL 🔒 │ /var/www/portfolio│
|
||||
└──────────────────┘
|
||||
```
|
||||
- 🌗 **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.
|
||||
|
||||
---
|
||||
|
||||
@@ -83,18 +31,14 @@ 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 content
|
||||
├── .gitignore → keeps secrets & system files out of git
|
||||
└── .github/
|
||||
└── workflows/
|
||||
└── deploy.yml → auto-deploy pipeline
|
||||
└── data.js → ⭐ EDIT THIS FILE to add your content
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✏️ Updating Content (the important part)
|
||||
## ✏️ Making it yours
|
||||
|
||||
To add a new project, open **`data.js`** and add an object to the `PROJECTS` array:
|
||||
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
|
||||
{
|
||||
@@ -107,182 +51,34 @@ To add a new project, open **`data.js`** and add an object to the `PROJECTS` arr
|
||||
},
|
||||
```
|
||||
|
||||
> 💡 **Skills, credentials, About paragraphs, and the career timeline all work the same way** — add or edit an object in the matching array. Nothing in `index.html`, `style.css`, or `script.js` ever needs to change.
|
||||
> 💡 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.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
## 🚀 Running it
|
||||
|
||||
### Step 1 — Run it locally
|
||||
These are static files, so "running" it just means opening it in a browser.
|
||||
|
||||
These are static files, so "running" it just means opening it in a browser:
|
||||
**Option A (simplest):** double-click `index.html`
|
||||
|
||||
**Option A (simplest):**
|
||||
```
|
||||
double-click index.html
|
||||
```
|
||||
**Option B (recommended):**
|
||||
|
||||
**Option B (recommended — mirrors production behavior):**
|
||||
```bash
|
||||
python3 -m http.server 8000
|
||||
```
|
||||
Then open **http://localhost:8000**. This matches how Caddy serves the files on the VPS, so local behavior = production behavior.
|
||||
|
||||
Then open **http://localhost:8000**.
|
||||
|
||||
That's it — no build, no dependencies, no pipeline.
|
||||
|
||||
---
|
||||
|
||||
### Step 2 — Push to GitHub
|
||||
## 🙌 Want to use it?
|
||||
|
||||
```bash
|
||||
cd portfolio
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial portfolio"
|
||||
git branch -M main
|
||||
git remote add origin https://github.com/<your-username>/portfolio.git
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
Why this matters:
|
||||
1. 📌 Your code becomes **version-controlled** — every change is tracked
|
||||
2. 🤖 It becomes the **trigger source** for the CI/CD pipeline — every push to `main` auto-deploys
|
||||
|
||||
---
|
||||
|
||||
### Step 3 — Manual Deploy to the VPS
|
||||
|
||||
*(first time, or without CI/CD)*
|
||||
|
||||
The VPS already runs Caddy serving `muazbhutta.online` — just copy files into the directory Caddy points at:
|
||||
|
||||
```bash
|
||||
# from your local machine
|
||||
rsync -avz --delete ./portfolio/ user@your-server-ip:/var/www/portfolio/
|
||||
```
|
||||
|
||||
Confirm the Caddyfile block:
|
||||
|
||||
```caddy
|
||||
muazbhutta.online {
|
||||
root * /var/www/portfolio
|
||||
file_server
|
||||
}
|
||||
```
|
||||
|
||||
Then reload:
|
||||
|
||||
```bash
|
||||
sudo systemctl reload caddy
|
||||
```
|
||||
|
||||
✅ **`https://muazbhutta.online` is now live** — Caddy handles SSL automatically.
|
||||
|
||||
> 🔀 **Want a subdomain instead?** (e.g. `portfolio.muazbhutta.online`) — add a new Caddyfile block with the same directives, using the subdomain as the site address.
|
||||
|
||||
---
|
||||
|
||||
### Step 4 — CI/CD: Auto-Deploy on Every Push
|
||||
|
||||
`.github/workflows/deploy.yml` uses **GitHub Actions** to rsync files to the VPS over SSH on every push to `main`.
|
||||
|
||||
#### 🔑 Required Repository Secrets
|
||||
|
||||
Go to: **Repo → Settings → Secrets and variables → Actions → New repository secret**
|
||||
|
||||
| Secret | Value |
|
||||
|---|---|
|
||||
| `DEPLOY_HOST` | Your VPS IP address |
|
||||
| `DEPLOY_USER` | SSH username on the VPS |
|
||||
| `DEPLOY_PORT` | `22` (or your custom SSH port) |
|
||||
| `DEPLOY_PATH` | `/var/www/portfolio/` |
|
||||
| `DEPLOY_SSH_KEY` | Private SSH deploy key *(see below)* |
|
||||
|
||||
#### 🗝️ Generating a Dedicated Deploy Key *(best practice)*
|
||||
|
||||
```bash
|
||||
# on your local machine
|
||||
ssh-keygen -t ed25519 -C "github-deploy" -f ./deploy_key -N ""
|
||||
```
|
||||
|
||||
This creates `deploy_key` (private) + `deploy_key.pub` (public).
|
||||
|
||||
Authorize the **public** key on the VPS:
|
||||
|
||||
```bash
|
||||
ssh-copy-id -i deploy_key.pub user@your-server-ip
|
||||
```
|
||||
|
||||
*(or manually append `deploy_key.pub` contents to `~/.ssh/authorized_keys` on the VPS)*
|
||||
|
||||
Then paste the **full contents of `deploy_key`** (the private key) into the `DEPLOY_SSH_KEY` secret on GitHub.
|
||||
|
||||
> ⚠️ **Never commit the private key to the repo.** It lives only in GitHub Secrets. The included `.gitignore` blocks `*.key` and `.ssh/` as a safety net.
|
||||
|
||||
#### 🧪 Testing the Pipeline
|
||||
|
||||
```bash
|
||||
# make a small change, e.g. add a project in data.js
|
||||
git add .
|
||||
git commit -m "Add new project"
|
||||
git push
|
||||
```
|
||||
|
||||
Watch the **Actions** tab → pipeline runs → within **30–60 seconds** the change is live. No manual rsync. No SSH. ✨
|
||||
|
||||
---
|
||||
|
||||
## 🔁 Deployment Flow
|
||||
|
||||
```
|
||||
Edit data.js (add a project / skill / timeline entry)
|
||||
│
|
||||
▼
|
||||
git add . && git commit -m "update" && git push
|
||||
│
|
||||
▼
|
||||
GitHub Actions triggers automatically
|
||||
│
|
||||
▼
|
||||
rsync copies files to VPS over SSH
|
||||
│
|
||||
▼
|
||||
Caddy is already serving → change is LIVE 🎉
|
||||
```
|
||||
|
||||
**From now on: edit `data.js`, push, done.** Everything else is automatic.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
| Layer | Technology | Why |
|
||||
|---|---|---|
|
||||
| **Frontend** | Vanilla HTML5 / CSS3 / JS | Zero build step, instant loads, easy maintenance |
|
||||
| **Theming** | CSS custom properties + `prefers-color-scheme` | Native Light/Dark/Auto with live OS sync |
|
||||
| **Web Server** | [Caddy](https://caddyserver.com/) | Automatic HTTPS, dead-simple config |
|
||||
| **CI/CD** | GitHub Actions | Free, integrated, zero-maintenance pipeline |
|
||||
| **Transport** | rsync over SSH | Fast delta transfers — only changed files move |
|
||||
| **Hosting** | Self-hosted VPS | Full control, part of a larger self-hosted infra lab |
|
||||
|
||||
---
|
||||
|
||||
## 📄 License
|
||||
|
||||
Distributed under the **MIT License**. See `LICENSE` for more information.
|
||||
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** — Junior Network / Cloud & DevOps Engineer
|
||||
|
||||
[](https://muazbhutta.online)
|
||||
[](https://github.com/your-username)
|
||||
[](https://linkedin.com/in/your-profile)
|
||||
|
||||
<div align="center">
|
||||
|
||||
⭐ **If this repo helped you build your own portfolio pipeline, consider giving it a star!** ⭐
|
||||
|
||||
*Built with ❤️ and zero frameworks*
|
||||
|
||||
</div>
|
||||
**Muaz Bhutta** — Cloud & Network Infrastructure Engineer
|
||||
|
||||
Reference in New Issue
Block a user