About
This website is built with a simple approach and the support of a selection of open-source projects, for which I am sincerely grateful. Thanks!
Static Website Hosting
Hosted with Codeberg Pages.
DNS Hosting Service
Managed through with deSEC.
HTML Generation
This site is written in CommonMark and converted in HTML using Pandoc.
Below is the bash script for automating file conversion:
#!/bin/bash
md_files=("home" "resume" "README")
html_files=("index" "resume" "about")
for ((i = 0; i < ${#md_files[@]}; i++)); do
pandoc "${md_files[i]}.md" \
--from=commonmark+auto_identifiers \
--no-highlight \
--template=template.html \
--metadata title="Demar.cy - ${md_files[i]^}" \
--output="${html_files[i]}.html"
sed -i '
s/<pre class="\(.*\)"><code>/<pre><code class="language-\1">/g;
/<code/,/<\/code>/ { /<code/! { /<\/code>/! s/^ // } }
' "${html_files[i]}.html"
done
The sed command is used to fix a mixture of HTML indentation and code indentation generated by Pandoc.
The template.html file consists of 43 lines and follows this structure:
<!DOCTYPE html>
<html lang="en">
<head>...
</head>
<body>
<main id="top">...
</main>
<footer>...
</footer>
<script>...
</script>
</body>
</html>
The main body structure is as follows:
<main id="top">
<nav>
<ul></ul>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="about.html">About</a></li>
<li><input type="checkbox" role="switch" onchange="switchTheme()"></li>
</ul>
</nav>
$body$
</main>
The $body$ placeholder is where the body text is inserted. The navigation links are provided in pure HTML format.
<footer>
<a href="#top" style="position: fixed; bottom: 10px; right: 10px;">↑</a>
</footer>
This footer offers a "back to top" functionality with an arrow icon.
Styling
For styling the HTML document I used the class-less version of Pico CSS, a minimalist and lightweight CSS framework that provides responsive and elegant style with semantic syntax. I used Prism for code syntax highlighting.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$title$</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.cyan.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css">
<script>
const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', preferDark ? 'dark' : 'light');
function switchTheme() {
document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
}
</script>
</head>
Pandoc interprets the $title variable.
Pico CSS offers both Light and Dark color schemes. The first script sets the default color scheme based on the user's preference, while the second script provides a color scheme toggle integrated into the navigation.
Email Obfuscation
<script>
const encoded = "dGhvbWFzQGRlbWFyLmN5";
const decoded = window.atob(encoded);
document.getElementById('email').setAttribute('href', 'mailto:' + decoded);
document.getElementById('email').innerText = decoded;
</script>
The script uses the atob() method to decode the contact email, encoded as a base-64 string, providing a basic level of email obfuscation to avoid email harvesters.
Online Resume
This setup gives me a clean and simple online resume. The page size is just 51.9 KB, 50 times smaller than typical sites, with only 224 lines of code.