| <!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> |
