This project has been organized with a simple, production-friendly structure to keep HTML, CSS, JS, and static assets separate.
Portfolio/
├─ portfoliodemo.html # Main HTML (you can rename to index.html if you prefer)
└─ assets/
├─ css/
│ └─ main.css # All styles moved here from the inline <style>
├─ js/
│ └─ main.js # Minimal interactions (mobile menu toggle)
├─ images/ # Put images here (e.g., profile.jpg)
├─ icons/ # SVGs or icons (optional)
└─ fonts/ # Custom webfonts (optional)
- HTML already links to
assets/css/main.cssandassets/js/main.js. - Replace
assets/images/profile.jpgwith your real photo (same path) or update thesrcin the HTML. - If you prefer a more modular CSS approach later, you can split
main.cssinto sections (e.g.,sections/hero.css,components/buttons.css) and concatenate during a build step.
- Rename
portfoliodemo.htmltoindex.htmlfor easier hosting. - Add a favicon at
assets/icons/favicon.icoand reference it in the<head>. - Consider a lightweight bundler or task runner later if you decide to split CSS/JS into multiple files.