◈ Marco Daniel Castillo — Portfolio

"Architecting digital artifacts in the heart of Western Visayas."

A personal developer portfolio built with vanilla HTML, CSS, and JavaScript. Features a dark arcane aesthetic powered by the Catppuccin Mocha color palette, live GitHub repository integration, and an interactive particle background.

---

✦ Preview

---

✦ Features

• Live GitHub Integration — Automatically fetches and displays your top 6 repositories via the GitHub REST API, sorted by stars
• Particle Canvas — Interactive particles.js background with grab-on-hover effect
• Smooth Navigation — Fixed navbar with scroll-aware styling and smooth anchor scrolling
• GitHub Stats — Embedded activity and top languages cards via github-readme-stats
• Responsive Design — Mobile-aware layout with hidden nav links on small screens
• Zero Dependencies — No build tools, no frameworks, just files

---

✦ Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (custom properties, keyframe animations)
Logic	Vanilla JavaScript (ES6+)
Particles	particles.js v2.0.0
Icons	Font Awesome v6.4.2
Fonts	Cinzel · Fira Code
Data	GitHub REST API

---

✦ Project Structure

portfolio/
├── index.html      # Structure & layout
├── style.css       # Catppuccin Mocha theme & animations
├── main.js         # Particles config, scroll logic, GitHub API fetch
├── README.md       # This file
└── LICENSE         # MIT

---

✦ Getting Started

No build step required. Clone and open.

git clone https://github.com/KabbalahTreeofLife/<repo-name>.git
cd <repo-name>
# Open index.html in your browser

Or serve it locally for API requests to work without CORS issues:

# Python
python -m http.server 8080

# Node.js (npx)
npx serve .

Then visit http://localhost:8080.

---

✦ Customization

Most personalizations live in two places:

index.html — Update name, status badge, identity line, location text, and contact links.

main.js — Change the GitHub username in fetchRepos() to pull your own repositories:

const username = "YourGitHubUsername";

style.css — The entire color palette is defined in :root. Swap values to retheme instantly:

:root {
  --base: #0b0b10;
  --mauve: #cba6f7; /* primary accent */
  --blue: #89b4fa; /* secondary accent */
  --rosewater: #f5e0dc; /* headings */
  --text: #cdd6f4; /* body text */
}

---

✦ Deployment

This is a static site — deploy anywhere:

• GitHub Pages — Push to a gh-pages branch or enable Pages from main in repository settings
• Netlify / Vercel — Drop the folder or connect the repository for instant CI/CD
• Any static host — Upload the three files and you're live

---

✦ License

Released under the MIT License. Free to use, modify, and redistribute.

---

_{ESTABLISHED MMXXVI · ILOILO CITY, PH}