|
|
<!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 image = document.createElement("img"); |
|
|
image.src = project.image; |
|
|
image.alt = project.title; |
|
|
image.width = 400; |
|
|
projectCard.appendChild(image); |
|
|
|
|
|
const description = document.createElement("p"); |
|
|
|
|
|
project.description.forEach((paragraph) => { |
|
|
const p = document.createElement("p"); |
|
|
p.textContent = paragraph; |
|
|
description.appendChild(p); |
|
|
}); |
|
|
|
|
|
|
|
|
const link = document.createElement("a"); |
|
|
link.href = project.link; |
|
|
link.target = "_blank"; |
|
|
link.textContent = "View Project"; |
|
|
|
|
|
|
|
|
|
|
|
const split = document.createElement("div"); |
|
|
split.classList.add("split"); |
|
|
|
|
|
const splitLeft = document.createElement("div"); |
|
|
splitLeft.classList.add("split-left"); |
|
|
splitLeft.appendChild(image); |
|
|
|
|
|
const splitRight = document.createElement("div"); |
|
|
splitRight.classList.add("split-right"); |
|
|
splitRight.appendChild(description); |
|
|
splitRight.appendChild(link); |
|
|
|
|
|
split.appendChild(splitLeft); |
|
|
split.appendChild(splitRight); |
|
|
|
|
|
projectCard.appendChild(title); |
|
|
|
|
|
projectCard.appendChild(split); |
|
|
|
|
|
|
|
|
|
|
|
projectsContainer.appendChild(projectCard); |
|
|
}); |
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>Welcome to My AI Portfolio</h1> |
|
|
<p>Embark on a journey through my AI universe, where every project is a testament to innovation and creativity. <br /> Delve into a world where Artificial Intelligence meets boundless possibilities, curated with care to illustrate the artistry and impact of AI-driven solutions.</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> |
