Iván Alfonso — Personal site

A static site, no build step, no framework. Content lives in data/*.json so you can edit it without touching the HTML.

Structure

.
├── index.html          # markup, styles, and the small render script
├── data/               # all editable content (one JSON per section)
│   ├── profile.json    # name, role, bio, socials, focus chips, terminal
│   ├── experience.json
│   ├── education.json
│   ├── publications.json
│   ├── projects.json
│   └── achievements.json
├── images/             # avatar, place logos, project logos
├── .nojekyll           # tells GitHub Pages to skip Jekyll
└── README.md

Local preview

index.html loads data/*.json via fetch(), which most browsers block on the file:// scheme. Don't double-click the file — run a local server instead:

cd /path/to/this/folder
python -m http.server 8000

Then visit http://localhost:8000. (Stop with Ctrl+C.)

If python isn't installed, any of these work:

npx serve .
# or
php -S localhost:8000

Deploy to GitHub Pages

Option A — replace the existing ivan-alfonso.github.io repo

git clone https://github.com/ivan-alfonso/ivan-alfonso.github.io
cd ivan-alfonso.github.io

# remove the old Vue project files (keep .git and CNAME)
git rm -rf src public package.json package-lock.json vite.config.js Pipfile install.batch 404.html index.html

# copy the new site over
cp -r /path/to/this/folder/index.html  .
cp -r /path/to/this/folder/.nojekyll   .
cp -r /path/to/this/folder/data        .
cp -r /path/to/this/folder/images      .

git add .
git commit -m "Redesign: data-driven static site"
git push

GitHub Pages publishes main automatically — https://ivan-alfonso.com/ updates within a minute. The existing CNAME file (containing ivan-alfonso.com) keeps the custom domain mapped.

Option B — fresh repo

1. Create a repo named ivan-alfonso.github.io on GitHub.
2. Push everything (including data/, images/, and .nojekyll) to main.
3. Repo Settings → Pages → source = main / (root).
4. Optional: add CNAME with ivan-alfonso.com and point your DNS at GitHub.

Editing content

Open the relevant JSON file in data/, edit, save, refresh the browser. No build step.

To change…	Edit
Name, role, bio paragraphs, contact, socials, research-focus chips	data/profile.json
Work positions	data/experience.json
Degrees	data/education.json
Publications list	data/publications.json
Projects	data/projects.json
Awards & talks	data/achievements.json
Avatar / logos	replace files in images/ (keep filenames, or update paths in JSON)

Adding a publication

Append an object to data/publications.json:

{ "year": 2026, "type": "journal", "title": "…", "venue": "…", "url": "https://…", "keywords": ["…"] }

type must be journal, conference, or workshop so the filter chips and badge colours work. The publications list shows 5 per page — pagination handles the rest automatically.

Adding an experience or education entry

Append an object to the relevant JSON array. Each item supports:

{
  "period": "2026.01 — present",
  "title": "Job Title or Degree Name",
  "place": "Institution",
  "logo": "images/logo-yourplace.png",
  "description": "<em>HTML allowed</em> — supports <strong>tags</strong> and <a href=\"…\">links</a>.",
  "tags": ["optional", "tags"]
}

If you don't have a logo yet, set "logo": null and the timeline will render without one.

Adding a project

Append to data/projects.json:

{
  "name": "PROJECT NAME",
  "logo": "images/projectname.png",
  "badge": "research",
  "description": "HTML allowed.",
  "tags": ["tag1", "tag2"],
  "links": [
    { "label": "GitHub",  "icon": "github", "url": "https://…" },
    { "label": "Website", "icon": "globe",  "url": "https://…" }
  ]
}

Available icon values: github, linkedin, scholar, dblp, mail, pin, book, globe, arrow, mic, trophy.

Credits

• Content & site owner — Iván Alfonso, R&T Scientist at the Luxembourg Institute of Science and Technology (LIST).
• Design & implementation — produced with Claude Code (Anthropic Claude, Opus 4.7), as a redesign of the original portfolio.
• Original portfolio template (predecessor site) — Ryan Balieiro's resume template, the Vue-based version that previously powered <ivan-alfonso.com>.
• Typography — Space Grotesk, Inter, and JetBrains Mono, served from Google Fonts.
• Icons — custom inline SVGs (no external icon library).
• Photography & institutional logos — © their respective owners (LIST, UOC, Uniandes, UPTC, BESSER-PEARL, TRANSACT project).

If you fork or adapt this layout, a small credit line back to https://ivan-alfonso.com/ is appreciated but not required.