Graphic Designer & Visual Communication Designer · Crea Graphix Brand identity, marketing creative, and web design — "Creativity. Simplified."

A fast, dependency-free portfolio site: hand-written HTML, CSS, and JavaScript with no build step and no frameworks. Content — projects, certificates, and the profile photo — is driven by a single config file and a tiny Node sync script, so the site stays fully static while remaining easy to update.

Live: add your deployment URL here Contact: oflakstudio@gmail.com · +91 97701 49478 · Janjgir-Champa, Chhattisgarh, India LinkedIn · Instagram · GitHub

• Zero dependencies — no npm install, no bundler, no framework. The site is just index.html, one stylesheet, and one script.
• Config-driven content — projects, certificates, and the hero photo come from content.config.json; a small Node script bakes them into content.js, which the page reads instantly.
• Interactive case studies — filterable project grid and a full case-study modal with an image/video carousel, plus keyboard and touch support.
• Accessible & responsive — semantic HTML, visible focus states, prefers-reduced-motion support, and layouts tuned from large desktop down to mobile.
• Performance-minded — GPU-friendly transitions, lazy-loaded media, inline SVG icons, and CSS gradients instead of background images.

.
├─ index.html              # the site (single page)
├─ css/
│  └─ style.css            # all styles (design tokens + components)
├─ js/
│  └─ main.js              # all behavior (reveal, filter, case-study modal, cursor, assistant)
├─ content.config.json     # ← EDIT THIS: curated projects, certificates, profile
├─ content.js              # ← GENERATED by sync.js (do not hand-edit)
├─ sync.js                 # regenerates content.js from the config + asset folders
├─ Sync-Portfolio.bat      # double-click to sync (Windows)
├─ sync.command            # double-click to sync (macOS)
├─ Manish-Kumar-CV.pdf     # downloadable CV (linked from the site)
└─ assets/
   ├─ profile/             # hero / profile photos
   ├─ certificates/        # certificate images
   ├─ projects/            # one folder per project — see assets/projects/PROJECT-INDEX.md
   │  └─ <slug>/gallery/
   └─ global/              # shared, site-wide assets (logo, icons, …)

There is no build step. A static server is recommended so the browser can load content.js and media without file-path restrictions:

# Python
python -m http.server 8000
# …or Node
npx serve .

Then open http://localhost:8000.

See README-SYNC.md for the full guide. In short:

1. Add or change files in assets/ (drop in a certificate, add a project folder, swap the hero photo).
2. Optionally edit content.config.json to curate titles, descriptions, and which images appear.
3. Double-click Sync-Portfolio (Windows) or sync.command (macOS) — or run node sync.js.
4. Refresh the site.

New certificates and brand-new project folders are picked up automatically; existing projects stay curated via the config.

It's a static site — host it on GitHub Pages, Netlify, Vercel, Cloudflare Pages, or any static host. Commit content.js: it's generated, but required at runtime because there is no build step in the browser.

Vanilla HTML5 · modern CSS (custom properties, grid/flexbox) · vanilla JavaScript (ES2020) · Node ≥ 18 for the optional sync script. Type: Space Grotesk, Inter, JetBrains Mono (Google Fonts).

© Manish Kumar / Crea Graphix. Creative work shown remains the property of its respective owners.