This is my fourth iteration of my website.
All content is in markdown, site is vanilla html and css
Hosted on github pages (here)
# from build script
CSS_FILES=$(find styles/ -name "*.css" -exec echo --css=/{} \;)
python process.py "$md_file" | \
pandoc \
$CSS_FILES \
-f gfm \
--mathjax \
-t html \
--template=template.html \
--metadata title="$title" \
--standalone \
-o "$out"def tweet_to_html(url, tweet):
html = f"""<blockquote>
<div class="tweet">
<div class="tweet-header">
<a href="{url}"><img class="tweet-profile-pic" src="{tweet.user.profile_image_url}" /><span class="tweet-header-text">{tweet.user.name}<span class="tweet-screen-name">@{tweet.user.screen_name}</span></span></a>
</div>
<div class="tweet-body">
{tweet.text}
"""
if tweet.media:
for m in tweet.media:
html = html.replace(m["url"], "")
html += f'\n<img class="tweet-image" src="{m["media_url_https"]}" />\n'
html += "</div>\n</div>\n</blockquote>"
return html<script type="module">
import { codeToHtml } from "https://esm.sh/shiki@1.0.0";
async function highlightCode() {
const preBlocks = document.querySelectorAll("pre");
for (const block of preBlocks) {
var code = block.textContent;
const lang = block.className.replace("sourceCode ", "");
block.innerHTML = await codeToHtml(code, {
lang: lang,
theme: "catppuccin-mocha",
});
}
}
highlightCode();
</script>I'm a big fan of htmx, but shoehorning it into a static personal website just doesn't make any sense. Also a looping mp4 background made the initial load time really slow, and the design was unique but I got tired of it after awhile.
Very proud of the look and feel of this one. However, the complexity had lots of little visual bugs that got increasingly annoying to fix, and the interactive background could be slow or buggy on certain devices. Client side rendering a bunch of particles and interactions is just a bit gimmicky and unnecessary for a personal website. Still super cool and fun to build though.
My first website, I hosted this one on a raspberry pi in my room!
The design was super uninspired. Using a template is fine, but after a while I really wanted to build something myself.