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 will appear on the same page, but each needs different content. The card's structure and styling are written in HTML and CSS, and I'd ideally like descriptions to support basic formatting such as multiple paragraphs, bold text, and italics.
I tried using an HTML , but my JavaScript only rendered one item and the approach became messy because I was using placeholder elements and copying their text into the cloned template. I also experimented with fetching HTML files, but the content remained static and I wasn't sure how to generate multiple cards.
What would be a clean, beginner-friendly way to keep the card design in one place while supplying different project data for each item?
4 Answers
Another option is a server-side templating system such as Jinja. You define the project-card markup once and loop over your project data when the page is generated. This is especially useful if you already have a backend, but a static site generator is usually simpler for a small portfolio.
You can also do this directly in the browser with one template and a data array. Store each project’s title, image URL, destination, date, and description in an array, loop over it, clone the template once per project, fill in the fields, and append each clone to the page. Don’t replace the container while processing it; append every clone to a dedicated list element instead. For formatted descriptions, use trusted HTML or convert Markdown, and avoid putting arbitrary text into innerHTML.
A static site generator may be the best fit here. You keep project information in separate data files or Markdown documents and define the card layout once in a template. The generator then creates the finished HTML for every project when you build the site. Tools such as Eleventy are designed for this kind of content-driven page and avoid requiring client-side JavaScript.
If you only have a small number of projects, writing the cards directly in HTML is perfectly reasonable. Copy the existing structure, change the content, and let the shared CSS keep everything consistent. It avoids adding JavaScript complexity, although it becomes less convenient if you’ll be adding projects frequently or changing the markup often.
I was hoping to make future design changes in one place, but after wrestling with JavaScript all day, manually duplicating the markup is starting to look pretty appealing.