|
|
<!doctype html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width" /> |
|
|
<title>AI Portfolio on Huggingface</title> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
<script> |
|
|
document.addEventListener("DOMContentLoaded", function () { |
|
|
fetch("projects.json") |
|
|
.then((response) => response.json()) |
|
|
.then((data) => { |
|
|
const projects = data; |
|
|
const projectsContainer = document.getElementById("projects"); |
|
|
projects.forEach((project) => { |
|
|
const projectCard = document.createElement("section"); |
|
|
projectCard.classList.add("project-card"); |
|
|
const title = document.createElement("h2"); |
|
|
title.textContent = project.title; |
|
|
const description = document.createElement("p"); |
|
|
description.textContent = project.description; |
|
|
const link = document.createElement("a"); |
|
|
link.href = project.link; |
|
|
link.target = "_blank"; |
|
|
link.textContent = "View Project"; |
|
|
|
|
|
projectCard.appendChild(title); |
|
|
projectCard.appendChild(description); |
|
|
projectCard.appendChild(link); |
|
|
|
|
|
projectsContainer.appendChild(projectCard); |
|
|
}); |
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>Welcome to My AI Portfolio</h1> |
|
|
<p>Discover my projects and experiments with Artificial Intelligence on Huggingface.</p> |
|
|
</header> |
|
|
<article id="projects"> |
|
|
</article> |
|
|
<footer> |
|
|
<a href="https://www.linkedin.com/in/sebdg/" target="_blank"> |
|
|
<img src="linkedin.png" width="24" alt="LinkedIn Icon" /> My LinkedIn Profile |
|
|
</a> |
|
|
</footer> |
|
|
</body> |
|
|
</html> |
