I'm building a portfolio page where each project appears as a consistent "Project File" card containing an image, title, description, optional date, and a link to a detailed project page. Several cards should appear on the same page, but each will have different content.
The design is currently written in HTML and styled with CSS. Ideally, descriptions should support formatting such as multiple paragraphs, bold text, and italics. I've tried using an HTML and JavaScript, but my current approach only renders one item and relies on replacing lots of placeholder elements. I also tried loading HTML with fetch(), but that only gave me static content.
I'd like a maintainable way to keep one card design and provide different project data for each card, without having to manually duplicate and edit the entire markup every time I add a project.
4 Answers
A static site generator is probably the best fit if you want reusable templates without writing much JavaScript. Store each project’s data or content separately, define the card layout once, and let the generator produce the final HTML pages. This works especially well when you want formatted descriptions and individual project pages.
You can also keep the project data separate from the markup and clone one for every item. Put the projects in an array or JSON file, loop through them, and create a fresh clone with template.content.cloneNode(true) each time. Fill normal text fields with textContent, set image src and link href directly, and append each clone to the page.
For formatted descriptions, use trusted HTML or convert Markdown before inserting it. Avoid putting arbitrary text into innerHTML, since that can create security problems.
The general pattern is called data-driven rendering. It’s similar to how blog systems work: one template defines the structure, while each project supplies the title, image, link, date, and body. You could implement it with client-side JavaScript, a server-side template engine, or a static site generator depending on how much tooling you want.
If you only have a small number of projects, copying the card markup and changing the content is perfectly reasonable. Keep the visual consistency in CSS, so changing the design later still updates every card. JavaScript may be unnecessary overhead for a simple portfolio page.
That was my original hesitation, since I wanted adding projects and changing the layout to be easy. But after fighting with JavaScript for a day, duplicating the markup is starting to look much more appealing.