portfolio / interview-questions.html
Sébastien De Greef
Refactor image handling and add new project page for interview-questions
dbde085
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Object Detection with YOLO</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/default.min.css"
/>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
<script>
class BC {
constructor(elementId) {
this.container = document.getElementById(elementId);
this.headings = document.querySelectorAll("h1, h2, h3, h4");
this.currentHeading = null;
}
set_breadcrumb() {
const headings = document.querySelectorAll("h1, h2, h3, h4"); // Select all heading elements
let currentHeading = null;
// Iterate through headings to see which is currently viewable
for (let i = 0; i < headings.length; i++) {
const heading = headings[i];
if (
heading.getBoundingClientRect().top <
window.innerHeight * 0.1
) {
// Heading is at the top of the page
currentHeading = heading;
} else {
break; // Once a heading below the top is found, stop the search
}
}
// Update the breadcrumb div with the current heading information
const breadcrumb = document.getElementById("breadcrumb");
if (currentHeading) {
breadcrumb.textContent = currentHeading.textContent; // Set text or build a more complex breadcrumb
}
}
}
console.log(marked);
document.addEventListener("DOMContentLoaded", function () {
fetch("interview-questions.md")
.then((response) => response.text())
.then((text) => {
const html = marked.marked(text);
document.getElementById("markdown-container").innerHTML = html;
document.querySelectorAll("pre code").forEach((block) => {
hljs.highlightBlock(block);
});
const bc = new BC("markdown-container");
bc.set_breadcrumb();
document.addEventListener("scroll", bc.set_breadcrumb);
})
.catch((error) =>
console.error("Error loading the Markdown file:", error)
);
});
</script>
</head>
<body>
<div id="breadcrumb"></div>
<div id="markdown-container"></div>
</body>
</html>