289 lines
9.9 KiB
Markdown
289 lines
9.9 KiB
Markdown
<div align="center">
|
||
|
||
# 🌐 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)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
*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)
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 📋 Table of Contents
|
||
|
||
- [✨ 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│
|
||
└──────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📁 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 content
|
||
├── .gitignore → keeps secrets & system files out of git
|
||
└── .github/
|
||
└── workflows/
|
||
└── deploy.yml → auto-deploy pipeline
|
||
```
|
||
|
||
---
|
||
|
||
## ✏️ Updating Content (the important part)
|
||
|
||
To add a new project, open **`data.js`** and 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 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.
|
||
|
||
---
|
||
|
||
## 🚀 Getting Started
|
||
|
||
### Step 1 — Run it locally
|
||
|
||
These are static files, so "running" it just means opening it in a browser:
|
||
|
||
**Option A (simplest):**
|
||
```
|
||
double-click index.html
|
||
```
|
||
|
||
**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.
|
||
|
||
---
|
||
|
||
### Step 2 — Push to GitHub
|
||
|
||
```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.
|
||
|
||
---
|
||
|
||
## 📬 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>
|