To create a minimalistic, gallery-style portfolio as a single-page application using JavaScript’s Fetch API to load content conditionally, you can follow these steps:
Structure Your HTML:
Begin with a basic HTML structure. You might want to use a container for your portfolio items and a section where details or enlarged images can be displayed conditionally.

html

Fetch API to Load Content Conditionally:
Use JavaScript’s Fetch API to retrieve data about your portfolio items from a server or a local JSON file.

javascript
document.addEventListener(‘DOMContentLoaded’, function() {
fetch(‘portfolio-data.json’)
.then(response => response.json())
.then(data => {
const gallery = document.getElementById(‘gallery’);
data.items.forEach(item => {
const itemDiv = document.createElement(‘div’);
itemDiv.className = ‘gallery-item’;
itemDiv.innerHTML = ;
gallery.appendChild(itemDiv);

itemDiv.addEventListener(‘click’, function() {
loadItemDetails(item.id);
});
});
})
.catch(error => console.error(‘Error fetching portfolio data:’, error));

function loadItemDetails(itemId) {
fetch(‘portfolio-data.json’)
.then(response => response.json())
.then(data => {
const item = data.items.find(i => i.id === itemId);
const details = document.getElementById(‘details’);
details.innerHTML =

${item.title}

${item.description}

;
details.style.display = ‘block’;
})
.catch(error => console.error(‘Error fetching item details:’, error));
}
});
Portfolio Data File (portfolio-data.json):
Create a JSON file with the details of your portfolio items.

json
{
“items”: [
{
“id”: 1,
“title”: “Project 1”,
“thumbnail”: “thumb1.jpg”,
“image”: “image1.jpg”,
“description”: “Description of project 1.”
},
{
“id”: 2,
“title”: “Project 2”,
“thumbnail”: “thumb2.jpg”,
“image”: “image2.jpg”,
“description”: “Description of project 2.”
}
// More items…
]
}
Styling and UI Considerations:
Customize your CSS to suit your minimalistic design goals. This might include adding hover effects to the thumbnails or implementing animations for when new content loads.

By following these steps, you’ll have a dynamic, single-page portfolio application that uses the Fetch API to conditionally load and display content. This setup ensures a clean, responsive experience that dynamically serves content based on user interaction.